/* bionic-design-system — COMPONENTS (hero, rail, cinema, features, cta) */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--s16);padding-bottom:var(--s12)}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:var(--t-display);line-height:.98;letter-spacing:-.035em;max-width:14ch;margin:var(--s4) 0}
.hero h1 .em{color:var(--accent)}
.hero p.lead{font-size:var(--t-lead);color:var(--ink-dim);max-width:46ch;line-height:1.5}
.hero-cta{display:flex;gap:var(--s2);margin-top:var(--s6);flex-wrap:wrap}
.collection{padding:var(--s16) 0}
.collection .head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.collection h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-h2);letter-spacing:-.025em;line-height:1.05}
.rail{display:flex;gap:var(--s3);overflow-x:auto;padding:var(--s2) var(--s4) var(--s6);margin-inline:calc(-1 * var(--s4));scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.product{flex:0 0 78vw;max-width:340px;scroll-snap-align:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2);will-change:transform;transform-style:preserve-3d}
@media(min-width:720px){.product{flex-basis:320px}}
.product .art{aspect-ratio:4/5;position:relative;overflow:hidden}
.product .art::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.product .meta{padding:var(--s3)}
.product .meta .k{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.product .meta h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin-top:.3rem;letter-spacing:-.02em}
.g1{background:radial-gradient(120% 120% at 20% 10%, oklch(0.8 0.15 70), oklch(0.45 0.13 40) 55%, oklch(0.22 0.05 35))}
.g2{background:radial-gradient(120% 120% at 80% 15%, oklch(0.82 0.13 95), oklch(0.5 0.12 55) 55%, oklch(0.2 0.04 50))}
.g3{background:radial-gradient(120% 120% at 30% 80%, oklch(0.78 0.16 35), oklch(0.42 0.14 28) 55%, oklch(0.2 0.05 30))}
.g4{background:radial-gradient(120% 120% at 70% 70%, oklch(0.84 0.11 105), oklch(0.55 0.1 80) 55%, oklch(0.22 0.04 70))}
.g5{background:radial-gradient(120% 120% at 50% 20%, oklch(0.8 0.14 55), oklch(0.46 0.13 45) 55%, oklch(0.2 0.05 40))}
.cinema{padding:var(--s12) 0}
.cinema .frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.cinema .poster{position:absolute;inset:0;will-change:transform;background:radial-gradient(80% 120% at 25% 20%, oklch(0.72 0.16 50 / .9), transparent 60%),radial-gradient(90% 120% at 85% 90%, oklch(0.5 0.14 35 / .85), transparent 55%),linear-gradient(140deg, oklch(0.24 0.05 45), oklch(0.14 0.02 40));animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.14) translate(-2%,-2%)}}
.cinema .frame::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cinema .frame .grad-edge{position:absolute;inset:0;background:linear-gradient(to top, oklch(0.14 0.02 40 / .7), transparent 45%)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:84px;height:84px;border-radius:50%;border:1px solid oklch(1 0 0 / .5);background:oklch(1 0 0 / .08);backdrop-filter:blur(6px);display:grid;place-items:center;will-change:transform}
.play svg{width:26px;height:26px;margin-left:4px;fill:var(--ink)}
.cinema .cap{position:absolute;left:var(--s4);bottom:var(--s4);z-index:3;max-width:30ch}
.cinema .cap .k{font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}
.cinema .cap h2{font-family:var(--font-display);font-weight:600;font-size:var(--t-h2);letter-spacing:-.025em;line-height:1.04;margin-top:.4rem}
.note{margin-top:var(--s3);color:var(--ink-dim);font-size:.92rem;max-width:60ch}
.note code{font-family:ui-monospace,monospace;color:var(--accent-2);font-size:.85em}
.features{padding:var(--s12) 0;display:grid;gap:var(--s3);grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.features{grid-template-columns:1fr}}
.feat{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6) var(--s4);background:var(--bg-2);will-change:transform;transform-style:preserve-3d;position:relative;overflow:hidden}
.feat .num{font-family:var(--font-display);font-weight:600;color:var(--accent);font-size:1rem}
.feat h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem;margin:var(--s2) 0 .6rem;letter-spacing:-.02em}
.feat p{color:var(--ink-dim);font-size:.96rem}
.cta{padding:var(--s16) 0 var(--s12);text-align:center}
.cta h2{font-family:var(--font-display);font-weight:700;font-size:var(--t-display);line-height:1;letter-spacing:-.035em;max-width:16ch;margin:var(--s4) auto var(--s6)}
.cta h2 .em{color:var(--accent)}
footer{border-top:1px solid var(--line);padding:var(--s6) 0;color:var(--ink-dim);font-size:.9rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s2)}