
:root{--black:#080808;--paper:#efefe9;--white:#f7f7f3;--fluo:#dfff00;--muted:#74746d;--line:rgba(10,10,10,.14);--pink:#ff2aa1;--cyan:#18f0ff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--black);color:var(--black)}a{color:inherit}
.topbar{position:fixed;top:0;left:0;right:0;height:70px;padding:0 4vw;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;z-index:100;color:white;mix-blend-mode:difference}
.brand{font-weight:900;text-decoration:none;letter-spacing:-.04em}.topbar nav{display:flex;justify-content:center;gap:16px}.topbar nav a{font-size:.58rem;letter-spacing:.12em;text-decoration:none;font-weight:800;opacity:.7}.project{text-align:right;font-size:.6rem;letter-spacing:.13em;font-weight:800;opacity:.65}
.story{min-height:100vh;position:relative;scroll-margin-top:70px}.shell{padding:112px 5vw 110px}.light,.case-section{background:var(--paper)}.alt{background:#e8e8e2}
.eyebrow{font-size:.62rem;letter-spacing:.17em;font-weight:900;opacity:.55}.eyebrow.dark{color:#686860;opacity:1}
.hero{background:#080808;color:white;overflow:hidden}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px}.hero-glow{position:absolute;width:760px;height:760px;right:-250px;top:0;border-radius:50%;background:radial-gradient(circle,var(--fluo),rgba(223,255,0,.1) 35%,transparent 70%);opacity:.5;filter:blur(22px)}
.hero-inner{position:relative;z-index:2;padding:120px 5vw 50px;min-height:100vh;display:flex;flex-direction:column}.hero-main{flex:1;display:grid;grid-template-columns:1.5fr .5fr;gap:40px;align-items:center}.hero-main h1{font-size:clamp(4.5rem,10.5vw,9.2rem);line-height:.74;letter-spacing:-.09em;margin:0;font-weight:900}.hero-main h1 span{color:var(--fluo);font-weight:500}.hero-copy{align-self:end;margin-bottom:8vh}.hero-copy p{font-size:.96rem;line-height:1.65;color:#aaa;max-width:430px}.hero-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:.58rem;letter-spacing:.12em;color:#777}
.pill,.nav-btn{display:inline-block;text-decoration:none;border-radius:999px;padding:13px 17px;font-weight:900;font-size:.74rem;transition:.2s}.pill:hover,.nav-btn:hover{transform:translateY(-2px)}.fluo,.fluo-btn{background:var(--fluo);color:#080808}
.why-head{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:end}.section-title{font-size:clamp(2.9rem,5.5vw,5.6rem);letter-spacing:-.07em;line-height:.94;margin:12px 0 0}.why-copy{font-size:.95rem;line-height:1.65;color:#666;max-width:560px}
.data-grid{margin-top:50px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.data-card{min-height:235px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}.data-card span{font-size:.6rem;letter-spacing:.13em;font-weight:900;color:#777}.data-card strong{font-size:clamp(2.8rem,5vw,5rem);letter-spacing:-.07em}.data-card p{font-size:.85rem;font-weight:700;margin:0}.data-card small{font-size:.65rem;color:#888}.data-card.black{background:#080808;color:white}.fluo-card{background:var(--fluo)}
.why-line{margin-top:28px;background:#111;color:white;padding:26px;display:grid;grid-template-columns:180px 1fr;gap:30px}.why-line span{font-size:.6rem;letter-spacing:.13em;font-weight:900;color:var(--fluo)}.why-line p{margin:0;font-size:1.1rem;line-height:1.5;color:#aaa}.why-line strong{color:white}
.objective{background:#080808;color:white;overflow:hidden}.objective-glow{position:absolute;width:800px;height:800px;right:-300px;bottom:-300px;border-radius:50%;background:radial-gradient(circle,var(--cyan),transparent 68%);opacity:.15;filter:blur(28px)}.objective-shell{position:relative;z-index:2}.objective h2,.case-intro h2,.summary h2{font-size:clamp(3.8rem,8vw,7.8rem);line-height:.84;letter-spacing:-.08em;margin:18px 0 0}.objective h2 span,.case-intro h2 span,.summary h2 span{color:var(--fluo)}
.objective-content{margin-top:55px;display:grid;grid-template-columns:1fr 60px 1fr;align-items:center}.objective-card{border:1px solid rgba(255,255,255,.15);padding:26px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}.objective-card span,.objective-question span{font-size:.6rem;letter-spacing:.13em;font-weight:900;color:#777}.objective-card strong{font-size:2rem}.objective-card p{color:#888;line-height:1.6}.objective-card.accent{background:var(--fluo);color:#080808;border-color:var(--fluo)}.objective-card.accent span,.objective-card.accent p{color:#080808}.objective-arrow{text-align:center;color:var(--fluo);font-size:1.6rem;font-weight:900}.objective-question{margin-top:24px;border-top:1px solid rgba(255,255,255,.15);padding-top:24px}.objective-question p{font-size:1.5rem;line-height:1.35;max-width:900px;color:#ccc}
.case-choice{margin-top:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.choice-card{min-height:480px;padding:28px;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}.active-choice{background:#090909;color:white}.coming{background:#e4e4dd}.case-number,.case-type{font-size:.6rem;letter-spacing:.14em;font-weight:900;opacity:.55}.choice-card h3{font-size:clamp(2.2rem,4vw,4rem);line-height:.96;letter-spacing:-.055em;margin:12px 0 18px}.choice-card p{font-size:.85rem;line-height:1.6;color:#888}.open-case{font-size:.72rem;font-weight:900;color:var(--fluo)}.muted{color:#888}
.case-intro,.summary{background:#080808;color:white;overflow:hidden}.case-intro-glow,.summary-glow{position:absolute;width:850px;height:850px;left:-320px;bottom:-360px;border-radius:50%;background:radial-gradient(circle,var(--pink),transparent 68%);opacity:.18;filter:blur(30px)}
.case-index{position:relative;z-index:2;margin-top:48px;border-top:1px solid rgba(255,255,255,.14)}.case-index a{display:grid;grid-template-columns:65px 1fr 1fr;gap:18px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none}.case-index span{font-size:.6rem;color:var(--fluo);font-weight:900}.case-index strong{font-size:1.2rem}.case-index small{color:#777}
.case-head{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:end}.case-head h2{font-size:clamp(2.5rem,4.7vw,4.7rem);line-height:.94;letter-spacing:-.065em;margin:10px 0 0}.case-head h2 span{color:#8b8b84}.case-summary{max-width:520px;line-height:1.65;color:#62625c;font-size:.9rem}
.compare-grid{margin-top:42px;display:grid;grid-template-columns:1fr 50px 1fr;gap:18px;align-items:center}.screen-label{font-size:.6rem;letter-spacing:.13em;font-weight:900;color:#777;margin-bottom:10px}.fluo-text{color:#6b7f00}.browser{background:white;border:1px solid #c9c9c2;box-shadow:0 18px 50px rgba(0,0,0,.08);aspect-ratio:16/10;display:flex;flex-direction:column;overflow:hidden}.browser-bar{height:44px;border-bottom:1px solid #ddd;background:#f8f8f5;display:flex;align-items:center;gap:6px;padding:0 12px;position:relative}.browser-bar i{width:7px;height:7px;border-radius:50%;background:#c7c7c0}.browser-bar div{position:absolute;left:50%;transform:translateX(-50%);background:#ecece7;border-radius:5px;padding:6px 45px;font-size:.58rem;color:#777}.browser-screen{position:relative;flex:1;background:linear-gradient(135deg,#e6e6e0,#fafaf7);display:grid;place-items:center;overflow:hidden}.browser-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top center;background:white}.placeholder{text-align:center;display:grid;gap:7px}.placeholder span{font-size:.58rem;letter-spacing:.13em;font-weight:900;color:#999}.placeholder strong{font-size:1rem}.caption{font-size:.78rem;line-height:1.5;color:#676760;margin:12px 0 0}.solution .browser{outline:2px solid var(--fluo);outline-offset:-2px}.arrow-col{text-align:center;font-size:1.6rem;font-weight:900;color:#777}
.summary-inner{position:relative;z-index:2;padding:120px 5vw 120px}.summary-flow{margin-top:50px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}.summary-flow div{border:1px solid rgba(255,255,255,.15);padding:12px 14px;border-radius:999px;color:#bbb}.summary-flow b{color:var(--fluo)}.summary-flow .monetate{background:var(--fluo);color:#080808;font-weight:900;border-color:var(--fluo)}.summary-flow .value{background:white;color:#080808;font-weight:900}
.section-controls{position:absolute;left:5vw;right:5vw;bottom:26px;display:flex;justify-content:space-between;z-index:4}.ghost{border:1px solid var(--line);background:rgba(255,255,255,.7)}.dark-btn{background:#080808;color:white}.ghost-light{border:1px solid rgba(255,255,255,.22);color:white}
.progress{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;display:grid;gap:8px}.progress a{width:8px;height:8px;border-radius:50%;border:1px solid #888;background:rgba(255,255,255,.35)}.progress a.active{background:var(--fluo);border-color:var(--fluo);transform:scale(1.25)}
@media(max-width:900px){.topbar nav,.project{display:none}.topbar{grid-template-columns:1fr}.hero-main,.why-head,.case-head,.objective-content,.case-choice{grid-template-columns:1fr}.objective-arrow,.arrow-col{transform:rotate(90deg)}.compare-grid{grid-template-columns:1fr}.data-grid{grid-template-columns:1fr}.case-index a{grid-template-columns:45px 1fr}.case-index small{grid-column:2}.section-controls{position:relative;left:auto;right:auto;bottom:auto;margin:20px 5vw 0;padding-bottom:30px}.story{min-height:auto}.progress{display:none}.why-line{grid-template-columns:1fr}}


/* ===== V2 WHY NIKE EXPANSION ===== */
.why-numbers a{text-decoration:none;color:inherit}
.clickable-card{position:relative;transition:transform .2s ease,box-shadow .2s ease}
.clickable-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(0,0,0,.12)}
.why-points{margin-top:34px;border-top:1px solid var(--line)}
.why-point{display:grid;grid-template-columns:70px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.point-no{font-size:.62rem;font-weight:900;color:#8a8a82;padding-top:6px}
.why-point h3{font-size:1.35rem;letter-spacing:-.035em;margin:0 0 7px}
.why-point p{font-size:.82rem;line-height:1.6;color:#696962;max-width:820px;margin:0}
.tech-point{grid-template-columns:70px .7fr 1fr;gap:22px;align-items:center;padding:28px 0}
.inline-source{display:inline-block;margin-top:12px;font-size:.68rem;font-weight:900;text-decoration:none;border-bottom:1px solid #111;padding-bottom:2px}
.tech-shot{min-width:0}
.mini-browser{aspect-ratio:16/8.5;box-shadow:0 12px 35px rgba(0,0,0,.08)}
.mini-browser .browser-screen{min-height:0}
@media(max-width:900px){
  .tech-point{grid-template-columns:45px 1fr}
  .tech-shot{grid-column:2}
}


/* ===== WHY NIKE · ANALYSIS 01 ONLY ===== */
.why-analysis{margin-top:42px}
.analysis-heading{display:grid;grid-template-columns:70px minmax(0,760px);gap:20px;padding:24px 0 30px;border-top:1px solid var(--line)}
.analysis-no{font-size:.7rem;font-weight:900;color:#85857e;padding-top:5px}
.analysis-heading h3{font-size:clamp(1.9rem,3.2vw,3.2rem);line-height:1;letter-spacing:-.05em;margin:7px 0 12px}
.analysis-intro{font-size:.86rem;line-height:1.65;color:#686861;max-width:700px;margin:0}
.evidence-grid{display:grid;grid-template-columns:1fr 48px 1fr;gap:18px;align-items:center;margin-top:10px}
.evidence-card{min-width:0}
.evidence-top{display:flex;justify-content:space-between;gap:15px;align-items:end;margin-bottom:10px}
.evidence-top span{font-size:.58rem;letter-spacing:.13em;font-weight:900;color:#777}
.evidence-top strong{font-size:.75rem}
.evidence-browser{aspect-ratio:16/9.5}
.evidence-caption{font-size:.76rem;line-height:1.5;color:#686861;max-width:600px}
.comparison-mark{display:grid;place-items:center}
.comparison-mark span{width:42px;height:42px;border-radius:50%;background:#090909;color:var(--fluo);display:grid;place-items:center;font-size:.65rem;font-weight:900}
.competitor-card .browser{outline:2px solid var(--fluo);outline-offset:-2px}
.benchmark-result{margin-top:35px;padding:28px;background:#090909;color:white;display:grid;grid-template-columns:.65fr 1fr;gap:25px;align-items:center}
.benchmark-result span{font-size:.58rem;letter-spacing:.13em;font-weight:900;color:var(--fluo)}
.benchmark-result h4{font-size:clamp(1.6rem,2.6vw,2.7rem);line-height:1.03;letter-spacing:-.045em;margin:10px 0}
.benchmark-result>p{grid-column:1/-1;color:#888;font-size:.78rem;line-height:1.55;margin:0;max-width:850px}
.result-browser{aspect-ratio:16/7.5}
.analysis-takeaway{margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:170px 1fr;gap:25px}
.analysis-takeaway span{font-size:.58rem;letter-spacing:.13em;font-weight:900;color:#777}
.analysis-takeaway p{font-size:.9rem;line-height:1.6;margin:0;max-width:900px;color:#666}
.analysis-takeaway strong{color:#090909}
@media(max-width:900px){
  .analysis-heading{grid-template-columns:45px 1fr}
  .evidence-grid{grid-template-columns:1fr}
  .comparison-mark{padding:5px 0}
  .benchmark-result{grid-template-columns:1fr}
  .benchmark-result>p{grid-column:auto}
  .analysis-takeaway{grid-template-columns:1fr}
}


/* ===== V4 WHY NIKE: NUMBERS BEFORE ANALYSIS 01 ===== */
#why .why-numbers{
  margin-top:42px;
}
#why .why-analysis{
  margin-top:46px;
}


/* ===== V5 FINAL PERSONALIZATION SIMULATOR ===== */
.simulator-section{background:#080808;color:white;overflow:hidden;min-height:130vh}
.simulator-shell{position:relative;z-index:2;padding-bottom:135px}
.sim-bg-word{position:absolute;top:70px;left:-2vw;font-size:15vw;font-weight:900;letter-spacing:-.09em;color:rgba(255,255,255,.025);white-space:nowrap}
.sim-intro{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:end}
.sim-intro h2{font-size:clamp(3rem,6vw,6rem);line-height:.88;letter-spacing:-.075em;margin:12px 0 0}
.sim-intro h2 span{color:var(--fluo)}
.sim-intro>p{font-size:.88rem;line-height:1.65;color:#888;max-width:470px}
.signal-panel{margin-top:40px;display:grid;grid-template-columns:.85fr 1fr 1fr 1.3fr;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.025)}
.signal-group{padding:18px;border-right:1px solid rgba(255,255,255,.1)}.signal-group:last-child{border-right:0}
.signal-title{display:block;font-size:.52rem;letter-spacing:.14em;font-weight:900;color:#777;margin-bottom:12px}
.toggle-row{display:flex;gap:6px;flex-wrap:wrap}
.sim-option{border:1px solid rgba(255,255,255,.16);background:transparent;color:#999;border-radius:999px;padding:8px 11px;font:700 .65rem Inter;cursor:pointer;transition:.2s}
.sim-option:hover{color:white;border-color:#777}.sim-option.active{background:var(--fluo);border-color:var(--fluo);color:#080808}
.sim-stage{position:relative;margin-top:26px;min-height:780px;display:grid;place-items:center}
.city-backdrop{position:absolute;inset:0;overflow:hidden;background:#161616}
.city-backdrop img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.42;transition:opacity .4s}
.city-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.18) 48%,rgba(0,0,0,.55))}
.city-label{position:absolute;left:25px;bottom:24px;display:grid;gap:4px}.city-label small{font-size:.52rem;letter-spacing:.15em;color:var(--fluo);font-weight:900}.city-label strong{font-size:1.8rem;letter-spacing:-.05em}
.commerce-window{position:relative;z-index:3;width:min(1060px,88%);background:white;color:#080808;box-shadow:0 35px 100px rgba(0,0,0,.55);overflow:hidden}
.commerce-browserbar{height:42px;background:#f1f1ed;border-bottom:1px solid #ddd;display:flex;align-items:center;padding:0 13px;position:relative}
.browser-dots{display:flex;gap:5px}.browser-dots i{width:7px;height:7px;background:#c7c7c0;border-radius:50%}
.commerce-url{position:absolute;left:50%;transform:translateX(-50%);background:white;padding:6px 55px;border-radius:5px;font-size:.56rem;color:#777}
.personalized-badge{margin-left:auto;font-size:.48rem;letter-spacing:.12em;font-weight:900;background:var(--fluo);padding:5px 7px}
.nike-demo-top{height:54px;padding:0 22px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;border-bottom:1px solid #eee;font-size:.65rem}.nike-demo-top>strong{font-size:1.25rem;font-style:italic}.nike-demo-top nav{display:flex;justify-content:center;gap:22px;font-weight:700}.nike-demo-top>div{text-align:right}
.demo-hero{height:330px;position:relative;background:#ddd;overflow:hidden}.demo-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.demo-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),transparent 62%)}
.demo-hero-copy{position:absolute;z-index:2;left:34px;top:50%;transform:translateY(-50%);color:white;max-width:360px}.demo-hero-copy>span{font-size:.52rem;letter-spacing:.15em;font-weight:900;color:var(--fluo)}.demo-hero-copy h3{font-size:3rem;line-height:.84;letter-spacing:-.07em;margin:8px 0}.demo-hero-copy p{font-size:.7rem;color:#ddd;max-width:300px}.demo-hero-copy button{border:0;background:white;padding:9px 13px;border-radius:999px;font-size:.62rem;font-weight:900}
.demo-section-head{padding:20px 22px 12px;display:flex;justify-content:space-between;align-items:end}.demo-section-head small{font-size:.48rem;letter-spacing:.13em;font-weight:900;color:#777}.demo-section-head h4{font-size:1.35rem;margin:3px 0 0;letter-spacing:-.04em}.demo-section-head>span{font-size:.56rem;color:#888}
.product-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 22px 20px}.demo-product{display:grid;gap:4px}.product-image{height:155px;background:#efefeb;position:relative;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.product-image span{position:absolute;top:8px;left:8px;background:white;padding:4px 6px;font-size:.48rem;font-weight:900}.demo-product>strong{font-size:.7rem}.demo-product>small{font-size:.52rem;color:#888}
.return-strip{margin:0 22px 22px;background:#111;color:white;padding:13px 16px;display:flex;align-items:center;justify-content:space-between}.return-strip div{display:grid;gap:3px}.return-strip small{font-size:.45rem;letter-spacing:.13em;color:var(--fluo);font-weight:900}.return-strip strong{font-size:.72rem}.return-strip>span{font-size:.58rem;color:#aaa}
.member-popup{display:none;position:absolute;z-index:10;right:25px;top:90px;width:280px;background:var(--fluo);padding:25px;box-shadow:0 25px 65px rgba(0,0,0,.3)}.member-popup.visible{display:block;animation:popIn .35s ease}.member-popup>span{font-size:.5rem;letter-spacing:.15em;font-weight:900}.member-popup>strong{display:block;font-size:3.2rem;letter-spacing:-.07em;margin-top:8px}.member-popup h4{font-size:1.15rem;margin:0 0 8px}.member-popup p{font-size:.67rem;line-height:1.5}.popup-close{position:absolute;right:8px;top:7px;border:0;background:transparent;font-size:1.2rem;cursor:pointer}.join-btn{background:#080808;color:white;border:0;border-radius:999px;padding:9px 14px;font-size:.62rem;font-weight:900}
@keyframes popIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.sim-logic{margin-top:22px;display:grid;grid-template-columns:1fr 35px 1.2fr 35px 1fr;align-items:center;gap:8px}.sim-logic>div{border:1px solid rgba(255,255,255,.14);padding:15px;display:grid;gap:5px}.sim-logic span{font-size:.48rem;letter-spacing:.14em;font-weight:900;color:#777}.sim-logic strong{font-size:.72rem}.sim-logic>b{text-align:center;color:var(--fluo)}.sim-logic .logic-engine{background:var(--fluo);color:#080808;border-color:var(--fluo)}.sim-logic .logic-engine span{color:#080808}
.image-guide{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}.image-guide>span{font-size:.5rem;letter-spacing:.14em;font-weight:900;color:var(--fluo)}.image-guide p{font-size:.6rem;line-height:1.8;color:#777}.image-guide code{color:#bbb}
@media(max-width:900px){.sim-intro,.signal-panel{grid-template-columns:1fr}.signal-group{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.sim-stage{min-height:650px}.commerce-window{width:95%}.nike-demo-top nav{display:none}.nike-demo-top{grid-template-columns:1fr 1fr}.demo-hero{height:280px}.product-row{grid-template-columns:1fr 1fr}.demo-product:nth-child(3){display:none}.sim-logic{grid-template-columns:1fr}.sim-logic>b{transform:rotate(90deg)}}
