*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:      #0f0f18;
  --surface: #17172a;
  --border:  #21213a;
  --text:    #e0e0ee;
  --muted:   #636378;
  --dim:     #2e2e4a;
  --accent:  #04AA6D;
  --wa:      #25D366;
}
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; overflow-x:hidden; }

body::after { content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  opacity:.5; }

/* ── CURSOR (desktop only) ────────── */
#cur      { position:fixed; width:7px; height:7px; border-radius:50%; background:var(--accent); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .25s,height .25s; }
#cur-ring { position:fixed; width:34px; height:34px; border-radius:50%; border:1px solid rgba(4,170,109,.3); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .3s,height .3s; }
@media(hover:none){ #cur,#cur-ring{ display:none; } }

/* ── WHATSAPP FAB ─────────────────── */
#wa-fab {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:998;
  width:54px; height:54px; border-radius:50%;
  background:var(--wa);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 24px rgba(37,211,102,.35);
  transition:transform .2s, box-shadow .2s;
}
#wa-fab:hover { transform:scale(1.1); box-shadow:0 6px 32px rgba(37,211,102,.5); }
#wa-fab svg { width:26px; height:26px; fill:#fff; }

/* ── NAV ──────────────────────────── */
#nav { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:1.6rem 4rem; transition:background .4s,padding .4s,border-color .4s; border-bottom:1px solid transparent; }
#nav.scrolled { background:rgba(15,15,24,.94); backdrop-filter:blur(14px); padding:.9rem 4rem; border-bottom-color:var(--border); }
.n-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:1.1rem; text-decoration:none; color:var(--text); letter-spacing:.04em; }
.n-logo em { font-style:normal; color:var(--accent); }
.n-links { display:flex; gap:2.5rem; list-style:none; }
.n-links a { font-family:'Syne Mono',monospace; font-size:.67rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
.n-links a:hover { color:#fff; }
.n-pill { font-family:'Syne Mono',monospace; font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.52rem 1.3rem; text-decoration:none; transition:opacity .2s; }
.n-pill:hover { opacity:.82; }
@media(max-width:768px){ #nav,#nav.scrolled{ padding:.9rem 1.5rem; } .n-links{ display:none; } }

/* ── HERO ─────────────────────────── */
#hero { min-height:100dvh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 4rem 5.5rem; position:relative; overflow:hidden; }
.h-grid { position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 108%,#000 5%,transparent 68%);
  mask-image:radial-gradient(ellipse 90% 90% at 50% 108%,#000 5%,transparent 68%);
  opacity:.4; }
.h-orb { position:absolute; top:-10%; right:-20%; z-index:0; width:60vw; height:60vw; background:radial-gradient(circle,rgba(4,170,109,.1) 0%,transparent 65%); border-radius:50%; pointer-events:none; }
.h-inner { position:relative; z-index:1; }

.h-eye { font-family:'Syne Mono',monospace; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); margin-bottom:2rem; display:block; overflow:hidden; }
.h-eye-inner { display:block; }

.h-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(3rem,9.5vw,9.5rem); line-height:.92; letter-spacing:-.04em; margin-bottom:3.5rem; max-width:14ch; }
.h-ln { overflow:hidden; display:block; }
.h-ln > span { display:block; }
.h-acc { color:var(--accent); }

.h-bot { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.h-sub { font-size:clamp(.85rem,1.4vw,.97rem); font-weight:300; line-height:1.8; color:var(--muted); max-width:40ch; }
.h-right { display:flex; flex-direction:column; align-items:flex-end; gap:1.2rem; }
.btn-fill { font-family:'Syne Mono',monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#07070f; background:var(--accent); padding:.9rem 2rem; text-decoration:none; transition:opacity .2s; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px; }
.btn-fill:hover { opacity:.82; }
.btn-ghost { font-family:'Syne Mono',monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; border:1px solid var(--dim); padding:.9rem 2rem; text-decoration:none; transition:border-color .2s,color .2s; white-space:nowrap; display:inline-flex; align-items:center; min-height:44px; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.h-scroll-hint { font-family:'Syne Mono',monospace; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:.7rem; }
.h-scroll-hint::before { content:''; display:block; width:1px; height:36px; background:var(--dim); animation:sline 2s ease-in-out infinite; }
@keyframes sline { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:.8;transform:scaleY(1.3)} }
@media(max-width:768px){ #hero{ padding:0 1.5rem 4rem; } .h-bot{ flex-direction:column; align-items:flex-start; } .h-right{ align-items:flex-start; } }
@media(max-width:480px){ .h-title{ font-size:clamp(2rem,10vw,2.6rem); } }

/* ── TICKER ───────────────────────── */
.ticker-outer { overflow:hidden; padding:.82rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
.ticker-row { display:flex; width:max-content; }
.ticker-row.fwd { animation:tickfwd 32s linear infinite; }
.ticker-row.rev { animation:tickrev 28s linear infinite; }
.ticker-row span { font-family:'Syne Mono',monospace; font-size:.63rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); white-space:nowrap; padding:0 2rem; }
.ticker-row .ta { color:var(--accent); }
@keyframes tickfwd { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes tickrev { from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* ── WORD ART ─────────────────────── */
#wordart { padding:6rem 4rem; overflow:hidden; border-top:1px solid var(--border); }
.wa-stage { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 1.2rem; line-height:1; }
.wa-word { font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.03em; display:inline-block; will-change:transform,opacity; }
.wa-xl  { font-size:clamp(3rem,9.5vw,9.5rem); }
.wa-lg  { font-size:clamp(2rem,5.5vw,5.5rem); }
.wa-md  { font-size:clamp(1.4rem,3vw,3rem); }
.wa-sm  { font-size:clamp(1rem,1.8vw,1.8rem); }
.wa-xs  { font-size:clamp(.8rem,1.2vw,1.2rem); }
.wa-white  { color:var(--text); }
.wa-muted  { color:var(--muted); }
.wa-dim    { color:var(--dim); }
.wa-accent { color:var(--accent); }
@media(max-width:768px){ #wordart{ padding:4rem 1.5rem; } }

/* ── SHARED ───────────────────────── */
section { padding:8rem 4rem; }
.eyebrow { font-family:'Syne Mono',monospace; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); margin-bottom:2rem; display:block; }
.reveal { opacity:0; transform:translateY(34px); }
.rule { height:1px; background:var(--border); margin:0 4rem; }
@media(max-width:768px){ section{ padding:5rem 1.5rem; } .rule{ margin:0 1.5rem; } }

/* ── NUMBERS ──────────────────────── */
#numbers { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.n-stats { display:flex; flex-direction:column; gap:2.5rem; }
.stat { padding-left:1.5rem; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:.35rem; }
.stat-val { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.2rem,5vw,4.5rem); letter-spacing:-.03em; color:#fff; line-height:1; }
.stat-val em { font-style:normal; color:var(--accent); }
.stat-lbl { font-family:'Syne Mono',monospace; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.n-txt h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.8rem,3.2vw,2.9rem); line-height:1.15; letter-spacing:-.025em; margin-bottom:1.4rem; }
.n-txt p  { font-size:.93rem; line-height:1.85; color:var(--muted); max-width:40ch; }
@media(max-width:768px){ #numbers{ grid-template-columns:1fr; gap:3.5rem; } }

/* ── PRODUCT ──────────────────────── */
#product { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.p-img { position:relative; overflow:hidden; height:clamp(380px,52vh,500px); clip-path:inset(0 100% 0 0); }
.p-img img { width:100%; height:100%; object-fit:cover; filter:brightness(.58) saturate(.65); display:block; transition:transform .7s; }
.p-img:hover img { transform:scale(1.04); }
.p-img .demo-shell { width:100%; height:100%; border-radius:0; box-shadow:none; }
.p-img::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(4,170,109,.1) 0%,transparent 55%); }
.p-txt h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.8rem,3.2vw,3rem); line-height:1.1; letter-spacing:-.025em; margin-bottom:1.4rem; }
.p-txt h2 em { font-style:normal; color:var(--accent); }
.p-txt .psub { font-size:.93rem; line-height:1.85; color:var(--muted); margin-bottom:2.5rem; }
.feats { list-style:none; display:flex; flex-direction:column; gap:.9rem; margin-bottom:2.5rem; }
.feats li { display:flex; align-items:center; gap:1rem; font-family:'Syne Mono',monospace; font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.feats li::before { content:''; width:22px; height:1px; background:var(--accent); flex-shrink:0; }
.feats li:hover { color:var(--text); }
@media(max-width:768px){ #product{ grid-template-columns:1fr; gap:2.5rem; } }

/* ── GALLERY ──────────────────────── */
#gallery { padding:0; overflow:hidden; border-top:1px solid var(--border); }
.gal-header { padding:2.5rem 4rem 2rem; display:flex; align-items:center; justify-content:space-between; }
.gal-label { font-family:'Syne Mono',monospace; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); }
.gal-stat { font-family:'Syne Mono',monospace; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.gal-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; height:68vh; overflow:hidden; padding:0 4rem 4rem; }
.gal-col { overflow:hidden; }
.gal-col-inner { display:flex; flex-direction:column; gap:.75rem; }
.gal-col-up .gal-col-inner { animation:galup 26s linear infinite; }
.gal-col-down .gal-col-inner { animation:galdown 32s linear infinite; }
.gal-col-third .gal-col-inner { animation-duration:21s; animation-delay:-7s; }
@keyframes galup   { 0%{transform:translateY(0)} 100%{transform:translateY(-50%)} }
@keyframes galdown { 0%{transform:translateY(-50%)} 100%{transform:translateY(0)} }
.gal-col:hover .gal-col-inner { animation-play-state:paused; }
.gal-item { position:relative; aspect-ratio:3/4; overflow:hidden; flex-shrink:0; }
.gal-item img { width:100%; height:100%; object-fit:cover; filter:brightness(.52) saturate(.55); display:block; transition:filter .4s; }
.gal-item:hover img { filter:brightness(.72) saturate(.82); }
@media(max-width:768px){ .gal-columns{ grid-template-columns:repeat(2,1fr); padding:0 1.5rem 3rem; height:62vh; } .gal-col-third{ display:none; } .gal-header{ padding:2rem 1.5rem 1.5rem; } }

/* ── INSTITUTIONS ─────────────────── */
#institutions { padding:5rem 0; border-top:1px solid var(--border); overflow:hidden; }
.inst-head { padding:0 4rem 3rem; }
.inst-head span { font-family:'Syne Mono',monospace; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.7rem; }
.inst-head p { font-family:'Syne',sans-serif; font-weight:700; font-size:clamp(1.3rem,2.5vw,2rem); letter-spacing:-.015em; color:var(--text); }
.inst-row { display:flex; width:max-content; margin-bottom:.6rem; }
.inst-row.r1 { animation:tickfwd 42s linear infinite; }
.inst-row.r2 { animation:tickrev 38s linear infinite; }
.inst-item { display:flex; align-items:center; gap:.6rem; padding:0 2.5rem; white-space:nowrap; }
.inst-name { font-family:'Syne',sans-serif; font-weight:600; font-size:clamp(.88rem,1.4vw,1.05rem); color:var(--muted); }
.inst-country { font-family:'Syne Mono',monospace; font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); }
.inst-dot { width:4px; height:4px; border-radius:50%; background:var(--border); flex-shrink:0; }
@media(max-width:768px){ .inst-head{ padding:0 1.5rem 2.5rem; } }

/* ── BANNER ───────────────────────── */
.banner { position:relative; height:52vh; min-height:280px; overflow:hidden; }
.banner img { width:100%; height:115%; object-fit:cover; filter:brightness(.22) saturate(.45); display:block; }
.banner-over { position:absolute; inset:0; background:linear-gradient(to right,rgba(7,7,15,.94) 0%,rgba(7,7,15,.1) 100%); display:flex; align-items:center; padding:0 4rem; }
.banner-txt { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.5rem,4vw,3.8rem); line-height:1.15; letter-spacing:-.022em; max-width:18ch; color:#fff; }
.banner-txt em { font-style:normal; color:var(--accent); }
@media(max-width:768px){ .banner-over{ padding:0 1.5rem; } }

/* ── PROCESS ──────────────────────── */
.proc-top { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:2rem; margin-bottom:4rem; }
.proc-top h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.025em; }
.proc-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.step { padding:2.5rem 2.5rem 2.5rem 0; border-right:1px solid var(--border); opacity:0; transform:translateY(28px); }
.step:last-child { border-right:none; padding-right:0; }
.step:not(:first-child) { padding-left:2.5rem; }
.sn { font-family:'Syne Mono',monospace; font-size:.6rem; letter-spacing:.22em; color:var(--accent); margin-bottom:1.4rem; display:block; }
.st { font-family:'Syne',sans-serif; font-weight:700; font-size:1.15rem; margin-bottom:.7rem; }
.sd { font-size:.875rem; line-height:1.75; color:var(--muted); }
@media(max-width:768px){
  .proc-grid { grid-template-columns:1fr; }
  .step { border-right:none; border-bottom:1px solid var(--border); padding:2rem 0; }
  .step:last-child { border-bottom:none; }
  .step:not(:first-child) { padding-left:0; }
}

/* ── REVIEWS ──────────────────────── */
#reviews { padding:8rem 0; border-top:1px solid var(--border); overflow:hidden; }
.rev-head { padding:0 4rem 3.5rem; }
.rev-head h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.025em; }
.rev-marquee { display:flex; overflow:hidden; margin-bottom:1.5rem; }
.rev-marquee:last-child { margin-bottom:0; }
.rev-track { display:flex; gap:1.5rem; flex-shrink:0; padding-right:1.5rem; }
.rev-marquee--fwd .rev-track { animation:rev-fwd 38s linear infinite; }
.rev-marquee--rev .rev-track { animation:rev-rev 30s linear infinite; }
@keyframes rev-fwd { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
@keyframes rev-rev { 0%{transform:translateX(-100%)} 100%{transform:translateX(0)} }
.rev-marquee:hover .rev-track { animation-play-state:paused; }
.r-card {
  flex-shrink:0; width:clamp(260px,28vw,320px);
  background:var(--surface); border:1px solid var(--border);
  padding:2rem 2rem 1.8rem;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.r-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.r-card:hover::before { transform:scaleX(1); }
.r-card:hover { transform:translateY(-4px); border-color:rgba(4,170,109,.22); }
.r-card::after {
  content:'"'; position:absolute; top:-.18em; right:.15em;
  font-family:'Syne',sans-serif; font-weight:800; font-size:7rem; line-height:1;
  color:var(--accent); opacity:.05; pointer-events:none; user-select:none;
}
.r-stars { color:var(--accent); font-size:.82rem; letter-spacing:.05em; margin-bottom:.9rem; }
.r-text { font-size:.93rem; line-height:1.78; color:var(--text); font-weight:300; flex:1; margin-bottom:1.5rem; }
.r-meta { padding-top:1.2rem; border-top:1px solid var(--border); }
.r-name { font-family:'Syne',sans-serif; font-weight:700; font-size:.88rem; color:var(--text); display:block; margin-bottom:.25rem; }
.r-inst { font-family:'Syne Mono',monospace; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
@media(max-width:768px){ .rev-head{ padding:0 1.5rem 2.5rem; } }

/* ── WHATSAPP SECTION ─────────────── */
#whatsapp { padding:5rem 4rem; border-top:1px solid var(--border); display:flex; align-items:center; gap:3rem; flex-wrap:wrap; }
.wa-text h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.6rem,2.8vw,2.4rem); letter-spacing:-.02em; margin-bottom:.7rem; }
.wa-text p { font-size:.93rem; line-height:1.8; color:var(--muted); max-width:44ch; }
.wa-btn {
  display:inline-flex; align-items:center; gap:.75rem; flex-shrink:0;
  font-family:'Syne Mono',monospace; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; background:var(--surface); border:1px solid var(--wa);
  padding:1rem 1.8rem; text-decoration:none; transition:background .2s; min-height:52px;
}
.wa-btn:hover { background:rgba(37,211,102,.1); }
.wa-btn svg { width:20px; height:20px; fill:var(--wa); flex-shrink:0; }
@media(max-width:768px){ #whatsapp{ padding:4rem 1.5rem; flex-direction:column; align-items:flex-start; } }

/* ── CTA ──────────────────────────── */
#cta { text-align:center; position:relative; overflow:hidden; padding:10rem 4rem; }
.cta-orb { position:absolute; top:50%; left:50%; width:70vw; height:70vw; background:radial-gradient(circle,rgba(4,170,109,.09) 0%,transparent 65%); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); animation:porb 5s ease-in-out infinite; }
@keyframes porb { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5} 50%{transform:translate(-50%,-50%) scale(1.1);opacity:1} }
#cta h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.8rem,8.5vw,8.5rem); line-height:.92; letter-spacing:-.04em; margin-bottom:2rem; position:relative; }
#cta h2 em { font-style:normal; color:var(--accent); }
#cta .cta-sub { font-size:.93rem; color:var(--muted); margin-bottom:3rem; position:relative; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; }
@media(max-width:768px){ #cta{ padding:6rem 1.5rem; } }

/* ── FOOTER ───────────────────────── */
footer { padding:2.2rem 4rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.f-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:.9rem; }
.f-logo em { font-style:normal; color:var(--accent); }
footer small { font-family:'Syne Mono',monospace; font-size:.57rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
footer a { font-family:'Syne Mono',monospace; font-size:.57rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; }
footer a:hover { color:var(--accent); }
@media(max-width:768px){ footer{ padding:2rem 1.5rem; flex-direction:column; align-items:flex-start; } }

/* ── MANIFESTO (think / learn / perform) ── */
#manifesto { padding:0; overflow:hidden; border-top:1px solid var(--border); background:var(--bg); }
.mf-inner { display:flex; flex-direction:column; width:100%; }
.mf-line { display:flex; align-items:center; overflow:hidden; padding:0 2vw; line-height:.88; }
.mf-word { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(4.5rem,19.5vw,22vw); letter-spacing:-.04em; line-height:.88; display:block; white-space:nowrap; will-change:transform; padding:.06em 0; }
.mf-image-clip { background-image:url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&w=2400&q=85'); background-size:cover; background-position:center 30%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.mf-stroke { -webkit-text-stroke:2px rgba(224,224,238,.28); color:transparent; -webkit-text-fill-color:transparent; }
.mf-solid { color:var(--accent); -webkit-text-fill-color:var(--accent); }
@media(max-width:768px){ .mf-line{ padding:0 3vw; } .mf-word{ font-size:clamp(3rem,18vw,4.5rem); } .mf-stroke{ -webkit-text-stroke:1.5px rgba(13,13,18,.35); } }
@media(max-width:480px){ .mf-word{ font-size:clamp(2.4rem,17vw,3.5rem); } .mf-stroke{ -webkit-text-stroke:1px rgba(13,13,18,.35); } }

/* ── LETTER HERO ───────────────────── */
#letter-hero { position:relative; padding:6rem 4rem; background:var(--bg); border-top:1px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:60vh; }
.la-ghost { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'Syne',sans-serif; font-weight:800; font-size:66vw; line-height:1; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px rgba(224,224,238,.055); user-select:none; pointer-events:none; will-change:transform; white-space:nowrap; }
.la-content { position:relative; z-index:1; text-align:center; max-width:660px; width:100%; }
.la-eyebrow { font-family:'Syne Mono',monospace; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:2.2rem; }
.la-headline { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.4rem,5.5vw,5.2rem); line-height:1.02; letter-spacing:-.038em; color:var(--text); margin-bottom:2rem; }
.la-headline em { font-style:normal; color:var(--accent); }
.la-word { display:inline-block; overflow:hidden; vertical-align:bottom; }
.la-word-inner { display:block; will-change:transform; }
.la-body { font-size:.92rem; line-height:1.85; color:var(--muted); max-width:44ch; margin:0 auto; font-weight:300; }
@media(max-width:768px){ #letter-hero{ padding:5rem 1.5rem; min-height:50vh; } .la-ghost{ font-size:120vw; -webkit-text-stroke:1px rgba(13,13,18,.05); } .la-headline{ font-size:clamp(2rem,8vw,3rem); } }

/* ── WORD WALL ─────────────────────── */
:root { --ww-slow:1; }
#word-wall { padding:0; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; }
.ww-eyebrow { font-family:'Syne Mono',monospace; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); display:block; padding:2rem 4rem .6rem; }
.ww-body { display:flex; flex-direction:column; gap:0; }
.ww-row { display:flex; width:max-content; white-space:nowrap; overflow:hidden; }
.ww-track { display:flex; align-items:center; flex-shrink:0; }
.ww-fwd .ww-track { animation:ww-fwd calc(var(--ww-dur) * var(--ww-slow)) linear infinite; }
.ww-rev .ww-track { animation:ww-rev calc(var(--ww-dur) * var(--ww-slow)) linear infinite; }
@keyframes ww-fwd { from{transform:translateX(0)} to{transform:translateX(-100%)} }
@keyframes ww-rev { from{transform:translateX(-100%)} to{transform:translateX(0)} }
.ww-row--1 { --ww-dur:28s; padding:.7rem 0; }
.ww-row--1 .ww-track span { font-family:'Syne',sans-serif; font-weight:800; font-size:3.5rem; letter-spacing:-.03em; color:var(--text); padding:0 2.2rem; line-height:1; }
.ww-row--2 { --ww-dur:44s; padding:.4rem 0; }
.ww-row--2 .ww-track span { font-family:'Syne Mono',monospace; font-size:.55rem; letter-spacing:.38em; text-transform:uppercase; color:#9a9aaa; padding:0 2.6rem; line-height:1; }
.ww-row--3 { --ww-dur:18s; padding:.65rem 0; }
.ww-row--3 .ww-track span { font-family:'Syne',sans-serif; font-weight:800; font-size:2.1rem; letter-spacing:-.02em; color:var(--muted); padding:0 1.8rem; line-height:1; }
.ww-row--7 { --ww-dur:22s; padding:.7rem 0; }
.ww-row--7 .ww-track span { font-family:'Syne',sans-serif; font-weight:800; font-size:1.7rem; letter-spacing:-.015em; color:var(--text); padding:0 1.6rem; line-height:1; opacity:.18; }
#word-wall.is-hovered .ww-fwd .ww-track,
#word-wall.is-hovered .ww-rev .ww-track { --ww-slow:2.6; }
@media(max-width:768px){ .ww-eyebrow{ padding:1.5rem 1.5rem .5rem; } .ww-row--1 .ww-track span{ font-size:2.2rem; padding:0 1.2rem; } .ww-row--3 .ww-track span{ font-size:1.4rem; padding:0 1rem; } .ww-row--7 .ww-track span{ font-size:1.2rem; padding:0 1rem; } }

/* ── PHOTO COLLAGE ─────────────────── */
#photo-collage { padding:0; overflow:hidden; position:relative; border-top:1px solid var(--border); }
.collage-inner { position:relative; width:100%; }
.collage-word-perform { position:absolute; top:3.5rem; left:4rem; font-family:'Syne',sans-serif; font-weight:800; font-size:8vw; line-height:1; letter-spacing:-.04em; color:var(--accent); mix-blend-mode:screen; z-index:10; pointer-events:none; opacity:0; will-change:opacity; }
.collage-photos { display:flex; align-items:flex-end; position:relative; width:100%; }
.collage-photo { flex:1 1 0; aspect-ratio:3/4; overflow:hidden; position:relative; will-change:transform,opacity; opacity:0; transform:translateY(80px); }
.collage-photo:nth-child(1) { margin-right:-4vw; z-index:1; }
.collage-photo:nth-child(2) { z-index:2; transform:translateY(80px) translateY(-3vw); margin-right:-4vw; }
.collage-photo:nth-child(3) { z-index:1; }
.collage-photo img { width:100%; height:100%; object-fit:cover; filter:brightness(.58) saturate(.7); display:block; transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s; }
.collage-photo:hover img { transform:scale(1.04); filter:brightness(.72) saturate(.88); }
.collage-word-edge { position:absolute; right:-1vw; bottom:-2vw; font-family:'Syne',sans-serif; font-weight:800; font-size:25vw; line-height:.85; letter-spacing:-.06em; color:var(--text); mix-blend-mode:screen; z-index:5; pointer-events:none; opacity:0; will-change:opacity; white-space:nowrap; }
.collage-foot { display:flex; align-items:center; justify-content:space-between; padding:2.8rem 4rem 4rem; gap:2rem; flex-wrap:wrap; }
.collage-caption { font-family:'Syne Mono',monospace; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-variant:small-caps; color:var(--muted); }
.collage-index { font-family:'Syne Mono',monospace; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:.7rem; }
.collage-index::before { content:''; display:block; width:24px; height:1px; background:var(--dim); }
@media(max-width:768px){ .collage-photos{ flex-direction:column; align-items:stretch; } .collage-photo{ aspect-ratio:3/4; width:100%; } .collage-photo:nth-child(1),.collage-photo:nth-child(2),.collage-photo:nth-child(3){ margin-right:0; transform:translateY(60px); z-index:1; } .collage-word-edge{ font-size:22vw; right:0; bottom:auto; top:48%; } .collage-word-perform{ font-size:11vw; top:2rem; left:1.5rem; } .collage-foot{ padding:2rem 1.5rem 3rem; flex-direction:column; align-items:flex-start; } }

/* ── CONTRAST QUOTE ────────────────── */
#contrast-quote { position:relative; height:100vh; min-height:560px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; }
.cq-half-dark,.cq-half-light { position:absolute; inset:0; top:0; bottom:0; }
.cq-half-dark { left:0; right:50%; background:#0d0d12; transform-origin:right center; }
.cq-half-light { left:50%; right:0; background:#f5f4ef; transform-origin:left center; }
.cq-inner { position:relative; z-index:2; width:100%; max-width:1400px; padding:0 4rem; display:flex; flex-direction:column; align-items:center; gap:2.4rem; }
.cq-quote-wrap { position:relative; width:100%; }
.cq-text-layer { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.4rem,6.5vw,7rem); line-height:1.02; letter-spacing:-.04em; text-align:center; width:100%; user-select:none; white-space:normal; }
.cq-text-light { color:#ffffff; }
.cq-text-dark { position:absolute; inset:0; color:#0d0d12; clip-path:inset(0 0 0 50%); }
.cq-caption-wrap { position:relative; width:100%; display:flex; justify-content:center; }
.cq-caption { font-family:'Syne Mono',monospace; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; text-align:center; position:relative; z-index:2; }
.cq-caption-light { color:rgba(255,255,255,.38); }
.cq-caption-dark { position:absolute; inset:0; color:#7a7a85; clip-path:inset(0 0 0 50%); }
@media(max-width:768px){ #contrast-quote{ height:auto; min-height:100vh; flex-direction:column; align-items:stretch; } .cq-half-dark{ right:0; bottom:50%; top:0; } .cq-half-light{ left:0; top:50%; bottom:0; } .cq-text-dark{ clip-path:inset(50% 0 0 0); } .cq-caption-dark{ clip-path:inset(50% 0 0 0); } .cq-inner{ padding:5rem 1.5rem; min-height:100vh; justify-content:center; } }

/* ── BRIEF 2: PROCESS STEP ICONS ─────── */
.s1{width:200px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:'Syne Mono',ui-monospace,monospace;margin-bottom:1.5rem;}
.s1-svg{width:40px;height:40px;animation:s1-show 3.8s ease-out infinite;}
.s1-pp{fill:#04AA6D;fill-opacity:0;stroke:rgba(255,255,255,.55);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120;animation:s1-draw 3.8s ease-out infinite,s1-fill 3.8s ease-out infinite;}
.s1-text{font-size:9px;color:#636378;letter-spacing:.5px;opacity:0;animation:s1-text 3.8s ease-out infinite;}
@keyframes s1-show{0%{opacity:0}5%,86.84%{opacity:1}94.74%,100%{opacity:0}}
@keyframes s1-draw{0%,7.89%{stroke-dashoffset:120}28.95%,100%{stroke-dashoffset:0}}
@keyframes s1-fill{0%,36.84%{fill-opacity:0}44.74%,100%{fill-opacity:1}}
@keyframes s1-text{0%,52.63%{opacity:0}60.53%,86.84%{opacity:1}94.74%,100%{opacity:0}}
.s2{position:relative;width:200px;height:100px;font-family:'Syne Mono',ui-monospace,monospace;margin-bottom:1.5rem;}
.s2-bar{position:absolute;left:0;height:8px;background:rgba(255,255,255,.1);opacity:0;}
.s2-b1{top:14px;width:100%;animation:s2-b1 3.4s ease-out infinite;}
.s2-b2{top:32px;width:88%;animation:s2-b2 3.4s ease-out infinite;}
.s2-b3{top:50px;width:100%;animation:s2-b3 3.4s ease-out infinite;}
.s2-b4{top:68px;width:65%;animation:s2-b4 3.4s ease-out infinite;}
.s2-scan{position:absolute;left:0;right:0;top:14px;height:1px;background:#04AA6D;opacity:0;animation:s2-scan 3.4s linear infinite;}
.s2-arr{position:absolute;left:140px;top:62px;font-size:14px;color:#04AA6D;opacity:0;line-height:1;animation:s2-arr 3.4s ease-out infinite;}
@keyframes s2-b1{0%{opacity:0;transform:translateY(6px);background:rgba(255,255,255,.1)}5.88%{opacity:1;transform:translateY(0)}19.12%,21%{background:rgba(4,170,109,.4)}29%{background:rgba(255,255,255,.1)}78.53%{opacity:1;background:rgba(255,255,255,.1)}90.29%,100%{opacity:0}}
@keyframes s2-b2{0%,2.06%{opacity:0;transform:translateY(6px)}7.94%{opacity:1;transform:translateY(0)}24.41%,26.5%{background:rgba(4,170,109,.4)}34%{background:rgba(255,255,255,.1)}78.53%{opacity:1}90.29%,100%{opacity:0}}
@keyframes s2-b3{0%,4.12%{opacity:0;transform:translateY(6px)}10%{opacity:1;transform:translateY(0)}29.71%,32%{background:rgba(4,170,109,.4)}40%{background:rgba(255,255,255,.1)}78.53%{opacity:1}90.29%,100%{opacity:0}}
@keyframes s2-b4{0%,6.18%{opacity:0;transform:translateY(6px)}12.06%{opacity:1;transform:translateY(0)}35%,37%{background:rgba(4,170,109,.4)}45%{background:rgba(255,255,255,.1)}78.53%{opacity:1}90.29%,100%{opacity:0}}
@keyframes s2-scan{0%,16.18%{opacity:0;top:14px}17.5%{opacity:1;top:14px}41.18%{opacity:1;top:80px}44%,100%{opacity:0;top:80px}}
@keyframes s2-arr{0%,42.65%{opacity:0;transform:translateX(-5px)}49.12%,78.53%{opacity:1;transform:translateX(0)}90.29%,100%{opacity:0}}
.s3{position:relative;width:200px;height:120px;font-family:'Syne Mono',ui-monospace,monospace;margin-bottom:1.5rem;}
.s3-opt{position:absolute;left:14px;right:0;height:28px;display:flex;align-items:center;gap:10px;padding:0 10px;border:1px solid rgba(255,255,255,.12);background:#17172a;opacity:0;transform:translateY(8px);overflow:hidden;box-sizing:border-box;}
.s3-opt .l{font-size:9px;color:#e0e0ee;width:10px;flex:none;position:relative;z-index:2;font-family:'Syne Mono',ui-monospace,monospace;}
.s3-opt .tx{flex:1;height:4px;background:rgba(255,255,255,.1);position:relative;z-index:2;}
.s3-a{top:0;animation:s3-a 4s ease-out infinite;}
.s3-b{top:32px;animation:s3-b 4s ease-out infinite;}
.s3-c{top:64px;animation:s3-c 4s ease-out infinite;}
.s3-d{top:96px;animation:s3-d 4s ease-out infinite;}
.s3-cbg{position:absolute;inset:0;background:rgba(4,170,109,.2);transform:scaleX(0);transform-origin:left;animation:s3-cbg 4s ease-out infinite;z-index:1;}
.s3-ck{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;}
.s3-ck path{stroke-dasharray:15;stroke-dashoffset:15;animation:s3-draw 4s ease-out infinite;}
.s3-cur{position:absolute;left:0;top:5px;font-size:10px;color:#636378;opacity:0;line-height:1;animation:s3-cur 4s ease-out infinite;}
.s3-lbl{position:absolute;right:0;top:98px;font-size:8px;color:#04AA6D;letter-spacing:.5px;opacity:0;animation:s3-lbl 4s ease-out infinite;}
@keyframes s3-a{0%{opacity:0;transform:translateY(8px)}15%,75%{opacity:1;transform:translateY(0)}87.5%,100%{opacity:0}}
@keyframes s3-b{0%,1.5%{opacity:0;transform:translateY(8px)}16.5%,75%{opacity:1;transform:translateY(0)}87.5%,100%{opacity:0}}
@keyframes s3-c{0%,3%{opacity:0;transform:translateY(8px);border-color:rgba(255,255,255,.12)}18%,25%{opacity:1;transform:translateY(0);border-color:rgba(255,255,255,.12)}27.5%,75%{opacity:1;border-color:#04AA6D}87.5%,100%{opacity:0;border-color:rgba(255,255,255,.12)}}
@keyframes s3-d{0%,4.5%{opacity:0;transform:translateY(8px)}19.5%,75%{opacity:1;transform:translateY(0)}87.5%,100%{opacity:0}}
@keyframes s3-cbg{0%,25%{transform:scaleX(0)}32.5%,75%{transform:scaleX(1)}87.5%,100%{transform:scaleX(0)}}
@keyframes s3-draw{0%,27.5%{stroke-dashoffset:15}33.75%,75%{stroke-dashoffset:0}87.5%,100%{stroke-dashoffset:15}}
@keyframes s3-cur{0%,15%{opacity:0;transform:translateY(0)}18.75%{opacity:1}31.25%{opacity:1;transform:translateY(46px)}38.75%,100%{opacity:0;transform:translateY(46px)}}
@keyframes s3-lbl{0%,36.25%{opacity:0}42.5%,75%{opacity:1}87.5%,100%{opacity:0}}

/* ── BRIEF 3: HERO NOTIFICATION CARD ─── */
.h-notif{margin-top:2rem;}
.h-card{width:280px;background:#17172a;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.45);font-family:'Syne Mono',ui-monospace,monospace;position:relative;padding:14px 14px 12px;box-sizing:border-box;opacity:0;animation:h-card 5s infinite;}
.h-top{display:flex;align-items:center;gap:7px;margin-bottom:10px;}
.h-dot{width:6px;height:6px;border-radius:50%;background:#04AA6D;animation:h-pulse 5s ease-out infinite;}
.h-name{font-size:10px;color:#e0e0ee;text-transform:uppercase;letter-spacing:.7px;}
.h-act{margin-left:auto;font-size:9px;color:#636378;letter-spacing:.4px;}
.h-div{height:1px;background:rgba(255,255,255,.12);margin-bottom:10px;}
.h-qb{height:8px;background:rgba(255,255,255,.1);margin-bottom:4px;transform:scaleX(0);transform-origin:left;animation:h-qb1 5s ease-out infinite;}
.h-qb2{width:70%;animation:h-qb2 5s ease-out infinite;}
.h-ans{display:inline-block;background:#04AA6D;padding:3px 8px;margin-top:8px;color:#fff;font-size:10px;letter-spacing:.5px;clip-path:inset(0 100% 0 0);animation:h-ans 5s ease-out infinite;}
.h-cbox{margin-top:8px;display:flex;align-items:center;gap:8px;}
.h-conf{flex:1;height:3px;background:rgba(255,255,255,.1);overflow:hidden;}
.h-cfill{height:100%;background:#04AA6D;transform:scaleX(0);transform-origin:left;animation:h-conf 5s ease-out infinite;}
.h-clbl{font-size:8px;color:#04AA6D;letter-spacing:.5px;opacity:0;animation:h-clbl 5s linear infinite;white-space:nowrap;}
@keyframes h-card{0%{opacity:0;transform:translateX(70px);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}8%{opacity:1;transform:translateX(0);animation-timing-function:linear}77%{opacity:1;transform:translateX(0);animation-timing-function:ease-in}85%,100%{opacity:0;transform:translateX(80px)}}
@keyframes h-pulse{0%,19%{transform:scale(1)}22%{transform:scale(1.6)}25%,100%{transform:scale(1)}}
@keyframes h-qb1{0%,10%{transform:scaleX(0)}16%,77%{transform:scaleX(1)}85%,100%{transform:scaleX(0)}}
@keyframes h-qb2{0%,11.6%{transform:scaleX(0)}17.6%,77%{transform:scaleX(1)}85%,100%{transform:scaleX(0)}}
@keyframes h-ans{0%,24%{clip-path:inset(0 100% 0 0)}31%,77%{clip-path:inset(0 0 0 0)}85%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes h-conf{0%,30%{transform:scaleX(0)}41%,77%{transform:scaleX(.94)}85%,100%{transform:scaleX(0)}}
@keyframes h-clbl{0%,38%{opacity:0}43%,77%{opacity:1}85%,100%{opacity:0}}
@media(max-width:1100px){.h-notif{display:none;}}

/* ── HERO DEMO WIDGET ─────────────────── */
.demo-shell{width:420px;height:580px;background:#1e1e2e;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);flex-shrink:0;}
.demo-chrome{width:100%;background:#2a2a3e;padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;animation:demo-chrome-loop 9s linear 0s infinite;}
@keyframes demo-chrome-loop{0%{opacity:0;transform:translateY(-6px)}1.1%{opacity:1;transform:translateY(0)}83.3%{opacity:1;transform:translateY(0)}95%{opacity:0;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-6px)}}
.demo-chrome-dots{display:flex;gap:5px;flex-shrink:0;}
.demo-chrome-dots span{width:10px;height:10px;border-radius:50%;}
.demo-chrome-dots span:nth-child(1){background:#ff5f56;}
.demo-chrome-dots span:nth-child(2){background:#ffbd2e;}
.demo-chrome-dots span:nth-child(3){background:#27c93f;}
.demo-url-bar{flex:1;background:#1e1e2e;border-radius:5px;padding:5px 10px;font-family:ui-monospace,'SF Mono',monospace;font-size:11px;color:#8b8ba7;display:flex;align-items:center;gap:5px;overflow:hidden;white-space:nowrap;}
.demo-url-bar-lock{color:#27c93f;font-size:10px;flex-shrink:0;}
.demo-page{background:#0d0d1a;height:calc(100% - 41px);padding:22px 20px 20px;overflow:hidden;position:relative;display:flex;flex-direction:column;gap:0;}
.demo-breadcrumb{font-size:10px;color:rgba(255,255,255,0.35);margin-bottom:14px;display:flex;gap:4px;align-items:center;animation:demo-breadcrumb-loop 9s linear 0s infinite;}
.demo-breadcrumb span{color:#7c7cff;}
@keyframes demo-breadcrumb-loop{0%{opacity:0;transform:translateY(8px)}2.8%{opacity:0;transform:translateY(8px)}7.2%{opacity:1;transform:translateY(0)}83.3%{opacity:1;transform:translateY(0)}87.8%{opacity:0;transform:translateY(4px)}100%{opacity:0;transform:translateY(8px)}}
.demo-qtitle{margin-bottom:16px;animation:demo-qtitle-loop 9s linear 0s infinite;}
@keyframes demo-qtitle-loop{0%{opacity:0;transform:translateY(10px)}3.9%{opacity:0;transform:translateY(10px)}8.9%{opacity:1;transform:translateY(0)}83.3%{opacity:1;transform:translateY(0)}87.8%{opacity:0;transform:translateY(5px)}100%{opacity:0;transform:translateY(10px)}}
.demo-qtitle-label{font-size:10px;font-weight:600;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.demo-textbar{height:10px;border-radius:4px;background:rgba(255,255,255,0.08);margin-bottom:6px;}
.demo-opts{display:flex;flex-direction:column;gap:0;border:1px solid rgba(255,255,255,0.08);border-radius:8px;overflow:hidden;background:#17172a;animation:demo-opts-loop 9s linear 0s infinite;}
@keyframes demo-opts-loop{0%{opacity:0;transform:translateY(10px)}5.6%{opacity:0;transform:translateY(10px)}10.6%{opacity:1;transform:translateY(0)}83.3%{opacity:1;transform:translateY(0)}87.8%{opacity:0;transform:translateY(5px)}100%{opacity:0;transform:translateY(10px)}}
.demo-opt{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.06);position:relative;background:#17172a;}
.demo-opt:last-child{border-bottom:none;}
.demo-opt-letter{width:24px;height:24px;border-radius:50%;background:#21213a;border:1.5px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#c8c8e0;flex-shrink:0;font-family:system-ui,sans-serif;text-transform:uppercase;}
.demo-opt-text{flex:1;}
.demo-opt-textbar{height:9px;border-radius:3px;background:rgba(255,255,255,0.08);}
.demo-a .demo-opt-textbar{width:78%;}
.demo-b .demo-opt-textbar{width:92%;}
.demo-c .demo-opt-textbar{width:65%;}
.demo-d .demo-opt-textbar{width:83%;}
.demo-answer-banner{position:absolute;left:0;right:0;height:100%;display:flex;align-items:center;gap:10px;padding:0 10px 0 12px;background:rgba(4,170,109,0.15);border-left:4px solid #04AA6D;border-radius:0 4px 4px 0;opacity:0;transform:translateY(8px);pointer-events:none;}
.demo-answer-text{font-family:ui-monospace,'SF Mono',monospace;font-size:11px;font-weight:700;color:#04AA6D;flex:1;}
.demo-answer-conf{font-family:ui-monospace,'SF Mono',monospace;font-size:10px;color:#a3a3a3;flex-shrink:0;}
.demo-a .demo-answer-banner{animation:demo-banner-a 9s ease 0s infinite;}
.demo-b .demo-answer-banner{animation:demo-banner-b 9s ease 0s infinite;}
.demo-c .demo-answer-banner{animation:demo-banner-c 9s ease 0s infinite;}
.demo-d .demo-answer-banner{animation:demo-banner-d 9s ease 0s infinite;}
@keyframes demo-banner-a{0%{opacity:0;transform:translateY(8px)}35.5%{opacity:0;transform:translateY(8px)}38.8%{opacity:1;transform:translateY(0)}83.3%{opacity:1;transform:translateY(0)}87.8%{opacity:0;transform:translateY(6px)}100%{opacity:0;transform:translateY(8px)}}
@keyframes demo-banner-b{0%{opacity:0;transform:translateY(8px)}39.4%{opacity:0;transform:translateY(8px)}42.8%{opacity:1;transform:translateY(0)}83.3%{opacity:1;transform:translateY(0)}87.8%{opacity:0;transform:translateY(6px)}100%{opacity:0;transform:translateY(8px)}}
@keyframes demo-banner-c{0%{opacity:0;transform:translateY(8px)}43.3%{opacity:0;transform:translateY(8px)}46.7%{opacity:1;transform:translateY(0)}83.3%{opacity:1;transform:translateY(0)}87.8%{opacity:0;transform:translateY(6px)}100%{opacity:0;transform:translateY(8px)}}
@keyframes demo-banner-d{0%{opacity:0;transform:translateY(8px)}47.2%{opacity:0;transform:translateY(8px)}50.6%{opacity:1;transform:translateY(0)}83.3%{opacity:1;transform:translateY(0)}87.8%{opacity:0;transform:translateY(6px)}100%{opacity:0;transform:translateY(8px)}}
.demo-spinner-wrap{position:absolute;right:12px;top:50%;transform:translateY(-50%);opacity:0;z-index:5;animation:demo-spinner-wrap-loop 9s ease 0s infinite;}
@keyframes demo-spinner-wrap-loop{0%{opacity:0}28.9%{opacity:0}31.1%{opacity:1}35.5%{opacity:1}36.7%{opacity:0}100%{opacity:0}}
.demo-spinner{width:14px;height:14px;border:2px solid rgba(4,170,109,0.2);border-top-color:#04AA6D;border-radius:50%;animation:demo-spin 0.7s linear 0s infinite;}
@keyframes demo-spin{to{transform:rotate(360deg)}}
.demo-lb{position:absolute;bottom:18px;right:18px;width:44px;height:44px;background:#facc15;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(250,204,21,.45);z-index:20;animation:demo-lb-loop 9s cubic-bezier(0.34,1.56,0.64,1) 0s infinite;}
.demo-lb svg{width:22px;height:22px;color:#1a1a1a;}
@keyframes demo-lb-loop{0%{opacity:0;transform:scale(.4) translateY(8px);box-shadow:0 4px 14px rgba(250,204,21,.45)}8.9%{opacity:0;transform:scale(.4) translateY(8px)}15%{opacity:1;transform:scale(1) translateY(0)}17.8%{box-shadow:0 4px 28px rgba(250,204,21,.75),0 0 0 8px rgba(250,204,21,.12)}19.4%{box-shadow:0 4px 14px rgba(250,204,21,.45);opacity:1;transform:scale(1) translateY(0)}28.9%{opacity:1;transform:scale(1) translateY(0)}31.1%{opacity:1;transform:scale(.88) translateY(0)}83.3%{opacity:1;transform:scale(.88) translateY(0)}87.8%{opacity:0;transform:scale(.7) translateY(4px)}100%{opacity:0;transform:scale(.4) translateY(8px)}}
.demo-panel{position:absolute;bottom:16px;right:16px;width:220px;background:#1a1a2e;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;z-index:30;animation:demo-panel-loop 9s ease 0s infinite;}
@keyframes demo-panel-loop{0%{opacity:0;transform:translateY(16px)}19.9%{opacity:0;transform:translateY(16px)}24.4%{opacity:1;transform:translateY(0)}28.9%{opacity:1;transform:translateY(0)}32.8%{opacity:0;transform:translateY(14px)}100%{opacity:0;transform:translateY(16px)}}
.demo-panel-header{padding:13px 14px 11px;border-bottom:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between;}
.demo-panel-title{font-family:'Syne Mono',ui-monospace,monospace;font-size:13px;font-weight:700;color:#e0e0ee;letter-spacing:-.01em;}
.demo-panel-badge{font-family:ui-monospace,'SF Mono',monospace;font-size:9px;background:rgba(4,170,109,0.15);color:#04AA6D;padding:2px 6px;border-radius:4px;font-weight:600;letter-spacing:.03em;}
.demo-panel-body{padding:12px 14px;}
.demo-credits-box{background:rgba(4,170,109,0.08);border-radius:7px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.demo-credits-label{font-family:ui-monospace,'SF Mono',monospace;font-size:10px;color:rgba(255,255,255,0.4);font-weight:500;}
.demo-credits-value{font-family:'Syne Mono',ui-monospace,monospace;font-size:22px;font-weight:700;color:#04AA6D;line-height:1;}
.demo-credits-sub{font-family:ui-monospace,'SF Mono',monospace;font-size:9px;color:rgba(4,170,109,0.5);margin-top:1px;}
.demo-start-btn{width:100%;background:#04AA6D;color:#fff;border:none;border-radius:7px;padding:9px 12px;font-family:'Syne Mono',ui-monospace,monospace;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.01em;animation:demo-btn-loop 9s ease 0s infinite;}
@keyframes demo-btn-loop{0%{background:#04AA6D;transform:scale(1)}28.3%{background:#04AA6D;transform:scale(1)}30%{background:#038a58;transform:scale(.97)}100%{background:#04AA6D;transform:scale(1)}}
.demo-toast{position:absolute;top:52px;left:50%;transform:translateX(-50%) translateY(-8px);background:#04AA6D;color:#fff;font-family:ui-monospace,'SF Mono',monospace;font-size:11px;font-weight:600;padding:7px 14px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 16px rgba(4,170,109,.4);z-index:40;pointer-events:none;animation:demo-toast-loop 9s cubic-bezier(0.34,1.56,0.64,1) 0s infinite;}
@keyframes demo-toast-loop{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}55.5%{opacity:0;transform:translateX(-50%) translateY(-8px)}59.4%{opacity:1;transform:translateX(-50%) translateY(0)}83.3%{opacity:1;transform:translateX(-50%) translateY(0)}87.8%{opacity:0;transform:translateX(-50%) translateY(-6px)}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
.demo-loop-overlay{position:absolute;inset:0;background:#1e1e2e;z-index:50;pointer-events:none;animation:demo-overlay-loop 9s ease 0s infinite;}
@keyframes demo-overlay-loop{0%{opacity:1}3.3%{opacity:0}83.3%{opacity:0}91.1%{opacity:1}100%{opacity:1}}