:root{
  --navy-950:#031426;
  --navy-900:#05213d;
  --navy-850:#062a4d;
  --navy-800:#0a365e;
  --navy-700:#0b4f82;
  --blue:#0b78e3;
  --cyan:#1dc4ff;
  --ice:#d9efff;
  --ice-2:#b9def6;
  --white:#f7fbff;
  --text:#eaf6ff;
  --muted:#b8d3e8;
  --ink:#06213d;
  --red:#e62931;
  --red-d:#8f141b;
  --yellow:#f4c91f;
  --yellow-d:#987711;
  --green:#18ad56;
  --green-d:#08703a;
  --blue2:#117ad6;
  --blue2-d:#07518f;
  --shadow:0 18px 46px rgba(0,0,0,.26);
  --shadow-soft:0 12px 28px rgba(3,31,58,.16);
  --radius:18px;
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--navy-950);color:var(--text);line-height:1.45}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
.container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:#64d5ff}
.h-section{font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;margin:.15rem 0 .65rem;font-weight:900;letter-spacing:-.025em}
.lede{font-size:1.08rem;color:var(--muted);max-width:720px}

/* Header */
.site-header{position:sticky;top:0;z-index:70;background:linear-gradient(180deg,rgba(3,22,42,.985),rgba(3,26,50,.97));border-bottom:1px solid rgba(82,166,224,.36);box-shadow:0 8px 24px rgba(0,0,0,.2);backdrop-filter:blur(16px)}
.header-row{height:82px;display:flex;align-items:center;gap:24px}
.brand-link{width:295px;flex:0 0 295px;display:flex;align-items:center;padding:4px 8px;border-radius:12px;transition:background .18s,transform .18s}
.brand-link:hover{background:rgba(103,207,255,.08)}
.brand-link:active{transform:translateY(1px)}
.brand-link img{width:100%;height:64px;object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:.9rem}
.main-nav a{position:relative;color:#d6e9f9;padding:27px 2px 22px;white-space:nowrap;transition:color .18s,transform .18s}
.main-nav a:hover,.main-nav a.active{color:#fff}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:center;transition:transform .18s}
.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;padding:12px 21px;font-weight:850;border:1px solid rgba(255,255,255,.24);cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s;user-select:none;position:relative}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:none!important}
.btn-green{background:linear-gradient(180deg,#55e570,#1cad4b);box-shadow:0 4px 0 #087d34,0 10px 22px rgba(28,194,85,.22);color:#fff}
.btn-blue{background:linear-gradient(180deg,#159cf5,#0876c8);box-shadow:0 4px 0 #04518d,0 10px 22px rgba(18,145,234,.2)}
.btn-ghost{background:rgba(6,43,79,.72);border-color:#76cfff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.header-cta{margin-left:2px;padding:10px 18px}
.menu-btn{display:none;margin-left:auto;width:46px;height:42px;border-radius:11px;border:1px solid #4a79a3;background:#082d50;position:relative;cursor:pointer}
.menu-btn span,.menu-btn:before,.menu-btn:after{content:"";position:absolute;left:11px;right:11px;height:2px;background:#fff}
.menu-btn span{top:20px}.menu-btn:before{top:13px}.menu-btn:after{top:27px}

/* Home hero */
.home-hero,.page-hero{position:relative;isolation:isolate;overflow:hidden}
.home-hero:after,.page-hero:after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,rgba(3,20,38,.94));z-index:-1}
.home-hero{min-height:650px;padding:46px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
.hero-title{font-size:clamp(3.2rem,6vw,5.4rem);line-height:.88;margin:0 0 16px;font-weight:950;letter-spacing:-.04em;text-transform:uppercase;text-shadow:0 4px 18px rgba(0,0,0,.45)}
.hero-title .green{color:#55d868}
.hero-subtitle{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:850;margin:.35rem 0 .8rem;color:#fff}
.hero-copy{font-size:1.03rem;color:#d1e6f7;max-width:610px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 24px}
.hero-model{position:relative;display:grid;place-items:center;min-height:515px}
.hero-model:before{content:"";position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(30,181,255,.19),rgba(14,91,153,.06) 58%,transparent 72%);filter:blur(2px)}
.hero-model img{width:min(555px,96%);position:relative;z-index:2;filter:drop-shadow(0 24px 42px rgba(0,0,0,.42))}
.hero-quote{position:absolute;right:0;bottom:50px;background:rgba(2,23,43,.75);border:1px solid rgba(92,192,255,.35);border-radius:16px;padding:14px 16px;text-align:right;max-width:275px;z-index:3;font-size:.83rem;letter-spacing:.11em;text-transform:uppercase;box-shadow:var(--shadow-soft)}
.benefit-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:12px}
.benefit{display:flex;align-items:center;gap:10px;color:#dff4ff;font-size:.82rem;padding:10px 8px;border-top:1px solid rgba(107,204,255,.22)}
.benefit-mark{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(90,207,255,.56);background:rgba(5,50,84,.78);font-weight:900;color:#7cddff}

/* Behavior cards */
.behavior-band{background:#03182e;padding:0 0 30px}
.behavior-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.behavior-card{border-radius:13px;overflow:hidden;position:relative;background:#071e37;box-shadow:0 12px 25px rgba(0,0,0,.25);border:1px solid var(--accent);transition:transform .16s,box-shadow .16s}
.behavior-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.34)}
.behavior-card .art{height:152px;background-image:linear-gradient(180deg,transparent 40%,rgba(1,14,28,.92) 100%),var(--art);background-size:cover;background-position:center}
.behavior-card .body{padding:14px 15px 15px;margin-top:-42px;position:relative}
.behavior-card h3{font-size:1.42rem;margin:0 0 3px}.behavior-card p{margin:0 0 11px;color:#d9eaf7;font-size:.86rem}.behavior-card .learn{display:inline-block;background:var(--accent);border-radius:9px;padding:7px 11px;font-size:.77rem;font-weight:850;box-shadow:0 3px 0 var(--accent-dark)}
.behavior-card.d{--accent:var(--red);--accent-dark:var(--red-d);--art:url('assets/animal-directing.webp')}
.behavior-card.m{--accent:var(--blue2);--accent-dark:var(--blue2-d);--art:url('assets/animal-methodical.webp')}
.behavior-card.c{--accent:var(--yellow);--accent-dark:var(--yellow-d);--art:url('assets/animal-cordial.webp')}.behavior-card.c .learn,.behavior-card.c h3{color:#071b2e}
.behavior-card.e{--accent:var(--green);--accent-dark:var(--green-d);--art:url('assets/animal-expressive.webp')}

/* Interactive assessment showcase */
.demo-section{background:linear-gradient(180deg,#c8e7fb,#dff2ff 58%,#c7e6fa);color:var(--ink);padding:44px 0 52px;position:relative;overflow:hidden}
.demo-section:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);pointer-events:none}
.demo-heading{text-align:center;position:relative}.demo-heading .eyebrow{color:#0878cf}.demo-heading .h-section{color:#062b50}.demo-heading p{margin:0 auto 18px;color:#315979}
.demo-tabs{display:flex;width:min(760px,100%);margin:0 auto;overflow:hidden;border-radius:13px 13px 0 0;border:1px solid #345f83;background:#173a5d;box-shadow:0 8px 24px rgba(5,38,69,.18)}
.demo-tab{flex:1;border:0;background:transparent;color:#d5e9f8;padding:13px 8px;cursor:pointer;font-weight:750;border-right:1px solid rgba(255,255,255,.12);transition:background .15s,color .15s}.demo-tab:last-child{border-right:0}.demo-tab.active{background:linear-gradient(#168ce7,#0968b3);color:#fff;box-shadow:inset 0 0 0 1px #4cc1ff}.demo-tab:hover{background-color:#245379}
.demo-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.38fr) minmax(260px,.62fr);gap:18px;background:linear-gradient(180deg,#0b3e69,#062944);border:1px solid #4b7da4;border-radius:18px;padding:22px;color:#fff;box-shadow:0 18px 36px rgba(4,35,63,.26),inset 0 1px 0 rgba(255,255,255,.09);min-height:390px}
.demo-stage:before{content:"";position:absolute;inset:9px;border:1px solid rgba(91,192,255,.09);border-radius:12px;pointer-events:none}
.demo-main,.demo-why{position:relative;z-index:2}.demo-title{font-size:1.65rem;margin:0 0 4px}.demo-sub{margin:0 0 16px;color:#cae3f6;font-size:.91rem}.demo-panel{background:linear-gradient(180deg,#0c365c,#082a49);border:1px solid #35688f;border-radius:13px;padding:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.demo-why{background:linear-gradient(180deg,#0b416f,#092d4d);border:1px solid #3f7096;border-radius:13px;padding:20px;align-self:stretch;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.demo-why h3{margin:0 0 9px;font-size:1.15rem}.demo-why p{color:#c8dfef;font-size:.9rem}.demo-why .btn{width:100%;margin-top:10px}
.alloc-row{display:grid;grid-template-columns:1fr 38px 42px 38px;gap:7px;align-items:center;padding:7px 8px;border-left:5px solid var(--a);background:rgba(4,24,43,.38);border-radius:8px;margin:7px 0}.alloc-row button,.rank-actions button,.path-choice,.swipe-btn{border:1px solid #5a86aa;background:#0b4d7c;color:#fff;border-radius:8px;cursor:pointer;min-height:32px;transition:transform .1s,filter .1s}.alloc-row button:active,.rank-actions button:active,.path-choice:active,.swipe-btn:active{transform:translateY(1px);filter:brightness(.9)}.alloc-row b{text-align:center}.alloc-row.d{--a:var(--red)}.alloc-row.m{--a:var(--blue2)}.alloc-row.c{--a:var(--yellow)}.alloc-row.e{--a:var(--green)}
.rank-item{display:grid;grid-template-columns:34px 1fr 78px;gap:10px;align-items:center;padding:10px;background:#0b3a62;border:1px solid #376587;border-radius:10px;margin:8px 0;border-left:5px solid var(--rank)}.rank-item:nth-child(1){--rank:var(--red)}.rank-item:nth-child(2){--rank:var(--yellow)}.rank-item:nth-child(3){--rank:var(--green)}.rank-item:nth-child(4){--rank:var(--blue2)}.rank-num{font-weight:900;color:#9bdcff}.rank-actions{display:flex;gap:5px}.rank-actions button{width:33px}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.path-choice{padding:14px;text-align:left;background:#0a365c}.path-choice:nth-child(1){border-left:5px solid var(--red)}.path-choice:nth-child(2){border-left:5px solid var(--blue2)}.path-choice:nth-child(3){border-left:5px solid var(--yellow)}.path-choice:nth-child(4){border-left:5px solid var(--green)}.path-result{margin-top:12px;padding:13px;border-radius:10px;background:#061f39;color:#d2e9f8;min-height:65px}
.swipe-arena{display:grid;grid-template-columns:96px 1fr 96px;gap:12px;align-items:stretch}.swipe-target{border-radius:12px;display:grid;place-items:center;text-align:center;font-weight:900;border:1px solid #4f7191;padding:8px}.swipe-target.left{background:#4b1622}.swipe-target.right{background:#0c5735}.swipe-center{display:flex;flex-direction:column}.swipe-card{flex:1;min-height:176px;background:linear-gradient(180deg,#fff,#e8f4fc);color:#08233e;border-radius:15px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 14px 26px rgba(0,0,0,.25);cursor:grab;user-select:none;touch-action:none;transition:transform .18s,opacity .18s}.swipe-card b{font-size:1.28rem}.swipe-card small{color:#5a7185;margin-bottom:10px}.swipe-controls{display:flex;gap:9px;margin-top:10px}.swipe-btn{flex:1;padding:9px}

/* Home lower scenic */
.value-section{position:relative;background:linear-gradient(90deg,rgba(2,27,51,.94),rgba(2,27,51,.72));padding:45px 0;color:#fff}
.value-grid{display:grid;grid-template-columns:1.15fr repeat(4,.75fr);gap:16px;align-items:stretch}.value-intro{padding:6px 18px 6px 0}.value-intro h2{font-size:2.1rem;line-height:1;margin:.2rem 0 .65rem}.value-intro p{font-size:.9rem;color:#d1e3f1}.value-item{border-left:1px solid rgba(255,255,255,.2);padding:14px 14px;display:flex;flex-direction:column;justify-content:center}.value-icon{font-size:1.4rem;font-weight:950;color:#fff;width:48px;height:48px;border:1px solid #8fdcff;border-radius:50%;display:grid;place-items:center;margin-bottom:9px;background:#0d4a77}.value-item h3{font-size:.95rem;margin:0 0 5px;text-transform:uppercase}.value-item p{font-size:.78rem;color:#d3e5f3;margin:0}
.utility-band{background:#062746;border-top:1px solid #1c537e;border-bottom:1px solid #1c537e;padding:17px 0}.utility-grid{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px}.utility-link{display:flex;align-items:center;gap:13px;padding:10px 16px;border-right:1px solid rgba(255,255,255,.14);border-radius:9px;transition:background .15s}.utility-link:hover{background:#0b385e}.utility-mark{width:41px;height:41px;border-radius:9px;border:1px solid #4c84ad;background:#0a365c;display:grid;place-items:center;font-weight:900;color:#9ce2ff}.utility-link b{font-size:.9rem}.utility-link small{display:block;color:#b9d2e5;font-size:.76rem}
.site-footer{background:#02172c;padding:28px 0;color:#9ebdd4;border-top:1px solid #103c61}.footer-row{display:flex;gap:30px;align-items:center}.footer-brand{width:250px}.footer-brand img{width:100%;height:58px;object-fit:contain;object-position:left}.footer-copy{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#d5e5f1}.footer-links{margin-left:auto;display:flex;gap:20px;font-size:.78rem}.footer-links a:hover{color:#fff}

/* Secondary pages: same DNA, not generic white shells */
.page-hero{min-height:460px;padding:62px 0 48px}.page-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}.page-hero h1{font-size:clamp(3rem,5vw,5.1rem);line-height:.93;margin:.2rem 0 16px;text-transform:uppercase;font-weight:950;letter-spacing:-.035em;text-shadow:0 3px 18px rgba(0,0,0,.38)}.page-hero p{font-size:1.05rem;color:#d0e5f5;max-width:680px}.page-visual{display:flex;justify-content:center}.page-visual img{width:min(430px,92%);filter:drop-shadow(0 18px 32px rgba(0,0,0,.4))}
.section-dark{background:linear-gradient(180deg,#041d37,#062d50);padding:54px 0}.section-light{background:linear-gradient(180deg,#dff2ff,#cae7fa);color:var(--ink);padding:54px 0}.section-light .eyebrow{color:#0878cf}.section-light .h-section{color:#07345c}.section-light .lede{color:#355d7c}
.infographic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.info-panel{position:relative;overflow:hidden;border-radius:16px;padding:22px 20px;min-height:210px;border:1px solid #356a92;background:linear-gradient(180deg,#0b3d68,#062842);box-shadow:var(--shadow-soft);transition:transform .15s}.info-panel:hover{transform:translateY(-3px)}.info-panel:after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent,#1dbdf6)}.info-panel h3{font-size:1.28rem;margin:5px 0 8px}.info-panel p{color:#c9dfef;font-size:.9rem}.info-panel .num{font-size:2rem;font-weight:950;color:#fff;opacity:.95}.info-panel.red{--accent:var(--red)}.info-panel.blue{--accent:var(--blue2)}.info-panel.yellow{--accent:var(--yellow)}.info-panel.green{--accent:var(--green)}
.infographic-grid.light .info-panel{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(232,246,255,.96));border-color:#8cbddd;color:#0a3456}.infographic-grid.light .info-panel p{color:#3f6280}.infographic-grid.light .info-panel .num{color:#0d558f}
.energy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.energy-card{border-radius:15px;overflow:hidden;background:#061f39;border:1px solid var(--accent);box-shadow:var(--shadow-soft)}.energy-art{height:150px;background:linear-gradient(180deg,transparent,rgba(1,18,34,.72)),var(--art) center/cover no-repeat}.energy-copy{padding:17px}.energy-copy h3{font-size:1.35rem;margin:0 0 5px;color:#fff}.energy-copy p{color:#cfe3f1;font-size:.88rem;margin:0}.energy-card.red{--accent:var(--red);--art:url('assets/animal-directing.webp')}.energy-card.blue{--accent:var(--blue2);--art:url('assets/animal-methodical.webp')}.energy-card.yellow{--accent:var(--yellow);--art:url('assets/animal-cordial.webp')}.energy-card.green{--accent:var(--green);--art:url('assets/animal-expressive.webp')}
.cta-scene{background:linear-gradient(90deg,#041e39,#06385f);padding:42px 0}.cta-row{display:flex;align-items:center;gap:30px}.cta-row h2{margin:0;font-size:2rem}.cta-row p{margin:4px 0 0;color:#c5ddec}.cta-row .btn{margin-left:auto;white-space:nowrap}
.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric{border:1px solid #3c6f94;background:#0a3457;border-radius:14px;padding:18px;text-align:center}.metric b{display:block;font-size:1.8rem;color:#fff}.metric span{color:#bcd5e8;font-size:.79rem;text-transform:uppercase;letter-spacing:.08em}

/* Plan / merch */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.plan-card{background:linear-gradient(180deg,#0b416e,#072b4a);border:1px solid #4d7a9c;border-radius:18px;padding:25px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}.plan-card.featured{border-color:#44db71;box-shadow:0 0 0 2px rgba(68,219,113,.12),var(--shadow)}.plan-card .tag{position:absolute;right:16px;top:15px;background:#1bb553;border-radius:999px;padding:5px 9px;font-size:.7rem;font-weight:900}.plan-card h3{font-size:1.55rem;margin:2px 0 6px}.plan-price{font-size:2.2rem;font-weight:950}.plan-card p,.plan-card li{color:#c7ddec;font-size:.88rem}.plan-card ul{padding-left:18px;min-height:150px}.plan-card .btn{width:100%}
.merch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.merch-card{min-height:280px;border-radius:18px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;border:1px solid #40739a;box-shadow:var(--shadow-soft);background:linear-gradient(180deg,#0b4777,#041e36)}.merch-card:before{content:"AE";position:absolute;right:18px;top:6px;font-size:7rem;font-weight:950;color:rgba(255,255,255,.08)}.merch-card h3{font-size:1.5rem;margin:0 0 5px}.merch-card p{margin:0 0 12px;color:#d0e3f1}

/* Assessment live shell */
.assessment-page{min-height:100vh;background:linear-gradient(180deg,#03162b,#082d50)}
.assessment-top{background:rgba(3,22,42,.98);border-bottom:1px solid #21557c}.assessment-top .header-row{height:74px}.assessment-status{margin-left:auto;color:#b8d9ee;font-size:.86rem}.assessment-progress-track{height:7px;background:#0c3558;border-radius:999px;overflow:hidden;width:220px}.assessment-progress-track span{display:block;width:4%;height:100%;background:linear-gradient(90deg,#22bbff,#48e273)}
.game-wrap{padding:42px 24px 70px}.game-shell{max-width:1080px;margin:0 auto;background:linear-gradient(180deg,rgba(11,63,106,.98),rgba(5,37,65,.98));border:1px solid #4a789c;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.game-banner{padding:23px 26px;border-bottom:1px solid #3b6d92;background:linear-gradient(90deg,#0b416e,#0a3154)}.game-banner small{color:#8bdcff;letter-spacing:.12em;font-weight:900;text-transform:uppercase}.game-question{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.15;margin:8px 0 0}.neutral-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:25px}.neutral-option{background:linear-gradient(180deg,#0b3a62,#082c4d);border:1px solid #4d7392;border-radius:15px;padding:22px;color:#fff;text-align:left;cursor:pointer;min-height:122px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform .12s,border-color .12s,box-shadow .12s}.neutral-option:hover{transform:translateY(-2px);border-color:#72d7ff}.neutral-option.selected{border-color:#7be0ff;box-shadow:0 0 0 2px rgba(82,205,255,.17),0 10px 24px rgba(0,0,0,.22)}.game-foot{padding:0 25px 25px;display:flex;align-items:center;gap:18px}.game-note{font-size:.78rem;color:#9ebfd7;max-width:690px}.game-foot .btn{margin-left:auto}

/* Modal video placeholder */
.modal{position:fixed;inset:0;background:rgba(0,8,18,.84);z-index:100;display:none;place-items:center;padding:24px}.modal.open{display:grid}.modal-box{width:min(840px,100%);background:#082c4d;border:1px solid #5f91b5;border-radius:18px;box-shadow:0 28px 70px rgba(0,0,0,.5);overflow:hidden}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #3c6889}.modal-close{border:1px solid #5a89ad;background:#0b416e;color:white;border-radius:10px;width:38px;height:38px;cursor:pointer}.video-placeholder{aspect-ratio:16/9;background:linear-gradient(135deg,#041a32,#0a3a65);display:grid;place-items:center;text-align:center;padding:30px}.video-placeholder .play{width:76px;height:76px;border-radius:50%;border:2px solid #85dfff;display:grid;place-items:center;font-size:1.7rem;margin:0 auto 14px}

@media(max-width:1120px){
  .main-nav{gap:11px;font-size:.82rem}.brand-link{width:235px;flex-basis:235px}.header-cta{padding:9px 13px}
  .hero-grid,.page-hero-grid{grid-template-columns:1fr 1fr}.hero-model img{width:min(460px,100%)}
  .value-grid{grid-template-columns:1fr 1fr 1fr}.value-intro{grid-column:1/-1}.utility-grid{grid-template-columns:1fr 1fr}.utility-link{border-right:0}
}
@media(max-width:900px){
  .container{width:min(100% - 32px,var(--max))}.header-row{height:70px}.brand-link{width:220px;flex-basis:220px}.main-nav,.header-cta{display:none}.menu-btn{display:block}.site-header.menu-open .main-nav{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;background:#041e39;padding:12px 20px 18px;border-bottom:1px solid #24567e}.site-header.menu-open .main-nav a{padding:11px 8px}.site-header.menu-open .main-nav a:after{bottom:4px}.site-header.menu-open .header-cta{display:inline-flex;position:absolute;top:355px;left:20px;right:20px;z-index:71}
  .hero-grid,.page-hero-grid{grid-template-columns:1fr}.home-hero{padding-top:34px}.hero-model{min-height:390px}.hero-quote{right:6%;bottom:18px}.benefit-row,.behavior-grid,.energy-grid,.infographic-grid,.plan-grid,.merch-grid{grid-template-columns:1fr 1fr}.demo-stage{grid-template-columns:1fr}.value-grid{grid-template-columns:1fr 1fr}.utility-grid{grid-template-columns:1fr}.metric-strip{grid-template-columns:1fr 1fr}.footer-row{flex-wrap:wrap}.footer-links{margin-left:0}.neutral-options{grid-template-columns:1fr}
}
@media(max-width:620px){
  .container{width:min(100% - 22px,var(--max))}.brand-link{width:190px;flex-basis:190px}.hero-title{font-size:3rem}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.benefit-row,.behavior-grid,.energy-grid,.infographic-grid,.plan-grid,.merch-grid,.metric-strip{grid-template-columns:1fr}.hero-model{min-height:340px}.hero-quote{display:none}.demo-tabs{display:grid;grid-template-columns:1fr 1fr}.demo-tab{border-bottom:1px solid rgba(255,255,255,.12)}.demo-stage{padding:14px}.swipe-arena{grid-template-columns:66px 1fr 66px}.value-grid{grid-template-columns:1fr}.value-item{border-left:0;border-top:1px solid rgba(255,255,255,.16)}.cta-row{align-items:flex-start;flex-direction:column}.cta-row .btn{margin-left:0}.page-hero h1{font-size:3rem}.footer-links{flex-wrap:wrap}.game-foot{align-items:flex-start;flex-direction:column}.game-foot .btn{margin-left:0;width:100%}
}
@media(max-width:620px){
  .assessment-top .header-row{height:auto;min-height:72px;padding:8px 0;gap:10px;align-items:center}
  .assessment-top .brand-link{width:150px;flex:0 0 150px;padding:0}
  .assessment-top .brand-link img{height:48px}
  .assessment-status{min-width:0;width:calc(100% - 160px);font-size:.68rem;text-align:right}
  .assessment-progress-track{width:100%;max-width:100%;margin-top:5px}
}

/* =========================================================
   V3 — APPROVED DIGITAL DNA LOCK
   Corrects two audit failures:
   1) approved concept was accidentally visible as a page background
   2) index proportions drifted from the approved concept
   ========================================================= */

/* Header proportions now mirror the approved concept more closely. */
.header-row{height:64px;gap:18px}
.brand-link{width:238px;flex:0 0 238px;padding:2px 4px}
.brand-link img{height:54px}
.main-nav{gap:16px;font-size:.82rem}
.main-nav a{padding:21px 2px 19px}
.main-nav a:after{bottom:10px}
.header-cta{padding:9px 18px;border-radius:12px}

/* The approved concept is NEVER used as a background image.
   This clean panoramic atmosphere contains no baked text, UI or old logos. */
.home-hero{
  min-height:535px;
  padding:30px 0 82px;
  background:
    linear-gradient(90deg,rgba(1,15,30,.96) 0%,rgba(2,23,43,.88) 36%,rgba(2,28,51,.58) 63%,rgba(2,22,42,.36) 100%),
    linear-gradient(180deg,rgba(2,15,29,.08),rgba(2,17,33,.55)),
    url('assets/mountain-panorama.webp') center/cover no-repeat;
}
.home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 38%,rgba(38,164,232,.14),transparent 35%),linear-gradient(180deg,transparent 65%,rgba(2,20,38,.95));z-index:-1;pointer-events:none}
.home-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:135px;background:linear-gradient(transparent,rgba(3,22,41,.98));z-index:-1;pointer-events:none}
.hero-grid{grid-template-columns:.88fr 1.12fr;gap:24px;align-items:center}
.hero-title{font-size:clamp(3.05rem,5.25vw,4.65rem);line-height:.91;margin:0 0 13px;letter-spacing:-.035em}
.hero-subtitle{font-size:clamp(1.12rem,1.8vw,1.42rem);margin:.25rem 0 .7rem}
.hero-copy{font-size:.96rem;line-height:1.55;max-width:520px;color:#e0edf7;text-shadow:0 2px 10px rgba(0,0,0,.28)}
.hero-actions{margin:20px 0 18px}
.hero-actions .btn{min-height:46px}
.hero-model{min-height:420px;align-self:stretch}
.hero-model:before{width:74%;background:radial-gradient(circle,rgba(24,166,236,.22),rgba(10,83,143,.08) 52%,transparent 72%)}
.hero-model img{width:min(425px,86%);filter:drop-shadow(0 18px 34px rgba(0,0,0,.45))}
.hero-quote{right:0;top:58px;bottom:auto;background:transparent;border:0;padding:0;box-shadow:none;max-width:230px;font-family:"Segoe Script","Brush Script MT",cursive;font-style:italic;font-weight:700;font-size:1.25rem;line-height:1.08;letter-spacing:.015em;text-transform:none;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.72);transform:rotate(-4deg)}
.benefit-row{gap:8px;margin-top:10px}
.benefit{justify-content:flex-start;gap:8px;padding:8px 4px;border-top:0;font-size:.72rem;text-align:center;flex-direction:column}
.benefit-mark{width:31px;height:31px;font-size:.68rem;background:rgba(4,47,80,.82);box-shadow:0 4px 12px rgba(0,0,0,.18)}

/* Behavioral cards intentionally overlap the hero like the approved concept. */
.behavior-band{position:relative;z-index:5;background:#03182e;padding:0 0 16px;margin-top:-58px}
.behavior-grid{gap:10px}
.behavior-card{border-radius:10px;box-shadow:0 12px 25px rgba(0,0,0,.34)}
.behavior-card .art{height:150px;background-image:linear-gradient(180deg,transparent 42%,rgba(1,14,28,.94) 100%),var(--art);background-position:center 38%}
.behavior-card .body{padding:13px 14px 14px;margin-top:-45px}
.behavior-card h3{font-size:1.24rem}.behavior-card p{font-size:.78rem;margin-bottom:9px}.behavior-card .learn{font-size:.7rem;padding:6px 10px;border-radius:8px}

/* Interactive section retains real HTML/JS, while matching the approved light-blue scene. */
.demo-section{padding:34px 0 42px;background:linear-gradient(180deg,#c6e6fb 0%,#e4f5ff 48%,#c7e7fa 100%)}
.demo-heading .h-section{font-size:clamp(1.95rem,3.3vw,2.85rem)}
.demo-tabs{width:min(675px,100%);border-radius:12px 12px 0 0}
.demo-tab{padding:11px 8px;font-size:.82rem}
.demo-stage{border-radius:16px;min-height:360px;padding:18px;box-shadow:0 16px 32px rgba(3,32,60,.28),inset 0 1px 0 rgba(255,255,255,.09)}

/* The lower marketing scene now uses a clean panorama, not the approved-page screenshot. */
.value-section{background:
  linear-gradient(90deg,rgba(2,29,54,.96),rgba(2,30,55,.80) 60%,rgba(2,29,54,.70)),
  url('assets/mountain-panorama.webp') center 58%/cover no-repeat;
  padding:38px 0 40px;
}
.value-intro h2{font-size:2rem}.value-intro p{font-size:.84rem}
.value-item{background:rgba(3,39,70,.18);border-left:1px solid rgba(255,255,255,.18)}

.utility-band{background:linear-gradient(180deg,#073153,#052541);padding:14px 0}
.site-footer{background:linear-gradient(180deg,#031c34,#021426);padding:22px 0}
.footer-brand{width:220px}.footer-brand img{height:50px}

/* Secondary-page hero: same visual family, but NEVER a screenshot of the homepage. */
.page-hero{
  min-height:420px;
  padding:54px 0 44px;
  background:
    radial-gradient(circle at 73% 40%,rgba(29,163,229,.18),transparent 34%),
    linear-gradient(90deg,rgba(2,20,39,.98),rgba(4,45,78,.91) 58%,rgba(5,64,102,.74)),
    url('assets/mountain-panorama.webp') center/cover no-repeat;
}
.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,24,44,.08),rgba(3,20,38,.66));z-index:-1;pointer-events:none}
.page-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:linear-gradient(transparent,rgba(3,20,38,.88));z-index:-1;pointer-events:none}
.page-hero-grid{grid-template-columns:1.08fr .92fr;gap:36px}
.page-hero h1{font-size:clamp(2.75rem,4.5vw,4.4rem);line-height:.95}
.page-visual img{width:min(360px,86%)}

/* No screenshot-derived section backgrounds anywhere in secondary pages. */
.section-dark{background:linear-gradient(180deg,#041d37,#062f53);padding:50px 0}
.section-light{background:linear-gradient(180deg,#e3f3ff,#cfe9fa);color:var(--ink);padding:50px 0}
.cta-scene{background:linear-gradient(90deg,#041e39 0%,#06385f 62%,#084a78 100%);padding:39px 0}
.merch-card{background:linear-gradient(180deg,#0b4777 0%,#062a49 72%,#041e36 100%)}

/* Slightly richer surfaces keep the same Gold Standard infographic language. */
.info-panel,.plan-card,.merch-card,.game-shell{box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055)}
.info-panel{background:linear-gradient(180deg,#0c4777,#062a48)}
.infographic-grid.light .info-panel{background:linear-gradient(180deg,#fbfdff,#e1f2fd)}

@media(max-width:1120px){
  .brand-link{width:210px;flex-basis:210px}.main-nav{gap:10px;font-size:.75rem}.header-cta{padding:8px 12px}
  .hero-model img{width:min(390px,88%)}.hero-quote{right:-5px;font-size:1.05rem}
}
@media(max-width:900px){
  .header-row{height:68px}.brand-link{width:205px;flex-basis:205px}.site-header.menu-open .main-nav{top:68px}
  .home-hero{padding:34px 0 60px}.hero-grid,.page-hero-grid{grid-template-columns:1fr}.hero-model{min-height:345px}.hero-model img{width:min(390px,74%)}.hero-quote{right:8%;top:26px}
  .behavior-band{margin-top:-34px}.behavior-grid{grid-template-columns:1fr 1fr}
  .page-hero{min-height:auto}.page-visual img{width:min(335px,65%)}
}
@media(max-width:620px){
  .brand-link{width:175px;flex-basis:175px}.brand-link img{height:48px}
  .home-hero{padding:28px 0 50px;background-position:center}.hero-title{font-size:2.85rem}.hero-copy{font-size:.91rem}.hero-model{min-height:300px}.hero-model img{width:min(330px,88%)}
  .behavior-band{margin-top:-18px}.behavior-grid{grid-template-columns:1fr}.behavior-card .art{height:180px}
  .hero-quote{display:none}.benefit-row{grid-template-columns:repeat(2,1fr)}
  .demo-section{padding-top:30px}.demo-stage{padding:13px}
  .value-section{padding:34px 0}.value-item{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .page-visual img{width:min(300px,82%)}
}

/* V3.1 visual fidelity pass against approved concept */
.behavior-card.c h3{color:#fff}.behavior-card.c .learn{color:#071b2e}
.demo-stage{grid-template-columns:minmax(0,1.1fr) minmax(230px,.82fr) minmax(225px,.68fr);align-items:stretch}
.demo-showcase{position:relative;z-index:2;border:1px solid #3f7096;border-radius:13px;background:linear-gradient(180deg,#103e66,#082b49);padding:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.demo-showcase img{width:100%;max-height:185px;object-fit:cover;object-position:center 32%;border-radius:10px;border:1px solid #5e83a0;box-shadow:0 10px 22px rgba(0,0,0,.2)}
.demo-showcase blockquote{font-family:Georgia,"Times New Roman",serif;font-size:1rem;line-height:1.25;margin:13px 6px 5px;color:#fff}.demo-showcase small{color:#aac8dc}.demo-dots{display:flex;gap:6px;margin-top:10px}.demo-dots i{width:7px;height:7px;border-radius:50%;background:#6f91ad}.demo-dots i:first-child{background:#22a9ff;box-shadow:0 0 0 3px rgba(34,169,255,.13)}

@media(min-width:901px) and (max-width:1120px){
  .value-grid{grid-template-columns:1.15fr repeat(4,.75fr)}.value-intro{grid-column:auto}.utility-grid{grid-template-columns:repeat(3,1fr) auto}.utility-link{border-right:1px solid rgba(255,255,255,.14)}
}
@media(max-width:900px){.demo-stage{grid-template-columns:1fr 1fr}.demo-main{grid-column:1/-1}.demo-showcase,.demo-why{min-height:300px}}
@media(max-width:620px){.demo-stage{grid-template-columns:1fr}.demo-main{grid-column:auto}.demo-showcase,.demo-why{min-height:auto}}

/* =========================================================
   REVIEW DRAFT V4 — HUMAN APPROVAL REQUIRED
   Restores approved hero animal scene, strengthens branding,
   and removes public-facing proprietary implementation copy.
   ========================================================= */

/* Header branding must read as a brand, not a tiny icon. */
.header-row{height:88px;gap:20px}
.brand-link{width:355px;flex:0 0 355px;padding:3px 4px}
.brand-link img{height:76px;object-fit:contain;object-position:left center}
.main-nav{gap:15px;font-size:.8rem}
.main-nav a{padding:31px 2px 27px}
.main-nav a:after{bottom:16px}
.header-cta{padding:10px 18px}

/* Restore the approved concept's lion/owl/elephant/dolphin hero atmosphere.
   The left live-content zone receives a dense overlay so no baked concept copy
   is readable underneath. The live hero logo covers the old concept emblem. */
.home-hero{
  min-height:620px;
  padding:38px 0 98px;
  background-image:
    linear-gradient(90deg,rgba(2,17,33,.985) 0%,rgba(2,20,39,.965) 34%,rgba(2,25,46,.58) 54%,rgba(2,18,34,.08) 79%,rgba(2,17,33,.20) 100%),
    linear-gradient(180deg,rgba(1,12,24,.10) 0%,rgba(1,15,28,.08) 64%,rgba(2,19,36,.90) 100%),
    url('assets/mountain-panorama.webp');
  background-size:cover;
  background-position:center top;
}
.home-hero:before{background:radial-gradient(circle at 69% 38%,rgba(3,19,35,.93) 0 22%,rgba(3,24,44,.72) 31%,transparent 47%);z-index:0}
.home-hero:after{height:165px;background:linear-gradient(transparent,rgba(3,22,41,.985));z-index:0}
.hero-grid{position:relative;z-index:2;grid-template-columns:.86fr 1.14fr;gap:20px}
.hero-copy-zone{padding-top:6px}
.hero-title{font-size:clamp(3.15rem,5.35vw,4.9rem);text-shadow:0 5px 22px rgba(0,0,0,.76)}
.hero-copy{font-size:1rem;max-width:535px;color:#f0f7fd;text-shadow:0 3px 12px rgba(0,0,0,.78)}
.hero-model{min-height:475px;align-self:stretch}
.hero-model:before{width:67%;background:radial-gradient(circle,rgba(2,24,45,.97) 0 49%,rgba(3,34,61,.88) 55%,rgba(13,103,165,.18) 69%,transparent 76%);filter:none}
.hero-model img{width:min(470px,88%);filter:drop-shadow(0 22px 40px rgba(0,0,0,.55))}
.hero-quote{right:0;top:42px;max-width:235px;font-size:1.28rem}
.benefit{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.65)}

/* Public demo clarifiers */
.demo-note{margin:12px 0 0;color:#b9d6ea;font-size:.78rem;line-height:1.4}
.path-story{border-left:3px solid #31a9ef;background:rgba(6,35,60,.72);border-radius:10px;padding:12px 13px;margin-bottom:12px}
.path-story p{margin:5px 0 0;color:#eaf6ff;line-height:1.45}
.story-label{font-size:.7rem;letter-spacing:.14em;font-weight:900;color:#66d5ff}
.path-grid.followup{grid-template-columns:1fr 1fr}
.path-reset{margin-top:12px;background:#0a4d7e;border:1px solid #4f9bc9;color:#fff;border-radius:9px;padding:9px 12px;cursor:pointer}
.rank-item.d{border-left-color:var(--red)}.rank-item.m{border-left-color:var(--blue2)}.rank-item.c{border-left-color:var(--yellow)}.rank-item.e{border-left-color:var(--green)}

/* Secondary pages stay in the same Animal Ego world, with the approved animal
   atmosphere visible behind a stronger content overlay instead of a fog-only scene. */
.page-hero{
  min-height:455px;
  background-image:
    linear-gradient(90deg,rgba(2,18,35,.98) 0%,rgba(2,25,47,.93) 48%,rgba(2,31,57,.72) 70%,rgba(2,24,44,.42) 100%),
    linear-gradient(180deg,rgba(2,17,32,.13),rgba(2,20,38,.74)),
    url('assets/mountain-panorama.webp');
  background-size:cover;
  background-position:center 18%;
}
.page-visual{position:relative}
.page-visual:before{content:"";position:absolute;inset:3% 8%;border-radius:50%;background:radial-gradient(circle,rgba(2,23,43,.94) 0 50%,rgba(4,55,91,.58) 66%,transparent 75%)}
.page-visual img{position:relative;z-index:2;width:min(385px,88%)}
.page-hero p{color:#e6f2fa;text-shadow:0 2px 10px rgba(0,0,0,.45)}

/* Keep all secondary sections visually rich and avoid "white document" falloff. */
.section-light{background:linear-gradient(145deg,#d7efff 0%,#b8def6 52%,#d9efff 100%)}
.section-light:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.55),transparent 28%),radial-gradient(circle at 88% 76%,rgba(65,167,224,.12),transparent 30%)}
.section-light{position:relative;overflow:hidden}.section-light>.container{position:relative;z-index:1}
.info-panel,.plan-card,.merch-card{border:1px solid rgba(89,174,226,.22)}
.infographic-grid.light .info-panel{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(225,242,253,.94))}

/* Assessment shell: user-facing only, no internal implementation notes. */
.game-context{margin:10px 0 0;color:#c7e0f2;font-size:.94rem;max-width:900px}

@media(max-width:1260px){
  .brand-link{width:315px;flex-basis:315px}.brand-link img{height:70px}.main-nav{gap:10px;font-size:.74rem}
}
@media(max-width:1120px){
  .header-row{height:78px}.brand-link{width:255px;flex-basis:255px}.brand-link img{height:62px}.main-nav{gap:8px;font-size:.7rem}.main-nav a{padding:27px 1px 23px}.header-cta{padding:8px 12px}
  .hero-model img{width:min(430px,90%)}
}
@media(max-width:900px){
  .header-row{height:72px}.brand-link{width:225px;flex-basis:225px}.brand-link img{height:58px}.site-header.menu-open .main-nav{top:72px}
  .home-hero{background-position:60% top}.hero-copy-zone{background:linear-gradient(90deg,rgba(2,18,34,.92),rgba(2,18,34,.62),transparent);border-radius:18px;padding:18px}
  .hero-model{min-height:360px}.hero-model img{width:min(400px,78%)}
}
@media(max-width:620px){
  .brand-link{width:190px;flex-basis:190px}.brand-link img{height:52px}
  .home-hero{background-position:68% top}.hero-copy-zone{padding:14px}.hero-title{font-size:2.8rem}.hero-copy{font-size:.92rem}
  .path-grid.followup{grid-template-columns:1fr}
  .page-hero{background-position:62% center}
}

/* =========================================================
   REVIEW DRAFT V5 — HUMAN REVIEW ONLY
   - no approved-concept screenshot is used as a live background
   - representative animals are separate foreground elements
   - header brand is deliberately prominent and legible
   - dedicated DMCE education page added
   ========================================================= */

/* Brand prominence */
.site-header .container{width:min(1500px,calc(100% - 36px))}
.header-row{height:104px;gap:18px}
.brand-link{width:430px;flex:0 0 430px;padding:3px 2px;background:rgba(2,21,39,.22)}
.brand-link img{height:92px;width:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 8px rgba(0,0,0,.52))}
.main-nav{gap:13px;font-size:.76rem}
.main-nav a{padding:39px 1px 34px}
.main-nav a:after{bottom:23px}
.header-cta{padding:10px 17px;white-space:nowrap}

/* Homepage: clean scenic base only. The old approved concept PNG/JPEG is never a runtime background. */
.home-hero{
  min-height:650px;
  padding:42px 0 102px;
  background-image:
    linear-gradient(90deg,rgba(2,18,35,.985) 0%,rgba(2,22,42,.94) 34%,rgba(2,29,52,.58) 58%,rgba(2,22,41,.26) 100%),
    linear-gradient(180deg,rgba(2,20,38,.14) 0%,rgba(2,18,35,.17) 66%,rgba(2,20,38,.98) 100%),
    url('assets/mountain-panorama.webp');
  background-size:cover;
  background-position:center 54%;
}
.home-hero:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 67%,rgba(14,91,58,.30),transparent 28%),
    radial-gradient(ellipse at 69% 54%,rgba(18,91,142,.24),transparent 40%),
    linear-gradient(180deg,transparent 63%,rgba(3,24,43,.54) 100%);
}
.home-hero:after{height:170px;z-index:0;background:linear-gradient(transparent,rgba(3,22,41,.99))}
.hero-grid{position:relative;z-index:2;grid-template-columns:.83fr 1.17fr;gap:18px;align-items:center}
.hero-copy-zone{position:relative;z-index:10;padding-top:4px}
.hero-title{font-size:clamp(3.2rem,5.25vw,4.95rem);text-shadow:0 5px 22px rgba(0,0,0,.72)}
.hero-copy{max-width:555px;font-size:1rem;line-height:1.58;color:#eff8ff;text-shadow:0 3px 12px rgba(0,0,0,.74)}

/* Independent hero art — no baked old page, old copy, or old emblem. */
.hero-model{position:relative;min-height:500px;align-self:stretch;overflow:visible;isolation:isolate}
.hero-model:before{content:"";position:absolute;left:50%;top:45%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:0;background:radial-gradient(circle,rgba(2,27,49,.96) 0 48%,rgba(5,53,86,.73) 58%,rgba(25,152,219,.10) 72%,transparent 78%)}
.hero-emblem{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:8;width:min(410px,48%)}
.hero-emblem img{width:100%;filter:drop-shadow(0 20px 38px rgba(0,0,0,.60))}
.hero-animal{position:absolute;z-index:4;object-fit:cover;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));-webkit-mask-image:radial-gradient(ellipse at 50% 52%,#000 52%,rgba(0,0,0,.94) 63%,transparent 82%);mask-image:radial-gradient(ellipse at 50% 52%,#000 52%,rgba(0,0,0,.94) 63%,transparent 82%)}
.animal-lion{width:285px;height:255px;left:0;bottom:15px;object-position:54% 42%}
.animal-owl{width:205px;height:205px;left:23%;bottom:-3px;object-position:50% 38%;z-index:6}
.animal-elephant{width:295px;height:245px;right:12%;bottom:9px;object-position:53% 45%}
.animal-dolphin{width:255px;height:215px;right:-6%;bottom:7px;object-position:59% 50%}
.hero-quote{right:0;top:78px;z-index:10;max-width:210px;color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.82)}

/* Education / DMCE public-learning page */
.text-link{color:#63d7ff;text-decoration:underline;text-underline-offset:3px}
.education-energy-grid .energy-copy small{display:block;margin-top:12px;color:#315a78;font-weight:800;font-size:.82rem;line-height:1.4}
.combo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.combo-card{position:relative;overflow:hidden;min-height:178px;padding:19px;border:1px solid rgba(94,175,227,.25);border-radius:16px;background:linear-gradient(180deg,rgba(11,65,106,.96),rgba(5,37,66,.98));box-shadow:0 15px 30px rgba(0,0,0,.22)}
.combo-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#3a9ee8}
.combo-card h3{margin:0 0 9px;font-size:1rem}.combo-card p{margin:0;color:#c9dfee;font-size:.87rem;line-height:1.5}
.combo-card.dd:before,.combo-card.dm:before,.combo-card.dc:before,.combo-card.de:before{background:var(--red)}
.combo-card.md:before,.combo-card.mm:before,.combo-card.mc:before,.combo-card.me:before{background:var(--blue2)}
.combo-card.cd:before,.combo-card.cm:before,.combo-card.cc:before,.combo-card.ce:before{background:var(--yellow)}
.combo-card.ed:before,.combo-card.em:before,.combo-card.ec:before,.combo-card.ee:before{background:var(--green)}
.cta-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Keep secondary-page family clean and consistent; no screenshot-based page backgrounds. */
.page-hero{background:
  radial-gradient(circle at 73% 40%,rgba(29,163,229,.17),transparent 34%),
  linear-gradient(90deg,rgba(2,20,39,.98),rgba(4,45,78,.90) 58%,rgba(5,64,102,.72)),
  url('assets/mountain-panorama.webp') center 56%/cover no-repeat;
}

@media(max-width:1360px){
  .brand-link{width:365px;flex-basis:365px}.brand-link img{height:84px}.main-nav{gap:9px;font-size:.70rem}.header-cta{padding:9px 13px}
  .animal-lion{width:255px}.animal-owl{width:185px}.animal-elephant{width:265px}.animal-dolphin{width:225px}.hero-emblem{width:min(375px,46%)}
}
@media(max-width:1120px){
  .header-row{height:90px}.brand-link{width:320px;flex-basis:320px}.brand-link img{height:76px}.main-nav{gap:7px;font-size:.65rem}.main-nav a{padding:33px 1px 29px}.main-nav a:after{bottom:19px}.header-cta{font-size:.76rem;padding:8px 10px}
  .combo-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .site-header .container{width:min(100% - 28px,var(--max))}.header-row{height:82px}.brand-link{width:280px;flex-basis:280px}.brand-link img{height:70px}.main-nav,.header-cta{display:none}.menu-btn{display:block}.site-header.menu-open .main-nav{display:flex;top:82px}.site-header.menu-open .header-cta{display:inline-flex;top:450px}
  .home-hero{padding:34px 0 70px}.hero-grid{grid-template-columns:1fr}.hero-model{min-height:440px}.hero-emblem{width:min(350px,48%)}.animal-lion{left:4%;}.animal-owl{left:28%}.animal-elephant{right:15%}.animal-dolphin{right:-1%}
}
@media(max-width:620px){
  .header-row{height:76px}.brand-link{width:245px;flex-basis:245px}.brand-link img{height:64px}.site-header.menu-open .main-nav{top:76px}.site-header.menu-open .header-cta{top:444px}
  .home-hero{padding-top:30px}.hero-title{font-size:2.82rem}.hero-model{min-height:390px;margin-top:8px}.hero-emblem{width:205px;top:12px}.animal-lion{width:180px;height:170px;left:-3%;bottom:18px}.animal-owl{width:132px;height:135px;left:23%;bottom:0}.animal-elephant{width:180px;height:155px;right:11%;bottom:20px}.animal-dolphin{width:160px;height:142px;right:-7%;bottom:8px}.hero-quote{display:none}
  .combo-grid{grid-template-columns:1fr}.combo-card{min-height:auto}
}

/* =========================================================
   V6 HUMAN REVIEW — DO NOT HAND TO CLAUDE UNTIL USER APPROVES
   User-supplied jungle image is the ONLY photographic hero/page wallpaper.
   No floating/staggered hero animals are used. The AEBA hero emblem is layered
   over the clean wallpaper between the lion and elephant.
   ========================================================= */

/* Prominent brand treatment: Behavioral Analysis must be readable. */
.site-header .container{width:min(1480px,calc(100% - 40px))}
.header-row{height:92px;gap:18px}
.brand-link{width:345px;flex:0 0 345px;padding:2px 4px}
.brand-link img{height:78px;width:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}
.main-nav{gap:13px;font-size:.79rem}
.main-nav a{padding:32px 1px 29px}
.main-nav a:after{bottom:18px}
.header-cta{padding:10px 17px;white-space:nowrap}

/* Exact clean user-supplied image: no old screenshot, text, or baked UI. */
.home-hero{
  min-height:650px;
  padding:44px 0 78px;
  background:
    linear-gradient(90deg,rgba(1,13,26,.94) 0%,rgba(1,19,35,.84) 31%,rgba(2,25,42,.36) 50%,rgba(2,22,37,.10) 72%,rgba(1,18,32,.14) 100%),
    linear-gradient(180deg,rgba(2,16,29,.08) 0%,rgba(2,16,29,.04) 64%,rgba(2,18,34,.82) 100%),
    url('assets/animal-ego-jungle-wallpaper.webp') center 47%/cover no-repeat;
}
.home-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,18,34,.34),transparent 52%);z-index:-1;pointer-events:none}
.home-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(transparent,rgba(3,22,41,.98));z-index:-1;pointer-events:none}
.hero-grid{grid-template-columns:.86fr 1.14fr;gap:18px;align-items:center;position:relative}
.hero-copy-zone{position:relative;z-index:4;max-width:595px;text-shadow:0 2px 13px rgba(0,0,0,.74)}
.hero-title{font-size:clamp(3.15rem,5.2vw,4.95rem);line-height:.9}
.hero-subtitle{font-size:clamp(1.18rem,1.9vw,1.52rem)}
.hero-copy{color:#f0f8ff;max-width:565px;background:linear-gradient(90deg,rgba(2,20,38,.34),rgba(2,20,38,0));padding:4px 4px 4px 0;border-radius:8px}
.hero-model{position:relative;min-height:515px;align-self:stretch;display:block}
.hero-model:before{display:none}
.hero-model .hero-emblem{position:absolute;left:4%;top:21%;width:330px;z-index:5;display:block;filter:drop-shadow(0 20px 34px rgba(0,0,0,.52))}
.hero-model .hero-emblem img{width:100%;max-width:none;filter:none}
.hero-quote{right:0;top:44px;bottom:auto;background:rgba(2,20,37,.28);border:0;padding:10px 12px;box-shadow:none;max-width:238px;font-family:"Segoe Script","Brush Script MT",cursive;font-size:1.2rem;line-height:1.08;letter-spacing:.012em;text-transform:none;font-style:italic;font-weight:700;text-shadow:0 3px 13px rgba(0,0,0,.85);transform:rotate(-4deg)}
.benefit{background:rgba(2,24,43,.28);border-radius:10px;padding:9px 5px;text-shadow:0 2px 6px rgba(0,0,0,.68)}

/* Keep the approved, frictionless inline playable demonstration architecture. */
.demo-section{padding:34px 0 46px}
.demo-tabs{margin-top:14px}
.demo-stage{min-height:390px}

/* Same clean jungle wallpaper family on secondary-page hero banners. No page screenshots. */
.page-hero{
  min-height:430px;
  padding:58px 0 48px;
  background:
    linear-gradient(90deg,rgba(2,17,32,.97) 0%,rgba(3,31,53,.90) 48%,rgba(3,32,53,.60) 100%),
    linear-gradient(180deg,rgba(2,18,34,.10),rgba(2,18,34,.68)),
    url('assets/animal-ego-jungle-wallpaper.webp') center 46%/cover no-repeat;
}
.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,17,31,.34),transparent 66%);z-index:-1;pointer-events:none}
.page-hero .page-visual{position:relative;z-index:2}
.page-hero .page-visual img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.48))}

/* Never use the old screenshot as a background anywhere. */
.value-section{
  background:linear-gradient(105deg,rgba(3,30,54,.98),rgba(3,40,67,.91) 55%,rgba(4,55,86,.82)),
             url('assets/animal-ego-jungle-wallpaper.webp') center 62%/cover no-repeat;
}

@media(max-width:1260px){
  .brand-link{width:290px;flex-basis:290px}.brand-link img{height:70px}
  .main-nav{gap:9px;font-size:.72rem}.header-cta{padding:9px 12px}
}
@media(max-width:1120px){
  .main-nav,.header-cta{display:none}.menu-btn{display:block}.header-row{height:82px}
  .brand-link{width:310px;flex-basis:310px}.brand-link img{height:72px}
  .site-header.menu-open .main-nav{display:flex;position:absolute;top:82px;left:0;right:0;flex-direction:column;align-items:stretch;background:#041e39;padding:12px 20px 18px;border-bottom:1px solid #24567e}
  .site-header.menu-open .main-nav a{padding:11px 8px}.site-header.menu-open .main-nav a:after{bottom:4px}
  .site-header.menu-open .header-cta{display:inline-flex;position:absolute;top:428px;left:20px;right:20px;z-index:71}
}
@media(max-width:900px){
  .home-hero{min-height:auto;padding:34px 0 58px;background-position:58% 48%}
  .hero-grid{grid-template-columns:1fr}.hero-copy-zone{max-width:610px}
  .hero-model{min-height:360px}
  .hero-model .hero-emblem{left:50%;top:10%;width:min(330px,62vw);transform:translateX(-50%)}
  .hero-quote{right:5%;top:18px}
  .page-hero{background-position:60% 46%}
}
@media(max-width:620px){
  .site-header .container{width:min(100% - 22px,1480px)}
  .header-row{height:74px}.brand-link{width:245px;flex-basis:245px}.brand-link img{height:62px}
  .site-header.menu-open .main-nav{top:74px}.site-header.menu-open .header-cta{top:420px}
  .home-hero{background-position:57% 45%}
  .hero-title{font-size:3rem}.hero-model{min-height:300px}.hero-model .hero-emblem{width:min(285px,74vw);top:7%}
}

/* V6.1 visual correction after self-audit: increase header brand legibility and
   keep hero emblem out of the marketing-copy column. */
@media(min-width:1261px){
  .header-row{height:100px}
  .brand-link{width:395px;flex-basis:395px}
  .brand-link img{height:88px}
  .main-nav{gap:11px;font-size:.76rem}
  .main-nav a{padding:36px 1px 33px}
  .main-nav a:after{bottom:20px}
}
.hero-model .hero-emblem{left:3%;top:23%;width:268px}
@media(max-width:900px){.hero-model .hero-emblem{left:50%;width:min(300px,60vw)}}
/* V6.2: final review placement — emblem sits fully inside the visual field, not over live copy. */
.hero-model .hero-emblem{left:18%;top:23%;width:245px}
@media(max-width:900px){.hero-model .hero-emblem{left:50%;width:min(290px,60vw)}}