/* =========================================================
   DirectCom — Homepage Pro (advanced, clean, enterprise)
   palette: navy/blue/green + Syne — approved
   ========================================================= */

/* ---------- HERO ---------- */
.hero{
    position:relative; min-height:100vh; background:var(--navy);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    overflow:hidden; padding:128px 24px 90px; text-align:center;
}
/* split layout grid */
.hero-grid{position:relative; z-index:3; width:100%; max-width:1240px; margin:0 auto;
    display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero-grid .hero-inner{text-align:start; max-width:none; margin:0;}
.hero-grid .hero-cta{justify-content:flex-start;}
.hero-grid .hero-trust-mini{justify-content:flex-start;}
.hero-grid .hero-sub{margin-right:0; margin-left:auto;}

/* ---- LIVE OPS DASHBOARD VISUAL ---- */
.ops{position:relative; width:100%; max-width:520px; margin:0 auto;
    opacity:0; transform:translateY(30px) scale(.97); animation:fadeUp .9s 1.1s forwards;}
.ops-card{position:relative; background:linear-gradient(160deg,rgba(19,40,71,.92),rgba(10,22,40,.96));
    border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:18px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(6px);}
.ops-card::before{content:''; position:absolute; inset:0; border-radius:18px; padding:1px;
    background:linear-gradient(135deg,rgba(59,130,196,.5),transparent 40%,transparent 60%,rgba(74,155,50,.4));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;}
.ops-head{display:flex; align-items:center; justify-content:space-between; padding:4px 6px 14px; border-bottom:1px solid rgba(255,255,255,.07);}
.ops-head .lhs{display:flex; align-items:center; gap:9px;}
.ops-head .dotmac{display:flex; gap:5px;}
.ops-head .dotmac i{width:9px;height:9px;border-radius:50%;display:block;}
.ops-title{font-family:var(--font-data); font-weight:700; font-size:.82rem; color:#fff; letter-spacing:.3px;}
.ops-badge{display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-family:var(--font-data);
    color:#7CD89E; background:rgba(74,155,50,.12); border:1px solid rgba(74,155,50,.25); padding:4px 10px; border-radius:var(--radius-full);}
.ops-badge .d{width:6px;height:6px;border-radius:50%;background:#4A9B32; animation:blink 1.4s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* network map */
.ops-map{position:relative; height:152px; margin:14px 4px 6px; border-radius:12px;
    background:radial-gradient(ellipse at 50% 40%,rgba(26,86,160,.18),transparent 70%); overflow:hidden;}
.ops-map svg{position:absolute; inset:0; width:100%; height:100%;}
.ops-map .edge{stroke:rgba(59,130,196,.35); stroke-width:1.2; fill:none; stroke-dasharray:4 5; animation:dash 18s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-200}}
.ops-node{position:absolute; transform:translate(-50%,-50%);}
.ops-node .core{width:11px;height:11px;border-radius:50%;background:var(--blue-light);box-shadow:0 0 0 0 rgba(59,130,196,.6);animation:pulseN 2.6s infinite;}
.ops-node.green .core{background:var(--green-light);animation-delay:.6s;box-shadow:0 0 0 0 rgba(74,155,50,.6);}
.ops-node.hub .core{width:18px;height:18px;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.7);}
@keyframes pulseN{0%{box-shadow:0 0 0 0 rgba(59,130,196,.5)}70%{box-shadow:0 0 0 12px rgba(59,130,196,0)}100%{box-shadow:0 0 0 0 rgba(59,130,196,0)}}
.ops-node .lbl{position:absolute; top:14px; left:50%; transform:translateX(-50%); white-space:nowrap;
    font-family:var(--font-data); font-size:.58rem; color:rgba(255,255,255,.5);}

/* metric rows */
.ops-metrics{display:flex; flex-direction:column; gap:11px; padding:12px 6px 6px;}
.ops-row{display:grid; grid-template-columns:88px 1fr 46px; align-items:center; gap:12px;}
.ops-row .k{font-family:var(--font-data); font-size:.7rem; color:rgba(255,255,255,.55); text-align:start;}
.ops-bar{height:6px; border-radius:4px; background:rgba(255,255,255,.07); overflow:hidden;}
.ops-bar i{display:block; height:100%; border-radius:4px; width:0;
    background:linear-gradient(90deg,var(--blue),var(--blue-light)); animation:fill 1.6s 1.6s cubic-bezier(.16,1,.3,1) forwards;}
.ops-row.g .ops-bar i{background:linear-gradient(90deg,var(--green),var(--green-light));}
.ops-row .v{font-family:var(--font-data); font-size:.72rem; font-weight:700; color:#fff; text-align:left;}
@keyframes fill{to{width:var(--w,80%)}}

/* live feed ticker */
.ops-feed{margin:10px 6px 2px; border-top:1px solid rgba(255,255,255,.07); padding-top:10px; height:78px; overflow:hidden; position:relative;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);}
.ops-feed-track{display:flex; flex-direction:column; gap:9px; will-change:transform;}
.ops-feed .it{display:flex; align-items:center; gap:8px; font-size:.66rem; color:rgba(255,255,255,.6); font-family:var(--font-body); line-height:1.3;}
.ops-feed .it.warn{color:rgba(245,200,90,.85);} .ops-feed .it.alert{color:rgba(240,120,120,.9);}
.ops-feed .it .tag{width:7px;height:7px;border-radius:2px;flex-shrink:0;}
.ops-feed .it .msg{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ops-feed .it time{margin-right:auto; padding-right:8px; font-family:var(--font-data); font-size:.58rem; color:rgba(255,255,255,.32); flex-shrink:0;}

/* floating chips */
.ops-chip{position:absolute; display:inline-flex; align-items:center; gap:7px; padding:8px 13px;
    background:rgba(19,40,71,.9); border:1px solid rgba(255,255,255,.12); border-radius:12px; backdrop-filter:blur(8px);
    font-family:var(--font-data); font-size:.72rem; font-weight:700; color:#fff; box-shadow:0 12px 30px -8px rgba(0,0,0,.5);}
.ops-chip svg{width:16px;height:16px;}
.ops-chip.c1{top:-22px; right:-18px; animation:floatY 5s ease-in-out infinite;}
.ops-chip.c2{bottom:34px; left:-26px; animation:floatY 6s ease-in-out infinite .8s;}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* layered animated background */
.hero-mesh{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.hero-blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.45; mix-blend-mode:screen;}
.hero-blob.b1{width:620px;height:620px;background:rgba(26,86,160,.45); top:-160px; left:58%; animation:drift1 22s ease-in-out infinite;}
.hero-blob.b2{width:520px;height:520px;background:rgba(45,106,31,.30); bottom:-180px; right:62%; animation:drift2 26s ease-in-out infinite;}
.hero-blob.b3{width:380px;height:380px;background:rgba(59,130,196,.30); top:30%; left:20%; animation:drift3 30s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,50px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-40px) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,40px) scale(1.15)}}
.hero-dots{position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
    background-size:28px 28px;
    mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 78%);
    animation:dotsPan 40s linear infinite;
}
@keyframes dotsPan{to{background-position:28px 28px}}
.hero-scan{position:absolute; left:0; right:0; height:140px; pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(59,130,196,.06), transparent);
    animation:scan 7s linear infinite;}
@keyframes scan{0%{top:-140px}100%{top:100%}}

.hero-inner{position:relative; z-index:3; max-width:880px;}
.status-pill{
    display:inline-flex; align-items:center; gap:9px; padding:7px 16px 7px 14px;
    border-radius:var(--radius-full); background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(8px);
    font-size:.82rem; color:rgba(255,255,255,.75); margin-bottom:30px;
    opacity:0; animation:fadeUp .7s .15s forwards;
}
.status-pill .live{position:relative; width:9px; height:9px;}
.status-pill .live::before,.status-pill .live::after{content:''; position:absolute; inset:0; border-radius:50%; background:var(--green-light);}
.status-pill .live::after{animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3);opacity:0}}

.hero h1{
    font-family:var(--font-heading); font-weight:800; color:var(--white);
    font-size:clamp(2.8rem,6.4vw,4.6rem); line-height:1.08; letter-spacing:-1.5px;
    margin-bottom:22px; perspective:700px;
}
.hero h1 .w{display:inline-block; opacity:0; transform:translateY(34px) rotateX(-20deg); filter:blur(5px);
    animation:wReveal .8s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes wReveal{to{opacity:1; transform:none; filter:blur(0)}}
.hero h1 .grad{
    background:linear-gradient(110deg,var(--blue-light) 0%, #6FD0A8 45%, var(--green-light) 100%);
    background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:wReveal .8s cubic-bezier(.16,1,.3,1) forwards, sweep 6s linear infinite;
}
@keyframes sweep{to{background-position:220% center}}
.hero h1 .accent{
    background:linear-gradient(120deg,#FFB061 0%,#F47A1F 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.hero-sub{font-size:clamp(1.05rem,2vw,1.28rem); color:rgba(255,255,255,.62); line-height:1.7;
    max-width:600px; margin:0 auto 38px; opacity:0; animation:fadeUp .8s .85s forwards;}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp .8s 1s forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.hero-trust-mini{display:flex; align-items:center; gap:10px; justify-content:center; margin-top:34px;
    font-size:.85rem; color:rgba(255,255,255,.45); opacity:0; animation:fadeUp .8s 1.15s forwards;}
.hero-trust-mini .avs{display:flex;}
.hero-trust-mini .avs span{width:30px;height:30px;border-radius:50%;border:2px solid var(--navy);
    margin-right:-8px; background:linear-gradient(135deg,var(--blue),var(--green)); display:flex; align-items:center;
    justify-content:center; font-size:.68rem; font-weight:700; color:#fff; font-family:var(--font-heading);}

/* hero stat strip */
.hero-strip{position:relative; z-index:3; margin-top:62px; display:grid; grid-template-columns:repeat(4,1fr);
    gap:1px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);
    border-radius:var(--radius-lg); overflow:hidden; max-width:760px; width:100%;
    opacity:0; animation:fadeUp .8s 1.3s forwards;}
.hero-strip .hs{background:rgba(10,22,40,.6); padding:22px 14px; text-align:center; transition:background .3s;}
.hero-strip .hs:hover{background:rgba(26,86,160,.12);}
.hero-strip .hsv{font-family:var(--font-data); font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:700;
    color:var(--white); line-height:1; letter-spacing:-.5px;}
.hero-strip .hsl{font-size:.76rem; color:rgba(255,255,255,.45); margin-top:7px;}

.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:7px; opacity:0; animation:fadeUp .8s 1.6s forwards;}
.scroll-cue .ms{width:23px;height:36px;border:2px solid rgba(255,255,255,.2);border-radius:12px;position:relative;}
.scroll-cue .ms::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;
    background:rgba(255,255,255,.45);border-radius:2px;animation:scrollDot 1.8s infinite;}
@keyframes scrollDot{0%,100%{transform:translateX(-50%) translateY(0);opacity:1}50%{transform:translateX(-50%) translateY(11px);opacity:0}}
.scroll-cue span{font-size:.72rem;color:rgba(255,255,255,.3);letter-spacing:1px;}

/* ---------- TRUST MARQUEE ---------- */
.marquee{background:var(--white); border-bottom:1px solid rgba(0,0,0,.05); padding:26px 0; overflow:hidden;}
.marquee-label{text-align:center; font-size:.78rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--warm-gray); margin-bottom:18px; font-weight:600;}
.marquee-track{display:flex; gap:60px; width:max-content; animation:scrollX 28s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track .mi{font-family:var(--font-heading); font-weight:700; font-size:1.05rem;
    color:#B8B6AE; letter-spacing:1px; white-space:nowrap; transition:color .25s;}
.marquee-track .mi:hover{color:var(--blue);}
@keyframes scrollX{to{transform:translateX(50%)}}

/* ---------- SECTION SHELL ---------- */
.sec{padding:104px 0;}
.sec-head{text-align:start; margin-bottom:56px; max-width:640px;}
.sec-head .section-subtitle{max-width:none;}

/* ---------- SERVICES GRID (uniform, light) ---------- */
.services{background:var(--white);}
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.bento a{display:flex; flex-direction:column;}

/* ---------- CONNECTED CORE ---------- */
.core-sec{background:var(--warm-100); overflow:hidden;}
.core-wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.core-stage{position:relative; height:560px; display:flex; align-items:center; justify-content:center; overflow:visible;}
.core-center{position:absolute; width:172px; height:172px; border-radius:32px; z-index:4;
    background:linear-gradient(135deg,var(--navy),var(--navy-mid));
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    box-shadow:0 22px 60px rgba(10,22,40,.32); border:1px solid rgba(255,255,255,.08);}
.core-center .lg{font-family:var(--font-heading); font-weight:800; font-size:1.05rem; letter-spacing:-.5px; white-space:nowrap;}
.core-center .lg b{color:#E8EAED;} .core-center .lg i{color:#FF9A4D; font-style:normal;}
.core-center small{font-size:.74rem; color:rgba(255,255,255,.45); letter-spacing:2px;}
.core-center::after{content:''; position:absolute; inset:-12px; border-radius:38px;
    border:1px solid rgba(26,86,160,.25); animation:corePulse 3s ease-in-out infinite;}
@keyframes corePulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:0}}

.core-node{position:absolute; z-index:3; width:112px; height:112px; border-radius:22px; background:var(--white);
    border:1px solid rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    box-shadow:var(--shadow-sm); transition:transform .35s, box-shadow .35s, border-color .35s;
    cursor:default; animation:nodeFloat 6s ease-in-out infinite;}
.core-node svg{width:32px;height:32px;stroke:var(--blue);fill:none;stroke-width:1.7;transition:stroke .3s;}
.core-node span{font-size:.92rem; color:var(--text-main); font-weight:700;}
.core-node.on,.core-node:hover{transform:scale(1.1); border-color:var(--blue); box-shadow:var(--shadow-md),0 0 0 4px rgba(26,86,160,.08);}
.core-node.on svg,.core-node:hover svg{stroke:var(--blue);}
@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.core-node.on,.core-node:hover{animation-play-state:paused;}
/* node positions (around center) */
.core-node.n0{top:2%;  left:50%; margin-left:-56px;}
.core-node.n1{top:24%; right:2%;}
.core-node.n2{bottom:24%; right:2%;}
.core-node.n3{bottom:2%; left:50%; margin-left:-56px;}
.core-node.n4{bottom:24%; left:2%;}
.core-node.n5{top:24%; left:2%;}
.core-svg{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;}
.core-svg line{stroke:rgba(26,86,160,.25); stroke-width:1.5; stroke-dasharray:5 6; animation:dash 1.4s linear infinite;}
.core-svg line.hot{stroke:var(--blue); stroke-width:2; stroke-dasharray:none;}
@keyframes dash{to{stroke-dashoffset:-22}}

.core-list{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;}
.core-item{display:flex; align-items:center; gap:15px; padding:16px 16px; border-radius:var(--radius-md);
    border:1px solid rgba(0,0,0,.05); background:rgba(255,255,255,.5);
    transition:background .25s, box-shadow .25s, border-color .25s, transform .25s; cursor:default;}
.core-item:hover{background:var(--white); box-shadow:var(--shadow-md); border-color:rgba(26,86,160,.15); transform:translateY(-3px);}
@media(max-width:560px){.core-list{grid-template-columns:1fr;}}
.core-item .ci-ic{width:54px;height:54px;border-radius:13px;background:rgba(26,86,160,.07);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:background .25s;}
.core-item:hover .ci-ic{background:var(--blue);}
.core-item .ci-ic svg{width:25px;height:25px;stroke:var(--blue);fill:none;stroke-width:1.8;transition:stroke .25s;}
.core-item:hover .ci-ic svg{stroke:#fff;}
.core-item h4{font-family:var(--font-heading);font-size:1.22rem;font-weight:700;margin-bottom:3px;letter-spacing:-.2px;}
.core-item p{font-size:.98rem;color:var(--text-sub);line-height:1.45;}

/* ---------- STATS BAND ---------- */
.stats-band{background:var(--navy); position:relative; overflow:hidden; padding:90px 0;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:36px; position:relative; z-index:2;}
.stat-b{text-align:center;}
.stat-b .v{font-family:var(--font-data); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:800; color:#fff; line-height:1; letter-spacing:-1px;}
.stat-b .v .u{background:linear-gradient(135deg,var(--blue-light),var(--green-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat-b .l{font-size:.9rem; color:rgba(255,255,255,.5); margin-top:10px;}
.spark{position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1; opacity:.5;}
.spark path.line{fill:none; stroke:url(#sparkgrad); stroke-width:2.5; stroke-linecap:round;
    stroke-dasharray:2000; stroke-dashoffset:2000;}
.stats-band.in .spark path.line{animation:draw 2.6s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- PROCESS / STEPPER ---------- */
.process{background:var(--white);}
.stepper{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:20px;}
.stepper-line{position:absolute; top:34px; right:12.5%; left:12.5%; height:3px; background:rgba(0,0,0,.07); border-radius:3px; overflow:hidden;}
.stepper-line i{position:absolute; inset:0; transform-origin:right; transform:scaleX(0);
    background:linear-gradient(90deg,var(--blue),var(--green-light));}
.stepper.in .stepper-line i{animation:grow 1.8s .2s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes grow{to{transform:scaleX(1)}}
.step{text-align:center; position:relative;}
.step .n{width:70px;height:70px;border-radius:50%;background:var(--warm-50);border:2px solid rgba(0,0,0,.08);
    display:flex;align-items:center;justify-content:center;margin:0 auto 22px;font-family:var(--font-data);
    font-size:1.4rem;font-weight:700;color:var(--warm-gray);position:relative;z-index:2;transition:all .5s;}
.stepper.in .step:nth-child(2) .n{transition-delay:.2s} .stepper.in .step:nth-child(3) .n{transition-delay:.5s}
.stepper.in .step:nth-child(4) .n{transition-delay:.8s} .stepper.in .step:nth-child(5) .n{transition-delay:1.1s}
.stepper.in .step .n{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(26,86,160,.28);}
.step h3{font-family:var(--font-heading);font-size:1.08rem;font-weight:700;margin-bottom:7px;}
.step p{font-size:.9rem;color:var(--text-sub);line-height:1.6;}

/* ---------- WHY (premium) ---------- */
.why{background:var(--warm-100); position:relative; overflow:hidden;}
.why-lead{font-size:1.18rem; color:var(--text-sub); line-height:1.7; font-weight:400; margin:0;}
.why-lead b{color:var(--blue); font-weight:700;}

/* ── intro: asymmetric editorial layout ── */
.why-intro{display:grid; grid-template-columns:1.55fr .95fr; gap:0 60px; align-items:end; margin-bottom:60px;}
.why-intro .section-title{margin:0 0 20px;}
.why-aside{border-inline-start:1px solid rgba(0,0,0,.10); padding-inline-start:36px; display:flex; flex-direction:column; gap:24px;}
.why-aside .as{text-align:start;}
.why-aside .as .n{display:block; font-family:var(--font-data); font-size:clamp(2rem,3vw,2.7rem); font-weight:800; color:var(--navy); line-height:1; letter-spacing:-1.5px;}
.why-aside .as .n i{font-style:normal; background:linear-gradient(135deg,var(--blue),var(--green)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.why-aside .as .l{display:block; font-size:.92rem; color:var(--text-sub); font-weight:500; margin-top:6px; line-height:1.4;}
@media(max-width:900px){
    .why-intro{grid-template-columns:1fr; gap:34px;}
    .why-aside{flex-direction:row; flex-wrap:wrap; gap:24px 44px; border-inline-start:none; padding-inline-start:0; border-top:1px solid rgba(0,0,0,.10); padding-top:30px;}
}

/* ── differentiators: unified editorial panel, numbered 01–04 ── */
.why-diff{display:grid; grid-template-columns:repeat(4,1fr); background:var(--white); border:1px solid rgba(0,0,0,.08); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:18px;}
.diff{position:relative; padding:38px 30px 36px; text-align:start; transition:background .3s;}
.diff + .diff{border-inline-start:1px solid rgba(0,0,0,.08);}
.diff::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--blue),var(--green)); transform:scaleX(0); transform-origin:inline-start; transition:transform .45s cubic-bezier(.16,1,.3,1);}
.diff:hover{background:var(--warm-50);}
.diff:hover::before{transform:scaleX(1);}
.diff-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.diff-num{font-family:var(--font-data); font-size:2.3rem; font-weight:800; color:rgba(10,22,40,.09); line-height:1; letter-spacing:-1px; transition:color .35s;}
.diff:hover .diff-num{color:rgba(26,86,160,.28);}
.diff-ic{width:44px; height:44px; border-radius:12px; background:rgba(26,86,160,.07); display:flex; align-items:center; justify-content:center; transition:background .35s, transform .35s;}
.diff:hover .diff-ic{background:var(--blue); transform:translateY(-2px);}
.diff-ic svg{width:21px; height:21px; stroke:var(--blue); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s;}
.diff:hover .diff-ic svg{stroke:#fff;}
.diff h4{font-family:var(--font-heading); font-size:1.16rem; font-weight:800; color:var(--navy); margin-bottom:11px; letter-spacing:-.3px; line-height:1.25;}
.diff p{font-size:.92rem; color:var(--text-sub); line-height:1.65;}
.diff p b{color:var(--navy); font-weight:700; background:linear-gradient(transparent 62%, rgba(73,166,50,.22) 62%);}
@media(max-width:900px){
    .why-diff{grid-template-columns:repeat(2,1fr);}
    .diff:nth-child(2n){border-inline-start:1px solid rgba(0,0,0,.08);}
    .diff:nth-child(n+3){border-top:1px solid rgba(0,0,0,.08);}
    .diff:nth-child(3){border-inline-start:none;}
}
@media(max-width:540px){
    .why-diff{grid-template-columns:1fr;}
    .diff + .diff{border-inline-start:none; border-top:1px solid rgba(0,0,0,.08);}
}

/* comparison: us vs typical */
.why-compare{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); margin-top:72px;}
.cmp-col{padding:38px 34px;}
.cmp-them{background:var(--white); border:1px solid rgba(0,0,0,.07);}
.cmp-us{background:var(--navy); position:relative; overflow:hidden;}
.cmp-us::after{content:''; position:absolute; top:-60px; left:-40px; width:240px; height:240px; border-radius:50%;
    background:radial-gradient(circle,rgba(74,155,50,.16),transparent 65%);}
.cmp-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-heading); font-size:.82rem; font-weight:700;
    letter-spacing:0; padding:7px 16px; border-radius:var(--radius-full); margin-bottom:24px; position:relative;}
.cmp-them .cmp-tag{background:rgba(0,0,0,.05); color:var(--warm-gray);}
.cmp-us .cmp-tag{background:rgba(74,155,50,.16); color:var(--green-light);}
.cmp-row{display:flex; align-items:flex-start; gap:12px; padding:13px 0; font-size:.96rem; line-height:1.5; position:relative;}
.cmp-row + .cmp-row{border-top:1px solid rgba(128,128,128,.12);}
.cmp-them .cmp-row{color:var(--text-sub);}
.cmp-us .cmp-row{color:rgba(255,255,255,.88);}
.cmp-row .ci{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.cmp-them .ci{background:rgba(211,47,47,.08);}
.cmp-them .ci svg{width:13px;height:13px;stroke:#D32F2F;fill:none;stroke-width:2.6;}
.cmp-us .ci{background:rgba(74,155,50,.2);}
.cmp-us .ci svg{width:13px;height:13px;stroke:var(--green-light);fill:none;stroke-width:2.6;}

/* trust signals strip */
.why-trust{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 40px; margin-top:48px;
    padding-top:40px; border-top:1px solid rgba(0,0,0,.07);}
.why-trust .ts{display:flex; align-items:center; gap:11px; color:var(--text-sub); font-weight:600; font-size:.95rem;}
.why-trust .ts svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.9;}

/* partnership pillars — what you get */
.why-pillars-head{margin:72px 0 30px; text-align:start;}
.why-pillars-head h3{font-family:var(--font-heading); font-size:clamp(1.5rem,2.7vw,1.95rem); font-weight:800; color:var(--navy); letter-spacing:-.5px; line-height:1.2;}
.why-pillars-head p{color:var(--text-sub); margin-top:10px; font-size:1.05rem; line-height:1.6; max-width:640px;}
.why-pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.pillar{position:relative; background:var(--white); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius-lg); padding:32px 26px; text-align:start; overflow:hidden; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s;}
.pillar::after{content:''; position:absolute; inset:auto 0 0 0; height:3px; background:var(--accent,linear-gradient(90deg,var(--blue),var(--green))); transform:scaleX(0); transform-origin:inline-start; transition:transform .4s;}
.pillar:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(0,0,0,.04);}
.pillar:hover::after{transform:scaleX(1);}
.pillar .p-ic{width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:0 8px 20px -8px rgba(10,22,40,.4); transition:transform .35s;}
.pillar:hover .p-ic{transform:scale(1.08) rotate(-3deg);}
.pillar .p-ic svg{width:27px; height:27px; stroke:#fff; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.pillar .p-eyebrow{font-family:var(--font-body); font-size:.76rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:9px;}
.pillar h4{font-family:var(--font-heading); font-size:1.18rem; font-weight:800; color:var(--navy); margin-bottom:9px; letter-spacing:-.3px; line-height:1.28;}
.pillar p{font-size:.9rem; color:var(--text-sub); line-height:1.62;}
.pillar.s1 .p-ic{background:linear-gradient(135deg,#1A56A0,#3186D6);} .pillar.s1 .p-eyebrow{color:#1A56A0;} .pillar.s1{--accent:linear-gradient(90deg,#1A56A0,#3186D6);}
.pillar.s2 .p-ic{background:linear-gradient(135deg,#2D6A1F,#49A632);} .pillar.s2 .p-eyebrow{color:#2D6A1F;} .pillar.s2{--accent:linear-gradient(90deg,#2D6A1F,#49A632);}
.pillar.s3 .p-ic{background:linear-gradient(135deg,#1A56A0,#37A6C4);} .pillar.s3 .p-eyebrow{color:#1577A0;} .pillar.s3{--accent:linear-gradient(90deg,#1A56A0,#37A6C4);}
.pillar.s4 .p-ic{background:linear-gradient(135deg,#0A1628,#1A56A0);} .pillar.s4 .p-eyebrow{color:#0A1628;} .pillar.s4{--accent:linear-gradient(90deg,#0A1628,#1A56A0);}

/* partner CTA strip */
.why-join{margin-top:56px; background:linear-gradient(120deg,var(--navy),var(--navy-mid,#13243d)); border-radius:var(--radius-xl); padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; position:relative; overflow:hidden;}
.why-join::before{content:''; position:absolute; top:-80px; inset-inline-end:-60px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(73,166,50,.18),transparent 65%);}
.why-join .wj-txt{position:relative; z-index:2; text-align:start;}
.why-join h3{font-family:var(--font-heading); font-size:clamp(1.4rem,2.4vw,1.7rem); font-weight:800; color:#fff; letter-spacing:-.4px; margin-bottom:8px;}
.why-join p{color:rgba(255,255,255,.7); font-size:1.02rem; line-height:1.55; max-width:560px;}
.why-join .wj-cta{position:relative; z-index:2; display:flex; gap:12px; flex-wrap:wrap;}
@media(max-width:980px){.why-pillars{grid-template-columns:repeat(2,1fr);} .why-join{padding:32px 28px;}}
@media(max-width:560px){.why-pillars{grid-template-columns:1fr;}}

@media(max-width:980px){
    .why-metrics{grid-template-columns:repeat(2,1fr);}
    .why-compare{grid-template-columns:1fr;}
}
@media(max-width:560px){.why-metrics{grid-template-columns:1fr;}}

/* ---------- INDUSTRIES ---------- */
.industries{background:var(--white);}
.ind-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.ind-card{position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:40px 30px; min-height:200px;
    display:flex; flex-direction:column; justify-content:flex-start; color:#fff; isolation:isolate;}
.ind-card::before{content:''; position:absolute; inset:0; z-index:-2;}
.ind-card.def::before{background:linear-gradient(135deg,#16304f,#1A56A0);}
.ind-card.med::before{background:linear-gradient(135deg,#173e2a,#2D6A1F);}
.ind-card.ret::before{background:linear-gradient(135deg,#1c2b4a,#3B82C4);}
.ind-card::after{content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px); background-size:22px 22px;
    transition:opacity .4s;}
.ind-card:hover::after{opacity:.9;}
.ind-card .ic{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.ind-card .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.7;}
.ind-card h3{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;margin:20px 0 6px;}
.ind-card p{font-size:.9rem;color:rgba(255,255,255,.8);line-height:1.6;}

/* ---------- TESTIMONIALS ---------- */
.tst{background:var(--warm-100);}
.tst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}

/* ---------- CTA BAND ---------- */
.cta-final{position:relative; overflow:hidden; background:var(--navy); padding:100px 0; text-align:center;}
.cta-final .cta-bg{position:absolute; inset:0; opacity:.9;
    background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(26,86,160,.4), transparent 70%),
               radial-gradient(ellipse 50% 70% at 80% 100%, rgba(45,106,31,.25), transparent 70%);}
.cta-final .inner{position:relative; z-index:2; max-width:680px; margin:0 auto;}
.cta-final h2{font-family:var(--font-heading); font-size:clamp(2rem,5vw,3rem); font-weight:800; color:#fff; letter-spacing:-1px; margin-bottom:14px;}
.cta-final p{font-size:1.15rem; color:rgba(255,255,255,.6); margin-bottom:34px;}
.cta-final .row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.cta-phone{display:inline-flex; align-items:center; gap:10px; margin-top:26px; color:rgba(255,255,255,.55); font-size:.95rem;}
.cta-phone b{color:#fff; font-family:var(--font-data); font-size:1.15rem;}

/* cursor glow (hero) */
.cursor-glow{position:fixed; width:380px; height:380px; border-radius:50%; pointer-events:none; z-index:1;
    background:radial-gradient(circle, rgba(59,130,196,.10), transparent 65%); transform:translate(-50%,-50%);
    opacity:0; transition:opacity .4s; mix-blend-mode:screen;}

/* ---------- CAREERS ---------- */
.careers{background:var(--warm-100); position:relative; overflow:hidden;}
.careers-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;}
.careers-text .section-subtitle{margin-bottom:24px;}
.careers-perks{display:flex; flex-direction:column; gap:12px; margin-bottom:30px;}
.careers-perk{display:flex; align-items:center; gap:12px; font-size:.98rem; color:var(--text-main); font-weight:500;}
.careers-perk svg{width:20px; height:20px; stroke:var(--green); fill:none; stroke-width:2.2; flex-shrink:0;}
.careers-visual{position:relative; background:var(--navy); border-radius:20px; padding:40px 34px; overflow:hidden;}
.careers-visual::before{content:''; position:absolute; top:-60px; left:-40px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(244,122,31,.18), transparent 65%);}
.careers-visual h3{font-family:var(--font-heading); font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:10px; position:relative;}
.careers-visual p{font-size:1rem; color:rgba(255,255,255,.6); line-height:1.7; margin-bottom:26px; position:relative;}
.careers-roles{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; position:relative;}
.careers-roles span{font-size:.82rem; font-weight:600; color:#FF9A4D; background:rgba(244,122,31,.1); border:1px solid rgba(244,122,31,.2); padding:7px 14px; border-radius:var(--radius-full);}
.careers-visual .btn{position:relative;}
@media(max-width:860px){.careers-wrap{grid-template-columns:1fr; gap:32px;}}

/* ---------- CLIENT AREA ---------- */
.client-area{background:var(--navy); position:relative; overflow:hidden;}
.client-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; z-index:2;}
.client-card{display:flex; flex-direction:column; align-items:flex-start; gap:14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px;
    padding:26px 22px; text-decoration:none; transition:all .3s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden;}
.client-card::after{content:''; position:absolute; inset:0; border-radius:16px; padding:1px;
    background:linear-gradient(135deg, rgba(244,122,31,.5), transparent 55%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s;}
.client-card:hover{background:rgba(255,255,255,.07); transform:translateY(-5px); box-shadow:0 14px 40px rgba(0,0,0,.3);}
.client-card:hover::after{opacity:1;}
.client-ic{width:50px; height:50px; border-radius:13px; background:rgba(244,122,31,.12); display:flex; align-items:center; justify-content:center; transition:all .3s;}
.client-card:hover .client-ic{background:rgba(244,122,31,.22); transform:scale(1.06);}
.client-ic svg{width:24px; height:24px; stroke:#FF9A4D; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.client-card h3{font-family:var(--font-heading); font-size:1.05rem; font-weight:700; color:#fff; margin:0;}
.client-card p{font-size:.84rem; color:rgba(255,255,255,.5); line-height:1.5; margin:0;}
.client-card .go{margin-top:auto; font-size:.82rem; font-weight:600; color:#FF9A4D; display:inline-flex; align-items:center; gap:6px;}
.client-card .go svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .25s;}
.client-card:hover .go svg{transform:translateX(-4px);}
@media(max-width:980px){.client-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.client-grid{grid-template-columns:1fr;}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
    .hero{padding-top:120px;}
    .hero-grid{grid-template-columns:1fr; gap:54px; max-width:560px;}
    .hero-grid .hero-inner{text-align:center;}
    .hero-grid .hero-cta{justify-content:center;}
    .hero-grid .hero-trust-mini{justify-content:center;}
    .hero-grid .hero-sub{margin:0 auto 34px;}
    .ops{order:2;}
}
@media(max-width:1024px){
    .bento{grid-template-columns:repeat(2,1fr);}
    .core-wrap{grid-template-columns:1fr; gap:24px;}
    .core-stage{order:2;}
    .stats-grid{grid-template-columns:repeat(2,1fr); gap:40px 24px;}
    .stepper{grid-template-columns:repeat(2,1fr); gap:40px 24px;}
    .stepper-line{display:none;}
    .why-grid{grid-template-columns:1fr;}
    .ind-row{grid-template-columns:1fr;}
    .tst-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
    .hero-strip{grid-template-columns:repeat(2,1fr);}
    .bento{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .stepper{grid-template-columns:1fr;}
    .why-mini{grid-template-columns:1fr;}
    .core-stage{height:380px;}
    .cursor-glow{display:none;}
    .sec-head{text-align:start;}
    /* --- Mobile animation reduction --- */
    .hero-blob.b3{display:none;}
    .hero-scan{display:none;}
    .ops-chip{display:none;}
    /* --- NOC widget: reserve space to prevent CLS --- */
    .ops{min-height:480px;}
}