:root{
  --green:#009466; --green2:#00C166; --mint-050:#EAF7F0; --mint-100:#D8F0E4;
  --emerald-950:#042017; --emerald-900:#063a2a; --emerald-800:#0a4b36;
  --ink:#0c1f17; --muted:#5c7469; --line:rgba(9,60,42,.12);
  --paper:#F4FBF7; --white:#ffffff;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 24px 60px -28px rgba(4,32,23,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* ── nav ── */
.nav{position:absolute;top:0;left:0;right:0;z-index:5}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand svg{width:30px;height:30px}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
  color:#fff;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);transition:background .15s}
.nav-cta:hover{background:rgba(255,255,255,.26)}

/* ── hero ── */
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(155deg,#18db8b 0%,#00c166 40%,#009466 100%)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 45% at 50% 8%,rgba(150,255,205,.34),transparent 70%)}
.hero .wrap{position:relative;padding:132px 22px 96px}
.hero-mark{width:104px;height:104px;margin:0 auto 30px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.28))}
.hero h1{font-size:clamp(34px,6vw,62px);line-height:1.03;letter-spacing:-.035em;
  font-weight:850;margin:0 auto;max-width:16ch;text-wrap:balance}
.hero p.sub{margin:20px auto 0;max-width:56ch;font-size:clamp(16px,2.2vw,20px);
  color:rgba(255,255,255,.9);line-height:1.55}
.trust{margin:22px auto 0;display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;
  color:rgba(255,255,255,.82);font-size:13.5px;font-weight:600}
.trust span{display:inline-flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:#a7f3cf}

/* ── store badges ── */
.badges{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.badge{display:inline-flex;align-items:center;gap:12px;background:#04241a;color:#fff;
  padding:12px 20px 12px 18px;border-radius:15px;border:1px solid rgba(255,255,255,.14);
  transition:transform .14s ease, box-shadow .14s ease;box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.badge:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}
.badge svg{width:26px;height:26px;flex:none}
.badge .b-t{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.badge .b-t small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.badge .b-t b{font-size:16px;font-weight:750}
.badge.light{background:#fff;color:#04241a;border-color:var(--line)}

/* ── section headings ── */
.section{padding:clamp(64px,9vw,110px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:750;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.eyebrow .dot{background:var(--green)}
.section h2{font-size:clamp(26px,4vw,40px);line-height:1.08;letter-spacing:-.03em;
  font-weight:820;margin:14px 0 0;max-width:20ch;text-wrap:balance}
.section .lede{margin:14px 0 0;max-width:60ch;color:var(--muted);font-size:clamp(15px,2vw,18px)}
.center{text-align:center}
.center .eyebrow,.center h2,.center .lede{margin-left:auto;margin-right:auto}

/* ── feature grid ── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:880px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px;
  box-shadow:0 14px 34px -26px rgba(4,32,23,.4);transition:transform .15s ease, box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(4,32,23,.5)}
.ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--mint-050);color:var(--green)}
.ic svg{width:26px;height:26px}
.card h3{margin:0 0 7px;font-size:19px;font-weight:800;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}

/* ── privacy band ── */
.band{background:linear-gradient(150deg,#00b877,#009466);color:#fff;border-radius:28px;
  padding:clamp(38px,6vw,66px);text-align:center;margin:0 auto;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 60% at 50% 0%,rgba(120,240,190,.16),transparent 70%)}
.band .eyebrow{color:#8cf0be}
.band .eyebrow .dot{background:#8cf0be}
.band h2{color:#fff}
.band .lede{color:rgba(255,255,255,.85)}
.band>*{position:relative}

/* ── final CTA ── */
.cta{text-align:center}

/* ── footer ── */
footer{background:#013a29;color:rgba(255,255,255,.80);padding:52px 0 40px;margin-top:8px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
footer .brand{margin-bottom:10px}
footer .cols{display:flex;gap:44px;flex-wrap:wrap}
footer h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
footer a{display:block;color:rgba(255,255,255,.72);font-size:14px;padding:4px 0;transition:color .12s}
footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;
  font-size:13px;color:rgba(255,255,255,.55)}

/* ── invite landing ── */
.invite{min-height:100vh;display:grid;place-items:center;padding:34px 20px;
  background:linear-gradient(160deg,#18db8b,#00c166 44%,#009466)}
.invite-card{width:100%;max-width:430px;background:#fff;border-radius:26px;
  box-shadow:var(--shadow);padding:36px 30px 30px;text-align:center}
.invite-mark{width:74px;height:74px;margin:0 auto 18px}
.invite-badge{display:inline-block;font-size:12.5px;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);background:var(--mint-050);
  padding:7px 14px;border-radius:999px;margin-bottom:16px}
.invite-card h1{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:850;margin:0}
.invite-card p{color:var(--muted);font-size:15px;line-height:1.55;margin:12px 0 0}
.invite-actions{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--green);color:#fff;font-weight:800;font-size:15.5px;padding:15px;
  border-radius:15px;transition:background .14s}
.btn-primary:hover{background:var(--green2)}
.invite-badges{display:flex;gap:12px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.invite-foot{margin-top:22px;color:var(--muted);font-size:12.5px}
.invite-foot a{color:var(--green);font-weight:700}

/* ══════════════════════════════════════════════════════════════════════════
   Rich visuals — animated mark, phone mockups, device showcase, feature rows,
   decorative depth. (Appended.)
   ══════════════════════════════════════════════════════════════════════════ */

/* animated hero mark (canvas) */
canvas.hero-mark{width:112px;height:112px;display:block;margin:0 auto 26px;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.30));
  animation:markIn .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes markIn{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:none}}

/* decorative floating orbs / bubbles in the hero */
.hero{isolation:isolate}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;z-index:0;
  background:radial-gradient(circle at 35% 30%,rgba(180,255,220,.9),rgba(120,240,190,.15) 60%,transparent 72%);
  animation:floaty 9s ease-in-out infinite}
.orb.o1{width:120px;height:120px;top:16%;left:8%}
.orb.o2{width:70px;height:70px;top:26%;right:12%;animation-delay:-3s}
.orb.o3{width:44px;height:44px;bottom:24%;left:18%;animation-delay:-6s;opacity:.4}
.bub{position:absolute;z-index:0;opacity:.16;color:#fff;animation:floaty 11s ease-in-out infinite}
.bub svg{width:100%;height:100%}
.bub.b1{width:54px;height:54px;top:22%;right:22%}
.bub.b2{width:38px;height:38px;bottom:30%;right:14%;animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media(prefers-reduced-motion:reduce){.orb,.bub,canvas.hero-mark{animation:none}}
.hero .wrap{z-index:1}

/* device showcase — a fan of phones under the hero */
.showcase{display:flex;justify-content:center;align-items:flex-end;gap:0;margin-top:44px;
  perspective:1200px}
.showcase .phone{margin:0 -26px}
.showcase .phone.mid{transform:translateY(-14px) scale(1.06);z-index:3}
.showcase .phone.left{transform:rotate(-8deg) translateY(14px);z-index:2}
.showcase .phone.right{transform:rotate(8deg) translateY(14px);z-index:2}
@media(max-width:720px){.showcase .phone.left,.showcase .phone.right{display:none}
  .showcase .phone.mid{transform:none}}

/* ── phone frame ── */
.phone{width:224px;flex:none;background:#0a1512;border-radius:34px;padding:9px;
  box-shadow:0 40px 70px -30px rgba(3,26,18,.6),0 0 0 1px rgba(255,255,255,.06) inset;
  position:relative}
.phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:52px;height:6px;border-radius:6px;background:rgba(255,255,255,.18);z-index:4}
.phone-screen{border-radius:27px;overflow:hidden;aspect-ratio:9/18.6;display:flex;
  flex-direction:column;background:#eaf3ee;font-size:11px}
:root[data-theme] .phone-screen{}

/* chat screen mock */
.scr-chat{background:linear-gradient(180deg,#e9f4ee,#e2f0e8)}
.m-top{display:flex;align-items:center;gap:8px;padding:26px 12px 10px;
  background:linear-gradient(180deg,#009466,#00a86e);color:#fff}
.m-av{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.28);flex:none;
  display:grid;place-items:center;font-size:13px}
.m-id{flex:1;line-height:1.2;min-width:0}
.m-id b{font-size:12px;display:block}
.m-id small{opacity:.85;font-size:9.5px}
.m-ic{opacity:.95;font-size:12px}
.m-body{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.m-b{max-width:80%;padding:8px 10px;border-radius:13px;line-height:1.35;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
.m-b.in{background:#fff;color:#12251d;border-bottom-left-radius:4px;align-self:flex-start}
.m-b.out{background:#d6f3e3;color:#0c3324;border-bottom-right-radius:4px;align-self:flex-end}
.m-b.voice{display:flex;align-items:center;gap:8px;color:#0c3324}
.wave{flex:1;height:16px;border-radius:8px;
  background:repeating-linear-gradient(90deg,#00a86e 0 2px,transparent 2px 5px);opacity:.7;
  -webkit-mask:linear-gradient(90deg,#000 60%,transparent);mask:linear-gradient(90deg,#000 60%,transparent)}
.m-input{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#fff;color:#88998f}
.m-input span:first-child{flex:1}
.m-send{width:24px;height:24px;border-radius:50%;background:#009466;color:#fff;
  display:grid;place-items:center;font-size:11px}

/* channels feed mock */
.scr-feed{background:#f2f8f5}
.f-top{padding:26px 14px 10px;font-weight:800;color:#0c3324;font-size:15px;
  background:#fff;border-bottom:1px solid #e6efe9}
.f-list{padding:10px;display:flex;flex-direction:column;gap:9px}
.f-card{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e9f1eb;
  border-radius:13px;padding:9px}
.f-av{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:16px;background:linear-gradient(135deg,#00c166,#009466)}
.f-tx{flex:1;min-width:0}
.f-tx b{display:block;font-size:11.5px;color:#12251d}
.f-tx small{color:#7a8f85;font-size:9.5px}
.f-follow{font-size:9.5px;font-weight:800;color:#009466;border:1px solid #b7e6ce;
  border-radius:999px;padding:4px 9px}

/* call screen mock */
.scr-call{background:linear-gradient(170deg,#0a4b36,#04281d);color:#fff;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:26px 16px}
.c-av{width:88px;height:88px;border-radius:50%;font-size:40px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);box-shadow:0 0 0 8px rgba(255,255,255,.06)}
.scr-call b{font-size:18px}
.scr-call small{opacity:.8}
.c-ctrls{display:flex;gap:14px;margin-top:8px}
.c-ctrls span{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:17px}
.c-ctrls .c-end{background:#ff4d4f}

/* alternating feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  margin-top:clamp(48px,7vw,86px)}
.frow.rev .fr-media{order:2}
@media(max-width:820px){.frow{grid-template-columns:1fr;gap:30px}
  .frow.rev .fr-media{order:0}}
.fr-media{display:flex;justify-content:center;position:relative}
.fr-media .glowpad{position:absolute;inset:6% 12%;border-radius:40px;z-index:0;
  background:radial-gradient(60% 60% at 50% 40%,rgba(0,193,102,.28),transparent 70%);filter:blur(20px)}
.fr-media .phone{position:relative;z-index:1}
.fr-tx h3{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;font-weight:820;margin:12px 0 0}
.fr-tx p{color:var(--muted);font-size:clamp(15px,1.9vw,17px);margin:12px 0 0;max-width:46ch}
.fr-list{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.fr-list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:14.5px}
.fr-list svg{width:20px;height:20px;color:var(--green);flex:none;margin-top:1px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* privacy band visual */
.band .shieldwrap{display:flex;justify-content:center;margin-bottom:8px}
.band .shieldwrap svg{width:76px;height:76px;color:#8cf0be;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3))}

/* FAQ (accessible <details>) */
.faq{max-width:760px;margin:38px auto 0;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:2px 20px;box-shadow:0 10px 26px -22px rgba(4,32,23,.4)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:750;font-size:16.5px;
  color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--green);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.6;max-width:64ch}

/* ── legal pages (privacy / terms) ── */
.legal-top{background:linear-gradient(160deg,#00b877,#009466);color:#fff;padding:96px 0 46px}
.legal-top .brand{color:#fff;margin-bottom:24px}
.legal-top h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.03em;font-weight:850;margin:0}
.legal-top .updated{margin:12px 0 0;color:rgba(255,255,255,.8);font-size:14px}
.legal-body{max-width:820px;margin:0 auto;padding:44px 22px 80px}
.legal-body h2{font-size:22px;letter-spacing:-.02em;font-weight:800;margin:36px 0 10px;color:var(--ink)}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:16.5px;font-weight:750;margin:22px 0 6px;color:var(--ink)}
.legal-body p,.legal-body li{color:#31463d;font-size:15.5px;line-height:1.7}
.legal-body ul{padding-left:22px;margin:10px 0}
.legal-body li{margin:5px 0}
.legal-body a{color:var(--green-ink,#00794f);font-weight:650;text-decoration:underline}
.legal-body .intro{font-size:16.5px;color:#22362d}
.legal-note{background:var(--mint-050);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin:8px 0 26px;color:#31463d;font-size:14px;line-height:1.6}
.legal-back{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:700;
  font-size:14px;margin-top:8px}