/* ==========================================================================
   Velmo — shared styles for every page. Edit design tokens once here.
   ========================================================================== */
:root{
  --bg:#F6F5F0; --bg-2:#EFEEE7; --surface:#FFFFFF;
  --dark:#0D1512; --dark-2:#122019;
  --ink:#12140F; --ink-80:rgba(18,20,15,.80);
  --muted:#585E54; --muted-2:#8A9086;
  --on-dark:#EDF1EC; --on-dark-60:rgba(237,241,236,.64); --on-dark-40:rgba(237,241,236,.42);
  --line:rgba(18,20,15,.11); --line-2:rgba(18,20,15,.06); --line-dark:rgba(237,241,236,.14);
  --brand:#127A5B; --brand-deep:#0B5A43; --brand-bright:#1C9E75;
  --brand-050:#EAF3EF; --brand-100:#D6E8DF; --brand-on-dark:#4FD1A6;
  --ack:#2AABEE; --tg:#2AABEE; --prog:#C98A2B; --warn:#B75A38;
  --grad-brand:linear-gradient(180deg,#159A72 0%,#0E6A4E 100%);

  /* Manrope + Golos Text — both fully cover RU / EN / KZ (Kazakh) */
  --f-display:"Manrope","Golos Text",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f:"Golos Text",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --r-2xl:22px; --r-xl:18px; --r-lg:14px; --r:11px; --r-sm:8px;
  --sh-1:0 1px 2px rgba(16,24,20,.05);
  --sh-2:0 4px 16px -4px rgba(16,24,20,.10);
  --sh-3:0 22px 55px -20px rgba(11,40,30,.28);
  --sh-card:0 1px 2px rgba(16,24,20,.04), 0 10px 28px -16px rgba(16,24,20,.18);
  --glow:0 0 0 1px var(--brand-100), 0 20px 42px -22px rgba(11,90,67,.42);

  --measure:36rem; --pad:clamp(1.15rem,4vw,2rem); --sect:clamp(3.25rem,6vw,5.25rem);
}

/* --- global 90% scale (design reads better a notch smaller) --- */
html{font-size:90%;scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%;}

*{box-sizing:border-box;}
body{margin:0;font-family:var(--f);font-size:clamp(1rem,.96rem + .18vw,1.08rem);line-height:1.6;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img,video,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--brand-100);color:var(--ink);}
.wrap{width:100%;max-width:72rem;margin:0 auto;padding-inline:var(--pad);}

/* ---- Type ---- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-.022em;line-height:1.08;margin:0;color:var(--ink);}
h1{font-size:clamp(2rem,1.5rem + 2.3vw,3.1rem);line-height:1.08;letter-spacing:-.028em;}
h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.35rem);letter-spacing:-.026em;}
h3{font-size:clamp(1.12rem,1.04rem + .38vw,1.3rem);font-weight:700;line-height:1.2;}
h4{font-size:1rem;font-weight:700;}
p{margin:0;}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f);font-size:.74rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand);}
.eyebrow--muted{color:var(--muted-2);}
.lead{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.5;color:var(--muted);max-width:var(--measure);}
.section-head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem);}
.section-head .eyebrow{margin-bottom:.9rem;}
.section-head h2{margin-bottom:.9rem;}
.balance{text-wrap:balance;}
.accent{color:var(--brand);}
.section{padding-block:var(--sect);position:relative;}
.band-alt{background:var(--bg-2);}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f);
  font-size:.94rem;font-weight:600;letter-spacing:-.01em;padding:.72rem 1.25rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s;}
.btn svg{width:1.05em;height:1.05em;flex:none;}
.btn--primary{background:var(--grad-brand);color:#fff;box-shadow:0 1px 2px rgba(11,90,67,.35),0 12px 22px -12px rgba(11,90,67,.55);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(11,90,67,.35),0 18px 30px -12px rgba(11,90,67,.6);}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1);}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand-deep);transform:translateY(-2px);box-shadow:var(--glow);}
.btn--onDark{background:#fff;color:var(--ink);}
.btn--onDark:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,0,0,.5);}
.btn--ghostDark{background:transparent;color:var(--on-dark);border-color:var(--line-dark);}
.btn--ghostDark:hover{background:rgba(255,255,255,.08);border-color:rgba(237,241,236,.4);transform:translateY(-2px);}
/* collaboration button turns green on hover / press, in any context */
.btn.js-collab:hover,.btn.js-collab:active,.btn.js-collab:focus-visible{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:0 2px 4px rgba(11,90,67,.35),0 16px 28px -12px rgba(11,90,67,.6);}
.btn--lg{padding:.85rem 1.5rem;font-size:1rem;}
.btn--sm{padding:.5rem .95rem;font-size:.85rem;}
.card-hover{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.card-hover:hover{transform:translateY(-4px);border-color:var(--brand-100);box-shadow:var(--glow);}

/* ==========================================================================
   HEADER — Telegram-style bar: avatar + name · nav · lang + CTA
   ========================================================================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:clamp(.6rem,1.4vw,.95rem);}
.headbar{max-width:68rem;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;
  padding:.45rem .5rem .45rem .6rem;border-radius:999px;
  background:rgba(246,245,240,.72);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:var(--sh-1);transition:box-shadow .3s, background .3s;}
.site-header.scrolled .headbar{background:rgba(246,245,240,.9);box-shadow:0 8px 26px -14px rgba(16,24,20,.35);}
.brandlogo{justify-self:start;display:inline-flex;align-items:center;gap:.5rem;padding:.15rem .4rem;}
.brandlogo .ava{width:30px;height:30px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;}
.brandlogo .ava svg{width:16px;height:16px;}
.brandlogo .wm{font-family:var(--f-display);font-weight:800;font-size:1.08rem;letter-spacing:-.02em;color:var(--ink);}
.nav{justify-self:center;display:flex;gap:.1rem;}
.nav a{font-size:.9rem;font-weight:500;color:var(--muted);padding:.45rem .7rem;border-radius:999px;transition:color .15s,background .15s;}
.nav a:hover{color:var(--ink);background:rgba(18,20,15,.05);}
.head-cta{justify-self:end;display:flex;align-items:center;gap:.5rem;}

/* language dropdown */
.lang{position:relative;}
.lang-btn{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f);font-size:.8rem;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.42rem .6rem;cursor:pointer;box-shadow:var(--sh-1);
  transition:border-color .15s;}
.lang-btn:hover{border-color:rgba(18,20,15,.28);}
.lang-btn .globe{width:14px;height:14px;color:var(--muted);}
.lang-btn .chev{width:10px;height:10px;color:var(--muted-2);transition:transform .2s;}
.lang[aria-expanded="true"] .lang-btn .chev{transform:rotate(180deg);}
.lang-menu{position:absolute;top:calc(100% + .45rem);right:0;min-width:9.5rem;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);padding:.3rem;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s, transform .18s, visibility .18s;}
.lang[aria-expanded="true"] .lang-menu{opacity:1;visibility:visible;transform:none;}
.lang-menu button{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;background:none;border:0;
  font-family:var(--f);font-size:.88rem;color:var(--ink);padding:.5rem .55rem;border-radius:8px;cursor:pointer;transition:background .15s;}
.lang-menu button:hover{background:var(--bg-2);}
.lang-menu button .code{font-size:.68rem;font-weight:700;color:var(--muted-2);margin-left:auto;letter-spacing:.04em;}
.lang-menu button[aria-current="true"]{color:var(--brand-deep);font-weight:600;}
.lang-menu button[aria-current="true"] .code{color:var(--brand);}

.menu-btn{display:none;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  align-items:center;justify-content:center;flex:none;}
.menu-btn span{position:relative;width:15px;height:1.6px;background:var(--ink);border-radius:2px;transition:.2s;}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:15px;height:1.6px;background:var(--ink);border-radius:2px;transition:.2s;}
.menu-btn span::before{top:-5px;} .menu-btn span::after{top:5px;}
body.menu-open .menu-btn span{background:transparent;}
body.menu-open .menu-btn span::before{top:0;transform:rotate(45deg);}
body.menu-open .menu-btn span::after{top:0;transform:rotate(-45deg);}

@media(max-width:900px){
  .headbar{display:flex;justify-content:space-between;}
  .nav{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;gap:.1rem;margin:0;padding:5.5rem 1.5rem 2rem;
    background:var(--bg);transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:var(--sh-3);z-index:-1;}
  body.menu-open .nav{transform:translateY(0);}
  .nav a{font-size:1.15rem;font-weight:600;color:var(--ink);padding:.65rem .3rem;border-bottom:1px solid var(--line-2);border-radius:0;}
  .menu-btn{display:inline-flex;}
  .head-cta .btn--primary{display:none;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;padding-top:clamp(6.5rem,11vh,8.5rem);padding-bottom:clamp(3rem,5.5vw,4.25rem);overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(55% 45% at 84% 6%, rgba(28,158,117,.13), transparent 70%),radial-gradient(45% 38% at 6% 0%, rgba(42,171,238,.07), transparent 70%);}
.hero .wrap{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;}
.hero-copy{max-width:34rem;}
.hero h1{margin-bottom:1.1rem;text-wrap:balance;}
.hero .lead{margin-bottom:1.5rem;}
.cta-row{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;}
.microline{margin-top:1rem;font-size:.86rem;color:var(--muted-2);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.microline b{color:var(--muted);font-weight:600;}
.sep{width:3px;height:3px;border-radius:50%;background:var(--muted-2);opacity:.55;}

.trustrow{margin-top:clamp(3rem,5.5vw,4.25rem);display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  padding-top:1.9rem;border-top:1px solid var(--line);}
.trustrow .item{display:flex;gap:.8rem;align-items:flex-start;}
.trustrow .ico{flex:none;width:38px;height:38px;border-radius:11px;background:var(--brand-050);color:var(--brand);
  display:flex;align-items:center;justify-content:center;transition:.2s;}
.trustrow .item:hover .ico{background:var(--brand);color:#fff;transform:translateY(-2px);}
.trustrow .ico svg{width:19px;height:19px;}
.trustrow b{display:block;font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;margin-bottom:.2rem;}
.trustrow span{font-size:.9rem;color:var(--muted);line-height:1.45;}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:2rem;}
  .hero-copy{max-width:38rem;}
  .hero-stage{order:2;}
  .trustrow{grid-template-columns:1fr;gap:1.15rem;}
}

/* ==========================================================================
   CHAT MOCK
   ========================================================================== */
.stage{position:relative;}
.phone{position:relative;margin-inline:auto;width:min(100%,19.5rem);background:var(--surface);border-radius:var(--r-2xl);
  border:1px solid var(--line);box-shadow:var(--sh-3);overflow:hidden;}
.tg-head{display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#fff,#fbfbf9);}
.tg-ava{width:34px;height:34px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;}
.tg-ava svg{width:18px;height:18px;}
.tg-head .who b{display:block;font-family:var(--f);font-weight:700;font-size:.9rem;line-height:1.1;}
.tg-head .who span{font-size:.74rem;color:var(--brand);display:flex;align-items:center;gap:.35rem;}
.tg-head .who span::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--brand-bright);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.tg-body{padding:.9rem;display:flex;flex-direction:column;gap:.5rem;min-height:20rem;
  background:radial-gradient(circle at 20% 8%, rgba(28,158,117,.05), transparent 42%), var(--bg);}
.msg{max-width:85%;padding:.5rem .7rem;border-radius:15px;font-size:.86rem;line-height:1.38;box-shadow:var(--sh-1);opacity:0;transform:translateY(8px);}
.msg.show{animation:msgin .45s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes msgin{to{opacity:1;transform:none;}}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line-2);border-bottom-left-radius:5px;}
.msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px;box-shadow:0 4px 11px -4px rgba(11,90,67,.5);}
.msg .meta{font-size:.66rem;opacity:.7;margin-top:.2rem;display:flex;align-items:center;justify-content:flex-end;gap:.2rem;}
.msg .meta .ticks{width:14px;height:10px;flex:none;}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem;}
.chip{font-size:.72rem;font-weight:600;padding:.28rem .55rem;border-radius:999px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);}
.chip.on{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-deep);}
.ticketcard{align-self:flex-start;max-width:92%;background:var(--surface);border:1px solid var(--brand-100);border-radius:15px;
  border-bottom-left-radius:5px;padding:.7rem .8rem;box-shadow:var(--sh-2);opacity:0;transform:translateY(8px);}
.ticketcard.show{animation:msgin .45s cubic-bezier(.2,.7,.3,1) forwards;}
.ticketcard .tno{font-family:var(--f-display);font-weight:800;font-size:1rem;color:var(--brand-deep);letter-spacing:-.01em;}
.ticketcard .tdesc{font-size:.78rem;color:var(--muted);margin-top:.15rem;}
.track{display:flex;align-items:flex-end;gap:.28rem;margin-top:.65rem;}
.track .st{flex:1;text-align:center;font-size:.6rem;font-weight:600;color:var(--muted-2);}
.track .bar{height:5px;border-radius:999px;background:var(--line);position:relative;overflow:hidden;margin-bottom:.28rem;}
.track .bar>i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--brand);transition:transform .5s ease;border-radius:999px;}
.track .st.reached{color:var(--brand-deep);}
.track .st.reached .bar>i{transform:scaleX(1);}
.photo-att{margin-top:.4rem;height:4.75rem;border-radius:9px;background:var(--bg-2) center/cover no-repeat;background-image:url('elevatorcutted.jpg');position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}

.hero-badge{position:absolute;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:.55rem .7rem;
  box-shadow:var(--sh-3);display:flex;gap:.55rem;align-items:center;font-size:.8rem;max-width:13.5rem;animation:floaty 5s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.hero-badge .b-ico{width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;}
.hero-badge .b-ico svg{width:15px;height:15px;}
.hero-badge b{font-family:var(--f-display);font-weight:700;font-size:.82rem;}
.hero-badge small{display:block;color:var(--muted-2);font-size:.7rem;}
.hero-badge.one{top:4%;right:-3%;}
.hero-badge.two{bottom:6%;left:-5%;animation-delay:1.2s;}
@media(max-width:1120px){.hero-badge.one{right:0;}.hero-badge.two{left:0;}}
@media(max-width:560px){.hero-badge{display:none;}}

/* ==========================================================================
   PROBLEM — before / after
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:stretch;}
@media(max-width:800px){.split{grid-template-columns:1fr;}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.2rem,3vw,1.7rem);box-shadow:var(--sh-card);}
.panel .p-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:700;padding:.28rem .65rem;border-radius:999px;margin-bottom:.9rem;}
.panel.bad .p-tag{background:rgba(183,90,56,.1);color:var(--warn);}
.panel.good .p-tag{background:var(--brand-050);color:var(--brand-deep);}
.panel h3{margin-bottom:.85rem;}
.chaos{display:flex;flex-direction:column;gap:.4rem;}
.cmsg{font-size:.8rem;padding:.4rem .6rem;border-radius:11px;background:var(--bg-2);color:var(--muted);max-width:92%;}
.cmsg.mine{align-self:flex-end;background:#dcefe7;color:#2c4a40;}
.cmsg.lost{align-self:flex-end;background:#d5ece3;color:#264b3e;max-width:94%;}
.cmsg .nm{font-weight:700;color:var(--ink);opacity:.7;font-size:.7rem;display:block;margin-bottom:.05rem;}
.cmsg .cmeta{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;font-size:.62rem;color:#5c8577;margin-top:.15rem;}
.cmsg .cmeta .ticks{width:14px;height:10px;flex:none;}
.buried{margin-top:.6rem;font-size:.78rem;color:var(--warn);font-weight:600;display:flex;align-items:flex-start;gap:.4rem;}
.buried svg{flex:none;margin-top:.15rem;}
.solved{display:flex;flex-direction:column;gap:.6rem;}
.solved .tkt{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border:1px solid var(--brand-100);border-radius:11px;background:var(--brand-050);}
.solved .tkt .no{font-family:var(--f-display);font-weight:800;color:var(--brand-deep);font-size:.9rem;}
.solved .tkt .txt{flex:1;font-size:.82rem;color:var(--muted);}
.badge{font-size:.66rem;font-weight:700;padding:.2rem .5rem;border-radius:999px;white-space:nowrap;}
.badge.done{background:var(--brand);color:#fff;}
.badge.prog{background:rgba(201,138,43,.16);color:#8a5e14;}
.badge.ack{background:rgba(42,171,238,.14);color:#1478a8;}
.solved .note{font-size:.8rem;color:var(--muted);margin-top:.2rem;}

/* ==========================================================================
   HOW IT WORKS — tabs
   ========================================================================== */
.tabs{display:inline-flex;gap:.3rem;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:.28rem;margin-bottom:2rem;}
.band-alt .tabs{background:var(--surface);}
.tab{border:0;background:transparent;font-family:var(--f);font-weight:600;font-size:.9rem;color:var(--muted);padding:.52rem 1.05rem;
  border-radius:999px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:.45rem;}
.tab svg{width:1.05em;height:1.05em;}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{background:var(--brand);color:#fff;box-shadow:0 6px 14px -8px rgba(11,90,67,.6);}
.tabpanel[hidden]{display:none;}
.tabpanel{animation:fadeup .4s ease;}
@keyframes fadeup{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.tab-summary{margin-top:1.5rem;font-size:.95rem;color:var(--muted);max-width:46rem;}
.tab-summary b{color:var(--ink);font-weight:600;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
@media(max-width:820px){.steps{grid-template-columns:1fr;}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.15rem,2.5vw,1.5rem);box-shadow:var(--sh-card);display:flex;flex-direction:column;}
.step .n{font-family:var(--f-display);font-weight:800;font-size:.9rem;color:var(--brand);letter-spacing:.04em;margin-bottom:.95rem;display:flex;align-items:center;gap:.5rem;}
.step .n::before{content:attr(data-n);}
.step .n::after{content:"";flex:1;height:1px;background:var(--line);}
.step .visual{border-radius:var(--r);background:var(--bg);border:1px solid var(--line-2);padding:.75rem;margin-bottom:.95rem;min-height:7.5rem;display:flex;flex-direction:column;gap:.4rem;justify-content:center;}
.step h3{margin-bottom:.4rem;}
.step p{font-size:.9rem;color:var(--muted);}
.mini{font-size:.77rem;padding:.38rem .55rem;border-radius:9px;box-shadow:var(--sh-1);line-height:1.3;}
.mini.bot{background:var(--surface);border:1px solid var(--line-2);align-self:flex-start;max-width:92%;}
.mini.me{background:var(--brand);color:#fff;align-self:flex-end;max-width:92%;}
.mini-chips{display:flex;gap:.28rem;flex-wrap:wrap;}
.mini-chip{font-size:.68rem;font-weight:600;padding:.22rem .48rem;border-radius:999px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);}
.mini-chip.on{background:var(--brand-050);border-color:var(--brand-100);color:var(--brand-deep);}
.vrow{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);}
.vrow .rno{font-family:var(--f-display);font-weight:800;font-size:.76rem;color:var(--brand-deep);}
.vrow .rtxt{flex:1;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acts{display:flex;gap:.3rem;}
.act{flex:1;text-align:center;font-size:.7rem;font-weight:600;padding:.4rem .25rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);}
.act.on{background:var(--brand);color:#fff;border-color:var(--brand);}
.mtl{list-style:none;margin:0;padding:0;position:relative;}
.mtl::before{content:"";position:absolute;left:5px;top:5px;bottom:6px;width:2px;background:var(--line);}
.mtl li{position:relative;padding:0 0 .5rem 1.35rem;font-size:.74rem;}
.mtl li:last-child{padding-bottom:0;}
.mtl li::before{content:"";position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--brand);}
.mtl .tm{color:var(--brand);font-weight:600;font-variant-numeric:tabular-nums;}
.mtl .ev{color:var(--ink);font-weight:500;}

/* ==========================================================================
   WHY — comparison (labelled cells, per-row before/after on mobile)
   ========================================================================== */
.vs{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-card);background:var(--surface);}
.vs-head,.vs-row{display:grid;grid-template-columns:1fr 1fr;}
.vs-head{border-bottom:1px solid var(--line);}
.vs-h{padding:.85rem 1.15rem;font-family:var(--f-display);font-weight:700;font-size:.85rem;letter-spacing:.01em;display:flex;align-items:center;gap:.5rem;}
.vs-h.now{color:#9a4a2f;background:linear-gradient(180deg,rgba(183,90,56,.13),rgba(183,90,56,.05));}
.vs-h.vel{color:var(--brand-deep);background:var(--brand-050);border-left:1px solid var(--brand-100);}
.vs-h .lg svg{width:16px;height:16px;}
.vs-row{border-bottom:1px solid var(--line-2);}
.vs-row:last-child{border-bottom:0;}
.vs-cell{padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.3rem;}
.vs-cell.now{background:linear-gradient(90deg,rgba(183,90,56,.08),rgba(183,90,56,.015));transition:background .2s;}
.vs-row:hover .vs-cell.now{background:rgba(183,90,56,.11);}
.vs-cell.vel{background:linear-gradient(90deg,rgba(234,243,239,.55),rgba(234,243,239,.15));border-left:1px solid var(--brand-100);transition:background .2s;}
.vs-row:hover .vs-cell.vel{background:var(--brand-050);}
.vs-top{display:flex;align-items:center;gap:.5rem;font-family:var(--f-display);font-weight:700;font-size:.98rem;letter-spacing:-.01em;}
.vs-cell.now .vs-top{color:#8a4025;}
.vs-cell.vel .vs-top{color:var(--brand-deep);}
.vs-d{font-size:.84rem;color:var(--muted);line-height:1.45;}
.vs-ic{flex:none;width:1.3rem;height:1.3rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
.vs-ic.x{color:var(--warn);background:rgba(183,90,56,.12);}
.vs-ic.v{color:#fff;background:var(--brand);box-shadow:0 2px 6px -2px rgba(11,90,67,.6);}
.vs-ic svg{width:.88rem;height:.88rem;}
.vs-tag{display:none;}
@media(max-width:680px){
  .vs-head{display:none;}
  .vs-row{grid-template-columns:1fr;}
  .vs-cell{border-bottom:1px solid var(--line-2);}
  .vs-cell.now{border-left:3px solid rgba(183,90,56,.45);}
  .vs-cell.vel{border-left:3px solid var(--brand);}
  .vs-row:last-child .vs-cell.vel{border-bottom:0;}
  .vs-tag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.1rem;}
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:66rem;margin-inline:auto;align-items:stretch;}
@media(max-width:900px){.price-grid{grid-template-columns:1fr;max-width:28rem;}}
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--sh-card);display:flex;flex-direction:column;}
.price.feature{border-color:var(--brand-100);}
.price .plan{font-size:.64rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--brand);margin-bottom:.85rem;white-space:nowrap;}
.price .amount{display:flex;align-items:baseline;gap:.35rem;margin-bottom:.3rem;flex-wrap:wrap;}
.price .amount .num{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,1.55rem + 1.9vw,2.8rem);letter-spacing:-.03em;line-height:1;}
.price .amount .num.custom{font-size:clamp(1.55rem,1.2rem + 1.3vw,2rem);}
.price .amount .per{font-size:.9rem;color:var(--muted-2);}
.price .trialnote{min-height:1.1rem;}
.price .subscribe{font-size:.82rem;font-weight:600;color:var(--muted-2);margin-bottom:.35rem;min-height:1.1rem;}
.price .sub{font-size:.88rem;color:var(--muted);margin-bottom:1.3rem;}
.price ul{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.price li{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem;color:var(--ink-80);}
.price li svg{width:1.05rem;height:1.05rem;color:var(--brand);flex:none;margin-top:.14rem;}
.price li.trial{color:var(--brand-deep);font-weight:600;}
.price .spacer{flex:1;}
.price .note{font-size:.78rem;color:var(--muted-2);margin-top:.8rem;text-align:center;}
.price .trialnote{font-size:.8rem;color:var(--muted);margin-top:.7rem;text-align:center;}
.price .escape{margin-top:1.1rem;padding-top:1.05rem;border-top:1px solid var(--line);}
.price .escape-q{font-size:.82rem;color:var(--muted);line-height:1.45;margin-bottom:.4rem;}
.price .escape-link{display:inline-block;font-family:var(--f);font-size:.9rem;font-weight:600;color:var(--brand-deep);border-bottom:1px solid var(--brand-100);transition:color .15s,border-color .15s;}
.price .escape-link:hover{color:var(--brand);border-color:var(--brand);}
.price .escape-note{font-size:.76rem;color:var(--muted-2);margin-top:.5rem;}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start;}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr;gap:1.25rem;}}
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-of-type{border-top:1px solid var(--line);}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem .25rem;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--brand-deep);}
.faq summary .plus{flex:none;width:1.4rem;height:1.4rem;position:relative;}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--brand);border-radius:2px;}
.faq summary .plus::before{width:13px;height:2px;}
.faq summary .plus::after{width:2px;height:13px;transition:transform .25s ease;}
.faq details[open] summary .plus::after{transform:translate(-50%,-50%) scaleY(0);}
.faq .ans{padding:0 .25rem 1.2rem;color:var(--muted);max-width:42rem;font-size:.95rem;line-height:1.55;}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.finalcta{position:relative;overflow:hidden;color:#fff;isolation:isolate;}
.finalcta .bgimg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;}
.finalcta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,20,15,.82),rgba(9,20,15,.72)),linear-gradient(120deg,rgba(11,90,67,.5),transparent 62%);}
.finalcta .inner{text-align:center;max-width:44rem;margin-inline:auto;padding-block:clamp(4rem,8vw,6.5rem);}
.finalcta h2{color:#fff;margin-bottom:1rem;text-wrap:balance;}
.finalcta p{color:rgba(255,255,255,.85);font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);margin-bottom:1.7rem;max-width:34rem;margin-inline:auto;}
.finalcta .cta-row{justify-content:center;}
.finalcta .reach{margin-top:1.25rem;font-size:.9rem;color:rgba(255,255,255,.75);}
.finalcta .reach a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--dark);color:var(--on-dark-60);padding-block:clamp(3rem,5vw,4.5rem) 2.25rem;}
.footcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem;}
@media(max-width:760px){.footcols{grid-template-columns:1fr 1fr;gap:2rem 1.5rem;}.footcols .fbrand{grid-column:1 / -1;}}
.fbrand .logo{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;}
.fbrand .logo .mk{width:30px;height:30px;border-radius:50%;background:rgba(79,209,166,.15);display:flex;align-items:center;justify-content:center;}
.fbrand .logo .mk svg{width:17px;height:17px;}
.fbrand .logo .wm{font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:#fff;letter-spacing:-.02em;}
.fbrand p{max-width:22rem;font-size:.88rem;color:var(--on-dark-60);margin-bottom:.9rem;}
.fbrand .data{font-size:.76rem;color:var(--on-dark-40);max-width:24rem;line-height:1.5;}
.site-footer h4{font-family:var(--f);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-40);margin:0 0 .9rem;font-weight:700;}
.site-footer .col a{display:block;color:var(--on-dark-60);margin-bottom:.55rem;font-size:.9rem;transition:color .15s;width:fit-content;}
.site-footer .col a:hover{color:#fff;}
.site-footer .col .soonlink{display:block;color:var(--on-dark-40);margin-bottom:.55rem;font-size:.9rem;cursor:default;}
.site-footer .col .soonlink .s{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-dark);border-radius:999px;padding:.03rem .34rem;margin-left:.35rem;vertical-align:middle;}
.footbase{margin-top:clamp(2.25rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid var(--line-dark);font-size:.8rem;color:var(--on-dark-40);}

/* ==========================================================================
   REVEAL / MOTION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.07s;}.reveal.d2{transition-delay:.14s;}.reveal.d3{transition-delay:.21s;}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
  .msg,.ticketcard{opacity:1!important;transform:none!important;}
  .mobile-cta{transition:none;}
}

/* ==========================================================================
   UTILITIES + NEW COMPONENTS
   ========================================================================== */
.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;}

/* sticky mobile CTA */
.mobile-cta{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:55;display:none;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.25rem;border-radius:999px;background:var(--grad-brand);color:#fff;font-family:var(--f);font-weight:600;font-size:1rem;
  box-shadow:0 8px 24px -6px rgba(11,90,67,.55),0 2px 6px rgba(11,90,67,.4);
  transform:translateY(160%);transition:transform .3s cubic-bezier(.2,.7,.3,1);}
.mobile-cta svg{width:1.15em;height:1.15em;flex:none;}
.mobile-cta.show{transform:none;}
@media(max-width:820px){.mobile-cta{display:flex;}}

/* toast */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1.5rem);z-index:80;
  background:var(--dark);color:#fff;font-size:.88rem;font-weight:500;padding:.6rem 1.1rem;border-radius:999px;
  box-shadow:var(--sh-3);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none;}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%);}
@media(max-width:820px){.toast{bottom:5.5rem;}}

/* ==========================================================================
   SUB-PAGES (privacy / terms / cookies / about / 404) — shared shell
   ========================================================================== */
.subhead{position:sticky;top:0;z-index:20;background:rgba(246,245,240,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.subhead .in{max-width:54rem;margin:0 auto;padding:.8rem var(--pad);display:flex;align-items:center;justify-content:space-between;}
.subhead .brandlogo{display:inline-flex;align-items:center;gap:.5rem;}
.subhead .brandlogo .ava{width:28px;height:28px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;}
.subhead .brandlogo .ava svg{width:15px;height:15px;}
.subhead .brandlogo .wm{font-family:var(--f-display);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);}
.subhead .back{font-size:.86rem;font-weight:600;color:var(--brand-deep);display:inline-flex;align-items:center;gap:.4rem;}
.subhead .back:hover{color:var(--brand);}
.docwrap{max-width:46rem;margin:0 auto;padding:clamp(2.25rem,5vw,3.75rem) var(--pad) 4.5rem;}
.docwrap .eyebrow{margin-bottom:.7rem;}
.docwrap h1{font-size:clamp(2rem,1.5rem + 2.4vw,3rem);margin:.3rem 0 .4rem;}
.docwrap .updated{font-size:.85rem;color:var(--muted-2);margin-bottom:2rem;}
.docwrap h2{font-size:1.3rem;margin:2.4rem 0 .6rem;}
.docwrap p,.docwrap li{color:var(--muted);line-height:1.7;}
.docwrap>p{margin-bottom:1rem;}
.docwrap strong{color:var(--ink);font-weight:600;}
.docwrap a[href]{color:var(--brand-deep);font-weight:600;border-bottom:1px solid var(--brand-100);}
.docwrap ul{padding-left:1.15rem;margin:.4rem 0 1rem;}
.docwrap li{margin-bottom:.5rem;}
.callout{background:var(--brand-050);border:1px solid var(--brand-100);border-radius:16px;padding:1.3rem 1.5rem;margin:1.4rem 0;}
.callout p{color:var(--brand-deep);margin:0;}
.docnote{margin-top:2.75rem;padding:1.15rem 1.35rem;border:1px dashed var(--line);border-radius:12px;font-size:.9rem;color:var(--muted-2);}
.docnote strong{color:var(--muted);}
.subfoot{background:var(--dark);color:var(--on-dark-40);}
.subfoot .in{max-width:46rem;margin:0 auto;padding:2.25rem var(--pad);display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between;font-size:.84rem;}
.subfoot a{color:var(--on-dark-60);} .subfoot a:hover{color:#fff;}

/* about */
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0 2.75rem;}
@media(max-width:720px){.about-values{grid-template-columns:1fr;}}
.about-val{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:1.4rem 1.5rem;box-shadow:var(--sh-card);}
.about-val .vico{width:38px;height:38px;border-radius:11px;background:var(--brand-050);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;}
.about-val .vico svg{width:20px;height:20px;}
.about-val h3{font-size:1.08rem;margin-bottom:.4rem;}
.about-val p{font-size:.92rem;}
.founder-card{display:flex;align-items:center;gap:1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);padding:1.5rem;box-shadow:var(--sh-card);margin-top:1rem;}
@media(max-width:520px){.founder-card{flex-direction:column;text-align:center;}}
.founder-card .photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--brand-100);}
.founder-card .fname{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;}
.founder-card .frole{font-size:.9rem;color:var(--muted);margin-top:.15rem;}
/* bigger founder card with socials on the right */
.founder-card.big{padding:1.9rem 2rem;gap:1.5rem 2rem;justify-content:space-between;flex-wrap:wrap;}
.founder-card.big .photo{width:120px;height:120px;}
.founder-card .who-wrap{display:flex;align-items:center;gap:1.4rem;}
.founder-socials{display:flex;flex-direction:column;gap:.65rem;}
.founder-socials a{display:inline-flex;align-items:center;gap:.65rem;font-weight:600;font-size:.95rem;color:var(--ink);transition:color .15s;}
.founder-socials a:hover{color:var(--brand-deep);}
.founder-socials .sico{width:36px;height:36px;border-radius:10px;background:var(--brand-050);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;transition:.15s;}
.founder-socials a:hover .sico{background:var(--brand);color:#fff;transform:translateY(-1px);}
.founder-socials .sico svg{width:19px;height:19px;}
@media(max-width:560px){.founder-card.big{flex-direction:column;text-align:center;}.founder-card .who-wrap{flex-direction:column;gap:1rem;}.founder-socials{align-items:center;}}

/* 404 */
.err404{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem var(--pad);}
.err404 .mk{width:44px;height:44px;margin:0 auto 1.5rem;}
.err404 .code{font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,10vw,7rem);letter-spacing:-.04em;color:var(--brand);line-height:1;}
.err404 h1{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.1rem);margin:.8rem 0 .6rem;}
.err404 p{color:var(--muted);max-width:32rem;margin:0 auto 1.75rem;}

/* ==========================================================================
   "COMING SOON" MODAL (bot not live yet)
   ========================================================================== */
.modal[hidden]{display:none;}
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:1.25rem;}
.modal-backdrop{position:absolute;inset:0;background:rgba(9,20,15,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:mfade .2s ease;}
.modal-panel{position:relative;z-index:1;width:100%;max-width:26rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:2.1rem 1.75rem 1.75rem;box-shadow:var(--sh-3);text-align:center;animation:mpop .25s cubic-bezier(.2,.7,.3,1);}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:.7rem;right:.8rem;width:32px;height:32px;border:0;background:none;font-size:1.5rem;line-height:1;color:var(--muted-2);cursor:pointer;border-radius:8px;}
.modal-x:hover{color:var(--ink);background:var(--bg-2);}
.modal-ico{width:52px;height:52px;border-radius:50%;background:var(--brand-050);color:var(--brand);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
.modal-ico svg{width:26px;height:26px;}
.modal-panel h3{font-size:1.3rem;margin-bottom:.6rem;}
.modal-panel p{color:var(--muted);font-size:.96rem;line-height:1.55;margin-bottom:1.5rem;}
.modal-actions{display:flex;flex-direction:column;gap:.5rem;}
@media(prefers-reduced-motion:reduce){.modal-backdrop,.modal-panel{animation:none;}}