.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;
}
.sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 1000;
  background: var(--color-primary);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
}

:root, [data-theme="light"] {
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-2: #fbfcfd;
  --color-surface-offset: #eef1f5;
  --color-border: #d9dee6;
  --color-divider: #e4e8ee;

  --color-text: #0f1b2d;
  --color-text-muted: #56627a;
  --color-text-faint: #95a0b3;
  --color-text-inverse: #f6f9fc;

  --color-primary: #0a6cf0;
  --color-primary-hover: #0856c4;
  --color-primary-active: #06439b;
  --color-primary-soft: #e4eefe;

  --color-accent: #07b6c7;
  --color-success: #1f9d57;
  --color-no: #b04250;

  --radius-sm: 0.4rem;
  --radius-md: 0.6rem;
  --radius-lg: 0.9rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 1px 2px rgba(15,27,45,0.06);
  --shadow-md: 0 6px 20px rgba(15,27,45,0.08);
  --shadow-lg: 0 20px 48px rgba(15,27,45,0.14);

  --content-narrow: 680px;
  --content-default: 1080px;

  --font-display: 'Clash Display', 'Helvetica Neue', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.55vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.1rem);
  --text-2xl: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --space-20:5rem;--space-24:6rem;--space-32:8rem;
}

[data-theme="dark"] {
  --color-bg: #0a1018;
  --color-surface: #111923;
  --color-surface-2: #16202c;
  --color-surface-offset: #0e1620;
  --color-border: #25323f;
  --color-divider: #1b2530;
  --color-text: #e4eaf1;
  --color-text-muted: #93a1b3;
  --color-text-faint: #5e6c7d;
  --color-text-inverse: #0a1018;
  --color-primary: #3b8cf6;
  --color-primary-hover: #5a9ef8;
  --color-primary-active: #7db3fa;
  --color-primary-soft: #14253c;
  --color-accent: #28c7d6;
  --color-success: #3fc47e;
  --color-no: #d2737f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem;}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);transition:background .3s,color .3s;}
img,svg{display:block;max-width:100%;height:auto;}
ul[role="list"]{list-style:none;}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;line-height:1.08;font-weight:600;letter-spacing:-0.01em;}
p{text-wrap:pretty;}
::selection{background:color-mix(in oklab,var(--color-primary) 25%,transparent);}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

.container{width:100%;max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-6);}
.narrow{max-width:var(--content-narrow);margin-inline:auto;}
.center{text-align:center;}
.eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-weight:700;font-size:var(--text-sm);padding:.8em 1.5em;border-radius:var(--radius-full);transition:all var(--transition-interactive);border:1.5px solid transparent;white-space:nowrap;}
.btn--primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn--ghost{background:transparent;color:var(--color-text);border-color:var(--color-border);}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary);}
.btn--sm{padding:.55em 1.1em;}
.btn--lg{padding:1em 2em;font-size:var(--text-base);}
.btn--block{width:100%;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:var(--radius-full);color:var(--color-text-muted);transition:all var(--transition-interactive);}
.icon-btn:hover{background:var(--color-surface-offset);color:var(--color-text);}

/* Header */
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;}
.header.is-scrolled{border-color:var(--color-divider);box-shadow:var(--shadow-sm);}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4);}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-primary);}
.brand__mark{color:var(--color-primary);flex:none;}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-text);letter-spacing:-0.02em;}
.nav{display:flex;gap:var(--space-6);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);}
.nav a{transition:color var(--transition-interactive);}
.nav a:hover{color:var(--color-text);}
.header__actions{display:flex;align-items:center;gap:var(--space-3);}

/* Hero */
.hero{padding-block:clamp(var(--space-16),9vw,var(--space-32));position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 70% 0%,color-mix(in oklab,var(--color-primary) 12%,transparent),transparent 70%);pointer-events:none;}
.hero__inner{position:relative;text-align:center;}
.hero__title{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-6);}
.hero__lede{font-size:var(--text-lg);color:var(--color-text-muted);max-width:42rem;margin:0 auto var(--space-8);line-height:1.5;}
.hero__cta{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-4);}
.hero__note{font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:.02em;}
.flow{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-16);}
.flow__node{display:inline-flex;align-items:center;gap:var(--space-2);padding:.7em 1.1em;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;box-shadow:var(--shadow-sm);color:var(--color-text-muted);}
.flow__node svg{color:var(--color-text-faint);}
.flow__node--accent{color:var(--color-primary);border-color:color-mix(in oklab,var(--color-primary) 35%,var(--color-border));background:var(--color-primary-soft);}
.flow__node--accent svg{color:var(--color-primary);}
.flow__arrow{color:var(--color-text-faint);display:flex;}

/* Sections */
.section{padding-block:clamp(var(--space-16),8vw,var(--space-24));}
.section--offset{background:var(--color-surface-offset);}
.section__head{max-width:46rem;margin-bottom:var(--space-12);}
.section__title{font-size:var(--text-xl);margin-bottom:var(--space-3);}
.section__sub{font-size:var(--text-base);color:var(--color-text-muted);}
.section__body{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.6;}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.step{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-sm);}
.step__num{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-primary);display:block;margin-bottom:var(--space-4);}
.step__title{font-size:var(--text-lg);margin-bottom:var(--space-2);}
.step p{color:var(--color-text-muted);font-size:var(--text-sm);}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.feature{padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);}
.feature h3{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);margin-bottom:var(--space-2);}
.feature p{color:var(--color-text-muted);font-size:var(--text-sm);}

/* Compare table */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface);box-shadow:var(--shadow-sm);}
.compare{width:100%;border-collapse:collapse;min-width:640px;font-size:var(--text-sm);}
.compare th,.compare td{padding:var(--space-4) var(--space-5);text-align:left;border-bottom:1px solid var(--color-divider);}
.compare thead th{font-family:var(--font-display);font-weight:600;font-size:var(--text-base);color:var(--color-text);}
.compare tbody th{font-weight:600;color:var(--color-text);}
.compare td{color:var(--color-text-muted);}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:none;}
.compare__us{background:var(--color-primary-soft);color:var(--color-text)!important;}
.compare thead .compare__us{color:var(--color-primary);}
.compare__us strong{color:var(--color-primary);}
.compare .yes{color:var(--color-success);font-weight:600;}
.compare .no{color:var(--color-no);}
.compare__foot{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-4);}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);align-items:start;}
.pricing--single{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}
.plan{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm);position:relative;}
.plan--featured{border-color:var(--color-primary);box-shadow:var(--shadow-md);}
.plan__tag{position:absolute;top:calc(-1*var(--space-3));left:50%;transform:translateX(-50%);background:var(--color-primary);color:#fff;font-size:var(--text-xs);font-weight:700;padding:.3em 1em;border-radius:var(--radius-full);white-space:nowrap;}
.plan__name{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);color:var(--color-text-muted);margin-bottom:var(--space-3);}
.plan__price{margin-bottom:var(--space-6);display:flex;align-items:baseline;gap:var(--space-2);}
.plan__amt{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--color-text);}
.plan__per{font-size:var(--text-sm);color:var(--color-text-faint);}
.plan__list{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-8);font-size:var(--text-sm);color:var(--color-text-muted);}
.plan__list li{position:relative;padding-left:1.6em;}
.plan__list li::before{content:"";position:absolute;left:0;top:.45em;width:.8em;height:.45em;border-left:2px solid var(--color-success);border-bottom:2px solid var(--color-success);transform:rotate(-45deg);}
.plan--addon .plan__list li::before{border-color:var(--color-text-faint);}
.pricing__foot{text-align:center;margin-top:var(--space-10);font-size:var(--text-sm);color:var(--color-text-muted);}

/* Final CTA */
.cta{padding-block:clamp(var(--space-20),10vw,var(--space-32));background:linear-gradient(135deg in oklab,var(--color-primary),var(--color-accent));color:#fff;}
.cta__title{font-size:var(--text-2xl);color:#fff;margin-bottom:var(--space-4);}
.cta__body{font-size:var(--text-lg);color:rgba(255,255,255,.9);margin-bottom:var(--space-8);}
.cta .btn--primary{background:#fff;color:var(--color-primary);}
.cta .btn--primary:hover{background:#eef4ff;}

/* Footer */
.footer{background:var(--color-surface-2);border-top:1px solid var(--color-divider);padding-block:var(--space-12);}
.footer__inner{display:grid;gap:var(--space-6);}
.footer__brand .brand__name{display:block;margin-bottom:var(--space-2);}
.footer__brand p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:36rem;}
.footer__legal{font-size:var(--text-xs);color:var(--color-text-faint);max-width:60rem;line-height:1.6;}

/* Responsive */
@media (max-width:880px){
  .steps,.features,.pricing{grid-template-columns:1fr;}
  .nav{display:none;}
}
@media (max-width:520px){
  .flow{gap:var(--space-2);}
  .flow__arrow{transform:rotate(90deg);}
  .hero__cta .btn{width:100%;}
}