/* ============================================================
   WebUp Growth — design system
   Clean · minimal · premium (Apple / Claude calm)
   Shared across the hub + all niche pages.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* palette — near-neutral */
  --bg:        #ffffff;
  --bg-2:      #fafafa;   /* off-white sections */
  --bg-3:      #f5f5f4;   /* soft card / inset */
  --ink:       #1d1d1f;   /* near-black */
  --ink-2:     #3f3f42;   /* secondary text */
  --muted:     #5b5b60;   /* tertiary / labels — AA on white (~5.9:1) */
  --faint:     #6b6b70;   /* small labels — AA on white (~4.8:1) */
  --hair:      #ececec;   /* hairline */
  --hair-2:    #e0e0e0;   /* stronger hairline */
  --card:      #ffffff;

  /* one quiet, desaturated accent (near-ink slate-blue) */
  --accent:    #5b6b8c;
  --accent-2:  #404f6b;
  --accent-soft:#eef1f6;
  --live:      #22c55e;   /* status marker (deprecated — now neutral) */

  /* type */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale */
  --t-mega: clamp(48px, 8.5vw, 104px);
  --t-5xl:  clamp(40px, 6vw, 76px);
  --t-4xl:  clamp(34px, 5vw, 58px);
  --t-3xl:  clamp(28px, 4vw, 46px);
  --t-2xl:  clamp(24px, 3vw, 34px);
  --t-xl:   clamp(20px, 2.4vw, 26px);
  --t-lg:   clamp(17px, 1.6vw, 20px);
  --t-base: 16px;
  --t-sm:   14px;
  --t-xs:   12px;

  /* spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 88px; --s10: 120px; --s11: 152px; --s12: 192px;

  /* layout */
  --container: 1120px;
  --container-w: 1280px;
  --radius:   18px;
  --radius-sm:12px;
  --radius-lg:26px;

  /* motion */
  --ease:   cubic-bezier(.4,0,.2,1);
  --ease-2: cubic-bezier(.16,1,.3,1);
  --lift:   -2px;   /* shared hover lift */

  /* elevation — lighter, hairline does the work */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  --shadow:    0 3px 12px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:var(--t-base);
  line-height:1.55;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}
img,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--accent-soft); color:var(--accent-2); }

h1,h2,h3{ font-weight:500; letter-spacing:-.03em; margin:0; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.wrap-w{ width:100%; max-width:var(--container-w); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:var(--t-xs); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow .bullet{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:var(--t-sm); font-weight:500; letter-spacing:-.01em;
  min-height:44px; padding:12px 22px; border-radius:999px;
  border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease-2),
             box-shadow .25s var(--ease);
}
.btn .arw{ display:inline-flex; transition:transform .3s var(--ease-2); }
.btn .arw svg{ width:13px; height:13px; }
.btn:hover .arw{ transform:translate(2px,-2px); }

.btn--primary{ background:var(--ink); color:#fff; }
.btn--primary:hover{ background:#000; transform:translateY(-1px); box-shadow:var(--shadow); }

.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--accent-2); transform:translateY(-1px); box-shadow:var(--shadow); }
/* legacy alias so any old markup using btn--terra still looks right */
.btn--terra{ background:var(--ink); color:#fff; }
.btn--terra:hover{ background:#000; transform:translateY(-1px); box-shadow:var(--shadow); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hair-2); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--bg-3); }

.btn--lg{ padding:15px 26px; font-size:var(--t-base); }

/* ---------- nav ---------- */
.nav-shell{ position:sticky; top:0; z-index:60; }
.nav{
  display:flex; align-items:center; gap:var(--s5);
  width:100%; max-width:var(--container-w); margin-inline:auto;
  padding:14px clamp(20px,5vw,40px);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled{ border-bottom-color:var(--hair); }
.nav-brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:17px; letter-spacing:-.02em;
  margin-right:auto;
}
.nav-mark{
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:8px;
  background:var(--ink); color:#fff;
  font-size:13px; font-weight:600;
}
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  display:inline-flex; align-items:center; min-height:40px;
  font-size:var(--t-sm); color:var(--muted); font-weight:400;
  padding:7px 11px; border-radius:8px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:var(--bg-3); }
.nav-links a.is-on{ color:var(--ink); font-weight:500; }
.nav-cta{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--t-sm); font-weight:500;
  min-height:44px; padding:11px 18px; border-radius:999px;
  background:var(--ink); color:#fff;
  transition:background .25s var(--ease), transform .25s var(--ease-2);
}
.nav-cta:hover{ background:#000; transform:translateY(-1px); }
.nav-cta .arw svg{ width:12px; height:12px; }

.nav-burger{
  display:none; width:40px; height:40px; border:0; background:transparent;
  position:relative; cursor:pointer; border-radius:10px;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after{
  content:""; position:absolute; left:10px; width:20px; height:1.6px;
  background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-burger span{ top:50%; }
.nav-burger span::before{ top:-6px; }
.nav-burger span::after{ top:6px; }
.nav-burger.is-open span{ background:transparent; }
.nav-burger.is-open span::before{ transform:translateY(6px) rotate(45deg); }
.nav-burger.is-open span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:920px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:block; }
}

/* ---------- mobile nav ---------- */
.nav-mobile{
  position:fixed; inset:0; z-index:55;
  background:var(--bg);
  padding:96px clamp(24px,6vw,40px) 40px;
  display:flex; flex-direction:column; gap:2px;
  transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease-2), visibility .3s var(--ease);
  overflow:auto;
}
.nav-mobile.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
.nav-mobile .tag{
  font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin:14px 0 8px;
}
.nav-mobile a{
  display:flex; align-items:center; justify-content:space-between;
  font-size:var(--t-xl); font-weight:500; letter-spacing:-.02em;
  padding:14px 0; border-bottom:1px solid var(--hair); color:var(--ink);
}
.nav-mobile a .num{ font-size:var(--t-sm); color:var(--faint); font-weight:400; }
.nav-mobile .footer{ margin-top:auto; padding-top:24px; font-size:var(--t-sm); color:var(--muted); }
.nav-mobile .footer a{ display:inline; border:0; padding:0; font-size:inherit; color:var(--accent); font-weight:500; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--hair);
  padding:var(--s9) 0 var(--s7);
  background:var(--bg-2);
}
.foot{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s7);
  padding-bottom:var(--s8);
}
@media (max-width:880px){ .foot{ grid-template-columns:1fr 1fr; gap:var(--s6); } }
@media (max-width:520px){ .foot{ grid-template-columns:1fr; } }
.foot-brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:17px; letter-spacing:-.02em; margin-bottom:14px;
}
.foot-tag{ color:var(--muted); font-size:var(--t-sm); line-height:1.6; max-width:34ch; }
.foot-col .k{
  font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:14px;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.foot-col a{ display:inline-flex; align-items:center; min-height:40px; color:var(--ink-2); font-size:var(--t-sm); transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--ink); }
.foot-bot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-top:var(--s5); border-top:1px solid var(--hair);
  font-size:var(--t-xs); color:var(--faint);
}
.foot-bot .badge{ display:inline-flex; align-items:center; gap:8px; }
.foot-bot .badge .d{
  width:6px; height:6px; border-radius:999px; background:var(--faint);
  box-shadow:none;
}

/* ---------- reveal animation ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-2), transform .7s var(--ease-2);
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- accessibility ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* contrast-safe ring for dark controls */
.btn--primary:focus-visible, .btn--terra:focus-visible, .nav-cta:focus-visible, .text-bar .pill:focus-visible{
  outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 4px var(--accent);
}

/* ============================================================
   HOMEPAGE (index) sections
   ============================================================ */

/* ---------- hero ---------- */
.hero{
  padding:var(--s11) 0 var(--s9);
  text-align:center;
}
.hero-line{
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:var(--s6);
  font-size:var(--t-xs); font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
}
.hero-line .dot{ display:none; }
.hero h1{
  font-size:var(--t-mega); font-weight:400; line-height:1.02; letter-spacing:-.04em;
  margin:0 auto var(--s6); max-width:16ch;
}
.hero h1 .soft{ color:var(--muted); }
.hero-blurb{
  font-size:var(--t-lg); color:var(--ink-2); line-height:1.5;
  max-width:54ch; margin:0 auto var(--s7);
}
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-meta{
  display:flex; justify-content:center; flex-wrap:wrap; gap:var(--s8);
  margin-top:var(--s9); padding-top:var(--s7);
  border-top:1px solid var(--hair);
  max-width:760px; margin-inline:auto;
}
.hero-meta div{ display:flex; flex-direction:column; gap:4px; }
.hero-meta .v{ font-size:var(--t-2xl); font-weight:600; letter-spacing:-.03em; }
.hero-meta .k{ font-size:var(--t-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }

/* ---------- rack (niche grid) ---------- */
.rack{ padding:var(--s9) 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s6); flex-wrap:wrap; margin-bottom:var(--s7);
}
.section-head h2{ font-size:var(--t-3xl); line-height:1.05; letter-spacing:-.03em; }
.section-head .sub{ color:var(--muted); font-size:var(--t-base); max-width:42ch; margin-top:10px; }
.section-head .right{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--t-sm); color:var(--muted);
}
.section-head .right .dot{
  width:6px; height:6px; border-radius:999px; background:var(--faint);
  box-shadow:none;
}

.niche-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--s5);
}
@media (max-width:560px){ .niche-grid{ grid-template-columns:1fr; } }

.niche-card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .4s var(--ease-2), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.niche-card:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); border-color:var(--hair-2); }
.niche-thumb{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--bg-3); border-bottom:1px solid var(--hair);
  contain:layout paint;
}
.niche-thumb iframe{
  position:absolute; top:0; left:0;
  width:100%; height:100%; border:0;
  pointer-events:none;
}
.niche-body{ padding:var(--s5); display:flex; flex-direction:column; gap:6px; flex:1; }
.niche-top{ display:flex; align-items:center; justify-content:space-between; }
.niche-body h3{ font-size:var(--t-xl); letter-spacing:-.03em; }
.niche-count{
  font-size:var(--t-xs); font-weight:500; color:var(--muted);
  background:none; padding:0;
}
.niche-body p{ color:var(--muted); font-size:var(--t-sm); margin:0; line-height:1.5; }
.niche-foot{
  display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:var(--s4);
  font-size:var(--t-sm); font-weight:500; color:var(--ink);
}
.niche-foot .arw{ display:inline-flex; transition:transform .3s var(--ease-2); }
.niche-card:hover .niche-foot{ color:var(--accent); }
.niche-card:hover .niche-foot .arw{ transform:translate(3px,-3px); }
.niche-foot svg{ width:13px; height:13px; }

/* ---------- how it works ---------- */
.how{ padding:var(--s9) 0; background:var(--bg-2); border-top:1px solid var(--hair); }
.how-head{ text-align:center; max-width:46ch; margin:0 auto var(--s8); }
.how-head h2{ font-size:var(--t-4xl); line-height:1.05; margin:14px 0 12px; }
.how-head p{ color:var(--muted); font-size:var(--t-lg); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
.step{
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--radius); padding:var(--s6);
  display:flex; flex-direction:column; gap:10px;
}
.step-num{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-2);
  font-size:var(--t-sm); font-weight:600;
  margin-bottom:6px;
}
.step h3{ font-size:var(--t-lg); letter-spacing:-.02em; }
.step p{ color:var(--muted); font-size:var(--t-sm); margin:0; line-height:1.55; }

/* ---------- closer ---------- */
.closer{ padding:var(--s11) 0; text-align:center; }
.closer h2{
  font-size:var(--t-5xl); font-weight:400; line-height:1.02; letter-spacing:-.04em;
  margin:0 auto var(--s5); max-width:18ch;
}
.closer h2 .soft{ color:var(--muted); }
.closer p{ color:var(--ink-2); font-size:var(--t-lg); max-width:50ch; margin:0 auto var(--s7); }
.closer .ctas{ display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }