/* Premium family-feature 3D animation theme. Loaded after the structural base. */
:root{
  --ink:#071326;
  --paper:#fff7e8;
  --paper-2:#f1ddbf;
  --muted:#a9b5c7;
  --line:rgba(255,255,255,.18);
  --line-dark:rgba(35,25,42,.15);
  --accent:#ff6b63;
  --chapter-accent:#ffd24a;
  --display:"Arial Rounded MT Bold","Trebuchet MS","Segoe UI",sans-serif;
  --body:"Segoe UI Variable","Trebuchet MS","Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.9,.2,1.15);
}

html{background:#071326}
body{background:#071326;color:var(--paper)}
body::before{content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;background:
  radial-gradient(circle at 14% 22%,rgba(75,166,255,.14),transparent 28%),
  radial-gradient(circle at 84% 10%,rgba(255,112,103,.12),transparent 25%),
  linear-gradient(145deg,#071326,#0d2141 55%,#071326)}
.cursor-light{background:radial-gradient(circle,rgba(255,210,74,.16),transparent 66%);mix-blend-mode:screen}
.scroll-progress i{background:linear-gradient(90deg,#ffd24a,#ff746c,#6edbff)}

.site-header{height:82px;border-bottom:1px solid rgba(255,255,255,.13);background:rgba(7,19,38,.62);box-shadow:0 16px 50px rgba(0,0,0,.18)}
.brand span{font-weight:900;letter-spacing:-.06em;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.lang-toggle,.shortlist-open{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);box-shadow:inset 0 1px rgba(255,255,255,.14)}
.shortlist-count{background:#ffd24a;box-shadow:0 4px 14px rgba(255,210,74,.3)}

.hero{min-height:100svh;background:
  radial-gradient(ellipse at 72% 42%,rgba(108,202,255,.25),transparent 27%),
  radial-gradient(ellipse at 45% 84%,rgba(255,107,99,.2),transparent 26%),
  linear-gradient(155deg,#071326 0%,#112a52 62%,#0a1730 100%)}
.hero::before{inset:auto -8vw -30vw auto;width:72vw;height:72vw;border-radius:50%;background:radial-gradient(circle at 35% 32%,rgba(255,255,255,.22),rgba(92,204,255,.16) 23%,rgba(53,119,255,.1) 48%,transparent 68%);filter:blur(1px)}
.hero::after{content:"";position:absolute;z-index:-1;left:-8vw;top:12vh;width:25vw;height:25vw;border-radius:45% 55% 64% 36% / 50% 42% 58% 50%;background:linear-gradient(145deg,rgba(255,210,74,.2),rgba(255,107,99,.08));filter:blur(2px);animation:blob-drift 9s ease-in-out infinite alternate}
@keyframes blob-drift{to{transform:translate(4vw,5vh) rotate(18deg) scale(1.12)}}
.hero-grid{background-image:
  radial-gradient(circle,rgba(255,255,255,.62) 0 1px,transparent 1.5px),
  radial-gradient(circle,rgba(255,210,74,.5) 0 1px,transparent 1.5px);
  background-position:0 0,47px 31px;background-size:92px 92px,137px 137px;opacity:.28;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.hero-kicker{color:#c7dbf4}
.hero h1{font-weight:900;letter-spacing:-.065em;line-height:.86;max-width:10.8ch;text-shadow:0 8px 0 rgba(0,0,0,.1),0 28px 70px rgba(0,0,0,.28)}
.hero h1 span:nth-child(2){margin-left:5vw}
.hero h1 span:nth-child(3){margin-left:16vw;color:#ffd24a;text-shadow:0 7px 0 #d99a21,0 22px 60px rgba(255,195,60,.25)}
.hero-foot>p{color:#e3edf8;font-size:clamp(16px,1.4vw,20px)}
.round-link{border:0;background:#ff6b63;color:#fff;border-radius:100px;box-shadow:0 12px 0 #c84346,0 22px 45px rgba(0,0,0,.28);font-weight:800}
.round-link i{background:#ffd24a;box-shadow:inset 0 -4px rgba(0,0,0,.12)}
.round-link:hover{background:#ff7d75;color:#fff;transform:translateY(-6px);box-shadow:0 16px 0 #c84346,0 28px 50px rgba(0,0,0,.3)}
.round-link:hover i{background:#fff;color:#071326}
.edge-note{color:#7190b7}

.hero-orbit{inset:92px 1vw 8vh 47vw;perspective:1200px}
.hero-card{width:clamp(120px,15vw,245px);aspect-ratio:16/11;clip-path:none;border-radius:32px;border:5px solid rgba(255,255,255,.9);background:#fff;box-shadow:0 24px 0 rgba(2,11,24,.22),0 38px 80px rgba(0,0,0,.38);overflow:hidden}
.hero-card img{object-fit:cover}
.hero-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 2px rgba(255,255,255,.7)}
.hero-card:nth-child(1){left:2%;top:4%;transform:rotate(-7deg) translateZ(50px)}
.hero-card:nth-child(2){right:-1%;top:8%;transform:rotate(7deg) translateZ(5px)}
.hero-card:nth-child(3){left:36%;top:35%;transform:rotate(2deg) translateZ(90px)}
.hero-card:nth-child(4){right:5%;bottom:0;transform:rotate(-5deg) translateZ(30px)}
.hero-card:nth-child(5){left:-5%;bottom:2%;transform:rotate(7deg) translateZ(15px)}
@keyframes float{from{translate:0 -9px;rotate:-1deg}to{translate:0 12px;rotate:1.5deg}}

.manifesto{position:relative;margin-top:-2px;background:#fff3dc;color:#1d2440;border-radius:72px 72px 0 0;overflow:hidden}
.manifesto::before,.manifesto::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.manifesto::before{width:360px;height:360px;right:-120px;top:60px;background:radial-gradient(circle at 32% 32%,#fff,#ffd575 38%,#ff926e 72%);opacity:.42}
.manifesto::after{width:140px;height:140px;left:5vw;bottom:30px;background:radial-gradient(circle at 35% 30%,#fff,#8edcff 40%,#6f7dff);opacity:.28}
.manifesto h2{position:relative;font-weight:900;letter-spacing:-.055em;line-height:.96}
.manifesto-copy{position:relative;padding:30px;border-radius:30px;background:rgba(255,255,255,.54);box-shadow:0 20px 60px rgba(53,45,76,.08);backdrop-filter:blur(8px)}

.atlas-head{position:relative;background:linear-gradient(180deg,#0e2446,#071326);overflow:hidden}
.atlas-head::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,210,74,.16),transparent 24%),radial-gradient(circle at 15% 75%,rgba(109,221,255,.13),transparent 24%)}
.atlas-head>*{position:relative}
.atlas-head h2{font-weight:900;line-height:.82;text-shadow:0 18px 60px rgba(0,0,0,.28)}
.atlas-head h2 em{color:#ff7b72;-webkit-text-stroke:0;text-shadow:0 7px 0 #a83947}
.chapter-index{border:0;gap:8px}
.chapter-jump{border:1px solid rgba(255,255,255,.14)!important;border-radius:20px;padding:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px rgba(255,255,255,.09);transition:.35s var(--ease)}
.chapter-jump:hover,.chapter-jump.is-active{background:var(--chapter-accent);transform:translateY(-7px) rotate(-1deg);box-shadow:0 12px 0 color-mix(in srgb,var(--chapter-accent) 52%,#071326);color:#071326}

.chapter{background:linear-gradient(150deg,#071326 0%,#102a50 58%,#08182f 100%);border-top:0;isolation:isolate}
.chapter:nth-child(even){background:linear-gradient(210deg,#10152e,#251c45 55%,#09172b)}
.chapter:nth-child(3n){background:linear-gradient(150deg,#071b2c,#173a45 55%,#081728)}
.chapter::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle at 10% 20%,rgba(255,255,255,.6) 0 1px,transparent 1.6px),radial-gradient(circle at 70% 40%,color-mix(in srgb,var(--local-accent) 60%,transparent) 0 1px,transparent 1.7px);background-size:120px 120px,170px 170px;opacity:.18}
.chapter-sticky{z-index:1}
.chapter-sticky::before{content:"";position:absolute;z-index:-1;width:36vw;height:36vw;left:-17vw;bottom:-18vw;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.2),color-mix(in srgb,var(--local-accent) 24%,transparent) 38%,transparent 68%)}
.chapter-aura{width:62vw;height:62vw;filter:blur(2px);opacity:.55;background:radial-gradient(circle,color-mix(in srgb,var(--local-accent) 28%,transparent),transparent 64%)}
.chapter-no{color:var(--local-accent);font-weight:900;text-shadow:0 8px 0 color-mix(in srgb,var(--local-accent) 35%,#071326),0 24px 40px rgba(0,0,0,.28)}
.chapter-meta h2{font-weight:900;line-height:.94;text-shadow:0 8px 30px rgba(0,0,0,.35)}
.chapter-meta .micro,.chapter-myth{color:var(--local-accent)}
.chapter-myth{font-weight:700}
.product-stage{perspective:1200px}
.product-frame,.chapter:nth-child(3n) .product-frame,.chapter:nth-child(3n+2) .product-frame{inset:2% 5% 2% 0;border-radius:48px;clip-path:none;border:6px solid rgba(255,255,255,.92);box-shadow:0 22px 0 rgba(0,0,0,.2),0 42px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.8);transform:rotateY(3deg) rotateX(1deg);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.chapter:nth-child(even) .product-frame{inset:2% 0 2% 5%;transform:rotateY(-3deg) rotateX(1deg)}
.product-stage:hover .product-frame{transform:rotateY(0) rotateX(0) translateY(-7px);box-shadow:0 29px 0 rgba(0,0,0,.18),0 55px 110px rgba(0,0,0,.5)}
.product-frame img{object-fit:cover}
.image-counter{left:18px;bottom:18px;border-radius:100px;background:rgba(7,19,38,.82);backdrop-filter:blur(10px);padding:10px 15px}
.gallery-nav{right:0;bottom:5%;gap:10px}
.gallery-nav button{width:62px;height:62px;border:3px solid rgba(255,255,255,.72);background:rgba(7,19,38,.78);backdrop-filter:blur(10px);box-shadow:0 9px 0 rgba(0,0,0,.2)}
.gallery-nav button:hover{box-shadow:0 13px 0 color-mix(in srgb,var(--local-accent) 46%,#071326);transform:translateY(-4px)}
.chapter-copy{padding:38px 34px;margin-left:3vw;border:1px solid rgba(255,255,255,.16);border-radius:34px;background:rgba(10,25,51,.66);box-shadow:inset 0 1px rgba(255,255,255,.1),0 30px 80px rgba(0,0,0,.2);backdrop-filter:blur(18px)}
.chapter:nth-child(even) .chapter-copy{padding:38px 34px;margin-left:0;margin-right:3vw;background:rgba(24,21,55,.66)}
.chapter-lede{font-weight:600;color:#f8f4eb}
.facts{border-top:0;display:grid;gap:8px;counter-reset:list-item}
.facts li{border:0;border-radius:14px;padding:11px 14px;background:rgba(255,255,255,.075)}
.facts li::before{font-weight:900}
.story-open,.add-product,.primary-cta{min-height:55px;border:0;border-radius:100px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.15);font-weight:800}
.story-open{background:var(--local-accent);color:#071326;box-shadow:0 8px 0 color-mix(in srgb,var(--local-accent) 50%,#071326)}
.story-open:hover,.add-product:hover,.primary-cta:hover{box-shadow:0 12px 0 color-mix(in srgb,var(--local-accent) 50%,#071326)}
.add-product.is-selected{background:#fff7e8;color:#071326;box-shadow:0 8px 0 #b5a789}
.chapter-foot{border-top-color:rgba(255,255,255,.18)}

.interlude{background:linear-gradient(150deg,#fff5df,#ffe1a1);color:#1c2441;border-radius:70px 70px 0 0}
.interlude-marquee{background:#ff756b;color:white;border:0;box-shadow:0 10px 0 #bd4148;font-weight:900;padding:18px 0}
.giant-seven{color:#17223f;text-shadow:14px 14px 0 #ffd24a,26px 26px 0 #ff776d}
.interlude-copy p{font-weight:900}

.curation{background:linear-gradient(145deg,#34265f,#151e48 65%,#071326)}
.curation::before{content:"";position:absolute;width:520px;height:520px;left:-170px;bottom:-210px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c3,#ffb75f 30%,#ff6e67 58%,transparent 68%);opacity:.34}
.curation h2{font-weight:900;text-shadow:0 9px 0 rgba(0,0,0,.16)}
.curation-copy{position:relative;padding:34px;border-radius:32px;background:rgba(255,255,255,.1);box-shadow:inset 0 1px rgba(255,255,255,.14);backdrop-filter:blur(16px)}
.curation .primary-cta{background:#ffd24a;color:#071326;box-shadow:0 10px 0 #bd8625}
.curation .primary-cta:hover{background:#ffdf6e;box-shadow:0 14px 0 #bd8625}

.site-footer{background:#071326}
.story-dialog{background:#fff5e4;color:#16213d}
.story-dialog[open]{background:#fff5e4}
.story-visual{border-radius:0 52px 52px 0;box-shadow:20px 0 70px rgba(49,32,66,.16)}
.story-reading h2{font-weight:900;line-height:.94}
.story-body p{color:#37405c}
.dialog-close{background:#ffd24a;border:0;box-shadow:0 7px 0 #c18c2b}
.story-add{background:#ff6b63;color:white;box-shadow:0 9px 0 #bd4148}
.shortlist-panel{background:#fff5e4;color:#16213d;border-radius:46px 0 0 46px;box-shadow:-30px 0 90px rgba(0,0,0,.3)}
.shortlist-head h2{font-weight:900}
.shortlist-item{border-radius:20px;border:0;margin-bottom:10px;padding:12px;background:rgba(255,255,255,.65)}
.shortlist-item img{border-radius:14px}
.shortlist-foot .primary-cta{background:#ff6b63;color:white;box-shadow:0 9px 0 #bd4148}

@media (max-width:980px){
  .hero h1{font-size:clamp(54px,10vw,100px)}
  .product-frame,.chapter:nth-child(3n) .product-frame,.chapter:nth-child(3n+2) .product-frame,.chapter:nth-child(even) .product-frame{inset:0 5% 0 0;transform:none;border-radius:38px}
  .chapter-copy,.chapter:nth-child(even) .chapter-copy{margin:38px 0 0;padding:30px}
}

@media (max-width:680px){
  .site-header{height:66px}.hero{min-height:930px;padding-top:95px;background:radial-gradient(circle at 60% 48%,rgba(77,183,255,.25),transparent 35%),linear-gradient(165deg,#071326,#17315d 68%,#0c1931)}
  .hero h1{position:relative;z-index:4;font-size:clamp(43px,14.8vw,64px);line-height:.88;margin-top:92px;text-shadow:0 5px 0 rgba(0,0,0,.22),0 18px 45px rgba(0,0,0,.5)}
  .hero h1 span:nth-child(2),.hero h1 span:nth-child(3){margin-left:0}.hero h1 span:nth-child(3){text-shadow:0 5px 0 #b17818,0 18px 45px rgba(0,0,0,.45)}
  .hero-orbit{inset:43% -70px 18% 16%;opacity:.92}.hero-card{width:145px;border-width:4px;border-radius:22px}.hero-card:nth-child(1){left:-8%;top:0}.hero-card:nth-child(2){right:-5%;top:5%}.hero-card:nth-child(3){left:30%;top:43%}
  .hero-foot{position:relative;z-index:5}.round-link{box-shadow:0 9px 0 #c84346,0 18px 36px rgba(0,0,0,.3)}
  .manifesto{border-radius:38px 38px 0 0}.manifesto h2{line-height:1}.manifesto-copy{padding:22px;border-radius:24px}
  .atlas-head h2 em{text-shadow:0 5px 0 #a83947}
  .chapter-jump{border-radius:16px}
  .chapter-sticky::before{width:90vw;height:90vw;left:-50vw;bottom:-30vw}
  .product-frame,.chapter:nth-child(3n) .product-frame,.chapter:nth-child(3n+2) .product-frame,.chapter:nth-child(even) .product-frame{inset:0 6% 0 0;border-radius:28px;border-width:4px;box-shadow:0 15px 0 rgba(0,0,0,.2),0 30px 60px rgba(0,0,0,.42)}
  .product-stage:hover .product-frame{transform:none}
  .chapter-copy,.chapter:nth-child(even) .chapter-copy{padding:24px 20px;border-radius:26px;margin-top:38px}
  .chapter-actions{gap:10px}.story-open,.add-product{font-size:9px}
  .gallery-nav button{width:49px;height:49px;border-width:2px}
  .interlude{border-radius:36px 36px 0 0}.giant-seven{text-shadow:8px 8px 0 #ffd24a,15px 15px 0 #ff776d}
  .curation-copy{padding:24px;border-radius:25px}.shortlist-panel{border-radius:30px 0 0 30px}
  .story-visual{border-radius:0 0 32px 32px}
}

@media (prefers-reduced-motion:reduce){
  .hero::after,.hero-card{animation:none!important}.product-frame{transform:none!important}
}