/* ============================================================
   honk.css — Honk group site
   Token layer carried over verbatim from the shared Honk
   design language (DESIGN_SYSTEM.md). System fonts, no deps.
   ============================================================ */

:root{
  /* color */
  --c-bg:#090b0e; --c-surface:#0f1218; --c-surface-2:#161a22; --c-surface-3:#1c2028;
  --c-border:rgba(255,255,255,0.06); --c-border-mid:rgba(255,255,255,0.11); --c-border-hi:rgba(255,255,255,0.18);
  --c-primary:#fff; --c-secondary:rgba(255,255,255,0.58); --c-tertiary:rgba(255,255,255,0.32); --c-muted:rgba(255,255,255,0.18);
  --c-accent:#3B82F6; --c-accent-hover:#60A5FA; --c-accent-soft:rgba(59,130,246,0.14); --c-accent-glow:rgba(59,130,246,0.07);
  --c-teal:#14B8A6; --c-teal-soft:rgba(20,184,166,0.14);
  --c-pink:#EC4899; --c-pink-soft:rgba(236,72,153,0.14);
  --c-green:#34c759; --c-green-soft:rgba(52,199,89,0.14);
  --c-amber:#ff9f0a; --c-amber-soft:rgba(255,159,10,0.14);
  --c-red:#ff3b30; --c-red-soft:rgba(255,59,48,0.14);
  /* type */
  --ff-display:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --ff-body:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  --ff-mono:'SF Mono',ui-monospace,monospace;
  --fs-xs:11px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:20px; --fs-xl:24px;
  --fs-2xl:30px; --fs-3xl:38px; --fs-4xl:50px; --fs-5xl:64px;
  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px;
  /* radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:16px; --r-2xl:16px; --r-full:9999px;
  /* shadow */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.5);
  --shadow-xl:0 24px 60px rgba(0,0,0,0.6);
  --shadow-accent:0 0 24px rgba(59,130,246,0.18);
  /* motion */
  --t-fast:150ms ease; --t-base:250ms ease; --t-slow:400ms ease;
  /* layout */
  --max-w:1100px; --max-w-md:820px; --max-w-sm:680px; --nav-h:60px;
}

/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--c-bg); color:var(--c-primary);
  font-family:var(--ff-body); font-size:var(--fs-base); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
em{font-style:italic;color:var(--c-secondary);font-weight:inherit}

/* typography */
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.12;letter-spacing:-0.01em;font-weight:700}
h1{font-size:clamp(38px,6vw,64px)}
h2{font-size:clamp(30px,4vw,38px)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
p{color:var(--c-secondary)}

/* layout */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-6)}
.container--md{max-width:var(--max-w-md)}
.container--sm{max-width:var(--max-w-sm)}
.section{padding:var(--sp-24) 0}
.section--alt{background:linear-gradient(180deg,var(--c-bg),var(--c-surface) 50%,var(--c-bg))}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}

/* section header */
.section-header{margin-bottom:var(--sp-12);max-width:var(--max-w-md)}
.section-header--center{margin-left:auto;margin-right:auto;text-align:center}
.section-header p{margin-top:var(--sp-4);font-size:var(--fs-md);max-width:56ch}
.section-header--center p{margin-left:auto;margin-right:auto}
.section-label{
  display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--sp-3)
}

/* nav */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  background:rgba(9,11,14,0.82);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--c-border)
}
.nav__inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.nav__logo{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-xl);letter-spacing:-0.02em;white-space:nowrap}
.nav__links{display:flex;gap:var(--sp-8);margin-left:auto;margin-right:var(--sp-8)}
.nav__link{font-size:var(--fs-sm);color:var(--c-secondary);transition:color var(--t-fast)}
.nav__link:hover{color:var(--c-primary)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--ff-body);font-size:var(--fs-base);font-weight:600;
  padding:10px 20px;border-radius:var(--r-full);border:1px solid transparent;
  cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),border-color var(--t-fast);white-space:nowrap
}
.btn--sm{font-size:var(--fs-sm);padding:7px 16px}
.btn--lg{font-size:var(--fs-md);padding:13px 28px}
.btn--primary{background:var(--c-accent);color:#fff;box-shadow:var(--shadow-accent)}
.btn--primary:hover{background:var(--c-accent-hover);transform:translateY(-1px);box-shadow:0 0 32px rgba(59,130,246,0.3)}
.btn--secondary{background:var(--c-surface-2);color:var(--c-primary);border-color:var(--c-border-mid)}
.btn--secondary:hover{background:var(--c-surface-3);border-color:var(--c-border-hi);transform:translateY(-1px)}

/* badge */
.badge{
  display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:600;
  padding:4px 10px;border-radius:var(--r-full);letter-spacing:0.02em
}
.badge--default{background:var(--c-surface-3);color:var(--c-secondary)}
.badge--accent{background:var(--c-accent-soft);color:var(--c-accent-hover)}
.badge--green{background:var(--c-green-soft);color:var(--c-green)}
.badge--amber{background:var(--c-amber-soft);color:var(--c-amber)}
.badge--teal{background:var(--c-teal-soft);color:var(--c-teal)}
.badge--pink{background:var(--c-pink-soft);color:var(--c-pink)}

/* card */
.card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:var(--sp-8);transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base)
}
.card:hover{border-color:var(--c-border-mid);box-shadow:var(--shadow-md)}
.card h3{margin-bottom:var(--sp-3)}
.card p{font-size:var(--fs-base)}

/* icon well */
.icon-wrap{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-md);background:var(--c-surface-3);
  font-size:20px;margin-bottom:var(--sp-5)
}
.icon-wrap--lg{width:52px;height:52px;font-size:26px;margin-bottom:0;flex-shrink:0}
.icon-wrap--accent{background:var(--c-accent-soft)}
.icon-wrap--teal{background:var(--c-teal-soft)}
.icon-wrap--pink{background:var(--c-pink-soft)}

/* hero */
.hero{position:relative;padding:calc(var(--nav-h) + var(--sp-24)) 0 var(--sp-24);overflow:hidden}
.hero__glow{
  position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:900px;height:600px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(59,130,246,0.1),transparent 70%);
  pointer-events:none;z-index:0
}
.hero__inner{position:relative;z-index:1;text-align:center}
.hero__title{margin-bottom:var(--sp-6)}
.hero__lede{font-size:var(--fs-lg);max-width:60ch;margin:0 auto var(--sp-8)}
.hero__actions{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-10)}
.hero__badges{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);margin-top:var(--sp-12)}
.step{text-align:center}
.step__num{
  width:32px;height:32px;border-radius:var(--r-full);background:var(--c-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);
  margin:0 auto var(--sp-4)
}
.step__icon{font-size:34px;margin-bottom:var(--sp-3)}
.step h3{margin-bottom:var(--sp-2);font-size:var(--fs-lg)}
.step p{font-size:var(--fs-base)}

/* ---- app catalog (page-specific, built on tokens) ---- */
.apps-grid{align-items:stretch}
.card--app{display:flex;flex-direction:column}
.card--app__head{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.card--app__head h3{margin-bottom:var(--sp-1)}
.card--app__points{margin:var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-2)}
.card--app__points li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-base);color:var(--c-secondary)}
.card--app__points li::before{content:"✓";position:absolute;left:0;color:var(--c-green);font-weight:700}
.card--app__foot{margin-top:auto;padding-top:var(--sp-4)}
.card--app__soon-note{font-size:var(--fs-sm);color:var(--c-tertiary);font-style:italic}
.card--app--soon{border-style:dashed;background:transparent}

/* ---- comparison table (page-specific, built on tokens) ---- */
.compare-wrap{max-width:var(--max-w-md);margin:0 auto;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--c-border)}
.compare-table{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.compare-table th{
  text-align:left;padding:var(--sp-4) var(--sp-6);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-tertiary);
  background:var(--c-surface);border-bottom:1px solid var(--c-border-mid)
}
.compare-table td{padding:var(--sp-4) var(--sp-6);color:var(--c-secondary);border-bottom:1px solid var(--c-border);vertical-align:top}
.compare-table tr:last-child td{border-bottom:none}
.compare-table .honk-col{background:var(--c-accent-soft);color:var(--c-primary);font-weight:500}
.compare-table th.honk-col{color:var(--c-accent-hover)}

/* stats note */
.stats-note{max-width:var(--max-w-sm);margin:var(--sp-12) auto 0;text-align:center}
.stats-note p{font-size:var(--fs-md);line-height:1.7}
.stats-note strong{color:var(--c-primary);font-weight:700}

/* privacy callout */
.privacy-callout{
  position:relative;text-align:center;padding:var(--sp-16) var(--sp-8);border-radius:var(--r-lg);
  background:
    linear-gradient(135deg,var(--c-accent-soft),transparent 60%),
    var(--c-surface);
  border:1px solid var(--c-border-mid);overflow:hidden
}
.privacy-callout__emoji{font-size:48px;margin-bottom:var(--sp-4)}
.privacy-callout h2{margin-bottom:var(--sp-4)}
.privacy-callout p{font-size:var(--fs-md);max-width:60ch;margin:0 auto var(--sp-6)}
.privacy-callout__badges{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}

/* footer */
.footer{border-top:1px solid var(--c-border);padding:var(--sp-16) 0 var(--sp-8);margin-top:var(--sp-12)}
.footer__inner{display:flex;justify-content:space-between;gap:var(--sp-12);flex-wrap:wrap;margin-bottom:var(--sp-10)}
.footer__brand-name{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-xl)}
.footer__tagline{font-size:var(--fs-sm);color:var(--c-tertiary);margin-top:var(--sp-2);max-width:32ch}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6)}
.footer__links a{font-size:var(--fs-sm);color:var(--c-secondary);transition:color var(--t-fast)}
.footer__links a:hover{color:var(--c-primary)}
.footer__bottom{padding-top:var(--sp-6);border-top:1px solid var(--c-border)}
.footer__legal{font-size:var(--fs-xs);color:var(--c-muted)}

/* animation */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fadeUp{animation:fadeUp 0.6s ease both}
.fadeIn{animation:fadeIn 0.4s ease both}
.delay-1{animation-delay:0.1s}.delay-2{animation-delay:0.2s}
.delay-3{animation-delay:0.3s}.delay-4{animation-delay:0.4s}.delay-5{animation-delay:0.5s}

/* responsive */
@media(max-width:900px){
  .grid-3,.steps{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:600px){
  .nav__links{display:none}
  .nav__logo{font-size:var(--fs-md)}
  .section{padding:var(--sp-16) 0}
  .compare-table th,.compare-table td{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}