/* ============================================================
   MAGNUS SOURCING — Shared Design System
   Used by all interior pages. Mirrors approved home-2 styling.
   Last updated: 2026-05-16
   ============================================================ */

:root{
  --navy:#23366D;
  --navy-dark:#1a2854;
  --teal:#3F5FAB;
  --teal-dark:#2d4a8f;
  --teal-light:#E8ECF7;
  --soft:#7085BF;
  --gold:#F26724;
  --gold-dark:#d8551a;
  --gold-light:#FFE4D6;
  --text:#23366D;
  --muted:#6b7c93;
  --paper:#fbfaf6;
  --border:#e0e6f0;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#fff;color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.serif{font-family:'Playfair Display',serif}

/* ===== TOP BAR ===== */
.top-bar{background:var(--navy);color:#fff;font-size:13px;padding:9px 0}
.top-bar-container{max-width:1320px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;align-items:center}
.top-bar-left{display:flex;gap:28px;align-items:center}
.top-bar-left a{display:flex;align-items:center;gap:7px;color:#c7d4e3;transition:color .2s}
.top-bar-left a:hover{color:#fff}
.top-bar-left svg{width:13px;height:13px;stroke-width:2}
.top-bar-right{display:flex;gap:22px;align-items:center}
.top-bar-right a{color:#c7d4e3;font-size:12.5px;font-weight:500;letter-spacing:.3px;transition:color .2s}
.top-bar-right a:hover{color:#fff}
.divider{width:1px;height:14px;background:rgba(255,255,255,.15)}
.certified-badge{display:flex;align-items:center;gap:6px;background:rgba(242,103,36,.18);border:1px solid rgba(242,103,36,.4);padding:3px 10px;border-radius:50px;font-size:11.5px;color:#FFE4D6!important;font-weight:600;letter-spacing:.4px}

/* ===== NAVBAR ===== */
.navbar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;transition:box-shadow .3s}
.navbar.scrolled{box-shadow:0 6px 24px rgba(35,54,109,.08)}
.nav-container{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 40px}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--navy) 0%,var(--teal) 100%);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:22px;letter-spacing:-1px;box-shadow:0 4px 14px rgba(35,54,109,.18)}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-name{font-size:19px;font-weight:700;letter-spacing:-.4px;color:var(--navy)}
.logo-tagline{font-size:10px;color:var(--teal);letter-spacing:1.6px;text-transform:uppercase;margin-top:2px;font-weight:600}
.nav-menu{display:flex;align-items:center;list-style:none;gap:2px}
.nav-menu > li > a{color:#2c3e50;font-size:14px;font-weight:500;padding:10px 13px;border-radius:6px;transition:all .2s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nav-menu > li > a:hover,.nav-menu > li > a.active{color:var(--teal)}
.nav-menu > li > a.active{font-weight:600;position:relative}
.nav-menu > li > a.active::after{content:'';position:absolute;bottom:2px;left:13px;right:13px;height:2px;background:var(--teal);border-radius:2px}
.cta-btn{background:var(--gold)!important;color:#fff!important;font-weight:600!important;padding:9px 16px!important;border-radius:6px!important;margin-left:10px;font-size:13.5px!important;box-shadow:0 4px 12px rgba(242,103,36,.3);transition:all .25s!important;display:inline-flex!important;align-items:center;gap:4px;white-space:nowrap}

/* ===== DROPDOWN SUB-MENU ===== */
.nav-menu > li{position:relative}
.caret{width:10px;height:10px;transition:transform .25s;stroke-width:2.5}
.nav-menu > li:hover > a .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:280px;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(35,54,109,.14),0 0 0 1px rgba(35,54,109,.04);padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .25s;z-index:100;list-style:none}
.nav-menu > li:hover > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown.mega{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dropdown li a{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:8px;color:#2c3e50;transition:all .18s;text-decoration:none}
.dropdown li a:hover{background:var(--teal-light);color:var(--teal)}
.d-icon{width:34px;height:34px;background:var(--teal-light);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--teal);transition:all .18s}
.dropdown li a:hover .d-icon{background:var(--teal);color:#fff}
.d-icon svg{width:18px;height:18px;stroke-width:2}
.d-text{display:flex;flex-direction:column;line-height:1.3;text-align:left}
.d-title{font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:2px;white-space:nowrap}
.dropdown li a:hover .d-title{color:var(--teal)}
.d-desc{font-size:11.5px;color:var(--muted);font-weight:400}
@media(max-width:900px){
  .dropdown,.dropdown.mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:var(--paper);margin:6px 0;display:none!important;min-width:100%;padding:6px;grid-template-columns:1fr}
  .nav-menu > li.open > .dropdown,.nav-menu > li.open > .dropdown.mega{display:block!important}
}
.cta-btn:hover{background:var(--gold-dark)!important;transform:translateY(-1px);box-shadow:0 6px 20px rgba(242,103,36,.5)}
.cta-btn::after{display:none!important}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.mobile-toggle span{display:block;width:26px;height:2px;background:var(--navy);transition:all .3s;border-radius:2px}

/* ===== PAGE HERO (used by interior pages) ===== */
.page-hero{background:linear-gradient(180deg,var(--teal-light) 0%,#fff 100%);padding:70px 0 90px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-150px;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(63,95,171,.1) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.page-hero-container{max-width:1320px;margin:0 auto;padding:0 40px;position:relative;z-index:1}

/* Split hero with right-side visual */
.page-hero.split .page-hero-container{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.page-hero.split.reverse .page-hero-container{grid-template-columns:1fr 1.15fr}
.page-hero.split.reverse .hero-visual{justify-self:start;order:-1}

/* Compact hero (smaller padding + text) */
.page-hero.compact{padding:36px 0 30px}
.page-hero.compact h1{font-size:44px;margin-bottom:14px}
.page-hero.compact .lede{font-size:17px;max-width:620px;margin-bottom:0}
.page-hero.compact .hero-eyebrow{margin-bottom:16px}
.page-hero.compact + .section{padding-top:40px}

/* Centered hero (visual on top, text below, both centered) */
.page-hero.center{padding:50px 0 80px;text-align:center}
.page-hero.center .page-hero-container{display:flex;flex-direction:column;align-items:center}
.page-hero.center .hero-visual{margin:0 auto 50px;justify-self:center;max-width:520px}
.page-hero.center .hero-text{max-width:820px;display:flex;flex-direction:column;align-items:center}
.page-hero.center .breadcrumb{justify-content:center;display:flex;flex-wrap:wrap}
.page-hero.center .hero-eyebrow{margin-left:auto;margin-right:auto}
.page-hero.center h1{max-width:820px}
.page-hero.center .lede{margin-left:auto;margin-right:auto;text-align:center}
.page-hero.center .hero-ctas{justify-content:center}
.hero-visual{position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:end;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,var(--navy) 0%,var(--teal) 100%);box-shadow:0 30px 80px rgba(35,54,109,.25)}
.hero-visual::before{content:'';position:absolute;inset:-50%;background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(242,103,36,.35) 60deg,transparent 120deg,rgba(255,255,255,.15) 240deg,transparent 300deg);animation:hvRotate 10s linear infinite;z-index:1}
.hero-visual::after{content:'';position:absolute;inset:8px;background:linear-gradient(135deg,var(--navy) 0%,var(--teal) 100%);border-radius:18px;z-index:1}
.hv-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;color:rgba(255,255,255,.9);animation:hvFloat 4s ease-in-out infinite}
.hv-icon svg{width:140px;height:140px;stroke-width:1.2;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}
.hv-badge{position:absolute;top:24px;right:24px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);padding:12px 18px;border-radius:14px;display:flex;flex-direction:column;align-items:center;z-index:4;box-shadow:0 8px 24px rgba(0,0,0,.15);animation:hvFloat 3s ease-in-out infinite}
.hv-badge-num{font-size:22px;font-weight:800;color:var(--navy);font-family:'Playfair Display',serif;letter-spacing:-.5px;line-height:1}
.hv-badge-num span{color:var(--gold)}
.hv-badge-text{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-top:4px;text-align:center}
.hv-tag-top{position:absolute;top:24px;left:24px;background:var(--gold);color:#fff;font-size:10.5px;font-weight:800;padding:5px 12px;border-radius:50px;letter-spacing:1px;text-transform:uppercase;z-index:4;animation:hvPulse 2s ease-in-out infinite}
.hv-stats{position:absolute;bottom:20px;left:20px;right:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;z-index:4}
.hv-stat{background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 6px;text-align:center;transition:background .3s}
.hv-stat:hover{background:rgba(242,103,36,.2)}
.hv-stat-num{font-size:18px;font-weight:800;color:var(--gold);font-family:'Playfair Display',serif;letter-spacing:-.3px;line-height:1}
.hv-stat-label{font-size:9.5px;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.5px;margin-top:3px;font-weight:600}
.hv-dot{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);z-index:2}
.hv-dot:nth-of-type(1){width:8px;height:8px;top:18%;left:20%;animation:hvPulse 2.2s ease-in-out infinite}
.hv-dot:nth-of-type(2){width:6px;height:6px;top:35%;right:22%;animation:hvPulse 2.6s ease-in-out infinite .4s}
.hv-dot:nth-of-type(3){width:5px;height:5px;bottom:38%;left:25%;animation:hvPulse 3s ease-in-out infinite .8s}
.hv-dot:nth-of-type(4){width:7px;height:7px;bottom:30%;right:18%;animation:hvPulse 2.4s ease-in-out infinite 1.2s}

@keyframes hvRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hvPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}

/* ===== UNIQUE HERO SCENES (per page) ===== */
/* Common scene base */
.hv-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3}
.hv-scene svg{width:78%;height:78%;overflow:visible}

/* Scene 1: PULSE RINGS — Investment Casting (concentric ceramic shells) */
.hv-rings circle{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.5;transform-origin:center;animation:ringExpand 3s ease-out infinite}
.hv-rings circle:nth-child(1){animation-delay:0s;stroke:rgba(242,103,36,.95);stroke-width:2}
.hv-rings circle:nth-child(2){animation-delay:.6s;stroke:rgba(255,255,255,.7)}
.hv-rings circle:nth-child(3){animation-delay:1.2s;stroke:rgba(255,255,255,.5)}
.hv-rings circle:nth-child(4){animation-delay:1.8s;stroke:rgba(255,255,255,.3)}
.hv-rings .center{animation:none;fill:rgba(242,103,36,.9);stroke:none}
@keyframes ringExpand{0%{r:20;opacity:1}100%{r:160;opacity:0}}

/* Scene 2: PRESS BARS — Die Casting (vertical pistons) */
.hv-press{display:flex;gap:18px;align-items:flex-end;justify-content:center;width:80%;height:70%}
.hv-press .bar{width:14%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(242,103,36,.7));border-radius:4px 4px 0 0;animation:pressMove 2s ease-in-out infinite;transform-origin:bottom}
.hv-press .bar:nth-child(1){animation-delay:0s;height:60%}
.hv-press .bar:nth-child(2){animation-delay:.15s;height:80%}
.hv-press .bar:nth-child(3){animation-delay:.3s;height:50%}
.hv-press .bar:nth-child(4){animation-delay:.45s;height:90%}
.hv-press .bar:nth-child(5){animation-delay:.6s;height:70%}
.hv-press .bar:nth-child(6){animation-delay:.75s;height:55%}
@keyframes pressMove{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}

/* Scene 3: STRIKE SPARK — Forging (hammer + impact) */
.hv-strike{position:relative;width:80%;height:80%}
.hv-strike .hammer{position:absolute;left:50%;top:5%;width:80px;height:120px;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 100%);border-radius:10px;transform:translateX(-50%);animation:hammerStrike 1.6s ease-in-out infinite;transform-origin:bottom}
.hv-strike .anvil{position:absolute;bottom:10%;left:50%;width:140px;height:40px;background:rgba(255,255,255,.85);border-radius:6px;transform:translateX(-50%)}
.hv-strike .spark{position:absolute;bottom:30%;left:50%;width:6px;height:6px;background:var(--gold);border-radius:50%;animation:sparkFly 1.6s ease-out infinite}
.hv-strike .spark:nth-of-type(1){animation-delay:.6s;--tx:-80px;--ty:-30px}
.hv-strike .spark:nth-of-type(2){animation-delay:.6s;--tx:80px;--ty:-40px}
.hv-strike .spark:nth-of-type(3){animation-delay:.6s;--tx:-50px;--ty:-60px}
.hv-strike .spark:nth-of-type(4){animation-delay:.6s;--tx:60px;--ty:-50px}
@keyframes hammerStrike{0%,40%{transform:translateX(-50%) translateY(-30px) rotate(-15deg)}50%,55%{transform:translateX(-50%) translateY(0) rotate(0)}65%,100%{transform:translateX(-50%) translateY(-30px) rotate(-15deg)}}
@keyframes sparkFly{0%,55%{transform:translate(-50%,-50%);opacity:0}60%{opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty)));opacity:0}}

/* Scene 4: GRID PRECISION — CNC Machining (3-axis grid + moving point) */
.hv-grid{position:relative;width:80%;height:80%;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:14% 14%;border:2px solid rgba(255,255,255,.3);border-radius:8px}
.hv-grid::before{content:'';position:absolute;width:14px;height:14px;background:var(--gold);border-radius:50%;box-shadow:0 0 24px var(--gold);top:10%;left:10%;animation:cncPath 8s ease-in-out infinite}
.hv-grid::after{content:'';position:absolute;width:24px;height:24px;border:2px solid rgba(242,103,36,.6);border-radius:50%;top:10%;left:10%;animation:cncPath 8s ease-in-out infinite;animation-delay:.2s}
@keyframes cncPath{0%{top:10%;left:10%}25%{top:10%;left:80%}50%{top:80%;left:80%}75%{top:80%;left:10%}100%{top:10%;left:10%}}

/* Scene 5: FOLD ORIGAMI — Sheet Metal (folding paper) */
.hv-fold{position:relative;width:70%;height:70%}
.hv-fold .panel{position:absolute;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.4));transform-origin:left center;animation:foldFlap 3s ease-in-out infinite}
.hv-fold .p1{top:30%;left:0;width:50%;height:40%;border-radius:4px 0 0 4px;animation-delay:0s}
.hv-fold .p2{top:30%;left:50%;width:50%;height:40%;border-radius:0 4px 4px 0;transform-origin:left center;animation:foldFlap2 3s ease-in-out infinite;background:linear-gradient(135deg,rgba(242,103,36,.7),rgba(242,103,36,.4))}
@keyframes foldFlap{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(-25deg)}}
@keyframes foldFlap2{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(35deg)}}

/* Scene 6: ORBIT ASSEMBLY — Assemblies (parts converging) */
.hv-orbit{position:relative;width:80%;height:80%;display:flex;align-items:center;justify-content:center}
.hv-orbit .core{width:60px;height:60px;background:var(--gold);border-radius:50%;box-shadow:0 0 40px rgba(242,103,36,.6);position:relative;z-index:2}
.hv-orbit .piece{position:absolute;width:32px;height:32px;background:rgba(255,255,255,.9);border-radius:6px;animation:orbitIn 4s ease-in-out infinite;top:50%;left:50%}
.hv-orbit .piece:nth-child(2){animation-delay:0s;--angle:0deg}
.hv-orbit .piece:nth-child(3){animation-delay:.5s;--angle:60deg}
.hv-orbit .piece:nth-child(4){animation-delay:1s;--angle:120deg}
.hv-orbit .piece:nth-child(5){animation-delay:1.5s;--angle:180deg}
.hv-orbit .piece:nth-child(6){animation-delay:2s;--angle:240deg}
.hv-orbit .piece:nth-child(7){animation-delay:2.5s;--angle:300deg}
@keyframes orbitIn{0%{transform:translate(-50%,-50%) rotate(var(--angle)) translateX(140px) rotate(calc(-1*var(--angle)));opacity:0}50%{opacity:1}100%{transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) rotate(calc(-1*var(--angle)));opacity:0}}

/* Scene 7: LIQUID FLOW — Plastic Injection (filling mold) */
.hv-flow{position:relative;width:75%;height:75%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.3);border-radius:18px;overflow:hidden}
.hv-flow::before{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(242,103,36,.9),rgba(242,103,36,.6));animation:liquidFill 4s ease-in-out infinite}
.hv-flow::after{content:'';position:absolute;left:50%;top:-10px;width:20px;height:30px;background:rgba(242,103,36,.9);border-radius:0 0 50% 50%;transform:translateX(-50%);animation:dropFall 1s ease-in infinite}
@keyframes liquidFill{0%,100%{height:30%}50%{height:75%}}
@keyframes dropFall{0%{transform:translateX(-50%) translateY(0);opacity:1}100%{transform:translateX(-50%) translateY(50px);opacity:0}}

/* Scene 8: STRETCH BLOB — Rubber & Silicone (elastic shape) */
.hv-blob{position:relative;width:60%;height:60%}
.hv-blob svg{width:100%;height:100%;animation:blobMorph 6s ease-in-out infinite}
@keyframes blobMorph{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.05,.95) rotate(8deg)}50%{transform:scale(.9,1.1) rotate(-6deg)}75%{transform:scale(1.08,.92) rotate(4deg)}}

/* Scene 9: 4-QUADRANT — Services Hub */
.hv-quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;width:75%;height:75%}
.hv-quad .q{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:14px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);animation:quadPulse 3s ease-in-out infinite}
.hv-quad .q:nth-child(1){animation-delay:0s}
.hv-quad .q:nth-child(2){animation-delay:.4s;background:rgba(242,103,36,.25);border-color:rgba(242,103,36,.4)}
.hv-quad .q:nth-child(3){animation-delay:.8s;background:rgba(242,103,36,.25);border-color:rgba(242,103,36,.4)}
.hv-quad .q:nth-child(4){animation-delay:1.2s}
.hv-quad .q svg{width:40%;height:40%;stroke-width:2}
@keyframes quadPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Scene 10: GLOBE PINS — Global Sourcing */
.hv-globe{position:relative;width:78%;height:78%}
.hv-globe .ring{position:absolute;inset:0;border:2px solid rgba(255,255,255,.3);border-radius:50%;animation:globeRotate 12s linear infinite}
.hv-globe .ring:nth-child(1){transform:rotateX(60deg)}
.hv-globe .ring:nth-child(2){transform:rotateY(60deg);border-color:rgba(242,103,36,.4)}
.hv-globe .ring:nth-child(3){transform:rotateZ(45deg)}
.hv-globe .pin{position:absolute;width:14px;height:14px;background:var(--gold);border-radius:50%;box-shadow:0 0 16px rgba(242,103,36,.8);animation:pinPulse 2s ease-in-out infinite}
.hv-globe .pin:nth-child(4){top:20%;left:25%;animation-delay:0s}
.hv-globe .pin:nth-child(5){top:35%;right:20%;animation-delay:.4s}
.hv-globe .pin:nth-child(6){bottom:25%;left:30%;animation-delay:.8s}
.hv-globe .pin:nth-child(7){bottom:30%;right:25%;animation-delay:1.2s}
.hv-globe .pin:nth-child(8){top:50%;left:48%;animation-delay:1.6s}
@keyframes globeRotate{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes pinPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.4);opacity:1}}

/* Scene 11: CHECK LIST — Quality Audits */
.hv-check{display:flex;flex-direction:column;gap:14px;width:65%}
.hv-check .row{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border-radius:10px;padding:14px 18px;animation:checkSlide .6s ease-out backwards}
.hv-check .row:nth-child(1){animation-delay:.2s}
.hv-check .row:nth-child(2){animation-delay:.7s}
.hv-check .row:nth-child(3){animation-delay:1.2s}
.hv-check .row:nth-child(4){animation-delay:1.7s}
.hv-check .check{width:24px;height:24px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;animation:checkPop .4s ease-out backwards}
.hv-check .row:nth-child(1) .check{animation-delay:.5s}
.hv-check .row:nth-child(2) .check{animation-delay:1s}
.hv-check .row:nth-child(3) .check{animation-delay:1.5s}
.hv-check .row:nth-child(4) .check{animation-delay:2s}
.hv-check .check svg{width:14px;height:14px;stroke-width:3}
.hv-check .line{flex:1;height:8px;background:rgba(255,255,255,.3);border-radius:4px}
@keyframes checkSlide{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes checkPop{from{transform:scale(0)}to{transform:scale(1)}}

/* Scene 12: ROUTE PATH — Logistics */
.hv-route{position:relative;width:80%;height:75%}
.hv-route svg{width:100%;height:100%}
.hv-route .path-line{stroke:rgba(255,255,255,.4);stroke-width:3;fill:none;stroke-dasharray:6 6}
.hv-route .path-active{stroke:var(--gold);stroke-width:4;fill:none;stroke-dasharray:240;stroke-dashoffset:240;animation:routeDraw 4s ease-in-out infinite}
.hv-route .stop{fill:rgba(255,255,255,.9);animation:stopPulse 2s ease-in-out infinite}
.hv-route .truck{font-size:32px;animation:truckMove 4s ease-in-out infinite}
@keyframes routeDraw{0%{stroke-dashoffset:240}50%,100%{stroke-dashoffset:0}}
@keyframes stopPulse{0%,100%{r:6}50%{r:9}}

/* Scene 13: FACTORY — Contract Manufacturing */
.hv-factory{position:relative;width:80%;height:80%;display:flex;align-items:flex-end;justify-content:center;gap:10px}
.hv-factory .building{background:rgba(255,255,255,.85);border-radius:6px 6px 0 0;position:relative}
.hv-factory .b1{width:25%;height:60%}
.hv-factory .b2{width:30%;height:80%;background:rgba(255,255,255,.95)}
.hv-factory .b3{width:25%;height:50%}
.hv-factory .b2::before{content:'';position:absolute;top:-30px;left:50%;width:14px;height:30px;background:rgba(255,255,255,.95);border-radius:3px;transform:translateX(-50%)}
.hv-factory .smoke{position:absolute;top:-50px;left:50%;width:30px;height:30px;background:radial-gradient(circle,rgba(255,255,255,.6),transparent 70%);border-radius:50%;transform:translateX(-50%);animation:smokeRise 3s ease-in infinite}
.hv-factory .smoke:nth-of-type(2){animation-delay:1s}
.hv-factory .smoke:nth-of-type(3){animation-delay:2s}
.hv-factory .window{position:absolute;width:8px;height:8px;background:var(--gold);border-radius:1px}
.hv-factory .building .window:nth-of-type(1){top:30%;left:25%}
.hv-factory .building .window:nth-of-type(2){top:30%;right:25%}
.hv-factory .building .window:nth-of-type(3){top:60%;left:25%}
.hv-factory .building .window:nth-of-type(4){top:60%;right:25%}
@keyframes smokeRise{0%{transform:translateX(-50%) translateY(0) scale(1);opacity:.6}100%{transform:translateX(-50%) translateY(-80px) scale(2);opacity:0}}
@keyframes truckMove{0%,100%{transform:translateX(0)}50%{transform:translateX(40px)}}

/* ===== SECTOR SCENES (14-20) ===== */
/* Scene 14: 6-GRID — Sectors Hub */
.hv-grid6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;width:84%;height:78%}
.hv-grid6 .q{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);animation:quadPulse 3.5s ease-in-out infinite}
.hv-grid6 .q:nth-child(2),.hv-grid6 .q:nth-child(4),.hv-grid6 .q:nth-child(6){background:rgba(242,103,36,.22);border-color:rgba(242,103,36,.4)}
.hv-grid6 .q:nth-child(1){animation-delay:0s}
.hv-grid6 .q:nth-child(2){animation-delay:.3s}
.hv-grid6 .q:nth-child(3){animation-delay:.6s}
.hv-grid6 .q:nth-child(4){animation-delay:.9s}
.hv-grid6 .q:nth-child(5){animation-delay:1.2s}
.hv-grid6 .q:nth-child(6){animation-delay:1.5s}
.hv-grid6 .q svg{width:42%;height:42%;stroke-width:2}

/* Scene 15: CAR DRIVE — Automotive */
.hv-car{position:relative;width:80%;height:60%}
.hv-car .body{position:absolute;bottom:25%;left:50%;width:75%;height:50%;background:rgba(255,255,255,.9);border-radius:24px 24px 8px 8px;transform:translateX(-50%);animation:carBob 1.5s ease-in-out infinite}
.hv-car .body::before{content:'';position:absolute;top:18%;left:18%;right:18%;height:50%;background:rgba(242,103,36,.4);border-radius:14px 14px 4px 4px}
.hv-car .wheel{position:absolute;width:38px;height:38px;background:rgba(35,54,109,.9);border:5px solid rgba(255,255,255,.9);border-radius:50%;bottom:15%;animation:wheelSpin 1s linear infinite}
.hv-car .wheel.left{left:18%}
.hv-car .wheel.right{right:18%}
.hv-car .road{position:absolute;bottom:0;left:0;right:0;height:6px;background:rgba(255,255,255,.4);border-radius:3px}
.hv-car .road::before{content:'';position:absolute;top:-10px;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 20px,transparent 20px 40px);animation:roadMove 1s linear infinite}
@keyframes carBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
@keyframes wheelSpin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes roadMove{from{background-position:0 0}to{background-position:-40px 0}}

/* Scene 16: SPINNING GEARS — Industrial Machinery */
.hv-gears{position:relative;width:80%;height:80%}
.hv-gears .gear{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9) 30%,rgba(255,255,255,.3) 31% 60%,rgba(255,255,255,.9) 61%);box-shadow:0 0 40px rgba(255,255,255,.15)}
.hv-gears .gear::before{content:'';position:absolute;inset:0;background:conic-gradient(rgba(255,255,255,.85) 0 30deg,transparent 30deg 45deg,rgba(255,255,255,.85) 45deg 75deg,transparent 75deg 90deg,rgba(255,255,255,.85) 90deg 120deg,transparent 120deg 135deg,rgba(255,255,255,.85) 135deg 165deg,transparent 165deg 180deg,rgba(255,255,255,.85) 180deg 210deg,transparent 210deg 225deg,rgba(255,255,255,.85) 225deg 255deg,transparent 255deg 270deg,rgba(255,255,255,.85) 270deg 300deg,transparent 300deg 315deg,rgba(255,255,255,.85) 315deg 345deg,transparent 345deg 360deg);border-radius:50%;mask:radial-gradient(circle,transparent 35%,#000 36%)}
.hv-gears .gear::after{content:'';position:absolute;inset:25%;background:linear-gradient(135deg,var(--navy),var(--teal));border-radius:50%}
.hv-gears .g1{width:140px;height:140px;top:15%;left:15%;animation:gearSpin 8s linear infinite}
.hv-gears .g2{width:100px;height:100px;bottom:18%;right:18%;animation:gearSpin 6s linear infinite reverse;background:radial-gradient(circle,rgba(242,103,36,.9) 30%,rgba(242,103,36,.3) 31% 60%,rgba(242,103,36,.9) 61%)}
.hv-gears .g2::after{background:linear-gradient(135deg,var(--navy),var(--teal))}
.hv-gears .g3{width:70px;height:70px;top:50%;left:50%;transform:translate(-50%,-50%);animation:gearSpin 5s linear infinite}
@keyframes gearSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hv-gears .g3{animation:gearSpinCenter 5s linear infinite}
@keyframes gearSpinCenter{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}

/* Scene 17: LIGHTNING CIRCUIT — Electrical & Electronics */
.hv-circuit{position:relative;width:80%;height:80%}
.hv-circuit svg{width:100%;height:100%}
.hv-circuit .bolt{fill:var(--gold);filter:drop-shadow(0 0 12px rgba(242,103,36,.8));animation:boltFlash 1.6s ease-in-out infinite}
.hv-circuit .trace{stroke:rgba(255,255,255,.7);stroke-width:2;fill:none;stroke-dasharray:100;stroke-dashoffset:100;animation:traceDraw 3s linear infinite}
.hv-circuit .trace:nth-of-type(2){animation-delay:.5s}
.hv-circuit .trace:nth-of-type(3){animation-delay:1s}
.hv-circuit .node{fill:rgba(255,255,255,.85);animation:nodePulse 2s ease-in-out infinite}
@keyframes boltFlash{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes traceDraw{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}
@keyframes nodePulse{0%,100%{r:4}50%{r:7}}

/* Scene 18: WHEAT FIELD — Agriculture & Construction */
.hv-field{position:relative;width:80%;height:75%}
.hv-field .sun{position:absolute;top:10%;right:15%;width:60px;height:60px;background:radial-gradient(circle,var(--gold) 30%,rgba(242,103,36,.4) 70%);border-radius:50%;box-shadow:0 0 40px rgba(242,103,36,.6);animation:sunGlow 3s ease-in-out infinite}
.hv-field .stalk{position:absolute;bottom:0;width:8px;background:linear-gradient(180deg,var(--gold) 0%,rgba(255,255,255,.7) 100%);border-radius:4px 4px 0 0;transform-origin:bottom center;animation:wheatSway 2.4s ease-in-out infinite}
.hv-field .stalk:nth-of-type(2){left:15%;height:55%;animation-delay:0s}
.hv-field .stalk:nth-of-type(3){left:28%;height:70%;animation-delay:.2s}
.hv-field .stalk:nth-of-type(4){left:42%;height:60%;animation-delay:.4s}
.hv-field .stalk:nth-of-type(5){left:55%;height:75%;animation-delay:.6s}
.hv-field .stalk:nth-of-type(6){left:68%;height:62%;animation-delay:.3s}
.hv-field .stalk:nth-of-type(7){left:80%;height:68%;animation-delay:.5s}
.hv-field .stalk::before{content:'';position:absolute;top:-12px;left:50%;width:24px;height:24px;background:var(--gold);border-radius:50% 50% 50% 0;transform:translateX(-50%) rotate(-45deg)}
.hv-field .ground{position:absolute;bottom:0;left:0;right:0;height:6px;background:rgba(255,255,255,.4);border-radius:3px}
@keyframes wheatSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes sunGlow{0%,100%{box-shadow:0 0 40px rgba(242,103,36,.6);transform:scale(1)}50%{box-shadow:0 0 60px rgba(242,103,36,.9);transform:scale(1.05)}}

/* Scene 19: PRODUCT BOXES — Consumer Products */
.hv-boxes{position:relative;width:75%;height:75%;display:flex;align-items:center;justify-content:center;gap:14px}
.hv-boxes .box{position:relative;width:24%;aspect-ratio:1;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.7));border-radius:8px;display:flex;align-items:center;justify-content:center;animation:boxBounce 2s ease-in-out infinite}
.hv-boxes .box::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--gold),var(--gold) 30%,transparent 31%,transparent 100%);border-radius:8px 8px 0 0}
.hv-boxes .box::after{content:'';position:absolute;top:15%;left:30%;width:40%;height:6px;background:rgba(35,54,109,.5);border-radius:3px;box-shadow:0 12px 0 rgba(35,54,109,.3),0 24px 0 rgba(35,54,109,.3)}
.hv-boxes .box:nth-child(1){animation-delay:0s}
.hv-boxes .box:nth-child(2){animation-delay:.25s;background:linear-gradient(135deg,rgba(242,103,36,.85),rgba(242,103,36,.5))}
.hv-boxes .box:nth-child(3){animation-delay:.5s}
.hv-boxes .box:nth-child(4){animation-delay:.75s;background:linear-gradient(135deg,rgba(242,103,36,.85),rgba(242,103,36,.5))}
@keyframes boxBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Scene 20: HEARTBEAT — Medical & Pharma */
.hv-pulse{position:relative;width:80%;height:60%;display:flex;align-items:center;justify-content:center}
.hv-pulse svg{width:100%;height:80%}
.hv-pulse .pulse-line{stroke:var(--gold);stroke-width:3;fill:none;stroke-dasharray:600;stroke-dashoffset:600;animation:pulseDraw 3s linear infinite;filter:drop-shadow(0 0 10px rgba(242,103,36,.7))}
.hv-pulse .baseline{stroke:rgba(255,255,255,.3);stroke-width:1.5;fill:none}
.hv-pulse .cross{position:absolute;width:60px;height:60px;background:rgba(255,255,255,.95);clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);box-shadow:0 0 24px rgba(255,255,255,.4);animation:crossPulse 2s ease-in-out infinite}
@keyframes pulseDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:-600}}
@keyframes crossPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:1}}

/* ===== STORY SCENES (21-24) ===== */

/* Scene 21: TIMELINE JOURNEY — Magnus Story hub */
.hv-timeline{position:relative;width:84%;height:60%;display:flex;align-items:center;justify-content:space-between}
.hv-timeline::before{content:'';position:absolute;top:50%;left:0;right:0;height:3px;background:rgba(255,255,255,.25);transform:translateY(-50%);border-radius:2px}
.hv-timeline::after{content:'';position:absolute;top:50%;left:0;height:4px;background:linear-gradient(90deg,var(--gold),rgba(242,103,36,.6));transform:translateY(-50%);border-radius:2px;animation:tlDraw 5s ease-out infinite;box-shadow:0 0 20px rgba(242,103,36,.6)}
.hv-timeline .tnode{position:relative;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.4);z-index:2;animation:tlNode 5s ease-out infinite}
.hv-timeline .tnode::after{content:attr(data-year);position:absolute;top:-32px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.5px;font-family:'Playfair Display',serif}
.hv-timeline .tnode:nth-of-type(1){animation-delay:0s}
.hv-timeline .tnode:nth-of-type(2){animation-delay:.7s}
.hv-timeline .tnode:nth-of-type(3){animation-delay:1.4s}
.hv-timeline .tnode:nth-of-type(4){animation-delay:2.1s}
.hv-timeline .tnode:nth-of-type(5){animation-delay:2.8s}
.hv-timeline .tnode:nth-of-type(6){animation-delay:3.5s}
.hv-timeline .tnode:last-child::before{content:'';position:absolute;inset:-8px;border:2px solid var(--gold);border-radius:50%;animation:tlPulseLast 1.5s ease-in-out infinite}
@keyframes tlDraw{0%{width:0}100%{width:100%}}
@keyframes tlNode{0%{background:rgba(255,255,255,.3);transform:scale(1)}50%{background:var(--gold);transform:scale(1.4);box-shadow:0 0 16px var(--gold)}100%{background:var(--gold);transform:scale(1)}}
@keyframes tlPulseLast{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.4);opacity:0}}

/* Scene 22: TEAM AVATARS — Leadership */
.hv-team{position:relative;width:80%;height:80%}
.hv-team .avatar{position:absolute;width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.6));display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:800;font-size:24px;font-family:'Playfair Display',serif;animation:avFloat 4s ease-in-out infinite;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.hv-team .avatar.gold{background:linear-gradient(135deg,var(--gold),rgba(242,103,36,.7));color:#fff}
.hv-team .a1{top:8%;left:14%;animation-delay:0s}
.hv-team .a2{top:14%;right:10%;animation-delay:.6s}
.hv-team .a3{top:46%;left:38%;animation-delay:1.2s;width:90px;height:90px;font-size:30px}
.hv-team .a4{bottom:18%;left:12%;animation-delay:1.8s}
.hv-team .a5{bottom:10%;right:14%;animation-delay:2.4s}
.hv-team .link{position:absolute;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform-origin:left center;opacity:.6;animation:linkFade 4s ease-in-out infinite}
.hv-team .l1{top:25%;left:25%;width:50%;transform:rotate(15deg);animation-delay:.2s}
.hv-team .l2{top:55%;left:20%;width:60%;transform:rotate(-10deg);animation-delay:1s}
.hv-team .l3{top:70%;left:25%;width:55%;transform:rotate(5deg);animation-delay:1.8s}
@keyframes avFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes linkFade{0%,100%{opacity:.2}50%{opacity:.7}}

/* Scene 23: GROWTH BARS — Why India */
.hv-growth{position:relative;width:80%;height:75%;display:flex;align-items:flex-end;gap:12px;padding:30px 20px 20px}
.hv-growth .gbar{flex:1;background:linear-gradient(180deg,var(--gold) 0%,rgba(242,103,36,.6) 100%);border-radius:6px 6px 0 0;animation:gbarRise 3s cubic-bezier(.4,0,.2,1) infinite;transform-origin:bottom;position:relative}
.hv-growth .gbar:nth-of-type(1){--h:30%;animation-delay:0s}
.hv-growth .gbar:nth-of-type(2){--h:45%;animation-delay:.15s}
.hv-growth .gbar:nth-of-type(3){--h:38%;animation-delay:.3s}
.hv-growth .gbar:nth-of-type(4){--h:55%;animation-delay:.45s}
.hv-growth .gbar:nth-of-type(5){--h:62%;animation-delay:.6s}
.hv-growth .gbar:nth-of-type(6){--h:75%;animation-delay:.75s}
.hv-growth .gbar:nth-of-type(7){--h:85%;animation-delay:.9s;background:linear-gradient(180deg,#fff 0%,var(--gold) 100%)}
.hv-growth .gbar:nth-of-type(8){--h:95%;animation-delay:1.05s;background:linear-gradient(180deg,#fff 0%,var(--gold) 100%)}
.hv-growth .arrow{position:absolute;top:18px;right:20px;font-size:32px;color:var(--gold);font-weight:800;animation:arrowRise 3s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(242,103,36,.6))}
.hv-growth .arrow::before{content:'↗';display:block;line-height:1}
.hv-growth .label{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(255,255,255,.6);letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
@keyframes gbarRise{0%{height:0;opacity:.3}100%{height:var(--h);opacity:1}}
@keyframes arrowRise{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(-12px);opacity:1}}

/* Scene 24: CERTIFICATION SEAL — Certifications */
.hv-seal{position:relative;width:70%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.hv-seal .ring-outer{position:absolute;inset:0;border:3px solid rgba(255,255,255,.9);border-radius:50%}
.hv-seal .ring-outer::before{content:'';position:absolute;inset:-12px;border:1px dashed rgba(255,255,255,.4);border-radius:50%;animation:sealRot 16s linear infinite}
.hv-seal .ring-mid{position:absolute;inset:10%;border:2px solid rgba(242,103,36,.7);border-radius:50%;animation:sealRot 24s linear infinite reverse}
.hv-seal .ring-mid::before{content:'';position:absolute;inset:-6px;background:conic-gradient(from 0deg,transparent 0deg,rgba(242,103,36,.5) 30deg,transparent 60deg,transparent 120deg,rgba(242,103,36,.5) 150deg,transparent 180deg,transparent 240deg,rgba(242,103,36,.5) 270deg,transparent 300deg);border-radius:50%;mask:radial-gradient(circle,transparent 95%,#000 96%);animation:sealRot 8s linear infinite}
.hv-seal .core{position:relative;width:50%;aspect-ratio:1;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(242,103,36,.5);animation:sealPulse 2.5s ease-in-out infinite;z-index:3}
.hv-seal .core svg{width:60%;height:60%;color:#fff;stroke-width:3;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}
.hv-seal .star{position:absolute;width:14px;height:14px;color:#fff;animation:starTwinkle 2s ease-in-out infinite}
.hv-seal .star:nth-of-type(4){top:14%;left:50%;transform:translateX(-50%);animation-delay:0s}
.hv-seal .star:nth-of-type(5){top:50%;right:14%;transform:translateY(-50%);animation-delay:.5s}
.hv-seal .star:nth-of-type(6){bottom:14%;left:50%;transform:translateX(-50%);animation-delay:1s}
.hv-seal .star:nth-of-type(7){top:50%;left:14%;transform:translateY(-50%);animation-delay:1.5s}
@keyframes sealRot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes sealPulse{0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(242,103,36,.5)}50%{transform:scale(1.06);box-shadow:0 0 60px rgba(242,103,36,.8)}}
@keyframes starTwinkle{0%,100%{opacity:.4;transform:scale(.8) translate(var(--tx,0),var(--ty,0))}50%{opacity:1;transform:scale(1.2) translate(var(--tx,0),var(--ty,0))}}

@media(max-width:1100px){
  .page-hero.split .page-hero-container{grid-template-columns:1fr;gap:40px}
  .hero-visual{justify-self:center;max-width:380px}
}
@media(max-width:600px){
  .hero-visual{max-width:320px}
  .hv-icon svg{width:100px;height:100px}
  .hv-badge{top:16px;right:16px;padding:9px 13px}
  .hv-badge-num{font-size:18px}
  .hv-stat-num{font-size:15px}
}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:24px;display:flex;align-items:center;gap:8px}
.breadcrumb a{color:var(--teal);font-weight:500;transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb-sep{color:var(--border)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;background:var(--teal);color:#fff;font-size:12px;font-weight:700;padding:8px 18px;border-radius:50px;margin-bottom:24px;letter-spacing:1.2px;text-transform:uppercase}
.hero-eyebrow::before{content:'';width:8px;height:8px;background:var(--gold);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.page-hero h1{font-size:64px;font-weight:800;line-height:1.05;letter-spacing:-2px;color:var(--navy);margin-bottom:24px;max-width:900px}
.page-hero h1 span{color:var(--gold);font-family:'Playfair Display',serif;font-style:italic;font-weight:700}
.page-hero .lede{font-size:19px;color:var(--muted);max-width:720px;line-height:1.7;margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ===== BUTTONS ===== */
.btn-primary{background:var(--teal);color:#fff;padding:14px 28px;border-radius:8px;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(63,95,171,.3);transition:all .3s;border:none;cursor:pointer;letter-spacing:.3px}
.btn-primary:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 12px 32px rgba(63,95,171,.4)}
.btn-orange{background:var(--gold);color:#fff;padding:14px 28px;border-radius:8px;font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(242,103,36,.35);transition:all .3s;border:none;cursor:pointer}
.btn-orange:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 12px 32px rgba(242,103,36,.5)}
.btn-secondary{background:#fff;color:var(--navy);padding:14px 28px;border-radius:8px;font-weight:600;font-size:14.5px;border:2px solid var(--border);display:inline-flex;align-items:center;gap:10px;transition:all .3s}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal)}
.btn-secondary .play-icon{width:32px;height:32px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center}

/* ===== SECTION COMMONS ===== */
.section{padding:100px 0;position:relative}
.section-container{max-width:1320px;margin:0 auto;padding:0 40px}
.section-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--teal-light);color:var(--teal);font-size:12px;font-weight:700;padding:6px 14px;border-radius:50px;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px}
.section-title{font-size:44px;font-weight:800;color:var(--navy);letter-spacing:-1px;line-height:1.15;margin-bottom:18px;max-width:740px}
.section-title span{color:var(--gold);font-style:italic;font-family:'Playfair Display',serif;font-weight:700}
.section-sub{font-size:18px;color:var(--muted);max-width:680px;line-height:1.65;margin-bottom:60px}
.section-head-flex{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px;flex-wrap:wrap;gap:24px}
.section-head-flex .section-title{margin-bottom:0}

/* ===== CARDS (reusable) ===== */
.card-grid{display:grid;gap:24px}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:32px;transition:all .3s;position:relative;overflow:hidden}
.card:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:0 24px 50px rgba(35,54,109,.1)}
.card-icon{width:56px;height:56px;background:var(--teal-light);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:22px;transition:all .3s}
.card:hover .card-icon{background:var(--teal);color:#fff}
.card-icon svg{width:26px;height:26px;stroke-width:2}
.card-num{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:2px;margin-bottom:16px}
.card-title{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:10px;line-height:1.3}
.card-desc{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:18px}
.card-link{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-size:13px;font-weight:600;transition:gap .25s;text-transform:uppercase;letter-spacing:.8px}
.card:hover .card-link{gap:10px;color:var(--gold)}

/* Dark variant for sectors-style sections */
.section-dark{background:var(--navy);color:#fff}
.section-dark .section-title{color:#fff}
.section-dark .section-title span{color:var(--gold)}
.section-dark .section-eyebrow{background:rgba(242,103,36,.18);color:var(--gold)}
.section-dark .section-sub{color:#a8bfd5}
.section-dark .card{background:transparent;border-color:rgba(255,255,255,.08)}
.section-dark .card:hover{background:rgba(255,255,255,.03);border-color:rgba(242,103,36,.4)}
.section-dark .card-title{color:#fff}
.section-dark .card-desc{color:#a8bfd5}
.section-dark .card-icon{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.section-dark .card-link{color:var(--gold)}

/* ===== STATS RIBBON ===== */
.stats-ribbon{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);color:#fff;padding:70px 0;position:relative;overflow:hidden}
.stats-ribbon::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);border-radius:50%}
.stats-ribbon .section-container{position:relative;z-index:1}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-block{text-align:center}
.stat-block-num{font-size:54px;font-weight:800;letter-spacing:-2px;line-height:1;font-family:'Playfair Display',serif;margin-bottom:10px}
.stat-block-label{font-size:13.5px;color:rgba(255,255,255,.9);font-weight:500;letter-spacing:.5px}

/* ===== CTA SECTION ===== */
.cta-section{padding:100px 0;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(242,103,36,.18) 0%,transparent 70%);border-radius:50%}
.cta-section::after{content:'';position:absolute;bottom:-200px;left:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(63,95,171,.2) 0%,transparent 70%);border-radius:50%}
.cta-section .section-container{position:relative;z-index:1;max-width:920px}
.cta-section .section-eyebrow{background:rgba(242,103,36,.18);color:var(--gold)}
.cta-section h2{font-size:54px;font-weight:800;letter-spacing:-1.5px;line-height:1.05;margin-bottom:20px}
.cta-section h2 span{color:var(--gold);font-style:italic;font-family:'Playfair Display',serif}
.cta-section .cta-lede{font-size:19px;color:#a8bfd5;max-width:620px;margin:0 auto 36px;line-height:1.6}
.cta-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ===== FOOTER ===== */
.footer{background:var(--navy-dark);color:rgba(255,255,255,.7);padding:80px 0 0}
.footer-container{max-width:1320px;margin:0 auto;padding:0 40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:50px;padding-bottom:60px}
.footer-brand .logo-name{color:#fff}
.footer-tagline{font-size:14px;line-height:1.7;margin:20px 0 28px;max-width:280px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);transition:all .25s}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.footer-social svg{width:16px;height:16px}
.footer-col h4{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:22px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col a{font-size:14px;color:rgba(255,255,255,.7);transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{padding:24px 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px;color:rgba(255,255,255,.5)}
.footer-bottom-links{display:flex;gap:24px}

/* ===== DETAIL PAGE COMPONENTS (used by all sub-pages) ===== */
.detail-overview{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start;margin-top:40px}
.overview-text p{font-size:16px;color:var(--muted);line-height:1.75;margin-bottom:18px}
.overview-text strong{color:var(--navy);font-weight:700}
.overview-stats{background:var(--paper);border-radius:18px;padding:32px;border:1px solid var(--border)}
.overview-stats h3{font-size:14px;color:var(--navy);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.overview-stats h3::before{content:'';width:6px;height:20px;background:var(--gold);border-radius:3px}
.overview-stat-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
.overview-stat-row:last-child{border-bottom:none}
.overview-stat-label{font-size:13.5px;color:var(--muted);font-weight:500}
.overview-stat-val{font-size:15px;color:var(--navy);font-weight:700}
.overview-stat-val span{color:var(--gold)}

.specs-table{margin-top:40px;background:#fff;border-radius:16px;border:1px solid var(--border);overflow:hidden}
.specs-table table{width:100%;border-collapse:collapse;font-size:14.5px}
.specs-table th{background:var(--navy);color:#fff;padding:18px 24px;text-align:left;font-weight:600;letter-spacing:.5px;font-size:12.5px;text-transform:uppercase}
.specs-table td{padding:16px 24px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.specs-table tr:last-child td{border-bottom:none}
.specs-table td:first-child{font-weight:700;color:var(--navy);width:36%}
.specs-table tr:nth-child(even){background:var(--paper)}
.badge-list{display:flex;flex-wrap:wrap;gap:6px}
.badge-list span{font-size:11.5px;background:var(--teal-light);color:var(--teal);padding:4px 10px;border-radius:50px;font-weight:600}

.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.app-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:28px;transition:all .3s}
.app-card:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:0 16px 40px rgba(35,54,109,.08)}
.app-icon{width:48px;height:48px;background:var(--teal-light);color:var(--teal);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:all .3s}
.app-card:hover .app-icon{background:var(--teal);color:#fff}
.app-icon svg{width:22px;height:22px;stroke-width:2}
.app-card h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px}
.app-card p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:12px}
.app-card ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.app-card li{font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px}
.app-card li::before{content:'';width:5px;height:5px;background:var(--gold);border-radius:50%;flex-shrink:0}

.process-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:60px;position:relative}
.process-flow::before{content:'';position:absolute;top:32px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--teal),var(--gold));z-index:0}
.flow-step{text-align:center;position:relative;padding:0 12px;z-index:1}
.flow-num{width:64px;height:64px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;font-family:'Playfair Display',serif;margin:0 auto 18px;box-shadow:0 8px 24px rgba(63,95,171,.3);border:4px solid #fff}
.flow-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px}
.flow-desc{font-size:12.5px;color:var(--muted);line-height:1.5}

.mat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:50px}
.mat-block{border-left:4px solid var(--gold);padding:24px 28px;border-radius:0 12px 12px 0;background:linear-gradient(90deg,var(--paper),#fff 80%)}
.mat-block h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:14px;font-family:'Playfair Display',serif}
.mat-block ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mat-block li{font-size:13.5px;color:var(--text);display:flex;align-items:center;gap:8px}
.mat-block li::before{content:'✓';color:var(--teal);font-weight:700;font-size:14px}

.qa-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.qa-stage{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:28px;transition:background .3s}
.qa-stage:hover{background:rgba(242,103,36,.08);border-color:rgba(242,103,36,.3)}
.qa-stage-num{font-size:42px;font-weight:800;color:var(--gold);font-family:'Playfair Display',serif;line-height:1;margin-bottom:14px}
.qa-stage h4{font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}
.qa-stage p{font-size:13.5px;color:#a8bfd5;line-height:1.55}

.case-mini{background:linear-gradient(135deg,var(--navy),#3a4d8a);color:#fff;border-radius:20px;padding:48px;display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center;margin-top:50px;position:relative;overflow:hidden}
.case-mini::after{content:'';position:absolute;bottom:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(242,103,36,.2) 0%,transparent 70%);border-radius:50%}
.case-mini-visual{aspect-ratio:1;background:rgba(255,255,255,.08);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:120px;color:rgba(255,255,255,.4);position:relative;z-index:1}
.case-mini-body{position:relative;z-index:1}
.case-mini-tag{display:inline-block;background:rgba(242,103,36,.2);color:var(--gold);font-size:11px;font-weight:700;padding:5px 14px;border-radius:50px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:18px}
.case-mini h3{font-size:30px;font-weight:800;font-family:'Playfair Display',serif;letter-spacing:-.5px;line-height:1.2;margin-bottom:14px}
.case-mini p{font-size:15px;color:#a8bfd5;line-height:1.6;margin-bottom:24px}
.case-mini-metrics{display:flex;gap:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15)}
.cm-num{font-size:32px;font-weight:800;color:var(--gold);font-family:'Playfair Display',serif;letter-spacing:-.5px;line-height:1}
.cm-label{font-size:11px;color:#a8bfd5;margin-top:6px;letter-spacing:1px;text-transform:uppercase;font-weight:600}

.faq-list{display:flex;flex-direction:column;gap:14px;margin-top:50px;max-width:880px}
.faq-item{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;transition:all .25s}
.faq-item[open]{border-color:var(--teal);box-shadow:0 12px 30px rgba(35,54,109,.08)}
.faq-item summary{padding:20px 26px;font-size:16px;font-weight:700;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:'Playfair Display',serif;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:24px;color:var(--gold);font-weight:300;transition:transform .25s;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item-body{padding:0 26px 22px;font-size:14.5px;color:var(--muted);line-height:1.7}

.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.related-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:24px;transition:all .3s;display:flex;flex-direction:column;align-items:flex-start}
.related-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 16px 40px rgba(35,54,109,.08)}
.related-icon{width:44px;height:44px;background:var(--teal-light);color:var(--teal);border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.related-icon svg{width:20px;height:20px;stroke-width:2}
.related-card h4{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px}
.related-card p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:14px;flex:1}
.related-link{font-size:11.5px;color:var(--gold);font-weight:700;letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}

@media(max-width:1100px){
  .detail-overview{grid-template-columns:1fr;gap:40px}
  .apps-grid{grid-template-columns:repeat(2,1fr)}
  .process-flow{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .process-flow::before{display:none}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .qa-stages{grid-template-columns:repeat(2,1fr)}
  .case-mini{grid-template-columns:1fr;gap:32px;padding:36px}
  .mat-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .apps-grid,.related-grid,.qa-stages{grid-template-columns:1fr}
  .mat-block ul{grid-template-columns:1fr}
  .process-flow{grid-template-columns:repeat(2,1fr)}
  .case-mini h3{font-size:24px}
  .case-mini-metrics{flex-direction:column;gap:18px}
}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .page-hero h1{font-size:54px}
  .section-title{font-size:36px}
  .cta-section h2{font-size:42px}
  .card-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .card-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:900px){
  .top-bar-left a:not(:first-child){display:none}
  .top-bar-right a:not(.certified-badge){display:none}
  .divider{display:none}
  .nav-menu{position:fixed;top:78px;left:0;right:0;background:#fff;flex-direction:column;padding:16px;gap:4px;transform:translateY(-150%);transition:transform .3s;box-shadow:0 10px 30px rgba(35,54,109,.1);border-top:1px solid var(--border);max-height:calc(100vh - 78px);overflow-y:auto;z-index:999}
  .nav-menu.active{transform:translateY(0)}
  .nav-menu > li{width:100%}
  .nav-menu > li > a{display:flex;justify-content:space-between;padding:14px 18px;width:100%;border-bottom:1px solid var(--border)}
  .cta-btn{margin-left:0!important;margin-top:12px;justify-content:center}
  .mobile-toggle{display:flex}
  .page-hero{padding:60px 0 70px}
  .page-hero h1{font-size:42px}
  .section{padding:70px 0}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .page-hero h1{font-size:34px}
  .section-title{font-size:28px}
  .cta-section h2{font-size:32px}
  .card-grid.cols-2,.card-grid.cols-3,.card-grid.cols-4{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr;gap:30px}
  .stat-block-num{font-size:42px}
  .footer-grid{grid-template-columns:1fr}
}