.elementor-kit-7{--e-global-color-primary:#1C3D7A;--e-global-color-secondary:#475569;--e-global-color-text:#0F172A;--e-global-color-accent:#00D1FF;--e-global-color-89724dd:#F5F7FA;--e-global-color-a129ab3:#EEF2F7;--e-global-color-14b35e0:#E2E8F0;--e-global-color-550e6cc:#FFFFFF;--e-global-color-94fa21d:#F8FAFC;--e-global-color-030bc47:#3B82F6;--e-global-color-fc296b9:#CBD5E1;--e-global-color-dbac5dc:#CBD5E1;--e-global-color-389211c:#4B5563;--e-global-color-6c0e4f3:#FF7B03;--e-global-typography-primary-font-family:"Sora";--e-global-typography-primary-font-size:56px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.6;--e-global-typography-primary-letter-spacing:0.5px;--e-global-typography-secondary-font-family:"Sora";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.6;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.4;--e-global-typography-accent-letter-spacing:0.5px;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;line-height:1.6px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Inter", Sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;line-height:1.4;letter-spacing:0.5px;color:#FFFFFF;border-radius:6px 6px 6px 6px;padding:25px 28px 25px 28px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-accent );color:#FFFFFF;border-radius:6px 6px 6px 6px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-7 a:hover{color:var( --e-global-color-accent );font-family:"Inter", Sans-serif;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:0.5px;}.elementor-kit-7 h1{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-7 h2{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-kit-7 h3{font-size:36px;font-weight:600;}.elementor-kit-7 img{border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7 a{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-7 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-7 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7 a{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-7 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-7 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =================================================
S3M INDUSTRY PAGE DESIGN SYSTEM
FINAL CLEAN VERSION
Sections + Typography + Cards + Buttons
Dividers + Grid + Pattern Library
================================================ */


/* =================================================
SECTION SYSTEM
================================================ */

.s3m-section{
padding:120px 40px;
position:relative;
overflow:hidden;
}

.s3m-container{
max-width:1200px;
margin:auto;
}

.s3m-section-dark{
background:#0B1120;
color:#CBD5E1;
padding:120px 40px;
}

.s3m-section-light{
background:#FFFFFF;
color:#0F172A;
padding:120px 40px;
}

.s3m-architecture-image img{
border-radius:12px;
box-shadow:0 20px 50px rgba(15,23,42,.15);
}
/* =================================================
TYPOGRAPHY SYSTEM
================================================ */

.s3m-label{
font-family:Inter;
font-size:14px;
letter-spacing:2.5px;
text-transform:uppercase;
font-weight:600;
line-height:1.2;
color:#38BDF8;
margin-bottom:12px;
}

.s3m-heading-xl .elementor-heading-title{
font-family:Sora;
font-size:52px;
font-weight:700;
letter-spacing:-0.5px;
line-height:1.1;
max-width:640px;
margin:0px 0px 32px 0px;
color:#0F172A;
}

.s3m-heading-lg .elementor-heading-title{
font-family:Sora;
font-size:32px;
font-weight:600;
line-height:1.2;
color:#0F172A;
}

.s3m-section-dark .s3m-heading-xl .elementor-heading-title,
.s3m-section-dark .s3m-heading-lg .elementor-heading-title{
color:#FFFFFF !important;
}

.s3m-text-body{
font-family:Inter;
font-size:18px;
line-height:1.6;
font-weight:400;
max-width:640px;
margin:auto;
color:#CBD5E1;
}


.s3m-section-light .s3m-text-body{
color:#475569;
}

.s3m-image img {
  width: 100%;
  height: auto;
  display: block;
}

.s3m-image img {
  border-radius: 12px;
}

.s3m-image img {
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
/* =================================================
BUTTON STYLES (LAYOUT FREE)
================================================ */

.s3m-btn-primary .elementor-button{
background:#38BDF8;
color:#FFFFFF;
border-radius:8px;
font-weight:600;
padding:14px 26px;
transition:all .25s ease;
border:none;
}

.s3m-btn-primary .elementor-button:hover{
background:#0EA5E9;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(56,189,248,.35);
}


/* OUTLINE BUTTON */

.s3m-btn-outline .elementor-button{
background:transparent;
color:#FFFFFF;
border:1px solid rgba(255,255,255,.4);
border-radius:8px;
font-weight:600;
padding:14px 26px;
transition:all .25s ease;
}

.s3m-btn-outline .elementor-button:hover{
border-color:#38BDF8;
color:#38BDF8;
background:rgba(56,189,248,.08);
}

/* =========================================
OUTLINE BUTTON — LIGHT SECTION FIX
========================================= */

.s3m-section-light .s3m-btn-outline .elementor-button{
color:#2563EB;
border:1px solid #2563EB;
background:transparent;
}

.s3m-section-light .s3m-btn-outline .elementor-button:hover{
background:#2563EB;
color:#FFFFFF;
border-color:#2563EB;
box-shadow:0 8px 20px rgba(37,99,235,.25);
transform:translateY(-2px);
}
/* =========================================
S3M ORANGE BUTTON
========================================= */

.s3m-btn-orange .elementor-button{
background: #FF7B03;
color:#FFFFFF;

border-radius:8px;
font-weight:600;

padding:14px 26px;

border:none;

transition:all .25s ease;
}

/* HOVER */
.s3m-btn-orange .elementor-button:hover{
background: linear-gradient(135deg, #ff8c1a, #ffb347);

transform:translateY(-2px);

box-shadow:0 10px 22px rgba(255,122,0,.35);
}

/* ACTIVE */
.s3m-btn-orange .elementor-button:active{
transform:translateY(0);
box-shadow:0 4px 10px rgba(255,122,0,.25);
}
/* =================================================
CARD SYSTEM
================================================ */

.s3m-card{
background:#111827;
border:1px solid #1F2937;
border-radius:12px;
padding:32px 28px;
transition:all .28s ease;
position:relative;
}

.s3m-card-light{
background:#FFFFFF;
border:1px solid #E5E7EB;
border-radius:12px;
padding:32px 28px;
transition:all .28s ease;
position:relative;
}


/* =========================================
CARD SHADOW
========================================= */

.s3m-card-shadow{
box-shadow:0 12px 30px -10px rgba(0,0,0,.35);
}


/* =========================================
CARD HOVER
========================================= */

.s3m-card-hover:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px -12px rgba(0,0,0,.45);
border-color:#38BDF8;
}

.s3m-card-hover-light:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px -10px rgba(0,0,0,.15);
border-color:#2563EB;
}

.s3m-card-glow:hover{
box-shadow:0 0 22px rgba(56,189,248,.35);
}


/* =========================================
CARD PARAGRAPH SPACING
========================================= */

.s3m-card p{
margin-top:10px;
}


/* =========================================
CARD TITLE BLOCK (ALIGNMENT FIX)
========================================= */

.s3m-card-title{
min-height:56px;
display:flex;
align-items:flex-start;
}


/* =========================================
CARD TITLE
========================================= */

.s3m-card-title .elementor-heading-title{
font-family:Sora;
font-size:20px;
font-weight:600;
line-height:1.35;
color:#0F172A;
margin-bottom:10px;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}


/* =========================================
CARD TEXT
========================================= */

.s3m-card-text{
font-family:Inter;
font-size:16px;
line-height:1.6;
color:#475569;

display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}


/* =========================================
DARK CARD TYPOGRAPHY FIX
========================================= */

.s3m-card .s3m-card-title .elementor-heading-title{
color:#FFFFFF;
}

.s3m-card .s3m-card-text{
color:#CBD5E1;
}


/* =========================================
DIVIDER ALIGNMENT
========================================= */

.s3m-card-light .elementor-divider{
margin-top:6px;
margin-bottom:14px;
}

.s3m-card .elementor-divider{
margin-top:6px;
margin-bottom:14px;
}


/* =========================================
DIVIDER VISIBILITY (DARK CARD)
========================================= */

.s3m-card .s3m-divider-grid{
background:repeating-linear-gradient(
90deg,
#38BDF8 0px,
#38BDF8 10px,
transparent 10px,
transparent 18px
);
}


/* =========================================
LOOP GRID CARD FIX
========================================= */

.elementor-loop-container .s3m-card,
.elementor-loop-container .s3m-card-light{
display:flex;
flex-direction:column;
height:100%;
}

.elementor-loop-container .s3m-card .e-con-inner,
.elementor-loop-container .s3m-card-light .e-con-inner{
display:flex;
flex-direction:column;
height:100%;
}

.elementor-loop-container .s3m-card-text{
flex-grow:1;
}

.elementor-loop-container.elementor-grid{
align-items:stretch;
}



/* =========================================
S3M ICON BOX BASE (SVG SAFE)
========================================= */

.s3m-icon-box{
transition:all .25s ease;
padding:18px;
border-radius:10px;
}


/* ICON */

.s3m-icon-box .elementor-icon{
margin-bottom:12px;
}

/* SVG SIZE */

.s3m-icon-box .elementor-icon svg{
width:30px;
height:30px;
}

/* SVG SAFE COLOR CONTROL */

.s3m-icon-box .elementor-icon svg,
.s3m-icon-box .elementor-icon svg path{
fill:currentColor;
}


/* TITLE */

.s3m-icon-box .elementor-icon-box-title{
font-family:Sora;
font-size:18px;
font-weight:600;
line-height:1.35;
margin-bottom:6px;
}


/* DESCRIPTION */

.s3m-icon-box .elementor-icon-box-description{
font-family:Inter;
font-size:15px;
line-height:1.6;
}


/* =========================================
ICON BOX — DARK SECTION
========================================= */

.s3m-section-dark .s3m-icon-box .elementor-icon{
color:#38BDF8;
}

.s3m-section-dark .s3m-icon-box .elementor-icon-box-title{
color:#FFFFFF;
}

.s3m-section-dark .s3m-icon-box .elementor-icon-box-description{
color:#CBD5E1;
}

.s3m-section-dark .s3m-icon-box:hover{
transform:translateY(-4px);
background:rgba(56,189,248,.06);
}

.s3m-section-dark .s3m-icon-box:hover .elementor-icon{
transform:scale(1.08);
}

/* =========================================
S3M OUTCOME CARD COMPONENT
========================================= */

.s3m-outcome-card{

position:relative;

padding:32px;

border-radius:14px;

display:flex;
flex-direction:column;

gap:16px;

min-height:210px;

transition:all .25s ease;

}


/* =========================================
ICON CONTAINER
========================================= */

.s3m-outcome-icon{
width:52px;
height:52px;

display:flex;
align-items:center;
justify-content:center;

border-radius:12px;

}

.s3m-outcome-icon img{

width:24px;
height:24px;

object-fit:contain;

}


/* =========================================
TITLE
========================================= */

.s3m-outcome-title{

font-size:19px;

font-weight:600;

line-height:1.35;

margin-top:4px;

}


/* =========================================
TEXT
========================================= */

.s3m-outcome-text{

font-size:14.5px;

line-height:1.65;

}



/* =========================================
DARK THEME
Parent section class: theme-dark
========================================= */

.theme-dark .s3m-outcome-card{

background:#0f172a;

border:1px solid rgba(255,255,255,0.06);

}

.theme-dark .s3m-outcome-card:hover{

transform:translateY(-6px);

border-color:rgba(99,102,241,.5);

box-shadow:
0 10px 40px rgba(0,0,0,.45),
0 0 0 1px rgba(99,102,241,.2);

}

.theme-dark .s3m-outcome-icon{

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.08);

}

.theme-dark .s3m-outcome-icon img{

filter:brightness(0) invert(1);

}

.theme-dark .s3m-outcome-title{

color:#ffffff;

}

.theme-dark .s3m-outcome-text{

color:#94a3b8;

}



/* =========================================
LIGHT THEME
Parent section class: theme-light
========================================= */

.theme-light .s3m-outcome-card{

background:#ffffff;

border:1px solid #e5e7eb;

}

.theme-light .s3m-outcome-card:hover{

transform:translateY(-6px);

border-color:#6366f1;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

}

.theme-light .s3m-outcome-icon{

background:#f3f4f6;

border:1px solid #e5e7eb;

}

.theme-light .s3m-outcome-icon img{

filter:none;

}

.theme-light .s3m-outcome-title{

color:#111827;

}

.theme-light .s3m-outcome-text{

color:#6b7280;

}



/* =========================================
PREMIUM GLOW EFFECT
========================================= */

.s3m-outcome-card::before{

content:"";

position:absolute;

inset:0;

border-radius:14px;

background:linear-gradient(
120deg,
rgba(99,102,241,.15),
transparent 40%
);

opacity:0;

transition:.3s;

}

.s3m-outcome-card:hover::before{

opacity:1;

}
.s3m-outcome-title{

font-size:19px;
font-weight:600;
line-height:1.35;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

overflow:hidden;

min-height:52px;

}
/* =========================================
ICON BOX — LIGHT SECTION
========================================= */

.s3m-section-light .s3m-icon-box .elementor-icon{
color:#2563EB;
}

.s3m-section-light .s3m-icon-box .elementor-icon-box-title{
color:#0F172A;
}

.s3m-section-light .s3m-icon-box .elementor-icon-box-description{
color:#475569;
}

.s3m-section-light .s3m-icon-box:hover{
transform:translateY(-4px);
background:#F8FAFC;
border:1px solid #E2E8F0;
}


/* =========================================
ARCHITECTURE POINT ICON BOX
(section 5 diagram explanation)
========================================= */

.s3m-arch-point{
text-align:center;
padding:10px 20px;
}


/* ICON */

.s3m-arch-point .elementor-icon{
color:#38BDF8;
margin-bottom:14px;
}

/* SVG SIZE */

.s3m-arch-point .elementor-icon svg{
width:28px;
height:28px;
}

/* SVG SAFE */

.s3m-arch-point .elementor-icon svg,
.s3m-arch-point .elementor-icon svg path{
fill:currentColor;
}


/* TITLE */

.s3m-arch-point .elementor-icon-box-title{
font-family:Sora;
font-size:18px;
font-weight:600;
line-height:1.3;
margin-bottom:8px;
color:#FFFFFF;
}


/* DESCRIPTION */

.s3m-arch-point .elementor-icon-box-description{
font-family:Inter;
font-size:15px;
line-height:1.6;
color:#CBD5E1;
max-width:260px;
margin:auto;
}


/* HOVER */

.s3m-arch-point:hover .elementor-icon{
transform:scale(1.08);
color:#38BDF8;
transition:all .25s ease;
}
/* =================================================
ICON LIST SYSTEM
================================================ */

.s3m-icon-list{
list-style:none;
padding:0;
margin:0;
}

.s3m-icon-list li{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:10px;
font-family:Inter;
font-size:15px;
line-height:1.6;
}

.s3m-section-light .s3m-icon-list li{
color:#475569;
}

.s3m-section-dark .s3m-icon-list li{
color:#CBD5E1;
}

/*.s3m-icon-list li::before{
content:"•";
color:#38BDF8;
font-weight:700;
margin-top:2px;
}*/


/* =================================================
DIVIDER LIBRARY
================================================ */

.s3m-divider-neural{
border:none;
height:1px;
width:120px;
margin:40px auto;
background:linear-gradient(90deg,transparent,rgba(56,189,248,.7),transparent);
}

.s3m-divider-glow{
border:none;
height:2px;
width:80px;
margin:auto;
background:linear-gradient(90deg,transparent,#38BDF8,transparent);
box-shadow:0 0 14px rgba(56,189,248,.45);
}

.s3m-divider-grid{
border:none;
height:2px;
width:90px;
margin:auto;
background:repeating-linear-gradient(
90deg,
#38BDF8 0px,
#38BDF8 10px,
transparent 10px,
transparent 18px
);
}

.s3m-divider-pulse{
border:none;
height:2px;
width:80px;
margin:auto;
background:#38BDF8;
box-shadow:0 0 12px rgba(56,189,248,.6);
animation:s3mDividerPulse 2.8s infinite ease-in-out;
}

@keyframes s3mDividerPulse{
0%{opacity:.4;transform:scaleX(.9);}
50%{opacity:1;transform:scaleX(1);}
100%{opacity:.4;transform:scaleX(.9);}
}


/* =================================================
GRID SYSTEM
================================================ */

.s3m-grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
}

.s3m-grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.s3m-grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}


/* =================================================
S3M PATTERN LIBRARY
Dark + Light Compatible
================================================ */


/* ================================================
BASE PATTERN WRAPPER
================================================ */

.pattern-section{
position:relative;
overflow:hidden;
background-repeat:repeat;
background-position:center;
}


/* ================================================
GRID PATTERN
================================================ */

.pattern-grid{
background-image:
linear-gradient(rgba(148,163,184,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,.15) 1px, transparent 1px);

background-size:70px 70px;
}


/* DARK OPTIMIZATION */

.s3m-section-dark.pattern-grid{
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
}



/* ================================================
BASE PATTERN WRAPPER
================================================ */

.pattern-section{
position:relative;
overflow:hidden;
background-repeat:repeat;
background-position:center;
}


/* ================================================
NETWORK PATTERN
================================================ */

.pattern-network{
background-image:
linear-gradient(rgba(148,163,184,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,.15) 1px, transparent 1px),
radial-gradient(circle, rgba(148,163,184,.25) 2px, transparent 2px);

background-size:
80px 80px,
80px 80px,
120px 120px;

background-position:
0 0,
0 0,
40px 40px;
}

.s3m-section-dark.pattern-network{
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
radial-gradient(circle, rgba(255,255,255,.12) 2px, transparent 2px);
}


/* ================================================
DATA FLOW
================================================ */

.pattern-data{
background-image:
repeating-linear-gradient(
45deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 2px,
transparent 2px,
transparent 30px
);
}

.s3m-section-dark.pattern-data{
background-image:
repeating-linear-gradient(
45deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 2px,
transparent 2px,
transparent 30px
);
}


/* ================================================
DOT MATRIX
================================================ */

.pattern-dots{
background-image:
radial-gradient(rgba(148,163,184,.25) 1px, transparent 1px);
background-size:24px 24px;
}

.s3m-section-dark.pattern-dots{
background-image:
radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
}


/* ================================================
CIRCUIT BOARD
================================================ */

.pattern-circuit{
background-image:
linear-gradient(rgba(148,163,184,.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,.15) 1px, transparent 1px),
radial-gradient(circle, rgba(148,163,184,.25) 1px, transparent 1px);

background-size:
60px 60px,
60px 60px,
30px 30px;
}

.s3m-section-dark.pattern-circuit{
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
}


/* ================================================
NETWORK MESH
================================================ */

.pattern-mesh{
background-image:
repeating-linear-gradient(
60deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 1px,
transparent 1px,
transparent 40px
),
repeating-linear-gradient(
-60deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 1px,
transparent 1px,
transparent 40px
);
}

.s3m-section-dark.pattern-mesh{
background-image:
repeating-linear-gradient(
60deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 40px
),
repeating-linear-gradient(
-60deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 40px
);
}


/* ================================================
DATA WAVE
================================================ */

.pattern-wave{
background-image:
repeating-linear-gradient(
90deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 2px,
transparent 2px,
transparent 40px
);
}

.s3m-section-dark.pattern-wave{
background-image:
repeating-linear-gradient(
90deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 2px,
transparent 2px,
transparent 40px
);
}


/* ================================================
ZERO TRUST RINGS
================================================ */

.pattern-trust{
background-image:
radial-gradient(circle at center, rgba(148,163,184,.15) 1px, transparent 1px);
background-size:200px 200px;
}

.s3m-section-dark.pattern-trust{
background-image:
radial-gradient(circle at center, rgba(255,255,255,.05) 1px, transparent 1px);
}


/* ================================================
NEW PATTERN — CIRCUIT LINES
(cybersecurity architecture)
================================================ */

.pattern-circuit-lines{
background-image:
repeating-linear-gradient(
90deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 1px,
transparent 1px,
transparent 60px
),
repeating-linear-gradient(
0deg,
rgba(148,163,184,.15),
rgba(148,163,184,.15) 1px,
transparent 1px,
transparent 60px
);
}

.s3m-section-dark.pattern-circuit-lines{
background-image:
repeating-linear-gradient(
90deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 60px
),
repeating-linear-gradient(
0deg,
rgba(255,255,255,.05),
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 60px
);
}


/* ================================================
NEW PATTERN — HEX GRID
(Security mesh style)
================================================ */

.pattern-hex{
background-image:
radial-gradient(circle at 25% 25%, rgba(148,163,184,.15) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(148,163,184,.15) 2px, transparent 2px);
background-size:60px 60px;
}

.s3m-section-dark.pattern-hex{
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,.08) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,.08) 2px, transparent 2px);
}


/* ================================================
FAQ BACKGROUND
================================================ */

.pattern-faq{
position:relative;
}

.pattern-faq::after{
content:"?   ?   ?   ?   ?   ?";
position:absolute;
font-size:140px;
color:rgba(148,163,184,.08);
letter-spacing:180px;
top:40%;
left:-200px;
transform:rotate(-20deg);
white-space:nowrap;
pointer-events:none;
}

.s3m-section-dark.pattern-faq::after{
color:rgba(255,255,255,.05);
}

/* =================================================
RESPONSIVE
================================================ */

@media(max-width:1024px){

.s3m-heading-xl .elementor-heading-title{
font-size:40px;
}

.s3m-heading-lg .elementor-heading-title{
font-size:28px;
}

.s3m-section{
padding:100px 32px;
}

}

@media(max-width:768px){

.s3m-heading-xl .elementor-heading-title{
font-size:32px;
}

.s3m-heading-lg .elementor-heading-title{
font-size:24px;
}

.s3m-section{
padding:80px 24px;
}

.s3m-grid-2,
.s3m-grid-3,
.s3m-grid-4{
grid-template-columns:1fr;
}

}
.elementor-button{
white-space:normal !important;
}

.elementor-button-content-wrapper{
white-space:normal !important;
flex-wrap:wrap;
}

.elementor-button-text{
white-space:normal !important;
word-break:break-word;
}

/* =========================================
FAQ TEXT BOOST (LIGHT SECTION)
========================================= */

.s3m-faq-text{
font-family:Inter;
font-size:18px;
line-height:1.65;
font-weight:400;
max-width:720px;
margin:auto;
color:#1E293B; /* daha güçlü */
}

/* =========================================
FAQ CLOSING TEXT
========================================= */

.s3m-faq-closing{
font-family:Inter;
font-size:17px;
line-height:1.65;
max-width:720px;
margin:32px auto 0 auto;
color:#334155;
}

/* =================================================
S3M FLOW — FINAL PRODUCTION VERSION
Icon Box Based Flow System
================================================ */


/* =========================================
FLOW CONTAINER
========================================= */

.s3m-flow{
display:flex;
align-items:stretch;
justify-content:space-between;
gap:40px;
margin-top:60px;
flex-wrap:nowrap;
}


/* =========================================
FLOW STEP (EQUAL HEIGHT FIX)
========================================= */

.s3m-flow-step{
flex:1;
display:flex;
justify-content:center;
}


/* =========================================
ICON BOX WRAPPER (FULL CONTROL)
========================================= */

.s3m-flow-step .elementor-icon-box-wrapper{
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
text-align:center;
height:100%;
gap:12px;
}


/* =========================================
ICON (PERFECT CENTER + FIXED SIZE)
========================================= */

.s3m-flow-step .elementor-icon{
width:64px;
height:64px;
display:flex !important;
align-items:center;
justify-content:center;
border-radius:16px;
background:rgba(56,189,248,.08);
border:1px solid rgba(56,189,248,.25);
margin:0 auto 10px auto;
transition:all .25s ease;
}

.s3m-flow-step .elementor-icon i{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
font-size:22px;
}

.s3m-flow-step .elementor-icon svg{
display:block;
margin:auto;
}


/* =========================================
TITLE (FIXED HEIGHT ALIGN)
========================================= */

.s3m-flow-step .elementor-icon-box-title{
font-family:Sora;
font-size:16px;
font-weight:600;
line-height:1.35;
color:#FFFFFF;

min-height:44px; /* eşit title height */
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}


/* =========================================
DESCRIPTION (EQUAL HEIGHT FIX)
========================================= */

.s3m-flow-step .elementor-icon-box-description{
font-family:Inter;
font-size:14px;
line-height:1.6;
color:#CBD5E1;

min-height:72px; /* 🔥 kritik fix */
max-width:220px;
margin:auto;

display:flex;
align-items:flex-start;
justify-content:center;
text-align:center;
}


/* =========================================
HOVER EFFECT
========================================= */

.s3m-flow-step:hover .elementor-icon{
transform:translateY(-4px) scale(1.05);
background:rgba(56,189,248,.15);
box-shadow:0 8px 20px rgba(56,189,248,.25);
}


/* =========================================
ARROW (NO FONT AWESOME DEPENDENCY)
========================================= */

.s3m-flow-step:not(:last-child)::after{
content:"→"; /* 🔥 FIXED */
position:absolute;
right:-22px;
top:50%;
transform:translateY(-50%);
font-size:18px;
color:#38BDF8;
opacity:.7;
}


/* LINE */

.s3m-flow-step:not(:last-child)::before{
content:"";
position:absolute;
right:-50px;
top:50%;
transform:translateY(-50%);
width:40px;
height:2px;
background:linear-gradient(90deg,#38BDF8,transparent);
opacity:.5;
}


/* =========================================
LIGHT MODE
========================================= */

.s3m-section-light .s3m-flow-step .elementor-icon{
background:#EFF6FF;
border:1px solid #BFDBFE;
}

.s3m-section-light .s3m-flow-step .elementor-icon i{
color:#2563EB;
}

.s3m-section-light .s3m-flow-step .elementor-icon-box-title{
color:#0F172A;
}

.s3m-section-light .s3m-flow-step .elementor-icon-box-description{
color:#475569;
}

.s3m-section-light .s3m-flow-step:not(:last-child)::after{
color:#2563EB;
}

.s3m-section-light .s3m-flow-step:not(:last-child)::before{
background:linear-gradient(90deg,#2563EB,transparent);
}


/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1024px){

.s3m-flow{
flex-wrap:wrap;
justify-content:center;
gap:40px;
}

.s3m-flow-step{
width:45%;
}

.s3m-flow-step::before,
.s3m-flow-step::after{
display:none;
}

}

@media(max-width:768px){

.s3m-flow{
flex-direction:column;
gap:30px;
}

.s3m-flow-step{
width:100%;
}

}
.s3m-flow-last::after,
.s3m-flow-last::before{
display:none !important;
}

/* =================================================
S3M TYPOGRAPHY FIX PATCH (NON-BREAKING)
APPEND ONLY — DO NOT REMOVE OLD SYSTEM
================================================ */


/* =========================================
TEXT BODY FIX
(eski margin:auto bug fix)
========================================= */

.s3m-text-body{
margin-left:0 !important;
margin-right:0 !important;
}


/* =========================================
FAQ TEXT FIX
========================================= */

.s3m-faq-text{
margin-left:0 !important;
margin-right:0 !important;
}

.s3m-faq-closing{
margin-left:0 !important;
margin-right:0 !important;
}


/* =========================================
NEW TEXT UTILITIES (SAFE ADD)
========================================= */

/* CENTER */
.s3m-text-center{
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}

/* LEFT */
.s3m-text-left{
margin-left:0 !important;
margin-right:0 !important;
text-align:left;
}

/* RIGHT */
.s3m-text-right{
margin-left:auto !important;
text-align:right;
}
/* =================================================
ARCHITECTURE LAYER LOOP — FULL SYSTEM
================================================ */

/* =========================
BASE CARD
========================= */

.s3m-layer-card{
    border-radius:14px;
    padding:32px 28px;
    transition:all .28s ease;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* =========================
LIGHT MODE
========================= */

.s3m-section-light .s3m-layer-card{
    background:#ffffff;
    border:1px solid #E5E7EB;
}

.s3m-section-light .s3m-layer-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -12px rgba(0,0,0,.15);
    border-color:#2563EB;
}

/* =========================
DARK MODE
========================= */

.s3m-section-dark .s3m-layer-card{
    background:#111827;
    border:1px solid #1F2937;
}

.s3m-section-dark .s3m-layer-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px -12px rgba(0,0,0,.45);
    border-color:#38BDF8;
}

/* =========================
TITLE
========================= */

.s3m-layer-title{
    font-family:Sora;
    font-size:20px;
    font-weight:600;
    line-height:1.35;
}

/* LIGHT */
.s3m-section-light .s3m-layer-title{
    color:#0F172A;
}

/* DARK */
.s3m-section-dark .s3m-layer-title{
    color:#FFFFFF;
}

/* =========================
DESCRIPTION
========================= */

.s3m-layer-text{
    font-family:Inter;
    font-size:15.5px;
    line-height:1.65;
}

/* LIGHT */
.s3m-section-light .s3m-layer-text{
    color:#475569;
}

/* DARK */
.s3m-section-dark .s3m-layer-text{
    color:#CBD5E1;
}

/* =========================
PRODUCT WRAPPER
========================= */

.s3m-layer-products{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}

/* =========================
PRODUCT TAG
========================= */

.s3m-layer-product{
    display:inline-flex;
    align-items:center;
    gap:6px;

    font-family:Inter;
    font-size:13.5px;
    font-weight:500;

    padding:6px 12px;
    border-radius:999px;

    text-decoration:none;

    transition:all .25s ease;
}

/* LIGHT */
.s3m-section-light .s3m-layer-product{
    background:#F1F5F9;
    color:#0F172A;
}

.s3m-section-light .s3m-layer-product:hover{
    background:#2563EB;
    color:#ffffff;
}

/* DARK */
.s3m-section-dark .s3m-layer-product{
    background:#1F2937;
    color:#CBD5E1;
}

.s3m-section-dark .s3m-layer-product:hover{
    background:#38BDF8;
    color:#0B1120;
}

/* =========================
DOT INDICATOR
========================= */

.s3m-layer-product::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    display:inline-block;
}

/* LIGHT DOT */
.s3m-section-light .s3m-layer-product::before{
    background:#2563EB;
}

.s3m-section-light .s3m-layer-product:hover::before{
    background:#ffffff;
}

/* DARK DOT */
.s3m-section-dark .s3m-layer-product::before{
    background:#38BDF8;
}

.s3m-section-dark .s3m-layer-product:hover::before{
    background:#0B1120;
}

/* =========================
OPTIONAL MINI LABEL (PRODUCTS TITLE)
========================= */

.s3m-layer-products-label{
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:600;
    margin-top:8px;
}

/* LIGHT */
.s3m-section-light .s3m-layer-products-label{
    color:#94A3B8;
}

/* DARK */
.s3m-section-dark .s3m-layer-products-label{
    color:#64748B;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:768px){

    .s3m-layer-card{
        padding:24px 20px;
    }

    .s3m-layer-title{
        font-size:18px;
    }

    .s3m-layer-text{
        font-size:14.5px;
    }
}/* End custom CSS */