.story main { background:#fff; }
.grad { background:linear-gradient(90deg,#C2185B,#7B2D8E 55%,#3E4FA8); -webkit-background-clip:text; background-clip:text; color:transparent; }

[data-scene] { position:relative; }
.s-sticky { position:sticky; top:72px; height:calc(100vh - 72px); overflow:hidden; }
.s-center { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 8%; }

.s-hero { height:180vh; background:linear-gradient(135deg,#EAF8F3 0%,#F1EEFC 55%,#FDF0EA 100%); }
.s-hero .s-sticky { display:flex; align-items:center; justify-content:center; }
.s-hero-text { position:relative; z-index:2; text-align:center;
  transform:scale(calc(1 - var(--p,0) * .18)) translateY(calc(var(--p,0) * -40px)); opacity:calc(1 - var(--p,0) * 1.3); }
.s-hero h1 { font-size:clamp(46px,7.2vw,112px); line-height:1.08; font-weight:500; letter-spacing:-.035em; color:var(--ink); }
.s-en { margin-top:22px; font-size:clamp(18px,1.8vw,24px); color:var(--muted); font-weight:300; }
.s-hero .v2-label { margin-bottom:28px; }
.s-hero-spheres { position:absolute; inset:0; z-index:1; }
.s-hero-spheres .np { opacity:.9; }
.s-hero-spheres .s1 { width:120px; height:120px; left:8%;  top:14%; }
.s-hero-spheres .s2 { width:80px;  height:80px;  left:82%; top:12%; }
.s-hero-spheres .s3 { width:150px; height:150px; left:78%; top:62%; }
.s-hero-spheres .s4 { width:54px;  height:54px;  left:16%; top:70%; }
.s-hero-spheres .s5 { width:36px;  height:36px;  left:30%; top:8%; }
.s-hero-spheres .s6 { width:64px;  height:64px;  left:4%;  top:44%; }
.s-hero-spheres .s7 { width:42px;  height:42px;  left:66%; top:84%; }
.s-hero-spheres .s8 { width:28px;  height:28px;  left:92%; top:40%; }
.s-hero-spheres { transform:scale(calc(1 + var(--p,0) * .5)); transition:transform .1s linear; }
.s-scroll-hint { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px;
  letter-spacing:.3em; color:var(--muted); opacity:calc(1 - var(--p,0) * 4); }

.s-today { height:220vh; background:#fff; }
.s-fill { max-width:1000px; font-size:clamp(26px,3.3vw,46px); line-height:1.45; font-weight:500; letter-spacing:-.02em; word-break:keep-all; }
.s-fill .w { color:#D5D9E0; transition:color .25s ease; }
.s-fill .w.on { color:var(--ink); }

.s-color { height:300vh; background:#0F0D17; color:#fff; }
.s-color .s-sticky { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:40px; padding:0 7%; }
.s-color .v2-label { color:rgba(255,255,255,.6); }
.s-color h2 { font-size:clamp(36px,4.6vw,68px); font-weight:500; letter-spacing:-.03em; line-height:1.15; margin-bottom:22px; }
.s-color p { color:rgba(255,255,255,.75); font-size:18px; line-height:1.8; max-width:480px; word-break:keep-all; }
.s-facts { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; max-width:560px; }
.s-facts li { padding:16px; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:rgba(255,255,255,.04);
  opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.s-facts li.on { opacity:1; transform:none; }
.s-facts strong { display:block; font-size:20px; font-weight:500; }
.s-facts span { font-size:13px; color:rgba(255,255,255,.6); }
.s-particles { position:relative; width:100%; height:70vh; }
.s-particles i { position:absolute; left:0; top:0; border-radius:50%;
  box-shadow: inset -3px -4px 8px rgba(0,0,0,.25), 0 0 18px rgba(255,255,255,.08); will-change:transform; }

.s-wrap { max-width:1200px; margin:0 auto; padding:140px 40px; }
.s-field h2, .s-next h2 { font-size:clamp(34px,4.2vw,60px); font-weight:500; letter-spacing:-.03em; line-height:1.18; margin-bottom:24px; }
.s-lead { max-width:720px; font-size:19px; line-height:1.85; color:var(--muted); word-break:keep-all; }
.s-foods { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:56px; }
.s-food { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:26px 22px; border:1px solid var(--line);
  border-radius:22px; background:linear-gradient(160deg,#F5FBF9,#F4F2FD); }
.s-food .np.mini { position:static; width:30px; height:30px; }
.s-food strong { font-size:19px; font-weight:500; }
.s-next { background:linear-gradient(180deg,#fff,#F6F4FD); }
.s-next-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:60px; }
.s-next-grid article { position:relative; padding:34px 34px 36px; border:1px solid var(--line); border-radius:26px; background:rgba(255,255,255,.8); }
.s-next-grid .np.mini { position:absolute; right:28px; top:30px; width:38px; height:38px; }
.s-next-grid h3 { font-size:26px; font-weight:500; margin:14px 0 10px; }
.s-next-grid p { color:var(--muted); line-height:1.8; word-break:keep-all; }

.s-why { height:200vh; background:linear-gradient(135deg,#EAF8F3 0%,#F1EEFC 55%,#FDF0EA 100%); }
.s-big { font-size:clamp(56px,11vw,180px); font-weight:600; letter-spacing:-.05em; line-height:1;
  transform:scale(calc(.75 + var(--p,0) * .35)); }
.s-big { background:linear-gradient(90deg,#3E9F8C,#6C5FC9 50%,#C2185B); -webkit-background-clip:text; background-clip:text; color:transparent; }
.s-why-text { margin-top:36px; max-width:760px; font-size:clamp(18px,1.7vw,22px); line-height:1.85; color:var(--ink);
  opacity:calc((var(--p,0) - .25) * 3); word-break:keep-all; }

.s-explore { grid-template-columns:repeat(5,1fr); padding-top:110px; }
.s-contact { background:var(--ink) !important; }
.s-contact strong, .s-contact .v2-label, .s-contact em { color:#fff !important; }

[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity:1; transform:none; }

@media (max-width:960px) {
  .s-color .s-sticky { grid-template-columns:1fr; padding:40px 6%; }
  .s-particles { height:38vh; }
  .s-facts { grid-template-columns:1fr; }
  .s-foods { grid-template-columns:repeat(2,1fr); }
  .s-next-grid, .s-explore { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; }
  .s-fill .w { color:var(--ink); }
}

.story h1, .story h2, .story h3 { word-break:keep-all; }

.s-color { height:400vh; }
.s-particles-wrap { position:relative; }
.s-stage { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.s-stage span { font-family:var(--mono); font-size:11px; letter-spacing:.14em; padding:5px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.35); transition:all .3s ease; }
.s-stage span.on { color:#fff; border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); }