:root{
  /* Fonts — pure system stack */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Type scale */
  --fs-display:60px;--fs-h1:44px;--fs-h2:32px;--fs-h3:22px;
  --fs-body-lg:18px;--fs-body:16px;--fs-caption:13px;--fs-overline:12px;
  --lh-display:1.04;--lh-h1:1.08;--lh-h2:1.15;--lh-h3:1.3;
  --lh-body-lg:1.6;--lh-body:1.6;--lh-caption:1.5;--lh-overline:1.4;
  --ls-display:-0.03em;--ls-h1:-0.025em;--ls-h2:-0.02em;--ls-h3:-0.01em;
  --ls-body-lg:-0.005em;--ls-body:0;--ls-caption:0.01em;--ls-overline:0.12em;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;

  /* Spacing — 4px grid */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --container-max:1200px;--gutter:24px;

  /* Radius */
  --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-full:999px;

  /* Background layers */
  --bg-sunken:#060609;--bg-base:#0A0A0F;--bg-raised:#0F0F16;
  /* Surfaces */
  --surface-1:#101017;--surface-2:#17171F;--surface-3:#20202A;
  /* Borders */
  --border-subtle:rgba(255,255,255,0.06);--border-default:rgba(255,255,255,0.10);--border-strong:rgba(255,255,255,0.16);
  /* Text */
  --text-primary:#F4F4F6;--text-secondary:#A7A7B4;--text-tertiary:#7D7D8C;--text-inverse:#0A0A0F;

  /* Vodu accent family — real logo blue (steel -> bright blue) */
  --vodu-300:#7cc0f4;--vodu-400:#3fa0e8;--vodu-500:#1583d7;--vodu-600:#0f6cb4;--vodu-700:#366386;
  --vodu-tint:rgba(21,131,215,0.12);
  --vodu-glow:rgba(21,131,215,0.35);
  --vodu-gradient:linear-gradient(135deg,#366386 0%,#1583d7 100%);

  /* Elevation & glow */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg:0 20px 56px rgba(0,0,0,0.55);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.05);
  --glow-vodu:0 10px 44px rgba(21,131,215,0.35);

  /* Status */
  --success:#34D399;--warning:#FBBF24;--danger:#F87171;

  /* Semantic aliases */
  --accent:var(--vodu-500);--accent-strong:var(--vodu-600);--accent-tint:var(--vodu-tint);
  --focus-ring:rgba(21,131,215,0.55);

  --max:var(--container-max);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 82% -6%,rgba(21,131,215,.12),transparent 60%),
    radial-gradient(55% 42% at 8% 0%,rgba(54,99,134,.16),transparent 60%);
}
a{color:var(--vodu-300);text-decoration:none}
a:hover{color:var(--vodu-400);text-decoration:underline}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--text-primary)}
h1{font-size:clamp(2.35rem,5.4vw,var(--fs-display));font-weight:var(--fw-bold);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-wrap:balance}
h2{font-size:clamp(1.7rem,3.6vw,var(--fs-h2));font-weight:var(--fw-bold);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
p{margin:0 0 1.05em}
strong{color:var(--text-primary)}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.grad-text{background:var(--vodu-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--text-secondary)}
.center{text-align:center}
section{padding:88px 0;position:relative}
section.alt{background:var(--bg-sunken)}

/* Overline / pill badge */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-overline);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-secondary);
  background:var(--surface-2);border:1px solid var(--border-default);padding:6px 14px;border-radius:var(--radius-full);margin-bottom:20px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vodu-500);box-shadow:0 0 10px var(--vodu-500);flex:0 0 auto}

/* Header */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  background:rgba(15,15,22,.82);border-bottom:1px solid var(--border-subtle)}
.nav{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:var(--fw-bold);font-size:17px;letter-spacing:-.02em;color:var(--text-primary)}
.brand:hover{text-decoration:none;color:var(--text-primary)}
.brand .logo{width:28px;height:28px;border-radius:9px;display:block;flex:0 0 auto;box-shadow:0 4px 14px rgba(21,131,215,.35)}
.nav .links{display:flex;gap:22px;margin-left:14px}
.nav .links a{color:var(--text-secondary);font-size:15px;font-weight:var(--fw-medium)}
.nav .links a:hover{color:var(--text-primary);text-decoration:none}
.nav .spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:var(--fw-semibold);border-radius:var(--radius-full);
  padding:12px 22px;cursor:pointer;border:1px solid transparent;font-size:15px;transition:transform .12s ease,background .2s ease,filter .2s ease}
.btn-primary{background:var(--vodu-600);color:#fff;box-shadow:var(--glow-vodu)}
.btn-primary:hover{text-decoration:none;color:#fff;transform:scale(1.04)}
.btn-ghost{border-color:var(--border-default);color:var(--text-primary);background:var(--surface-2)}
.btn-ghost:hover{text-decoration:none;color:var(--text-primary);background:var(--surface-3)}
.nav .btn{padding:9px 18px;font-size:14px}
.menu-toggle{display:none}

/* App Store badge */
.badge{display:inline-flex;align-items:center;gap:11px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:11px 20px;transition:transform .12s ease}
.badge:hover{text-decoration:none;color:#fff;transform:scale(1.03)}
.badge-apple{flex:0 0 auto;display:block}
.badge-tt{display:flex;flex-direction:column;line-height:1.14;text-align:left}
.badge-sm{font-size:11px;font-weight:var(--fw-regular);letter-spacing:.02em}
.badge-lg{font-size:19px;font-weight:var(--fw-semibold);letter-spacing:-.01em}

/* Hero */
.hero{padding:80px 0 56px;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hero::before{top:-160px;left:-100px;width:560px;height:560px;background:radial-gradient(circle,rgba(21,131,215,.22),transparent 65%);animation:glowDrift 14s ease-in-out infinite}
.hero::after{top:24px;right:-140px;width:520px;height:520px;background:radial-gradient(circle,rgba(63,160,232,.15),transparent 65%);animation:glowDrift 18s ease-in-out infinite reverse}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{margin-bottom:.3em}
.hero .lead{font-size:var(--fs-body-lg);color:var(--text-secondary);max-width:40ch;margin-bottom:28px;text-wrap:pretty;line-height:1.6}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.trust{display:flex;align-items:center;gap:10px;margin-top:20px;color:var(--text-tertiary);font-size:14px}
.stars{color:var(--warning);letter-spacing:2px}

/* Phone mockup */
.phone-col{display:flex;justify-content:center}
.phone{width:300px;max-width:82vw;animation:floaty 7s ease-in-out infinite;will-change:transform}
.phone-frame{position:relative;background:#000;border:1px solid var(--border-strong);border-radius:44px;padding:10px;box-shadow:var(--shadow-lg),var(--glow-vodu)}
.phone-screen{position:relative;border-radius:34px;overflow:hidden;aspect-ratio:639/1136;background:var(--bg-sunken)}
.phone-shot{display:block;width:100%;height:100%;object-fit:cover}
.phone-island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:20px;background:#000;z-index:3}
.pm-prompt{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;background:rgba(23,23,31,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-md)}
.pm-label{display:block;font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px}
.pm-line{display:block;font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--text-primary);min-height:38px}
.pm-caret{display:inline-block;width:2px;height:14px;background:var(--vodu-400);vertical-align:-2px;margin-left:1px;animation:blinkCaret 1s step-end infinite}

/* Cards / features */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:28px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--border-default);background:var(--surface-2);transform:translateY(-4px);box-shadow:var(--shadow-md)}
a.card:hover{text-decoration:none}
.card h3{margin-bottom:.4em}
.card p{color:var(--text-secondary);margin:0;font-size:15px;line-height:1.55}
.ic{width:44px;height:44px;border-radius:12px;background:var(--vodu-gradient);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.25rem;box-shadow:var(--glow-vodu)}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.section-head p{color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:1.6}

/* App Store showcase strip */
.shot-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:720px;margin:0 auto}
.shot{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-1);box-shadow:var(--shadow-md);aspect-ratio:639/1136}
.shot img{display:block;width:100%;height:100%;object-fit:cover}

/* Steps */
.steps{counter-reset:step;display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.step{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:28px;position:relative}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-mono);font-size:13px;color:var(--vodu-400);margin-bottom:16px}
.step h3{font-size:19px;margin-bottom:.4em}
.step p{color:var(--text-secondary);margin:0;font-size:15px;line-height:1.55}

/* Prose / article */
.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:1.7em;font-size:clamp(1.5rem,3vw,26px)}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{color:var(--text-secondary);padding-left:1.2em;margin:0 0 1.1em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--vodu-400)}
.prose p{color:var(--text-secondary)}
.prose strong{color:var(--text-primary)}
.callout{background:var(--vodu-tint);border:1px solid var(--border-subtle);border-left:3px solid var(--vodu-500);
  border-radius:var(--radius-sm);padding:18px 20px;margin:1.4em 0}
.callout p{margin:0;color:var(--text-primary)}

/* In-this-article TOC */
.toc{background:var(--surface-1);border:1px solid var(--border-subtle);border-left:3px solid var(--vodu-500);
  border-radius:var(--radius-md);padding:18px 24px 20px;margin:1.9em 0 2.1em}
.toc .toc-heading{font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--text-tertiary);margin:0 0 10px}
.toc ol{margin:0;padding-left:1.35em;color:var(--text-secondary);counter-reset:none}
.toc li{margin:0 0 7px;font-size:15px;line-height:1.45}
.toc li:last-child{margin-bottom:0}
.toc li::marker{color:var(--vodu-400);font-variant-numeric:tabular-nums}
.toc a{color:var(--text-secondary)}
.toc a:hover{color:var(--vodu-300)}

/* Author box (E-E-A-T) */
.authorbox-wrap{padding:8px 0 72px}
.authorbox{max-width:760px;margin:0 auto;display:flex;gap:20px;align-items:flex-start;
  background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:24px 26px;box-shadow:var(--shadow-sm)}
.ab-avatar{width:64px;height:64px;border-radius:16px;flex:0 0 auto;display:block;
  border:1px solid var(--border-default);box-shadow:0 6px 18px rgba(21,131,215,.28)}
.ab-body{min-width:0}
.ab-kicker{font-size:var(--fs-overline);font-weight:var(--fw-semibold);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--text-tertiary);margin:0 0 4px}
.ab-name{font-size:17px;font-weight:var(--fw-bold);color:var(--text-primary);margin:0 0 8px;letter-spacing:-.01em}
.ab-bio{color:var(--text-secondary);font-size:15px;line-height:1.55;margin:0 0 10px}
.ab-meta{font-size:13px;color:var(--text-tertiary);margin:0}
.ab-meta a{color:var(--vodu-300);font-weight:var(--fw-medium)}
.ab-sep{margin:0 8px;opacity:.6}

/* Tables */
.tbl-wrap{overflow-x:auto;margin:1.4em 0;border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border-subtle);vertical-align:top}
thead th{background:var(--surface-2);color:var(--text-primary);font-weight:var(--fw-semibold)}
tbody tr:last-child td{border-bottom:none}
td .yes{color:var(--success);font-weight:var(--fw-bold)}
td .no{color:var(--danger);font-weight:var(--fw-bold)}

/* FAQ */
.faq{max-width:760px;margin:0 auto;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-1)}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;font-weight:var(--fw-semibold);font-size:16px;color:var(--text-primary);padding:20px 22px;list-style:none;position:relative;padding-right:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:16px;font-size:1.5rem;line-height:1;color:var(--text-tertiary);font-weight:400;transition:transform .25s ease}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq .ans{color:var(--text-secondary);padding:0 22px 20px;line-height:1.6}
.faq .ans p{margin:0 0 .7em}
.faq .ans p:last-child{margin:0}

/* CTA band */
.cta-band{background:linear-gradient(135deg,rgba(54,99,134,.18),rgba(21,131,215,.14));border:1px solid var(--border-default);
  border-radius:var(--radius-xl);padding:56px 32px;text-align:center;margin:0 auto;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.cta-band h2{margin-bottom:.3em}
.cta-band p{color:var(--text-secondary);max-width:46ch;margin:0 auto 24px;font-size:var(--fs-body-lg)}
.cta-band .cta-row{justify-content:center}

/* Breadcrumb */
.crumbs{font-size:13px;color:var(--text-tertiary);padding-top:26px}
.crumbs a{color:var(--text-secondary)}
.crumbs span{margin:0 7px;opacity:.6}

/* Meta lines */
.updated{display:inline-block;font-size:13px;font-weight:var(--fw-semibold);letter-spacing:.03em;color:var(--text-tertiary);margin:0 0 16px}
.byline{font-size:14px;color:var(--text-secondary);margin:.2em 0 1em}
.byline b{color:var(--text-primary)}

/* Related */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.related a{display:block;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:20px 22px;color:var(--text-primary);transition:border-color .2s ease,background .2s ease,transform .2s ease}
.related a:hover{text-decoration:none;border-color:var(--border-default);background:var(--surface-2);transform:translateY(-3px)}
.related a b{display:block;margin-bottom:4px}
.related a span{color:var(--text-secondary);font-size:14px}

/* Media / image slot */
.visual{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);
  background:var(--vodu-tint);aspect-ratio:16/9;box-shadow:var(--shadow-lg)}
.visual img{display:block;width:100%;height:100%;object-fit:cover;border:0}
.visual figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font-size:13px;color:#eef2f8;
  background:linear-gradient(to top,rgba(5,5,11,.82),transparent)}
.visual.inline{margin:1.9em auto}
.visual-wrap{padding:20px 0 0}

/* More AI tools */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-grid a{display:block;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:24px;color:var(--text-primary);transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
.tool-grid a:hover{text-decoration:none;border-color:var(--border-default);background:var(--surface-2);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tool-grid a .ic{margin-bottom:12px}
.tool-grid a h3{margin-bottom:.35em;font-size:19px}
.tool-grid a p{color:var(--text-secondary);font-size:15px;margin:0;line-height:1.55}

/* Footer */
footer.site{border-top:1px solid var(--border-subtle);background:var(--bg-raised);padding:64px 0 40px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-grid h4{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);margin:0 0 14px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:9px}
.foot-grid a{color:var(--text-secondary);font-size:14px}
.foot-grid a:hover{color:var(--text-primary)}
.foot-brand .brand{margin-bottom:12px}
.foot-brand p{color:var(--text-tertiary);font-size:14px;max-width:34ch;line-height:1.5}
.foot-bottom{border-top:1px solid var(--border-subtle);margin-top:36px;padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;color:var(--text-tertiary);font-size:13px}
.play-note{color:var(--text-tertiary);font-size:12px;max-width:52ch}
.play-note a{color:var(--text-secondary)}

/* 404 */
.big404{text-align:center;padding:96px 0}
.big404 .code{font-size:clamp(4rem,16vw,9rem);font-weight:800;line-height:1;letter-spacing:-.04em}

/* Keyframes */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes blinkCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes glowDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,24px) scale(1.12)}}

@media (max-width:860px){
  :root{--fs-display:42px;--fs-h1:34px;--fs-h2:26px;--fs-h3:20px}
  .hero{padding:48px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero .lead{max-width:none}
  /* Mobile: value prop first, device mockup after the CTA — never above the headline */
  .phone-col{order:2;display:flex;justify-content:center}
  .phone{width:240px}
  /* Money pages: the repeated app mockup adds no info on small screens — their own
     page-specific visual is in the body. Homepage keeps it (below the CTA). */
  .hero:not(.home-hero) .phone-col{display:none}
  .grid-3,.steps,.related,.tool-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .authorbox{flex-direction:column;gap:14px;padding:22px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav .links{display:none}
  .nav .links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-raised);border-bottom:1px solid var(--border-subtle);padding:8px 22px 16px;margin:0}
  .nav .links.open a{padding:11px 0;border-bottom:1px solid var(--border-subtle)}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;
    background:var(--surface-2);border:1px solid var(--border-default);color:var(--text-primary);cursor:pointer;font-size:1.1rem}
}
@media (max-width:520px){
  section{padding:56px 0}
  .foot-grid{grid-template-columns:1fr}
  .cta-band{padding:40px 22px}
  .shot-strip{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .phone,.pm-caret,.hero::before,.hero::after{animation:none!important}
  *{transition:none!important}
}