/* HuddleTape — Bar Mode */
@font-face{font-family:"Anton";src:url(fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(fonts/barlow-sc-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(fonts/barlow-sc-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow SC";src:url(fonts/barlow-sc-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Chakra";src:url(fonts/chakra-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --night:#0A0614;--night-2:#120B24;--panel:#160E2C;--line:#2C1F4C;
  --cyan:#2DE2FF;--pink:#FF3EA5;--lime:#B6FF3B;--amber:#FFB347;--violet:#8B5CFF;
  --text:#F5F0FF;--muted:#C9BEE3;--dim:#A99CC9;
  --head:"Anton",Impact,"Arial Narrow",sans-serif;
  --body:"Barlow SC","Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --radius:16px;--wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--text);font:500 1.125rem/1.55 var(--body);
  background-image:radial-gradient(70% 50% at 75% 0%,rgba(139,92,255,.22),transparent 70%),radial-gradient(50% 40% at 0% 30%,rgba(255,62,165,.10),transparent 70%);
  background-repeat:no-repeat}
img,svg,video{max-width:100%;display:block}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:#8EF0FF}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--night);padding:8px 14px;border-radius:8px;font-weight:700;z-index:99}
.skip:focus{left:8px}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(10,6,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(45,226,255,.12)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img.mark{width:38px;height:auto}
.brand img.word{height:22px;width:auto}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;letter-spacing:.3px}
.nav a:hover{color:var(--text)}
.nav .hide-sm{display:none}
@media (min-width:760px){.nav .hide-sm{display:inline}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.4rem;border-radius:999px;
  font:700 1.05rem/1 var(--body);letter-spacing:.6px;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;transition:transform .15s,box-shadow .15s}
.btn-primary{background:var(--pink);color:#140612;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 0 24px rgba(255,62,165,.55)}
.btn-primary:hover{color:#140612;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 34px rgba(255,62,165,.8)}
.btn-ghost{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 2px rgba(45,226,255,.6)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--cyan),0 0 18px rgba(45,226,255,.35)}
.btn-sm{min-height:40px;padding:.5rem 1rem;font-size:.95rem}

/* hero */
.hero{padding:2.5rem 0 3rem}
.hero .wrap{display:grid;gap:2.25rem;align-items:center}
@media (min-width:980px){.hero{padding:4.5rem 0 4.5rem}.hero .wrap{grid-template-columns:.9fr 1.1fr;gap:3rem}}
.eyebrow{display:inline-block;font:700 .85rem/1 var(--body);letter-spacing:3px;text-transform:uppercase;color:var(--cyan);
  padding:.45rem .8rem;border:1px solid rgba(45,226,255,.45);border-radius:999px;background:rgba(45,226,255,.06)}
.hero-word{width:min(100%,420px);height:auto;margin:1.2rem 0 .9rem;filter:drop-shadow(0 0 18px rgba(255,62,165,.35))}
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:.5px;line-height:1.05;margin:0}
.hero h1{font-size:clamp(2.4rem,7vw,3.9rem);text-transform:none}
.hero h1 em{display:block;font-style:normal;color:var(--cyan);text-shadow:0 0 18px rgba(45,226,255,.55)}
.lede{color:var(--muted);font-size:1.18rem;margin:1rem 0 1.6rem;max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.chips{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;color:var(--dim);font-weight:600;font-size:.98rem}
.chips li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--lime);margin-right:.5rem;transform:translateY(-2px) skewX(-10deg);box-shadow:0 0 8px var(--lime)}

/* TV demo mock */
.demo{margin:0}
.tv{position:relative;border-radius:18px;padding:10px;background:linear-gradient(180deg,#1b1530,#0d0919);
  box-shadow:0 0 0 2px rgba(45,226,255,.55),0 0 40px rgba(45,226,255,.22),0 30px 60px rgba(0,0,0,.6)}
.tv::after{content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:28%;height:6px;border-radius:6px;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}
.screen{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;container-type:inline-size;
  background:
   repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(255,255,255,.18) 9.8% 10%),
   linear-gradient(180deg,#0f1d3a 0 30%,#1d6b3a 30% 100%)}
.screen .crowd{position:absolute;inset:0 0 70% 0;background:
   radial-gradient(circle at 20% 40%,rgba(255,255,255,.12) 0 1px,transparent 2px) 0 0/14px 10px,
   radial-gradient(circle at 60% 70%,rgba(139,92,255,.25) 0 1.5px,transparent 2.5px) 0 0/18px 12px,
   linear-gradient(180deg,#141a33,#1b2647)}
.screen .lights{position:absolute;top:3%;left:0;right:0;display:flex;justify-content:space-around}
.screen .lights i{width:8cqw;height:2.4cqw;border-radius:3px;background:#fff;box-shadow:0 0 3cqw 1cqw rgba(255,255,255,.6)}
.screen .field{position:absolute;left:0;right:0;top:30%;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.25))}
.screen .ball{position:absolute;left:54%;top:52%;width:2.4cqw;height:1.5cqw;border-radius:50%;background:#7a3b1a;box-shadow:0 0 0 .2cqw rgba(0,0,0,.25)}
.sample-tag{position:absolute;top:2.2cqw;left:2.2cqw;font:700 1.55cqw/1 var(--body);letter-spacing:.3cqw;color:var(--night);background:var(--lime);padding:.7cqw 1.1cqw;border-radius:.6cqw;z-index:3}
.ticker{position:absolute;left:0;right:0;bottom:0;height:15cqw;display:flex;align-items:stretch;
  background:rgba(10,6,20,.94);border-top:.35cqw solid var(--cyan);box-shadow:0 -1cqw 3cqw rgba(45,226,255,.3)}
.tk-brand{flex:none;width:11cqw;display:grid;place-items:center;border-right:.2cqw solid rgba(255,62,165,.6);padding:1cqw}
.tk-brand img{width:7.5cqw}
.tk-rail{position:relative;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent)}
.tk-track{display:flex;align-items:center;height:100%;width:max-content;animation:scroll 26s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.card{display:flex;align-items:center;gap:1.4cqw;padding:0 2.2cqw;height:100%;border-right:.2cqw solid #3A2560;white-space:nowrap;position:relative}
.card .who{font:700 2.9cqw/1 var(--body);letter-spacing:.1cqw}
.card .what{font:500 2.5cqw/1 var(--body);color:#C9BEE3}
.card .side{font:700 1.6cqw/1 var(--body);padding:.45cqw .7cqw;border-radius:.5cqw;border:.2cqw solid var(--lime);color:var(--lime)}
.card .side.no{border-color:#FF8A8A;color:#FF8A8A}
.card .pct{font:400 4.4cqw/1 var(--head)}
.card .ch{font:500 1.9cqw/1 var(--body);color:var(--dim)}
.card .up{font:700 1.9cqw/1 var(--body);color:var(--lime)}
.card .dn{font:700 1.9cqw/1 var(--body);color:#FF8A8A}
.card .won{font:700 2cqw/1 var(--body);letter-spacing:.2cqw;color:var(--night);background:var(--lime);padding:.6cqw 1cqw;border-radius:.6cqw;
  box-shadow:0 0 2cqw rgba(182,255,59,.55),0 0 0 .2cqw #FFD76A inset;transform:rotate(-4deg)}
.card .tagpill{font:700 1.5cqw/1 "Chakra",var(--body);color:var(--lime);border:.25cqw solid var(--cyan);border-radius:99px;padding:.5cqw 1cqw;box-shadow:0 0 1.2cqw rgba(45,226,255,.6)}
.card.hot{background:rgba(255,62,165,.12);box-shadow:inset 0 0 0 .3cqw var(--pink)}
.card .dots{display:flex;gap:.5cqw}.card .dots i{width:1.3cqw;height:1.3cqw;border-radius:50%;border:.2cqw solid var(--dim)}.card .dots i.ok{background:var(--lime);border-color:var(--lime)}
.qr{flex:none;width:27cqw;display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw 1.6cqw;margin:-3.5cqw 1.2cqw 1.2cqw 0;background:rgba(10,6,20,.96);
  border:.3cqw solid var(--pink);border-radius:1.4cqw;box-shadow:0 0 2.4cqw rgba(255,62,165,.45);align-self:flex-end;height:17cqw;z-index:2}
.qr svg{width:13.5cqw;height:13.5cqw;flex:none;border-radius:.8cqw;background:#fff;padding:.8cqw}
.qr .q1{font:700 2cqw/1.15 var(--body)}
.qr .q2{font:600 1.3cqw/1 var(--body);letter-spacing:.25cqw;color:var(--dim);margin-top:.8cqw}
.qr .q3{font:700 3.6cqw/1 "Chakra",var(--body);color:var(--cyan);text-shadow:0 0 1.5cqw rgba(45,226,255,.6)}
.tailer-run{position:absolute;bottom:13.4cqw;left:0;width:17.6cqw;height:11.6cqw;z-index:2;animation:trot-x 13s linear infinite}
.tailer-run .dog{width:100%;height:100%;background:url(img/tailer-trot.webp) 0 0/800% 100% no-repeat;animation:trot .66s steps(7) infinite}
.tailer-run .tagpill{position:absolute;left:62%;top:78%;font:700 1.5cqw/1 "Chakra",var(--body);color:var(--lime);background:rgba(10,6,20,.9);border:.25cqw solid var(--cyan);border-radius:99px;padding:.4cqw .9cqw;white-space:nowrap}
@keyframes trot{to{background-position:100% 0}}
@keyframes trot-x{0%{transform:translateX(-20cqw)}55%,100%{transform:translateX(105cqw)}}
.demo figcaption{margin-top:2.2rem;text-align:center;color:var(--dim);font-size:.95rem}
.demo figcaption b{color:var(--lime);font-weight:700;letter-spacing:1.5px}

/* small screens: bigger ticker type, compact QR */
@container (max-width:560px){
  .ticker{height:21cqw}
  .tk-brand{width:12cqw}.tk-brand img{width:8.5cqw}
  .card{gap:2cqw;padding:0 3cqw}
  .card .who{font-size:4.4cqw}.card .what{font-size:3.8cqw}.card .pct{font-size:6.4cqw}
  .card .side{font-size:2.6cqw}.card .ch{display:none}.card .up,.card .dn{font-size:3cqw}
  .card .won{font-size:3.2cqw}.card .tagpill{font-size:2.6cqw}
  .card .dots i{width:2cqw;height:2cqw}
  .qr{width:auto;height:auto;margin:-6cqw 1.6cqw 1.6cqw 0;padding:1.2cqw;flex-direction:column;gap:.6cqw}
  .qr svg{width:17cqw;height:17cqw}
  .qr .q1,.qr .q2{display:none}.qr .q3{font-size:3.4cqw}
  .tailer-run{bottom:19.5cqw;width:22cqw;height:14.5cqw}
  .tailer-run .tagpill{font-size:2.4cqw}
  .sample-tag{font-size:2.4cqw}
}
@media (max-width:600px){.hero .wrap{width:min(100% - 1.6rem,var(--wrap))}.lede{font-size:1.08rem}}

/* sections */
section{scroll-margin-top:72px}
.sec{padding:4rem 0;border-top:1px solid rgba(255,255,255,.05)}
.sec h1,.sec h2{font-size:clamp(2rem,5vw,2.9rem);margin-bottom:.6rem}
.sec h2 .pk{color:var(--pink)}
.sec .intro{color:var(--muted);max-width:40em;margin:0 0 2.2rem}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem;counter-reset:s}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.4rem 1.5rem}
.steps .n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--lime);color:var(--night);font:400 1.6rem/1 var(--head);transform:skewX(-8deg);margin-bottom:.9rem}
.steps h3{font-size:1.6rem;margin-bottom:.35rem}
.steps p{margin:0;color:var(--muted)}
.steps .ico{position:absolute;right:1.2rem;top:1.2rem;width:54px;height:54px;opacity:.95}

.features{display:grid;gap:1.1rem}
@media (min-width:700px){.features{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.features{grid-template-columns:repeat(3,1fr)}}
.feat{background:linear-gradient(180deg,var(--panel),var(--night-2));border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;position:relative;overflow:hidden}
.feat h3{font-size:1.5rem;margin:.9rem 0 .35rem}
.feat p{margin:0;color:var(--muted)}
.feat .vis{height:96px;display:flex;align-items:center;gap:.6rem;border-radius:12px;background:rgba(10,6,20,.8);border:1px solid rgba(45,226,255,.18);padding:0 1rem;overflow:hidden}
.feat.wide{grid-column:1/-1}
@media (min-width:1020px){.features{grid-template-columns:repeat(6,1fr)}.feat{grid-column:span 2}.feat.half{grid-column:span 3}.feat.wide{grid-column:span 3}}
.mini{display:flex;align-items:center;gap:.6rem;white-space:nowrap;font-weight:700}
.mini .pct{font:400 2rem/1 var(--head)}
.mini .up{color:var(--lime);font-size:.95rem}
.mini .side{font-size:.75rem;padding:.2rem .4rem;border:2px solid var(--lime);color:var(--lime);border-radius:5px}
.pill-won{font:700 .9rem/1 var(--body);letter-spacing:1.5px;background:var(--lime);color:var(--night);padding:.4rem .6rem;border-radius:6px;transform:rotate(-4deg);box-shadow:0 0 18px rgba(182,255,59,.55),0 0 0 2px #FFD76A inset}
.crack{position:relative;padding:.35rem .7rem;border:2px solid #FF8A8A;border-radius:8px;color:#FF8A8A;opacity:.85;transform:rotate(6deg) translateY(10px)}
.crack::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 46%,#FF8A8A 47% 50%,transparent 51%)}
.phone-ico{width:46px;height:76px;border:3px solid var(--cyan);border-radius:10px;position:relative;box-shadow:0 0 12px rgba(45,226,255,.5);flex:none}
.phone-ico::before{content:"";position:absolute;inset:12px 6px 18px;background:repeating-linear-gradient(180deg,rgba(245,240,255,.7) 0 3px,transparent 3px 8px);border-radius:3px}
.arrow{color:var(--pink);font:700 1.6rem/1 var(--body)}
.tailer-wag{width:120px;height:79px;background:url(img/tailer-wag.webp) 0 0/400% 100% no-repeat;animation:trot 1.2s steps(3) infinite;flex:none}
.layers{position:relative;width:100%;height:70px}
.layers .app{position:absolute;inset:0 0 18px 0;border-radius:8px;background:linear-gradient(135deg,#1d6b3a,#0f1d3a);opacity:.9}
.layers .app span{position:absolute;left:10px;top:8px;font-size:.75rem;color:#e6ffe6;letter-spacing:1px}
.layers .bar{position:absolute;left:0;right:0;bottom:0;height:24px;border-radius:6px;background:var(--night);border-top:2px solid var(--cyan);box-shadow:0 0 14px rgba(45,226,255,.5);display:flex;align-items:center;gap:6px;padding:0 8px}
.layers .bar i{height:5px;border-radius:3px;background:var(--text)}

.compat{display:grid;gap:1.5rem;align-items:center;background:linear-gradient(135deg,rgba(45,226,255,.08),rgba(139,92,255,.08));border:1px solid rgba(45,226,255,.3);border-radius:22px;padding:1.8rem}
@media (min-width:860px){.compat{grid-template-columns:1.2fr 1fr;padding:2.4rem}}
.compat h2{margin-bottom:.6rem}
.compat p{color:var(--muted);margin:.4rem 0}
.yesno{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.yesno li{display:flex;gap:.7rem;align-items:flex-start;font-weight:600}
.yesno .y{color:var(--lime)}.yesno .n{color:var(--dim)}
.yesno b{flex:none;width:1.4rem;text-align:center}

.faq{display:grid;gap:.7rem;max-width:860px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 1.2rem}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 2rem 1.05rem 0;font-weight:700;font-size:1.15rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--pink);font:400 1.7rem/1 var(--head)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.1rem;color:var(--muted)}

/* beta form */
.beta{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.beta{grid-template-columns:1fr 1.05fr;gap:3rem}}
.beta .perks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.6rem;color:var(--muted)}
.beta .perks li::before{content:"▸";color:var(--pink);margin-right:.5rem}
form.signup{background:var(--panel);border:1px solid rgba(255,62,165,.45);border-radius:20px;padding:1.5rem;box-shadow:0 0 40px rgba(255,62,165,.12)}
@media (min-width:600px){form.signup{padding:2rem}}
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label{font-weight:700;letter-spacing:.3px}
.field .opt{color:var(--dim);font-weight:500}
.field input[type=text],.field input[type=email]{width:100%;min-height:50px;padding:.7rem .9rem;border-radius:12px;border:1px solid #4A3A72;background:#0D0820;color:var(--text);font:500 1.1rem var(--body)}
.field input::placeholder{color:#8F82B3}
.field input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(45,226,255,.25)}
.hint{font-size:.92rem;color:var(--dim)}
.check{display:flex;gap:.75rem;align-items:flex-start;margin:.4rem 0 1.3rem;font-weight:600}
.check input{width:24px;height:24px;flex:none;margin:.1rem 0 0;accent-color:var(--lime)}
.hp{position:absolute!important;left:-5000px!important;width:1px;height:1px;overflow:hidden}
form.signup .btn{width:100%}
.fineprint{font-size:.9rem;color:var(--dim);margin:.9rem 0 0}

/* footer */
.foot{border-top:1px solid rgba(45,226,255,.15);padding:2.6rem 0 3rem;background:#07040F;color:var(--dim);font-size:.98rem}
.foot .rg{color:var(--text);font-weight:700;font-size:1.05rem;margin:0 0 .4rem}
.foot .rg b{color:var(--lime)}
.foot p{margin:.35rem 0}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1rem 0}
.foot nav a{color:var(--muted)}
.foot .row{display:grid;gap:1.4rem}
@media (min-width:820px){.foot .row{grid-template-columns:auto 1fr;align-items:start;gap:3rem}}
.foot img.word{height:24px;width:auto;margin-bottom:.4rem}

/* legal pages */
.legal{padding:3rem 0 4rem}
.legal .wrap{max-width:820px}
.draft-banner{border:2px dashed var(--amber);background:rgba(255,179,71,.09);color:#FFD9A8;border-radius:14px;padding:1rem 1.2rem;margin:0 0 2rem;font-weight:700}
.legal h1{font-size:clamp(2.2rem,6vw,3.2rem);margin-bottom:.4rem}
.legal h2{font-size:1.7rem;margin:2.2rem 0 .6rem;color:var(--cyan)}
.legal p,.legal li{color:var(--muted)}
.legal li{margin:.35rem 0}
.legal strong{color:var(--text)}
.legal .meta{color:var(--dim)}

.center-page{min-height:70vh;display:grid;place-items:center;text-align:center;padding:3rem 0}
.center-page h1{font-size:clamp(2.4rem,7vw,3.6rem);margin:1rem 0 .6rem}
.center-page p{color:var(--muted);max-width:32em;margin:0 auto 1.5rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .tailer-run{left:60%!important;transform:none!important}
}