/* PARTICOOL v2 — clean editorial dark
Design calls (from Partiful/Partyverse study):
- Poster-first hero: real photography carries the color, UI stays monochrome.
- One violet (#5B21E6) reserved for primary actions + data; one warm accent for eyebrows only.
- No aurora blobs, no glass-everywhere. Flat surfaces, 1px borders, 16-20px radii, 80px section rhythm.
- Type: "BR Sonoma" display, Inter body. Tight headings, generous body line-height.
Tokens (kept from app): bg #0D0B16, surface #151223, card #1A162B,
border rgba(255,255,255,.09), primary #5B21E6, ink #F4F1FF, muted #A9A4C0.
*/
:root{
  --bg:#0D0B16; --surface:#151223; --card:#1A162B; --card2:#201B36;
  --border:rgba(255,255,255,.09); --border-soft:rgba(255,255,255,.06);
  --primary:#5B21E6; --primary-h:#6C35F2;
  --ink:#F4F1FF; --muted:#A9A4C0; --faint:#7E7898;
  --accent:#E8B98D; --r:18px; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"BR Sonoma","BR Sonoma Plus",Inter,-apple-system,"SF Pro",Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.08;letter-spacing:-.03em;margin:0 0 12px}
h1 em,h2 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.01em}

h2{font-size:clamp(30px,3.8vw,46px);font-weight:800}
.muted{color:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:#22C55E;display:inline-block}
.section{padding:72px 24px;min-height:70svh;display:flex;flex-direction:column;justify-content:center}
.section.slim{margin:0 auto}
.slim{max-width:880px}

/* buttons + inputs */
.btn{display:inline-block;border:0;border-radius:999px;padding:13px 26px;font-weight:700;
  font-size:15px;cursor:pointer;transition:transform .15s,background .15s;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-h);transform:translateY(-1px)}
.btn-dark{background:#fff;color:#14101F}
.btn-dark:hover{background:#E9E4FF}
input[type=tel]{background:#0B0914;border:1px solid var(--border);color:#fff;border-radius:999px;
  padding:13px 20px;font-size:15px;min-width:0;flex:1;outline:none;font-family:inherit}
input[type=tel]:focus{border-color:var(--primary)}
.inline-form{display:flex;gap:10px;margin-top:20px;max-width:520px}
.inline-form.center{margin-inline:auto}
.form-note{font-size:13px;color:var(--faint);margin:10px 0 0}
.form-note.light{color:rgba(255,255,255,.75)}
/* topbar — Partiful-like: logo left, links center, CTA right.
   Transparent while over the hero (JS toggles .clear on scroll); anchored
   sections carry scroll-margin so the sticky bar never covers headings. */
section[id]{scroll-margin-top:80px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(13,11,22,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-soft);
  transition:background .3s ease,border-color .3s ease}
.topbar.clear{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar .wrap{max-width:none;margin:0;padding-left:64px;padding-right:64px}
.bar{display:flex;align-items:center;gap:28px;height:68px}
.brand img{height:34px;width:auto;filter:brightness(0) invert(1)} /* logo ships dark-on-light; invert for dark UI */
.nav{display:flex;gap:24px;margin-left:auto;font-size:14.5px;color:var(--muted)}
.nav a:hover{color:#fff}
.bar-cta{display:flex;align-items:center;gap:10px}
.icon-btn{display:none;background:none;border:1px solid var(--border);border-radius:10px;color:#fff;font-size:18px;padding:6px 10px}
.mobile{display:none;flex-direction:column;gap:4px;padding:12px 0 18px}
.mobile a{padding:10px 4px;color:var(--muted);border-bottom:1px solid var(--border-soft)}
.inline-form.center{justify-content:center}
/* occasion strip — Partiful trending row */
.strip-sec{padding-top:48px}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:8px}
.occ{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);height:300px;display:block;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .3s ease}
.occ img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .5s ease}
.occ:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 18px 40px rgba(0,0,0,.5);border-color:rgba(255,255,255,.25);z-index:2}
.occ:hover img{transform:scale(1.06);transform-origin:50% 100%}
.occ span{position:absolute;left:12px;bottom:12px;background:rgba(10,8,18,.78);border:1px solid var(--border);
  padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:700;transition:background .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.occ:hover span{background:var(--primary);border-color:var(--primary);transform:scale(1.06)}
/* section heads */
.sec-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:26px;flex-wrap:wrap}
.sec-head p{color:var(--muted);max-width:44ch;margin:0}
/* hosts — tinted full-bleed band + sticky scrollytelling: phone sticks center, steps scroll past and light it */
#hosts{max-width:none;width:100vw;margin-left:calc(50% - 50vw);padding-left:max(24px,calc(50vw - 566px));padding-right:max(24px,calc(50vw - 566px));
  /* empty top; #100E1D rises from the bottom edge and dies ~30% up */
  background:linear-gradient(to top,#100E1D,rgba(16,14,29,0) 30%);
  border-bottom:1px solid var(--border-soft)}
.story{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:56px;align-items:start;margin-top:26px}
.story-phone{position:sticky;bottom:clamp(16px,6vh,56px);align-self:end} /* bottom-anchored in the tall row so bottom:0 engages and the phone rides the viewport floor while steps scroll */
/* flipped story (guests): steps left, sticky visual right, flush to the frame's right edge */
.story.flip{grid-template-columns:1fr minmax(300px,380px)}
.story.flip .story-phone{grid-column:2;grid-row:1}
.story.flip .story-steps{grid-column:1;grid-row:1}
.story.flip .phone{margin:0 0 0 auto}
.step .rsvp-demo{margin-top:14px;max-width:360px}   /* bottom-anchored: phone rests on the viewport floor while steps scroll */
.phone{background:#0B0914;border:1px solid var(--border);border-radius:38px;padding:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 44px rgba(91,33,230,.30),0 0 120px rgba(91,33,230,.18);
  width:100%;max-width:320px;margin:0 auto}
.phone-screen{background:#151223;border:1px solid var(--border-soft);border-radius:28px;overflow:hidden}
/* real app screenshots: stacked, active one fades in */
.phone-screen.shots{position:relative;aspect-ratio:804/1748;padding:0}
.scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
.scr.on{opacity:1}
/* style step owns two shots — crossfade between banners and themes while active */
.phone-screen.shots[data-active="style"] .scr[data-screen="style"]:last-of-type{animation:styleXfade 7s ease-in-out infinite}
@keyframes styleXfade{0%,42%{opacity:1}58%,92%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.phone-screen.shots[data-active="style"] .scr[data-screen="style"]:last-of-type{animation:none}}
.album{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.album img{border-radius:8px;height:52px;width:100%;object-fit:cover}
.story-steps{display:grid}
.step{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;min-height:58vh;padding:28px 0;opacity:.32;transition:opacity .35s}
.step span{font-size:13px;font-weight:800;color:var(--muted);border:1px solid var(--border);border-radius:99px;width:44px;height:44px;display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s}
.step h3{font-size:clamp(22px,2.6vw,30px);margin:2px 0 8px}
.step p{color:var(--muted);font-size:16px;max-width:44ch;margin:0}
.step.on{opacity:1}
.step.on span{background:var(--primary);border-color:var(--primary);color:#fff}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.chip{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:999px;padding:6px 12px}
.scan{font-family:ui-monospace,monospace;font-size:13px;background:#0E0B1A;border:1px dashed rgba(255,255,255,.25);border-radius:10px;padding:10px 12px;color:#C9B8FF}
.sw{width:30px;height:30px;border-radius:50%;display:inline-block;border:1px solid var(--border)}
.sw.a{background:#5B21E6}.sw.b{background:#E8B98D}.sw.c{background:#1E9E8A}.sw.d{background:#E14D6B}
/* guests split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media{position:relative;margin:0}
.split-media>img{border-radius:22px;border:1px solid var(--border);height:520px;width:100%;object-fit:cover}
.qr-badge{position:absolute;left:16px;bottom:16px;display:flex;gap:12px;align-items:center;background:rgba(10,8,18,.9);
  border:1px solid var(--border);border-radius:14px;padding:12px 16px;font-size:13.5px}
.qr-badge b{font-size:28px;color:#fff;background:var(--primary);border-radius:10px;width:44px;height:44px;display:grid;place-items:center}
.steps-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
.steps-list li{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-size:15px;color:var(--muted)}
.steps-list b{color:#fff}
.rsvp-demo{display:flex;gap:8px;margin-top:6px}
.rsvp-demo button{flex:1;border-radius:12px;padding:12px;border:1px solid var(--border);background:transparent;color:var(--muted);font-weight:700;cursor:pointer;font-family:inherit}
.rsvp-demo .on{background:var(--primary);border-color:var(--primary);color:#fff}
/* how */
.how{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.how li{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.how .ico{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:var(--primary);
  background:rgba(91,33,230,.12);border:1px solid rgba(91,33,230,.28)}
.how .ico svg{width:26px;height:26px}
.how h3{font-size:16px;margin:0 0 6px;line-height:1.3}
.how p{color:var(--muted);font-size:13.5px;margin:0}
/* privacy */
.privacy{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.segment{display:inline-flex;background:#0B0914;border:1px solid var(--border);border-radius:999px;padding:4px;gap:4px;margin-top:16px}
.segment button{border:0;background:none;color:var(--muted);border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer;font-family:inherit}
.segment .on{background:#fff;color:#14101F}
.fwd{display:grid;gap:22px;justify-items:center;transform:translateX(40px)}
.fwd .safety-card{width:min(100%,243px);height:auto;display:block}
.fwd .safety-card:nth-child(1){transform:translateX(-30px)}
.fwd .safety-card:nth-child(2){transform:translateX(32px)}
.fwd .safety-card:nth-child(3){transform:translateX(-54px)}
.phone-card{width:100%;max-width:300px;background:#0E0B1A;border:1px solid var(--border);border-radius:16px;padding:16px 18px}
.phone-card b{display:block;font-size:17px}
.phone-card p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.phone-card.ok{border-color:rgba(34,197,85,.5)}
.phone-card.no{border-color:rgba(225,77,107,.5)}
.fwd-arrow{color:var(--faint);font-size:13px}
/* testimonials — horizontal cylinder showroom (same 3D language as hero).
   Each .t-card keeps image-left / review+name-right inside, but the cards
   themselves sit on a 3D ring: horizontal row, overflowing the viewport,
   drag-to-spin with perspective bend. */
.reviews-sec{overflow:hidden;padding-left:0;padding-right:0}
.reviews-sec>.wrap{width:100%}
.t-cyl-stage{--t-R:850px;--t-axis:-850px;position:relative;height:600px;overflow:hidden;
  perspective:1300px;perspective-origin:50% 42%;
  touch-action:pan-y;margin-top:10px;
  width:100vw;margin-left:calc(50% - 50vw)}
.t-cyl-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 260px at 50% 50%,rgba(79,25,176,.14),transparent 70%)}
.t-cyl-ring{position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;will-change:transform;
  transform:translateZ(var(--t-axis)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.t-card{position:absolute;left:0;top:0;width:min(880px,88vw);
  background:var(--card);border:1px solid var(--border);border-radius:22px;
  overflow:hidden;display:grid;grid-template-columns:320px 1fr;align-items:stretch;
  transform:translate(-50%,-50%) rotateY(calc(var(--a) * -1)) translateZ(var(--t-R));
  backface-visibility:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.t-cyl-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg),transparent 18%,transparent 82%,var(--bg))}
.t-nav{position:absolute;z-index:6;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(23,18,34,.65);backdrop-filter:blur(8px);color:#fff;
  font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.t-nav:hover{border-color:rgba(255,255,255,.5);background:#5B21E6;transform:translateY(-50%) scale(1.06)}
.t-prev{left:max(20px,calc(50vw - 560px))}
.t-next{right:max(20px,calc(50vw - 560px))}
.t-cyl-hint{position:absolute;z-index:5;left:50%;bottom:8px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap;margin:0}
.t-photo{position:relative;margin:0;min-height:420px;overflow:hidden;
  background:#1B142E;border-right:1px solid rgba(255,255,255,.07)}
.t-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.02)}
.t-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(5,3,12,.6))}
.t-photo figcaption{position:absolute;left:12px;bottom:11px;z-index:2;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.t-body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.t-stars{margin:0;color:#F5C518;font-size:16px;letter-spacing:.12em}
.t-body blockquote{margin:0;font-size:21px;line-height:1.55;letter-spacing:-.01em;color:var(--ink)}
.t-name{margin:6px 0 0;font-weight:700;font-size:15.5px}
.t-name span{color:var(--muted);font-weight:500}
/* empty + faq */
.empty{border:1px dashed rgba(255,255,255,.25);border-radius:var(--r);padding:30px;color:var(--muted);text-align:center}
.empty b{color:var(--accent)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
details{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
summary{cursor:pointer;font-weight:700;font-size:15px}
details p{color:var(--muted);font-size:14.5px;margin:8px 0 0}
/* finale — photo + overlay */
.finale{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--border);min-height:420px;display:grid;place-items:center;background:var(--surface)}
.finale>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05);opacity:.2}
.finale-body{position:relative;background:rgba(8,6,15,.72);width:100%;height:100%;display:grid;place-content:center;text-align:center;padding:64px 32px;gap:6px}
.finale-body h2{max-width:22ch}
.finale-body p{color:rgba(255,255,255,.8);margin:0 0 8px}
.finale-body .inline-form{width:100%;max-width:520px}
/* footer */
footer{border-top:1px solid var(--border-soft);padding:36px 0 48px;margin-top:24px}
.foot{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:start}
.foot p{color:var(--faint);font-size:13px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted);max-width:480px}
.foot nav a:hover{color:#fff}
@media(max-width:960px){
  .nav{display:none}.icon-btn{display:block}
  .topbar .wrap{padding-left:20px;padding-right:20px}
  .split,.privacy{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .cyl-hint{bottom:168px}
  .story{grid-template-columns:1fr;gap:24px}
  .story-phone{position:static;max-width:360px;margin:0 auto;width:100%}
  .story.flip .story-phone,.story.flip .story-steps{grid-column:auto;grid-row:auto}
  .step{min-height:0;padding:20px 0}
  .how{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr}
  .split-media>img{height:380px}
  .inline-form{flex-direction:column}
  .inline-form .btn{width:100%}
}
@media(max-width:560px){.how{grid-template-columns:1fr}.section{padding:52px 20px}
  .brand img{height:28px}.bar-cta .btn{padding:11px 20px;font-size:13.5px}
  .t-cyl-stage{--t-R:420px;--t-axis:-420px;height:540px;perspective:900px}
  .t-card{grid-template-columns:132px 1fr;width:min(430px,88vw)}.t-photo{min-height:300px}.t-body{padding:20px}.t-body blockquote{font-size:15px}
  .t-prev{left:12px}.t-next{right:12px}}

/* ============ CYLINDER HERO (transplanted from hero-cylinder.html) ============
   All classes are cyl- namespaced so nothing collides with the page's own
   .card / .hero-copy / .btn rules. Vars live on .cyl-hero, never :root. */
.cyl-hero{
  --cyl-bg:#171222; --cyl-accent:#4F19B0; --cyl-ink:#F5F2FB; --cyl-muted:#B7B1CC;
  --cyl-R:800px; --cyl-axis:-180px; --cyl-col-gap:44px;
  position:relative;overflow:hidden;color:var(--cyl-ink);
  background:var(--cyl-bg);
  margin-top:-69px; /* pull the hero up behind the transparent topbar so no body-bg band shows at scroll 0 */
}
/* blurred photo backdrop (own layer so cards above stay crisp) + bottom
   blend that dissolves the hero into the page background */
.cyl-bg{position:absolute;inset:-40px;pointer-events:none;
  background:url("background-image.png") center center/cover no-repeat;
  filter:blur(8px)}
.cyl-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:380px;z-index:15;pointer-events:none;
  background:linear-gradient(to bottom,rgba(13,11,22,0),rgba(13,11,22,.85) 55%,#0D0B16)}
.cyl-stage{position:relative;height:1560px;overflow:hidden;
  perspective:950px;perspective-origin:50% 70%;
  cursor:grab;touch-action:pan-y}
.cyl-stage.dragging{cursor:grabbing}
.cyl-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 420px at 50% 44%,rgba(79,25,176,.14),transparent 70%)}
.cyl-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 300px at 50% 38%,rgba(13,9,26,.55),transparent 70%),
    linear-gradient(90deg,rgba(23,18,34,.78),transparent 24%,transparent 76%,rgba(23,18,34,.78)),
    linear-gradient(180deg,rgba(23,18,34,.5),transparent 30%,transparent 55%,rgba(13,11,22,.92))}
.cyl-ring{position:absolute;left:50%;top:auto;bottom:730px;width:0;height:0;  /* raised: room's upper half sits behind the copy, flanks fill the frame edge-to-edge */
  transform-style:preserve-3d;will-change:transform;
  transform:translateZ(var(--cyl-axis)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.cyl-col{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:var(--cyl-col-gap);
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateY(calc(var(--a) * -1)) translateZ(var(--cyl-R)) rotateY(180deg) translateY(calc(var(--oy,0px) * var(--osm,1))) translateY(var(--rise,0px))}
.cyl-card{position:relative;width:var(--cw,170px);aspect-ratio:var(--ar,3/4);border-radius:12px;overflow:hidden;pointer-events:none;
  transform:rotate(var(--rz,0deg)) translateY(var(--jy,0px));
  background:#1B142E;border:1px solid rgba(255,255,255,.07);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backface-visibility:hidden;transition:box-shadow .4s ease}
.cyl-card img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) contrast(1.02);pointer-events:none}
.cyl-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 68%,rgba(5,3,12,.55))}
.cyl-card figcaption{position:absolute;left:10px;bottom:9px;z-index:2;
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.cyl-card:hover{box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 30px rgba(79,25,176,.22)}
.cyl-copy{position:absolute;z-index:10;left:50%;top:380px;transform:translate(-50%,-50%);
  width:min(760px,94vw);text-align:center;pointer-events:none;
  animation:cylCopyIn .8s cubic-bezier(.22,.8,.3,1) .1s both}
@keyframes cylCopyIn{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}
.cyl-title{font-size:min(5vw,150px);line-height:.98;letter-spacing:-.035em;font-weight:800;margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.65);text-wrap:balance}
.cyl-title em{font-style:normal;color:#C9B3F7}
.cyl-sub{color:var(--cyl-muted);font-size:clamp(15px,1.6vw,18px);line-height:1.65;
  margin:18px auto 0;max-width:46ch;text-shadow:0 1px 18px rgba(0,0,0,.8)}
.cyl-cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap;pointer-events:auto}
.cyl-btn{display:inline-block;border-radius:999px;padding:15px 34px;font-weight:700;font-size:15.5px;
  text-decoration:none;transition:transform .18s ease,background .18s ease}
.cyl-btn-primary{background:var(--cyl-accent);color:#fff;box-shadow:0 10px 34px rgba(79,25,176,.45)}
.cyl-btn-primary:hover{background:#5F22C9;transform:translateY(-2px)}
.cyl-btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(23,18,34,.6);backdrop-filter:blur(8px)}
.cyl-btn-ghost:hover{border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.cyl-hint{position:absolute;z-index:20;left:50%;bottom:48px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75);white-space:nowrap;margin:0;
  background:rgba(10,8,18,.72);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 20px;backdrop-filter:blur(8px)}
@media(max-width:760px){
  .cyl-hero{--cyl-R:360px;--cyl-axis:-80px;--cyl-col-gap:51px}
  .cyl-hero::after{height:260px}
  .cyl-stage{perspective:850px;height:1220px}
  .cyl-hero .cyl-col{--osm:.6}
  .cyl-hero .cyl-ring{bottom:560px}
  .cyl-hero .cyl-copy{top:300px}
  .cyl-hint{bottom:168px}
  .cyl-title{font-size:clamp(40px,11.5vw,56px);line-height:1.06}
  .cyl-sub{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .cyl-hero .cyl-ring{transform:translateZ(var(--cyl-axis)) rotateX(0deg) rotateY(-20deg)}
  .cyl-hero .cyl-copy{animation:none}
}