/* ============================================================================
   Tracelet — Marketing Landing Page
   Reuses the app design language (tokens, fonts, brand gradient) from
   tracelet-dashboard.css, with landing-specific components layered on top.
   Self-contained: this is the only stylesheet the landing page needs.
   ========================================================================== */

:root{
  /* Brand */
  --tracelet-indigo:      #1a227e;
  --tracelet-indigo-deep: #0f1556;
  --tracelet-indigo-soft: #3f50b1;
  --tracelet-indigo-tint: #e8eaf5;
  --tracelet-teal:        #0076a3;
  --tracelet-teal-deep:   #005682;
  --tracelet-teal-soft:   #38b3da;
  --tracelet-teal-tint:   #e1f4f9;
  --tracelet-purple:      #534aae;
  --tracelet-green:       #097d4d;
  --tracelet-green-soft:  #4aad79;
  --tracelet-green-tint:  #e2f4ec;
  --tracelet-gold:        #b6890f;
  --tracelet-gold-soft:   #ecb947;
  --tracelet-gold-tint:   #fbf1d8;
  --tracelet-red:         #b50909;

  /* Ink + surfaces */
  --ink-900: #1a1f2a;
  --ink-700: #2d3748;
  --ink-500: #4a5568;
  --ink-400: #718096;
  --ink-300: #a0aec0;
  --line:    #e2e6ec;
  --line-soft:#eef0f4;
  --bg:      #f5f6f9;
  --paper:   #ffffff;
  --paper-2: #fbfcfe;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-1: 0 1px 2px rgba(15,21,86,.06), 0 1px 3px rgba(15,21,86,.04);
  --shadow-2: 0 4px 12px rgba(15,21,86,.08), 0 2px 4px rgba(15,21,86,.04);
  --shadow-3: 0 14px 32px rgba(15,21,86,.10), 0 4px 12px rgba(15,21,86,.05);
  --shadow-4: 0 30px 70px rgba(15,21,86,.18), 0 12px 28px rgba(15,21,86,.10);

  --font-sans:  "Public Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-serif: "Source Serif 4",Georgia,serif;
  --font-mono:  "Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --brand-gradient: linear-gradient(100deg, var(--tracelet-indigo) 0%, var(--tracelet-teal) 62%, var(--tracelet-teal-soft) 100%);
  --maxw: 1180px;
}

[data-theme="dark"]{
  --ink-900:#e9ecf6; --ink-700:#cdd3e6; --ink-500:#9aa3c0; --ink-400:#8791b0; --ink-300:#6b7596;
  --line:#262c44; --line-soft:#1e2438;
  --bg:#0b0e1a; --paper:#121732; --paper-2:#0f1430;
  --tracelet-indigo-tint:#1b2150; --tracelet-teal-tint:#0c2c3a; --tracelet-gold-tint:#3a2e0d; --tracelet-green-tint:#0d3324;
  --shadow-2: 0 4px 14px rgba(0,0,0,.4);
  --shadow-3: 0 18px 40px rgba(0,0,0,.5);
  --shadow-4: 0 30px 70px rgba(0,0,0,.6);
  --brand-gradient: linear-gradient(100deg, #2b35a8 0%, #0a85b6 62%, #38b3da 100%);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--ink-900);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--tracelet-teal); text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-serif); color:var(--ink-900); line-height:1.12; letter-spacing:-.01em; margin:0; }
p{ margin:0; }
section{ position:relative; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tracelet-teal); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }
.section-pad{ padding:84px 0; }
.section-head{ max-width:680px; margin:0 auto 48px; text-align:center; }
.section-head.left{ margin-left:0; text-align:left; }
.section-head h2{ font-size:clamp(30px,4vw,46px); font-weight:700; }
.section-head p{ margin-top:18px; font-size:18px; color:var(--ink-500); }

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:700; font-size:15px; line-height:1;
  padding:14px 24px; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn i{ font-size:16px; }
.btn-primary{ background:var(--brand-gradient); color:#fff; box-shadow:var(--shadow-2); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-3); color:#fff; }
.btn-ghost{ background:var(--paper); color:var(--ink-900); border-color:var(--line); box-shadow:var(--shadow-1); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--tracelet-teal-soft); color:var(--tracelet-teal); }
.btn-light{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.btn-light:hover{ background:rgba(255,255,255,.24); color:#fff; transform:translateY(-2px); }
.btn-lg{ padding:17px 30px; font-size:16px; }
.btn-block{ width:100%; }

/* ---- Top nav ---------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50; transition:background .3s ease, box-shadow .3s ease, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line); box-shadow:var(--shadow-1);
}
.nav-inner{ display:flex; align-items:center; gap:30px; height:72px; }
.nav-logo{ display:flex; align-items:center; gap:11px; font-weight:800; }
.nav-logo img{ height:30px; width:auto; }
.nav-logo .wordmark{ font-family:var(--font-serif); font-size:22px; font-weight:700; color:var(--ink-900); letter-spacing:-.02em; }
.nav-links{ display:flex; gap:6px; margin-left:8px; }
.nav-links a{
  color:var(--ink-500); font-weight:600; font-size:14.5px; padding:9px 14px; border-radius:9px;
  transition:color .15s, background .15s;
}
.nav-links a:hover{ color:var(--tracelet-indigo); background:var(--tracelet-indigo-tint); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav-cta a.text-link{ color:var(--ink-700); font-weight:700; font-size:14.5px; padding:9px 6px; }
.nav-cta a.text-link:hover{ color:var(--tracelet-teal); }
.theme-toggle{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-500); cursor:pointer;
  transition:color .15s, border-color .15s; font-size:17px;
}
.theme-toggle:hover{ color:var(--tracelet-gold); border-color:var(--tracelet-gold-soft); }
.nav-burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink-700); font-size:20px; cursor:pointer; }

/* ---- Hero ------------------------------------------------------------- */
.hero{ position:relative; padding:56px 0 0; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg::before{ /* color mesh */
  content:""; position:absolute; inset:-10% -10% 30%;
  background:
    radial-gradient(50% 55% at 18% 8%, rgba(26,34,126,.16), transparent 70%),
    radial-gradient(46% 50% at 86% 4%, rgba(0,118,163,.16), transparent 70%),
    radial-gradient(40% 44% at 70% 40%, rgba(182,137,15,.10), transparent 70%);
}
.hero-bg::after{ /* engineering grid */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(26,34,126,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,34,126,.045) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 75%);
}
.hero-inner{ position:relative; z-index:1; text-align:center; padding-top:36px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 9px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-1);
  font-size:13px; font-weight:600; color:var(--ink-700); margin-bottom:28px;
}
.hero-badge .tag{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.04em;
  background:var(--tracelet-green-tint); color:var(--tracelet-green); padding:3px 9px; border-radius:999px;
}
.hero h1{ font-size:clamp(40px,6.4vw,76px); font-weight:700; max-width:15ch; margin:0 auto; }
.hero h1 .grad{
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:clamp(18px,2.1vw,22px); color:var(--ink-500); max-width:62ch; margin:26px auto 0; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.hero-trust{
  display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:30px;
  font-size:13.5px; color:var(--ink-400); font-weight:600;
}
.hero-trust span{ display:inline-flex; align-items:center; gap:7px; }
.hero-trust i{ color:var(--tracelet-green); font-size:15px; }

/* Hero screenshot frame */
.hero-shot{ position:relative; z-index:1; margin:52px auto 0; max-width:1080px; padding:0 24px; }
.shot-frame{
  position:relative; border-radius:var(--radius-lg); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--shadow-4); overflow:hidden;
}
.shot-frame::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.shot-bar{
  display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line-soft);
  background:var(--paper-2);
}
.shot-bar .dot{ width:11px; height:11px; border-radius:50%; background:var(--line); }
.shot-bar .dot:nth-child(1){ background:#ff5f57; } .shot-bar .dot:nth-child(2){ background:#febc2e; } .shot-bar .dot:nth-child(3){ background:#28c840; }
.shot-bar .addr{
  margin-left:14px; font-family:var(--font-mono); font-size:12px; color:var(--ink-400);
  background:var(--bg); border:1px solid var(--line-soft); padding:5px 12px; border-radius:7px;
}
.shot-frame img{ width:100%; display:block; }
.hero-glow{ position:absolute; left:50%; bottom:-40px; transform:translateX(-50%);
  width:70%; height:120px; background:radial-gradient(closest-side, rgba(0,118,163,.35), transparent);
  filter:blur(30px); z-index:0; }

/* ---- Logo / trust marquee -------------------------------------------- */
.trust{ padding:38px 0 0; }
.trust p{ text-align:center; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  font-family:var(--font-mono); color:var(--ink-400); margin-bottom:26px; }
.trust-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 40px; opacity:.85; }
.trust-item{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--ink-400); }
.trust-item i{ font-size:22px; }

/* ---- Stat band -------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.stat{ text-align:center; padding:30px 18px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-1); }
.stat .num{ font-family:var(--font-serif); font-size:clamp(34px,4vw,46px); font-weight:700;
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .lbl{ margin-top:8px; font-size:14px; color:var(--ink-500); font-weight:600; }

/* ---- Feature grid ----------------------------------------------------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 28px; box-shadow:var(--shadow-1); transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
  position:relative; overflow:hidden;
}
.feat-card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--brand-gradient); opacity:0; transition:opacity .2s; }
.feat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:var(--tracelet-teal-soft); }
.feat-card:hover::before{ opacity:1; }
.feat-ico{
  width:50px; height:50px; border-radius:13px; display:grid; place-items:center; font-size:23px;
  margin-bottom:20px; color:#fff;
}
.ic-indigo{ background:linear-gradient(135deg,var(--tracelet-indigo),var(--tracelet-indigo-soft)); }
.ic-teal{ background:linear-gradient(135deg,var(--tracelet-teal),var(--tracelet-teal-soft)); }
.ic-gold{ background:linear-gradient(135deg,var(--tracelet-gold),var(--tracelet-gold-soft)); }
.ic-green{ background:linear-gradient(135deg,var(--tracelet-green),var(--tracelet-green-soft)); }
.ic-purple{ background:linear-gradient(135deg,var(--tracelet-purple),#7d76c9); }
.ic-red{ background:linear-gradient(135deg,var(--tracelet-red),#d75555); }
.feat-card h3{ font-size:20px; font-weight:700; margin-bottom:10px; }
.feat-card p{ font-size:15px; color:var(--ink-500); }

/* ---- Showcase rows ---------------------------------------------------- */
.showcase{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:72px; }
.showcase:last-child{ margin-bottom:0; }
.showcase.flip .showcase-copy{ order:2; }
.showcase-copy .eyebrow{ margin-bottom:14px; }
.showcase-copy h3{ font-size:clamp(26px,3vw,36px); font-weight:700; }
.showcase-copy > p{ margin-top:16px; font-size:17px; color:var(--ink-500); }
.showcase-list{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; }
.showcase-list li{ display:flex; gap:13px; font-size:15.5px; color:var(--ink-700); }
.showcase-list i{ color:var(--tracelet-green); font-size:18px; margin-top:2px; flex:none; }
.showcase-media{ position:relative; }
.showcase-media .shot-frame{ box-shadow:var(--shadow-3); }
.showcase-media .blob{ display:none; }

/* ---- How it works ----------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 28px 30px; box-shadow:var(--shadow-1); }
.step .n{ counter-increment:step; font-family:var(--font-serif); font-size:15px; font-weight:700; color:#fff;
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--brand-gradient);
  margin-bottom:18px; }
.step .n::before{ content:"0" counter(step); }
.step h3{ font-size:19px; font-weight:700; margin-bottom:9px; }
.step p{ font-size:14.5px; color:var(--ink-500); }
.step code{ font-family:var(--font-mono); font-size:12.5px; background:var(--bg); border:1px solid var(--line-soft);
  padding:2px 7px; border-radius:6px; color:var(--tracelet-indigo); }
.steps-arrow{ display:none; }

/* ---- Security band ---------------------------------------------------- */
.security{ background:var(--tracelet-indigo-deep); color:#fff; overflow:hidden; }
[data-theme="dark"] .security{ background:#070a18; }
.security::before{ content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(110% 90% at 80% 10%, #000, transparent 70%);
          mask-image:radial-gradient(110% 90% at 80% 10%, #000, transparent 70%);
}
.security .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.security .eyebrow{ color:var(--tracelet-gold-soft); }
.security h2{ color:#fff; font-size:clamp(30px,4vw,44px); font-weight:700; }
.security > .wrap > div > p{ color:rgba(255,255,255,.72); font-size:18px; margin-top:18px; }
.sec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sec-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:22px 20px; }
.sec-card i{ font-size:24px; color:var(--tracelet-teal-soft); }
.sec-card h4{ color:#fff; font-family:var(--font-sans); font-size:15.5px; font-weight:700; margin:13px 0 6px; }
.sec-card p{ color:rgba(255,255,255,.62); font-size:13.5px; line-height:1.55; }

/* ---- Pricing ---------------------------------------------------------- */
.pricing-note{
  max-width:760px; margin:-22px auto 34px; display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border:1px solid var(--tracelet-gold-soft); border-radius:var(--radius);
  background:var(--tracelet-gold-tint); color:var(--ink-700); font-size:14px; font-weight:650;
}
.pricing-note i{ color:var(--tracelet-gold); font-size:18px; flex:none; margin-top:1px; }
.price-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; align-items:stretch; }
.price-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 24px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; position:relative; }
.price-card.featured{ border-color:var(--tracelet-teal-soft); box-shadow:var(--shadow-3); transform:translateY(-8px); }
.price-flag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--brand-gradient);
  color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 16px; border-radius:999px; box-shadow:var(--shadow-2); }
.price-card .tier{ font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tracelet-teal); }
.price-card .price{ font-family:var(--font-serif); font-size:46px; font-weight:700; margin:14px 0 2px; }
.price-card .price span{ font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--ink-400); }
.price-card .blurb{ font-size:14px; color:var(--ink-500); min-height:42px; }
.price-card ul{ list-style:none; padding:0; margin:24px 0 28px; display:grid; gap:12px; }
.price-card li{ display:flex; gap:11px; font-size:14.5px; color:var(--ink-700); }
.price-card li i{ color:var(--tracelet-green); font-size:17px; flex:none; margin-top:1px; }
.price-card li.muted{ color:var(--ink-300); } .price-card li.muted i{ color:var(--ink-300); }
.price-card .btn{ margin-top:auto; }

/* ---- Stripe checkout modal -------------------------------------------- */
.checkout-modal{
  position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(11,14,26,.56); backdrop-filter:blur(8px);
}
.checkout-modal.open{ display:flex; }
.checkout-panel{
  width:min(560px,100%); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-4); padding:28px; position:relative;
}
.checkout-panel h3{ font-size:30px; margin-bottom:10px; }
.checkout-copy{ color:var(--ink-500); font-size:14.5px; margin-bottom:20px; }
.checkout-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px; background:var(--paper-2); color:var(--ink-500); cursor:pointer;
}
.checkout-close:hover{ color:var(--tracelet-teal); border-color:var(--tracelet-teal-soft); }
.checkout-panel label{ display:block; margin:14px 0; }
.checkout-panel label span{ display:block; margin-bottom:7px; font-weight:800; font-size:13px; color:var(--ink-700); }
.checkout-panel input,.checkout-panel textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper-2);
  color:var(--ink-900); padding:12px 13px; font:15px var(--font-sans); outline:none;
}
.checkout-panel textarea{ min-height:92px; resize:vertical; font-family:var(--font-mono); font-size:12.5px; }
.checkout-panel input:focus,.checkout-panel textarea:focus{
  border-color:var(--tracelet-teal-soft); box-shadow:0 0 0 3px color-mix(in srgb, var(--tracelet-teal-soft) 22%, transparent);
}
.checkout-status{ min-height:21px; margin-top:12px; color:var(--ink-500); font-size:13.5px; font-weight:650; }
.checkout-status.ok{ color:var(--tracelet-green); }
.checkout-status.error{ color:var(--tracelet-red); }

/* ---- FAQ -------------------------------------------------------------- */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:14px; }
.faq details{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1);
  overflow:hidden; }
.faq summary{ cursor:pointer; list-style:none; padding:20px 24px; font-weight:700; font-size:16.5px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--ink-900); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"\F4FE"; font-family:"bootstrap-icons"; font-size:18px; color:var(--ink-400);
  transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .ans{ padding:0 24px 22px; color:var(--ink-500); font-size:15px; }

/* ---- Final CTA -------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; }
.cta-inner{ background:var(--brand-gradient); border-radius:var(--radius-xl); padding:72px 48px; text-align:center;
  position:relative; overflow:hidden; box-shadow:var(--shadow-4); }
.cta-inner::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:40px 40px; -webkit-mask-image:radial-gradient(80% 120% at 50% -10%, #000, transparent 70%);
  mask-image:radial-gradient(80% 120% at 50% -10%, #000, transparent 70%); }
.cta-inner > *{ position:relative; z-index:1; }
.cta-inner h2{ color:#fff; font-size:clamp(30px,4vw,46px); font-weight:700; }
.cta-inner p{ color:rgba(255,255,255,.85); font-size:19px; margin:18px auto 34px; max-width:54ch; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- Footer ----------------------------------------------------------- */
.footer{ padding:72px 0 40px; border-top:1px solid var(--line); margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .nav-logo{ margin-bottom:16px; }
.footer-brand p{ font-size:14px; color:var(--ink-500); max-width:34ch; }
.footer-col h5{ font-family:var(--font-sans); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-400); margin:0 0 16px; }
.footer-col a{ display:block; color:var(--ink-500); font-size:14.5px; font-weight:600; padding:5px 0; }
.footer-col a:hover{ color:var(--tracelet-teal); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-400); }
.footer-bottom .socials{ display:flex; gap:8px; }
.footer-bottom .socials a{ width:36px; height:36px; border-radius:9px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-500); font-size:16px; }
.footer-bottom .socials a:hover{ color:var(--tracelet-teal); border-color:var(--tracelet-teal-soft); }

/* ---- Reveal animation ------------------------------------------------- */
.reveal{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
/* staggered children (feature cards, pricing, steps) */
.stagger > *{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
.stagger.in > *{ opacity:1; transform:none; }
.stagger.in > *:nth-child(1){ transition-delay:.00s; }
.stagger.in > *:nth-child(2){ transition-delay:.08s; }
.stagger.in > *:nth-child(3){ transition-delay:.16s; }
.stagger.in > *:nth-child(4){ transition-delay:.24s; }
.stagger.in > *:nth-child(5){ transition-delay:.32s; }
.stagger.in > *:nth-child(6){ transition-delay:.40s; }

/* ---- Animated brand-gradient text ------------------------------------ */
.hero h1 .grad{
  background:linear-gradient(100deg, var(--tracelet-indigo) 0%, var(--tracelet-teal) 38%, var(--tracelet-teal-soft) 55%, var(--tracelet-gold) 72%, var(--tracelet-teal) 90%, var(--tracelet-indigo) 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 9s ease-in-out infinite;
}
@keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* ---- Headline word reveal -------------------------------------------- */
.hero h1 .word{ display:inline-block; opacity:0; transform:translateY(28px) rot[X](40deg);
  transform:translateY(28px); animation:wordUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes wordUp{ to{ opacity:1; transform:none; } }

/* ---- Self-drawing trace line above the headline ---------------------- */
.hero-trace{ width:160px; height:34px; margin:0 auto 22px; display:block; }
.hero-trace path{ stroke-dasharray:260; stroke-dashoffset:260; animation:traceDraw 1.7s ease forwards .15s; }
.hero-trace .node{ opacity:0; animation:nodeIn .4s ease forwards 1.7s; }
@keyframes traceDraw{ to{ stroke-dashoffset:0; } }
@keyframes nodeIn{ to{ opacity:1; } }

/* ---- Hero product image ---------------------------------------------- */
.hero-product-img{ width:100%; display:block; background:var(--paper-2); }
.hero-shot .shot-frame{ background:var(--paper); }
.hero-shot .shot-frame video{ width:100%; display:block; background:var(--tracelet-indigo-deep); }
.hero-shot .shot-frame img{ width:100%; display:block; }

/* ---- Pointer parallax tilt ------------------------------------------- */
.tilt{ transition:transform .25s ease; transform-style:preserve-3d; will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .reveal,.stagger>*{ opacity:1; transform:none; transition:none; }
  .hero h1 .word{ opacity:1; transform:none; animation:none; }
  .hero h1 .grad{ animation:none; }
  .hero-trace path{ stroke-dashoffset:0; animation:none; } .hero-trace .node{ opacity:1; animation:none; }
  .tilt{ transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width:980px){
  .feat-grid,.steps,.price-grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .showcase{ grid-template-columns:1fr; gap:28px; margin-bottom:56px; }
  .showcase.flip .showcase-copy{ order:0; }
  .security .wrap{ grid-template-columns:1fr; gap:40px; }
  .price-card.featured{ transform:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:680px){
  .wrap{ padding:0 20px; }
  .section-pad{ padding:56px 0; }
  .section-head{ margin-bottom:34px; }
  .section-head p{ font-size:16px; }
  .hero{ padding-top:34px; }
  .hero-inner{ padding-top:28px; }
  .hero-shot{ margin-top:34px; padding:0 20px; }
  .hero-actions{ gap:10px; margin-top:28px; }
  .hero-trust{ gap:12px; margin-top:22px; }
  .nav-inner{ gap:10px; height:68px; }
  .nav-logo{ gap:8px; min-width:0; }
  .nav-logo img{ height:26px; }
  .nav-logo .wordmark{ font-size:19px; }
  .nav-links{ display:none; }
  .nav-burger{ display:grid; place-items:center; }
  .nav-cta .text-link{ display:none; }
  .nav-cta{ gap:8px; }
  .nav-cta > .btn{ display:none; }
  .feat-grid,.steps,.price-grid,.stats,.sec-grid{ grid-template-columns:1fr; }
  .hero-actions .btn{ flex:1; }
  .trust{ padding-top:30px; }
  .trust-row{ gap:12px 18px; }
  .trust-item{ font-size:14px; }
  .stats{ gap:12px; }
  .stat{ padding:22px 16px; }
  .feat-grid{ gap:14px; }
  .feat-card{ padding:24px 22px; }
  .showcase{ gap:24px; margin-bottom:48px; }
  .showcase-copy > p{ font-size:16px; }
  .showcase-list{ gap:11px; margin-top:20px; }
  .security .wrap{ gap:28px; }
  .price-grid{ gap:18px; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-inner{ padding:52px 24px; }
}

@media (max-width:420px){
  .wrap{ padding:0 24px; }
  .nav-inner{ padding:0 14px; }
  .theme-toggle,.nav-burger{ width:38px; height:38px; border-radius:9px; }
  .hero h1{ font-size:38px; }
  .btn-lg{ padding:15px 18px; font-size:15px; }
  .shot-bar .addr{ margin-left:8px; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* mobile menu */
.mobile-menu{ display:none; position:fixed; inset:72px 0 0; z-index:49; background:var(--paper);
  padding:24px; flex-direction:column; gap:6px; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:14px 12px; font-size:17px; font-weight:700; color:var(--ink-900); border-radius:10px; }
.mobile-menu a:hover{ background:var(--tracelet-indigo-tint); color:var(--tracelet-indigo); }
.mobile-menu .btn{ margin-top:12px; }