/* ============================================================================
   HeyaBud.ai — brand system
   Canonical palette + type pulled from heyabud_bible.html (single source of truth).
   Clean line icons only — never emoji.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --cyan:#1AB3B2;
  --cyan-deep:#0091B0;
  --magenta:#CF39E8;
  --violet:#6917A8;

  --ink:#0c1010;          /* page base */
  --ink-2:#15191a;        /* raised surface */
  --ink-3:#212221;        /* card */
  --line:#283030;         /* borders */

  --text:#eef2f2;
  --text-2:#d6dcdc;
  --muted:#8a9595;

  --display:'Inter Tight',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;

  --maxw:1180px;
  --r:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--text);
  font-family:var(--body); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.25rem}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--text-2);max-width:60ch}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:18px;display:block;
}
.muted{color:var(--muted)}
.grad{
  background:linear-gradient(100deg,var(--cyan) 0%,var(--cyan) 35%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(12,16,16,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.brand img{width:30px;height:30px;object-fit:contain}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a{font-size:.92rem;color:var(--text-2);transition:color .18s}
.navlinks a:hover,.navlinks a.on{color:var(--cyan)}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:6px}

/* THE WAY IN.
   Until 7 Sep 2026 this site had no outbound link at all except Google Fonts: every plan
   button was href="#", and nothing in the nav offered the product. This is the one control
   on the page whose job is to leave it, so it is the one that gets to look like a button. */
.navcta{
  font-size:.92rem;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--cyan);
  color:var(--cyan) !important;
  white-space:nowrap;
  transition:background .18s, color .18s, box-shadow .18s;
}
.navcta:hover{
  background:var(--cyan);
  color:#06090c !important;
  box-shadow:0 4px 20px rgba(34,211,238,.28);
}

.navtoggle svg{width:24px;height:24px;stroke:var(--text);fill:none;stroke-width:1.8}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:13px 26px;border-radius:100px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s,box-shadow .16s,background .16s;
}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
.btn-primary{background:var(--cyan);color:#04100f;box-shadow:0 6px 26px rgba(26,179,178,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(26,179,178,.42)}
.btn-ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- sections ---------- */
section{padding:100px 0}
.sec-head{margin-bottom:56px;max-width:70ch}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.05rem}

/* ---------- hero ---------- */
.hero{
  padding:110px 0 90px;position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% 8%, rgba(207,57,232,.13), transparent 62%),
    radial-gradient(900px 480px at 12% 20%, rgba(26,179,178,.15), transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-shot{position:relative}
.hero-shot img{
  border-radius:26px;border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 70px rgba(26,179,178,.10);
}

/* ---------- cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);
  padding:30px;transition:border-color .2s,transform .2s;
}
.card:hover{border-color:rgba(26,179,178,.5);transform:translateY(-3px)}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem}
.card .ico{
  width:42px;height:42px;border-radius:11px;margin-bottom:18px;
  display:grid;place-items:center;background:rgba(26,179,178,.1);border:1px solid rgba(26,179,178,.25);
}
.card .ico svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:1.7}

/* feature rows */
.row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:110px}
.row:nth-child(even) .row-img{order:-1}
.row-img img{border-radius:20px;border:1px solid var(--line);box-shadow:0 22px 60px rgba(0,0,0,.5)}
.row h2{margin-bottom:16px}
.row p{color:var(--muted);margin-bottom:20px}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{background:var(--ink-3);border:1px solid var(--line);border-radius:20px;padding:34px 30px;position:relative;display:flex;flex-direction:column}
.tier.feat{border-color:var(--magenta);box-shadow:0 0 50px rgba(207,57,232,.14)}
.tier .tag{
  position:absolute;top:-12px;left:30px;background:var(--magenta);color:#fff;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px;
}
.tier h3{font-size:1.15rem;margin-bottom:6px}
.price{font-family:var(--display);font-size:2.7rem;font-weight:800;letter-spacing:-.03em;margin:14px 0 4px}
.price span{font-size:.95rem;font-weight:500;color:var(--muted)}
.tier .yr{color:var(--muted);font-size:.85rem;margin-bottom:24px}
.tier ul{list-style:none;margin-bottom:28px}
.tier ul{flex:1 0 auto}
.tier li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:.93rem;color:var(--text-2)}
.tier li svg{width:15px;height:15px;stroke:var(--cyan);fill:none;stroke-width:2.4;flex-shrink:0;margin-top:5px}
/* The label is ONE flex item. Without this wrapper a <b> inside the bullet became a
   flex item of its own, sat beside the rest of the sentence, and the two wrapped
   independently - fine at desktop width, visibly broken on a phone. */
.tier li > span{flex:1 1 auto;min-width:0}
.tier .btn{width:100%;justify-content:center;margin-top:auto}

.note{
  background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:10px;padding:22px 26px;color:var(--muted);font-size:.94rem;margin-top:40px;
}
.note b{color:var(--text-2)}

/* ---------- buds ---------- */
.buds{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bud{
  background:var(--ink-3);border:1px solid var(--line);border-radius:14px;padding:24px;
  transition:border-color .2s,transform .2s;
}
.bud:hover{border-color:var(--magenta);transform:translateY(-3px)}
.bud .nm{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:4px}
.bud .cy{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);margin-bottom:12px}
.bud p{font-size:.87rem;color:var(--muted);line-height:1.55}

/* ---------- gate ---------- */
.gate{min-height:78vh;display:grid;place-items:center;padding:60px 0}
.gate-box{
  max-width:430px;width:100%;background:var(--ink-3);border:1px solid var(--line);
  border-radius:20px;padding:44px 38px;text-align:center;
}
.gate-box .ico{width:52px;height:52px;margin:0 auto 22px;border-radius:14px;display:grid;place-items:center;
  background:rgba(26,179,178,.1);border:1px solid rgba(26,179,178,.28)}
.gate-box .ico svg{width:24px;height:24px;stroke:var(--cyan);fill:none;stroke-width:1.7}
.gate-box h2{font-size:1.5rem;margin-bottom:8px}
.gate-box p{color:var(--muted);font-size:.92rem;margin-bottom:26px}
.gate-box input{
  width:100%;background:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:13px 16px;color:var(--text);font-family:var(--body);font-size:.95rem;margin-bottom:14px;
}
.gate-box input:focus{outline:none;border-color:var(--cyan)}
.gate-box .btn{width:100%;justify-content:center}
.gate-err{color:#ff6b6b;font-size:.85rem;margin-top:14px;min-height:20px}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.metric{background:var(--ink-3);border:1px solid var(--line);border-radius:14px;padding:28px}
.metric .n{font-family:var(--display);font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:var(--cyan)}
.metric .l{color:var(--muted);font-size:.85rem;margin-top:6px}

table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
td{color:var(--text-2)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 40px;margin-top:40px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.foot .brand{margin-bottom:0}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-size:.9rem;transition:color .18s}
.foot-links a:hover{color:var(--cyan)}
.copy{color:var(--muted);font-size:.82rem;width:100%;margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-grid,.row{grid-template-columns:1fr;gap:44px}
  .row:nth-child(even) .row-img{order:0}
  .g3,.tiers,.metrics{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .buds{grid-template-columns:repeat(2,1fr)}
  .navlinks{
    display:none;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--ink-2);border-bottom:1px solid var(--line);padding:10px 0;
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:16px 28px;width:100%}
  .navlinks a.navcta{
    width:auto;
    margin:10px 28px 18px;
    padding:12px 22px;
    text-align:center;
  }
  .navtoggle{display:block}
  section{padding:70px 0}
}

/* ---------- PHONE ----------
   Assume this is where people meet it. Tighter gutters, tap targets that are actually
   tappable, type that stays readable, and nothing that can force a sideways scroll. */
@media(max-width:640px){
  html,body{overflow-x:hidden}                 /* nothing may scroll sideways, ever */
  .wrap{padding:0 20px}

  h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  h2{font-size:clamp(1.6rem,6.5vw,2.1rem)}
  .lede{font-size:1.02rem}
  .sec-head{margin-bottom:36px}

  section{padding:56px 0}
  .card{padding:24px 22px}

  /* Buttons: full-width and thumb-sized, stacked. */
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  .btn{justify-content:center;padding:15px 24px;font-size:1rem}

  .buds{grid-template-columns:1fr}
  .tier{padding:28px 24px}
  .price{font-size:2.3rem}

  .foot{flex-direction:column;align-items:flex-start;gap:20px}
  .foot-links{gap:16px 20px}

  table{font-size:.85rem}
  th,td{padding:10px 8px}
}