.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.topbar.up{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:72px}
.mainnav{display:flex;gap:4px;margin-inline:auto}
.mainnav a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:600;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
.mainnav a:hover{color:var(--ink);background:var(--bg-2)}
.bar-end{display:flex;align-items:center;gap:8px}
@media (max-width:1020px){.mainnav{display:none}.bar-end{margin-inline-start:auto}}
@media (max-width:600px){.hide-s,.bar-end .lang span,.bar-end .btn.gold{display:none}.bar{gap:10px;min-height:64px}.bar-end .lang{padding:0;width:44px;justify-content:center}.bar-end .btn.gold{padding-inline:14px}}

.scales{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scales path{fill:none;stroke:var(--scale);stroke-width:1.2}
.hero{position:relative;overflow:hidden;padding-block:56px 72px}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 14px;border:1px solid var(--line-2);border-radius:999px;font-weight:700;font-size:.92rem;color:var(--ink-2);background:var(--surface)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
.hero h1{margin-top:22px;font-size:clamp(2.1rem,3.3vw,3rem);font-weight:900;line-height:1.3}
[dir=ltr] .hero h1{line-height:1.08}
.hero h1 em{white-space:nowrap}@media (max-width:600px){.hero h1 em{white-space:normal}}.hero h1 span{display:block}
.hero h1 em{display:block;font-style:normal;color:var(--steel-ink);font-weight:800}
.lede{margin-top:20px;font-size:1.15rem;color:var(--ink-2);max-width:36em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--ink-2);font-weight:600;font-size:.95rem}
.trust li{display:flex;align-items:center;gap:8px}
.trust .ic{width:18px;height:18px;color:var(--ok);stroke-width:2.4}

.hero-visual{position:relative;justify-self:center;width:min(380px,100%)}
.phone{position:relative;border-radius:36px;background:var(--wa-bg);border:10px solid var(--navy);box-shadow:var(--shadow-l);overflow:hidden}
[data-theme=night] .phone{border-color:#1A3954}
.ph-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--navy);color:#fff}
.ph-head b{display:block;font-size:1rem;line-height:1.3}.ph-head small{color:#9FD0B5;font-size:.8rem}
.ph-body{display:flex;flex-direction:column;gap:10px;padding:18px 14px 30px;min-height:380px;background-image:radial-gradient(var(--scale) 1px,transparent 1.2px);background-size:16px 16px}
@media (prefers-reduced-motion:no-preference){.ph-body .msg{opacity:0;transform:translateY(8px);animation:pop .5s ease forwards}.float-card{opacity:0;animation:pop .5s ease 3.3s forwards}}
.ph-body .msg:nth-child(1){animation-delay:.2s}.ph-body .msg:nth-child(2){animation-delay:1s}.ph-body .msg:nth-child(3){animation-delay:1.8s}.ph-body .msg:nth-child(4){animation-delay:2.6s}
@keyframes pop{to{opacity:1;transform:none}}
.float-card{position:absolute;inset-inline-start:-56px;bottom:-22px;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-l)}
.float-card b{display:block;font-size:.92rem;line-height:1.35}.float-card small{color:var(--ink-3);font-size:.8rem}
.fc-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(207,165,90,.2);color:var(--gold-ink)}

.services{padding-block:8px 72px}
.sv-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.sv-head h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.sv-head p{color:var(--ink-2);max-width:34em}
.sv-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px}
.sv a,.sv>div{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);text-decoration:none;height:100%}
.sv.live a{border-color:color-mix(in srgb,var(--gold) 60%,var(--line));box-shadow:var(--shadow)}
.sv.live a:hover{transform:translateY(-2px);transition:transform .2s}
.sv.soon>div{background:transparent;border-style:dashed}
.sv-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--navy);color:var(--gold-2);flex:none}
.sv.soon .sv-ic{background:var(--bg-2);color:var(--ink-3)}
.sv-txt{flex:1;min-width:0}.sv-txt b{display:block}.sv-txt small{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.5}

.how{background:var(--navy);color:#fff;padding-block:84px;position:relative}
.how .kicker{color:var(--gold-2)}
.how h2{font-size:clamp(1.7rem,3.2vw,2.6rem);max-width:22em;text-wrap:balance}
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps li{position:relative;padding:26px 22px;border-radius:var(--r-l);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.steps .num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold-2);color:var(--gold-2);font-weight:800;font-size:1.1rem;margin-bottom:18px}
.steps h3{font-size:1.2rem;margin-bottom:8px}
.steps p{color:#C4D2DE;font-size:.98rem}

.features{padding-block:88px}
.features h2{font-size:clamp(1.7rem,3.2vw,2.6rem);max-width:22em;text-wrap:balance}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.tile{padding:26px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.tile.big{grid-column:span 2;background:linear-gradient(135deg,var(--surface),var(--surface-2))}
.t-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(207,165,90,.18);color:var(--gold-ink);margin-bottom:6px}
.t-ic .ic{width:24px;height:24px}
.tile h3{font-size:1.25rem}
.tile p{color:var(--ink-2)}
.tile.big h3{font-size:1.45rem}.tile.big p{font-size:1.08rem;max-width:30em}

.demo{background:var(--bg-2);padding-block:88px}
.demo-grid{display:grid;grid-template-columns:1fr 440px;grid-template-areas:'copy chat' 'safe chat';grid-template-rows:auto 1fr;gap:0 56px;align-items:start}
.demo-copy{grid-area:copy}.demo .chatbox{grid-area:chat}.demo .safety{grid-area:safe}
.demo h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.safety{margin-top:34px;padding:24px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.safety h3{font-size:1.15rem;margin-bottom:14px}
.safety ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.safety li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:.96rem;line-height:1.55}
.safety .ic{color:var(--steel);margin-top:2px}

.chatbox{display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;background:var(--wa-bg);border:1px solid var(--line);box-shadow:var(--shadow-l)}
.cb-head{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--navy);color:#fff}
.cb-head>div{flex:1}.cb-head b{display:block;line-height:1.3}.cb-head small{color:#B9CCDA;font-size:.8rem}
.cb-head .tbtn{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cb-log{display:flex;flex-direction:column;gap:10px;padding:16px 14px;height:360px;overflow-y:auto;background-image:radial-gradient(var(--scale) 1px,transparent 1.2px);background-size:16px 16px}
.chips{display:flex;gap:8px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:none}
.chip{flex:none;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--steel)}
.cb-form{display:flex;gap:8px;padding:12px}
.cb-form input{flex:1;min-height:48px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);min-width:0}
.send{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:var(--on-gold);cursor:pointer;flex:none}
.cb-note{padding:0 16px 12px;font-size:.8rem;color:var(--ink-3)}

.plans{padding-block:88px}
.pl-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.pl-head h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.seg button{min-height:44px;min-width:76px;padding:0 18px;border-radius:999px;border:0;background:transparent;font-weight:700;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;padding:28px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.tier.pop{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:var(--shadow-l)}
[data-theme=night] .tier.pop{background:#0F3150;border-color:#2B5577}
.pop-tag{position:absolute;top:-13px;inset-inline-start:24px;background:var(--gold);color:var(--on-gold);font-weight:800;font-size:.8rem;padding:3px 12px;border-radius:999px}
.tier h3{font-size:1.4rem}
.td{color:var(--ink-2);margin-top:4px}.tier.pop .td{color:#C4D2DE}
.price{display:flex;flex-direction:column;gap:4px;margin:22px 0;padding-block:16px;border-block:1px solid var(--line)}
.tier.pop .price{border-color:rgba(255,255,255,.14)}
.price .cur{font-size:.88rem;font-weight:700;color:var(--ink-3)}.price .cur b{color:var(--gold-ink);font-size:1rem}.tier.pop .price .cur{color:#B9CCDA}.tier.pop .price .cur b{color:var(--gold-2)}
.price .amt{font-size:1.5rem;font-weight:800;color:var(--ink)}.tier.pop .price .amt{color:#fff}
.tier ul,.pl-points{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:12px}
.tier li,.pl-points li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.tier li .ic,.pl-points .ic{color:var(--ok);stroke-width:2.4;margin-top:2px}
.tier.pop li .ic{color:#7FD6AE}
.tier .btn{margin-top:auto}
.tier.pop .btn.gold{box-shadow:none}
.pl-points{grid-template-columns:repeat(4,auto);justify-content:center;gap:12px 28px;margin:34px 0 0;color:var(--ink-2);font-weight:600}
.pl-note{text-align:center;color:var(--ink-3);font-size:.88rem;margin-top:14px}

.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;padding-block:24px 96px}
.fq-side{position:sticky;top:96px;align-self:start}
.fq-side h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.fq-list details{border-bottom:1px solid var(--line)}
.fq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding-block:14px;cursor:pointer;font-weight:700;font-size:1.1rem;list-style:none}
.fq-list summary::-webkit-details-marker{display:none}
.fq-list summary i{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);position:relative;flex:none}
.fq-list summary i::before,.fq-list summary i::after{content:"";position:absolute;inset:50% auto auto 50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.fq-list summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.fq-list details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.fq-list details p{padding-bottom:20px;color:var(--ink-2);max-width:40em}

.final{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding-block:84px;text-align:center}
.final .scales path{stroke:rgba(232,210,155,.08)}
.final-in{position:relative}
.final h2{font-size:clamp(1.9rem,4vw,3.2rem);font-weight:900}
.final p{color:#C4D2DE;font-size:1.15rem;margin-top:12px}
.final .ctas{justify-content:center}

.foot{padding-block:56px 28px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr;gap:32px}
.foot p{color:var(--ink-2);margin-top:14px;max-width:24em;font-size:.95rem}
.foot nav{display:flex;flex-direction:column;gap:2px}
.foot h4{font-size:.95rem;margin-bottom:8px;color:var(--ink)}
.foot nav a{color:var(--ink-2);text-decoration:none;min-height:44px;display:flex;align-items:center;font-size:.95rem}
.foot nav a:hover{color:var(--ink)}
.foot-end{display:flex;align-items:center;gap:10px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.88rem}
.foot-end span{margin-inline-end:auto}

@media (max-width:1020px){
  .hero-grid,.faq{grid-template-columns:1fr}
  .demo-grid{grid-template-columns:1fr;grid-template-areas:'copy' 'chat' 'safe';gap:28px}.demo .safety{margin-top:0}.fq-side{position:static}
  .hero-visual{margin-top:12px}
  .float-card{inset-inline-start:auto;inset-inline-end:-8px}
  .steps{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr 1fr}.tile.big{grid-column:span 2}.tile:last-child{grid-column:span 2}
  .tiers{grid-template-columns:1fr}
  .sv-list{grid-template-columns:1fr}
  .pl-points{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .hero{padding-block:28px 48px}
  .hero h1{font-size:2.1rem}
  .lede{font-size:1.05rem}
  .ctas .btn{flex:1 1 100%}
  .float-card{inset-inline-end:0;bottom:-18px}
  .steps,.bento,.safety ul,.pl-points{grid-template-columns:1fr}.tile.big,.tile:last-child{grid-column:auto}
  .how,.features,.demo,.plans,.final{padding-block:60px}
  .steps{margin-top:28px;gap:12px}.steps li{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;padding:18px}.steps .num{margin:0;grid-row:span 2}
  .tile{padding:18px;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:start}.t-ic{grid-row:span 2;margin:0;width:44px;height:44px}.tile.big h3{font-size:1.25rem}.tile.big p{font-size:1rem}.sv a,.sv>div{padding:14px}
  .cb-log{height:320px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:20px}.foot-grid>div{grid-column:span 2}.foot-grid nav:last-child h4{display:none}
  .foot-end{flex-wrap:wrap}
}

.btn.is-soon{cursor:default}
.legal-page{padding-block:72px 96px;max-width:760px}
.legal-page h1{font-size:2rem;margin-bottom:12px}
.legal-page .lede{margin-bottom:28px}
