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

/* ===================== tokens/colors.css ===================== */
/* ============================================================
   Scutex — Color tokens
   Dark-first hosting brand. Electric green leads; amber + blue support.
   WHMCS-friendly: every brand color is a flat hex custom property so a
   WHMCS theme can remap --sx-accent etc. without touching components.
   ============================================================ */
:root {
  /* --- Base brand palette (raw values) --- */
  --sx-navy-900: #0A0F1C;   /* page base */
  --sx-navy-850: #0C1322;   /* deep panel */
  --sx-navy-800: #111827;   /* card surface */
  --sx-navy-750: #161F30;   /* raised surface / hover */
  --sx-navy-700: #1F2937;   /* border / hairline */
  --sx-navy-600: #2B3648;   /* strong border */

  --sx-green-500: #00D97E;  /* primary accent — electric green */
  --sx-green-400: #2BE89A;  /* hover / lighter */
  --sx-green-600: #00B368;  /* pressed / darker */
  --sx-amber-500: #F5A623;  /* secondary accent — amber/gold */
  --sx-amber-400: #FFBD4D;
  --sx-blue-500:  #2979FF;  /* CTA blue */
  --sx-blue-400:  #5596FF;
  --sx-blue-600:  #1E63E0;

  --sx-white:     #F9FAFB;  /* primary text */
  --sx-slate-300: #C4CBD6;  /* secondary text */
  --sx-slate-400: #9AA3B2;  /* tertiary text */
  --sx-slate-500: #6B7280;  /* muted text */

  --sx-red-500:   #FF5C5C;  /* danger */
  --sx-green-ok:  #00D97E;  /* success (alias of accent) */

  /* --- Semantic aliases (use these in components) --- */
  --bg-base:        var(--sx-navy-900);
  --bg-deep:        var(--sx-navy-850);
  --surface-card:   var(--sx-navy-800);
  --surface-raised: var(--sx-navy-750);
  --surface-glass:  rgba(17, 24, 39, 0.55);

  --border-subtle:  var(--sx-navy-700);
  --border-strong:  var(--sx-navy-600);
  --border-glass:   rgba(255, 255, 255, 0.08);

  --text-primary:   var(--sx-white);
  --text-secondary: var(--sx-slate-300);
  --text-tertiary:  var(--sx-slate-400);
  --text-muted:     var(--sx-slate-500);
  --text-on-accent: #04231A;     /* dark ink on green */
  --text-on-blue:   #F9FAFB;

  --accent:         var(--sx-green-500);
  --accent-hover:   var(--sx-green-400);
  --accent-press:   var(--sx-green-600);
  --accent-2:       var(--sx-amber-500);
  --cta:            var(--sx-blue-500);
  --cta-hover:      var(--sx-blue-400);
  --cta-press:      var(--sx-blue-600);

  --success: var(--sx-green-ok);
  --warning: var(--sx-amber-500);
  --danger:  var(--sx-red-500);

  /* --- Accent tints (low-alpha washes for glows + chips) --- */
  --accent-tint-08: rgba(0, 217, 126, 0.08);
  --accent-tint-14: rgba(0, 217, 126, 0.14);
  --accent-tint-24: rgba(0, 217, 126, 0.24);
  --cta-tint-12:    rgba(41, 121, 255, 0.12);
  --amber-tint-12:  rgba(245, 166, 35, 0.12);
}


/* ===================== tokens/typography.css ===================== */
/* ============================================================
   Scutex — Typography tokens
   Headings: Plus Jakarta Sans (700/800). Body: Inter (400/500/600).
   Mono: JetBrains Mono (specs, server stats). Max 3 weights per family.
   ============================================================ */
:root {
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:    700;  /* @kind font */
  --fw-extra:   800;  /* @kind font */

  /* Type scale */
  --fs-display:  clamp(3rem, 1.5rem + 5vw, 5rem); /* @kind other */
  --fs-h1:       3rem;      /* 48 */
  --fs-h2:       2.25rem;   /* 36 */
  --fs-h3:       1.5rem;    /* 24 */
  --fs-h4:       1.25rem;   /* 20 */
  --fs-lead:     1.25rem;   /* 20 subtext */
  --fs-body:     1rem;      /* 16 */
  --fs-sm:       0.875rem;  /* 14 */
  --fs-xs:       0.75rem;   /* 12 labels */

  /* Line heights */
  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.2;   /* @kind font */
  --lh-normal:  1.5;   /* @kind font */
  --lh-relaxed: 1.65;  /* @kind font */

  /* Letter spacing */
  --ls-tighter: -0.03em;  /* @kind font */
  --ls-tight:   -0.015em; /* @kind font */
  --ls-normal:  0;        /* @kind font */
  --ls-wide:    0.02em;   /* @kind font */
  --ls-label:   0.08em;   /* @kind font */
}


/* ===================== tokens/spacing.css ===================== */
/* ============================================================
   Scutex — Spacing, radius, layout tokens
   4px base grid. Cards 12px radius, buttons 8px.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   8px;    /* buttons, inputs */
  --radius-md:   12px;   /* cards */
  --radius-lg:   16px;   /* large panels */
  --radius-xl:   24px;   /* hero panels */
  --radius-pill: 999px;

  /* Layout */
  --container:     1200px;
  --container-narrow: 880px;
  --gutter:        1.5rem; /* @kind spacing */
  --section-y:     6rem;   /* @kind spacing */

  /* Border widths */
  --bw-hairline: 1px;   /* @kind spacing */
  --bw-thick:    1.5px; /* @kind spacing */
}


/* ===================== tokens/effects.css ===================== */
/* ============================================================
   Scutex — Shadows, glows, blur, motion
   Dark UI: shadows are deep + soft; "elevation" is mostly green glow.
   ============================================================ */
:root {
  /* Elevation shadows (cool, deep) */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.55);

  /* Glows — the brand's signature elevation */
  --glow-green: 0 0 0 1px var(--accent-tint-24), 0 12px 40px rgba(0, 217, 126, 0.22);
  --glow-green-soft: 0 10px 50px rgba(0, 217, 126, 0.16);
  --glow-blue:  0 12px 40px rgba(41, 121, 255, 0.30);
  --glow-amber: 0 12px 40px rgba(245, 166, 35, 0.22);

  /* Inner hairline for glass cards */
  --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Blur */
  --blur-glass: 14px; /* @kind other */

  /* Radial background washes */
  --wash-green: radial-gradient(60% 60% at 50% 0%, rgba(0, 217, 126, 0.16), transparent 70%); /* @kind other */
  --wash-green-corner: radial-gradient(40% 50% at 100% 0%, rgba(0, 217, 126, 0.12), transparent 70%); /* @kind other */

  /* Grid / dot patterns (hero backgrounds) */
  --pattern-grid:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); /* @kind other */
  --pattern-grid-size: 56px 56px; /* @kind other */
  --pattern-dots: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); /* @kind other */
  --pattern-dots-size: 22px 22px; /* @kind other */

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 130ms; /* @kind other */
  --dur: 220ms;      /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}


/* ===================== tokens/base.css ===================== */
/* ============================================================
   Scutex — Base element defaults (optional reset layer)
   Consumers get sensible dark defaults + body type from tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

code, kbd, samp, pre { font-family: var(--font-mono); }

::selection { background: var(--accent-tint-24); color: var(--text-primary); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}


/* ===================== _components_extracted.css ===================== */
/* ===== Badge.jsx ===== */
.sx-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-body); font-weight:var(--fw-semibold);
  font-size:var(--fs-xs); letter-spacing:var(--ls-wide); line-height:1;
  padding:.4em .7em; border-radius:var(--radius-pill);
  border:1px solid transparent; white-space:nowrap;
}
.sx-badge--dot::before{ content:""; width:.5em; height:.5em; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.sx-badge--accent{ color:var(--accent); background:var(--accent-tint-14); border-color:var(--accent-tint-24); }
.sx-badge--blue{ color:var(--cta-hover); background:var(--cta-tint-12); border-color:rgba(41,121,255,.28); }
.sx-badge--amber{ color:var(--accent-2); background:var(--amber-tint-12); border-color:rgba(245,166,35,.28); }
.sx-badge--neutral{ color:var(--text-secondary); background:rgba(255,255,255,.05); border-color:var(--border-subtle); }
.sx-badge--solid{ color:var(--text-on-accent); background:var(--accent); }

/* ===== Button.jsx ===== */
.sx-btn{
  --_bg: var(--accent); --_fg: var(--text-on-accent); --_bd: transparent; --_glow: var(--glow-green);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-body); font-weight:var(--fw-semibold); letter-spacing:var(--ls-wide);
  border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap; text-decoration:none;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), opacity var(--dur);
}
.sx-btn:hover{ transform: translateY(-1px); }
.sx-btn:active{ transform: translateY(0) scale(.985); }
.sx-btn:disabled,.sx-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.sx-btn--sm{ font-size:var(--fs-sm); padding:.5rem .9rem; }
.sx-btn--md{ font-size:var(--fs-body); padding:.7rem 1.25rem; }
.sx-btn--lg{ font-size:1.0625rem; padding:.95rem 1.6rem; }
.sx-btn--block{ width:100%; }

.sx-btn--primary{ --_bg:var(--accent); --_fg:var(--text-on-accent); }
.sx-btn--primary:hover{ --_bg:var(--accent-hover); box-shadow:var(--glow-green); }
.sx-btn--primary:active{ --_bg:var(--accent-press); }

.sx-btn--cta{ --_bg:var(--cta); --_fg:var(--text-on-blue); }
.sx-btn--cta:hover{ --_bg:var(--cta-hover); box-shadow:var(--glow-blue); }
.sx-btn--cta:active{ --_bg:var(--cta-press); }

.sx-btn--secondary{ --_bg:rgba(255,255,255,.04); --_fg:var(--text-primary); --_bd:var(--border-strong); }
.sx-btn--secondary:hover{ --_bg:rgba(255,255,255,.08); --_bd:var(--accent); box-shadow:var(--glow-green-soft); }

.sx-btn--ghost{ --_bg:transparent; --_fg:var(--text-secondary); --_bd:transparent; }
.sx-btn--ghost:hover{ --_bg:rgba(255,255,255,.05); --_fg:var(--text-primary); }
.sx-btn__icon{ display:inline-flex; width:1.1em; height:1.1em; }

/* ===== Card.jsx ===== */
.sx-card{
  position:relative; border-radius:var(--radius-md);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-md), var(--inset-hairline);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sx-card--glass{
  background:var(--surface-glass); -webkit-backdrop-filter:blur(var(--blur-glass)); backdrop-filter:blur(var(--blur-glass));
  border-color:var(--border-glass);
}
.sx-card--pad-sm{ padding:var(--space-4); }
.sx-card--pad-md{ padding:var(--space-5); }
.sx-card--pad-lg{ padding:var(--space-6); }
.sx-card--hover:hover{ transform:translateY(-3px); border-color:var(--accent-tint-24); box-shadow:var(--glow-green-soft); }
.sx-card--glow{ border-color:var(--accent-tint-24); box-shadow:var(--glow-green); }

/* ===== Input.jsx ===== */
.sx-field{ display:flex; flex-direction:column; gap:.45rem; font-family:var(--font-body); }
.sx-field__label{ font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-secondary); }
.sx-field__req{ color:var(--accent); margin-left:.15em; }
.sx-input-wrap{ position:relative; display:flex; align-items:center; }
.sx-input{
  width:100%; font-family:var(--font-body); font-size:var(--fs-body); color:var(--text-primary);
  background:var(--bg-deep); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:.7rem .9rem; transition:border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.sx-input::placeholder{ color:var(--text-muted); }
.sx-input:hover{ border-color:var(--sx-navy-600); }
.sx-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint-14); background:var(--bg-base); }
.sx-input--icon{ padding-left:2.5rem; }
.sx-input--err{ border-color:var(--danger); }
.sx-input--err:focus{ box-shadow:0 0 0 3px rgba(255,92,92,.16); }
.sx-input__icon{ position:absolute; left:.85rem; width:1.1rem; height:1.1rem; color:var(--text-muted); display:inline-flex; pointer-events:none; }
.sx-field__hint{ font-size:var(--fs-xs); color:var(--text-muted); }
.sx-field__hint--err{ color:var(--danger); }

/* ===== Logo.jsx ===== */
.sx-logo{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-display); text-decoration:none; color:var(--text-primary); }
.sx-logo__mark{ display:inline-flex; flex:none; }
.sx-logo__word{ font-weight:var(--fw-extra); letter-spacing:var(--ls-tight); line-height:1; }
.sx-logo__tld{ color:var(--text-muted); font-weight:var(--fw-bold); }
.sx-logo--sm .sx-logo__word{ font-size:1.05rem; }
.sx-logo--md .sx-logo__word{ font-size:1.35rem; }
.sx-logo--lg .sx-logo__word{ font-size:1.75rem; }

/* ===== FeatureCard.jsx ===== */
.sx-feature{
  position:relative; display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-5); border-radius:var(--radius-md);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  box-shadow:var(--inset-hairline);
  transition:transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.sx-feature:hover{ transform:translateY(-3px); border-color:var(--accent-tint-24); box-shadow:var(--glow-green-soft); }
.sx-feature__icon{
  width:2.75rem; height:2.75rem; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--accent);
  background:var(--accent-tint-08); border:1px solid var(--accent-tint-24);
}
.sx-feature__icon svg{ width:1.4rem; height:1.4rem; }
.sx-feature--amber .sx-feature__icon{ color:var(--accent-2); background:var(--amber-tint-12); border-color:rgba(245,166,35,.28); }
.sx-feature--blue .sx-feature__icon{ color:var(--cta-hover); background:var(--cta-tint-12); border-color:rgba(41,121,255,.28); }
.sx-feature__title{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-h4); color:var(--text-primary); }
.sx-feature__body{ font-size:var(--fs-sm); line-height:var(--lh-relaxed); color:var(--text-tertiary); }

/* ===== PricingCard.jsx ===== */
.sx-plan{
  position:relative; display:flex; flex-direction:column; gap:var(--space-4);
  padding:var(--space-6); border-radius:var(--radius-md);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-md), var(--inset-hairline);
  transition:transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.sx-plan:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.sx-plan--featured{
  border-color:var(--accent-tint-24);
  box-shadow:var(--glow-green), var(--inset-hairline);
  background:linear-gradient(180deg, var(--accent-tint-08), transparent 40%), var(--surface-card);
}
.sx-plan--featured:hover{ box-shadow:var(--glow-green); }
.sx-plan__badge{ position:absolute; top:-.85rem; left:var(--space-6); }
.sx-plan__name{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-h4); color:var(--text-primary); }
.sx-plan__desc{ font-size:var(--fs-sm); color:var(--text-tertiary); margin-top:-.4rem; }
.sx-plan__price{ display:flex; align-items:baseline; gap:.3rem; margin-top:.25rem; }
.sx-plan__cur{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:1.25rem; color:var(--text-secondary); align-self:flex-start; margin-top:.45rem; }
.sx-plan__amt{ font-family:var(--font-display); font-weight:var(--fw-extra); font-size:3rem; line-height:1; letter-spacing:var(--ls-tight); color:var(--text-primary); }
.sx-plan__per{ font-size:var(--fs-sm); color:var(--text-muted); }
.sx-plan__rule{ height:1px; background:var(--border-subtle); border:0; margin:.25rem 0; }
.sx-plan__features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.sx-plan__feature{ display:flex; gap:.6rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--text-secondary); }
.sx-plan__feature svg{ width:1.05rem; height:1.05rem; flex:none; margin-top:.1rem; color:var(--accent); }
.sx-plan__feature--mono{ font-family:var(--font-mono); color:var(--text-tertiary); }
.sx-plan__cta{ margin-top:auto; }

/* ===== SectionLabel.jsx ===== */
.sx-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--accent);
}
.sx-eyebrow::before{ content:""; width:1.5rem; height:1px; background:linear-gradient(90deg,transparent,var(--accent)); }
.sx-eyebrow--plain::before{ display:none; }
.sx-eyebrow--muted{ color:var(--text-tertiary); }
.sx-eyebrow--center{ justify-content:center; }

/* ===== StatBlock.jsx ===== */
.sx-stat{ display:flex; flex-direction:column; gap:.35rem; }
.sx-stat--center{ align-items:center; text-align:center; }
.sx-stat__value{
  font-family:var(--font-display); font-weight:var(--fw-extra); line-height:1;
  font-size:2.5rem; letter-spacing:var(--ls-tight); color:var(--text-primary);
  display:flex; align-items:baseline; gap:.1em;
}
.sx-stat__value .sx-stat__suffix{ color:var(--accent); font-size:.7em; }
.sx-stat__label{ font-size:var(--fs-sm); color:var(--text-tertiary); }
.sx-stat--sm .sx-stat__value{ font-size:1.9rem; }
.sx-stat--lg .sx-stat__value{ font-size:3.25rem; }

/* ===================== ui_kits/website/kit.css ===================== */
/* ============================================================
   Scutex website UI kit — layout styles (tokens come from styles.css)
   ============================================================ */
.kit-root{ background:var(--bg-base); color:var(--text-primary); min-height:100%; }
.kit-container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

/* ---- Nav ---- */
.kit-nav{ position:sticky; top:0; z-index:40; background:rgba(10,15,28,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-subtle); }
.kit-nav__inner{ display:flex; align-items:center; gap:2rem; height:72px; }
.kit-nav__brand{ cursor:pointer; }
.kit-nav__links{ display:flex; gap:.35rem; margin-left:1rem; }
.kit-nav__link{ cursor:pointer; font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--text-tertiary); padding:.5rem .8rem; border-radius:var(--radius-sm);
  transition:color var(--dur), background var(--dur); }
.kit-nav__link:hover{ color:var(--text-primary); background:rgba(255,255,255,.04); }
.kit-nav__link.is-active{ color:var(--accent); }
.kit-nav__actions{ margin-left:auto; display:flex; align-items:center; gap:1rem; }
.kit-nav__login{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-secondary); }
.kit-nav__login:hover{ color:var(--text-primary); }
.kit-nav__burger{ display:none; background:none; border:0; color:var(--text-primary); cursor:pointer; padding:.3rem; }
.kit-nav__mobile{ display:none; flex-direction:column; padding:.5rem var(--gutter) 1rem; gap:.2rem;
  border-top:1px solid var(--border-subtle); background:var(--bg-deep); }

/* ---- Hero ---- */
.kit-hero{ position:relative; overflow:hidden; padding:96px 0 80px; }
.kit-hero__grid{ position:absolute; inset:0; background-image:var(--pattern-grid);
  background-size:var(--pattern-grid-size);
  -webkit-mask:radial-gradient(75% 70% at 50% 0%, #000 35%, transparent 78%);
  mask:radial-gradient(75% 70% at 50% 0%, #000 35%, transparent 78%); }
.kit-hero__glow{ position:absolute; inset:0; background:var(--wash-green); pointer-events:none; }
.kit-hero__inner{ position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1.5rem; }
.kit-hero__title{ font-size:clamp(2.75rem, 1.5rem + 5vw, 4.75rem); font-weight:var(--fw-extra);
  letter-spacing:var(--ls-tighter); line-height:1.02; margin:.4rem 0 0; }
.kit-grad{ background:linear-gradient(100deg, var(--accent) 10%, #6FF3C0 60%, var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kit-hero__sub{ max-width:640px; font-size:var(--fs-lead); color:var(--text-tertiary); line-height:var(--lh-relaxed); }
.kit-hero__cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }
.kit-hero__meta{ display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem;
  font-size:var(--fs-sm); color:var(--text-muted); }
.kit-hero__meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.kit-hero__meta svg{ color:var(--accent); }

/* ---- Stats bar ---- */
.kit-stats{ border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
  background:var(--bg-deep); }
.kit-stats__inner{ display:grid; grid-template-columns:repeat(4,1fr); }
.kit-stats__cell{ padding:2.25rem 1rem; text-align:center; border-right:1px solid var(--border-subtle); }
.kit-stats__cell .sx-stat{ align-items:center; }
.kit-stats__cell:last-child{ border-right:0; }

/* ---- Generic section ---- */
.kit-section{ padding:var(--section-y) 0; }
.kit-section--tight{ padding:3rem 0 var(--section-y); }
.kit-section__head{ margin-bottom:3rem; display:flex; flex-direction:column; gap:1rem; }
.kit-section__head--center{ align-items:center; text-align:center; }
.kit-h2{ font-size:clamp(2rem, 1.2rem + 2.4vw, 2.85rem); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight); line-height:1.1; }
.kit-h3{ font-size:var(--fs-h3); font-weight:var(--fw-bold); margin:0 0 1.25rem; }
.kit-section__lede{ max-width:620px; color:var(--text-tertiary); font-size:var(--fs-lead); line-height:var(--lh-relaxed); }
.kit-section__head--center .kit-section__lede{ margin:0 auto; }

/* ---- Features ---- */
.kit-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }

/* ---- Plans ---- */
.kit-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:start; padding-top:1rem; }
.kit-plans__foot{ text-align:center; margin-top:2.5rem; }
.kit-plans__note, .kit-plans__foot{ color:var(--text-muted); font-size:var(--fs-sm); }
.kit-plans__note{ text-align:center; margin-top:2rem; }
.kit-textlink{ cursor:pointer; color:var(--accent); font-weight:var(--fw-semibold); font-size:var(--fs-body); }
.kit-textlink:hover{ color:var(--accent-hover); }
.kit-switch{ display:inline-flex; gap:.25rem; padding:.3rem; border-radius:var(--radius-pill);
  background:var(--surface-card); border:1px solid var(--border-subtle); margin:0 auto; }
.kit-switch__btn{ cursor:pointer; border:0; background:none; color:var(--text-tertiary);
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  padding:.6rem 1.15rem; border-radius:var(--radius-pill); transition:all var(--dur); }
.kit-switch__btn:hover{ color:var(--text-primary); }
.kit-switch__btn.is-active{ background:var(--accent); color:var(--text-on-accent); }

/* ---- Coverage map ---- */
.kit-coverage__inner{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.kit-coverage__list{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.1rem; }
.kit-coverage__item{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:.85rem;
  padding:.7rem 0; border-bottom:1px solid var(--border-subtle); }
.kit-coverage__city{ font-weight:var(--fw-semibold); }
.kit-coverage__country{ color:var(--text-muted); font-size:var(--fs-sm); }
.kit-coverage__status{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent); }
.kit-coverage__status.is-soon{ color:var(--text-muted); }
.kit-coverage__map{ position:relative; }
.kit-coverage__svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 0 50px rgba(0,217,126,.12)); }
.kit-pin{ position:absolute; transform:translate(-50%,-50%); width:14px; height:14px; }
.kit-pin__core{ position:absolute; inset:4px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.kit-pin.is-soon .kit-pin__core{ background:var(--text-muted); box-shadow:none; }
.kit-pin__ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--accent); opacity:.7;
  animation:pinPulse 2.4s var(--ease-out) infinite; }
.kit-pin.is-soon .kit-pin__ring{ display:none; }
@keyframes pinPulse{ 0%{ transform:scale(.5); opacity:.8; } 100%{ transform:scale(2.4); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .kit-pin__ring{ animation:none; } }

/* ---- Status dot ---- */
.kit-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-muted); display:inline-block; flex:none; }
.kit-dot.is-live{ background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* ---- Trust ---- */
.kit-logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem 3.5rem; margin:0 auto 3.5rem;
  opacity:.62; }
.kit-logos__item{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:1.4rem;
  letter-spacing:var(--ls-tight); color:var(--text-secondary); }
.kit-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.kit-quote{ display:flex; flex-direction:column; gap:1rem; }
.kit-quote__stars{ display:flex; gap:.15rem; color:var(--accent-2); }
.kit-quote__text{ color:var(--text-secondary); line-height:var(--lh-relaxed); font-size:1.0625rem; }
.kit-quote__by{ display:flex; align-items:center; gap:.75rem; margin-top:auto; }
.kit-avatar{ width:42px; height:42px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:.9rem; color:var(--text-on-accent);
  background:linear-gradient(140deg, var(--accent), var(--accent-press)); }
.kit-quote__name{ display:block; font-weight:var(--fw-semibold); font-size:var(--fs-sm); }
.kit-quote__role{ display:block; color:var(--text-muted); font-size:var(--fs-xs); }

/* ---- CTA banner ---- */
.kit-cta{ position:relative; overflow:hidden; border-radius:var(--radius-xl);
  background:linear-gradient(135deg, #00C26F, #00A862); padding:4rem 3rem; }
.kit-cta__grid{ position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(4,35,26,.18) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(4,35,26,.18) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask:radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
  mask:radial-gradient(80% 100% at 100% 0%, #000, transparent 70%); }
.kit-cta__inner{ position:relative; max-width:640px; }
.kit-cta__title{ font-size:clamp(2rem, 1.4rem + 2vw, 3rem); font-weight:var(--fw-extra);
  letter-spacing:var(--ls-tight); color:#04231A; }
.kit-cta__sub{ color:rgba(4,35,26,.78); font-size:var(--fs-lead); line-height:var(--lh-relaxed); margin-top:1rem; }
.kit-cta__actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.75rem; }
.kit-cta__link{ cursor:pointer; font-weight:var(--fw-bold); color:#04231A; }
.kit-cta__link:hover{ text-decoration:underline; }

/* ---- Footer ---- */
.kit-footer{ border-top:1px solid var(--border-subtle); background:var(--bg-deep); padding-top:4rem; }
.kit-footer__inner{ display:grid; grid-template-columns:1.3fr 2fr; gap:3rem; padding-bottom:3rem; }
.kit-footer__tag{ color:var(--text-muted); font-size:var(--fs-sm); line-height:var(--lh-relaxed); margin-top:1rem; max-width:300px; }
.kit-footer__social{ display:flex; gap:.6rem; margin-top:1.25rem; }
.kit-footer__social a{ width:38px; height:38px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-tertiary); border:1px solid var(--border-subtle); background:var(--surface-card); transition:all var(--dur); cursor:pointer; }
.kit-footer__social a:hover{ color:var(--accent); border-color:var(--accent-tint-24); }
.kit-footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.kit-footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.kit-footer__col-title{ font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--text-muted); margin-bottom:.3rem; }
.kit-footer__link{ cursor:pointer; color:var(--text-tertiary); font-size:var(--fs-sm); transition:color var(--dur); }
.kit-footer__link:hover{ color:var(--text-primary); }
.kit-footer__bar{ display:flex; justify-content:space-between; align-items:center; padding:1.5rem var(--gutter);
  margin-top:0; border-top:1px solid var(--border-subtle); color:var(--text-muted); font-size:var(--fs-sm); }
.kit-footer__bar-meta{ display:inline-flex; align-items:center; gap:.5rem; }

/* ---- Page heads ---- */
.kit-pagehead{ position:relative; overflow:hidden; padding:80px 0 56px; border-bottom:1px solid var(--border-subtle); }
.kit-pagehead--sm{ padding:72px 0 48px; }
.kit-pagehead__inner{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1rem; }
.kit-pagehead__title{ font-size:clamp(2.4rem, 1.5rem + 3.5vw, 3.6rem); font-weight:var(--fw-extra);
  letter-spacing:var(--ls-tighter); line-height:1.04; }
.kit-pagehead__sub{ max-width:620px; color:var(--text-tertiary); font-size:var(--fs-lead); line-height:var(--lh-relaxed); }

/* ---- FAQ ---- */
.kit-faq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.kit-faq__q{ font-weight:var(--fw-semibold); font-size:1.0625rem; margin-bottom:.6rem; }
.kit-faq__a{ color:var(--text-tertiary); line-height:var(--lh-relaxed); font-size:var(--fs-sm); }

/* ---- About ---- */
.kit-about__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; text-align:center;
  padding:2.5rem; border-radius:var(--radius-lg); background:var(--bg-deep); border:1px solid var(--border-subtle); }
.kit-about__stats .sx-stat{ align-items:center; }
.kit-values{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.kit-value{ display:flex; flex-direction:column; gap:.75rem; }
.kit-value__icon{ width:46px; height:46px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center;
  color:var(--accent); background:var(--accent-tint-08); border:1px solid var(--accent-tint-24); }
.kit-value__title{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-h4); }
.kit-value__body{ color:var(--text-tertiary); line-height:var(--lh-relaxed); font-size:var(--fs-sm); }

/* ---- Contact ---- */
.kit-contact{ display:grid; grid-template-columns:1fr 1.4fr; gap:2rem; align-items:start; }
.kit-contact__methods{ display:flex; flex-direction:column; gap:1rem; }
.kit-contact__method{ display:flex; gap:1rem; align-items:flex-start; }
.kit-contact__m-title{ font-weight:var(--fw-semibold); }
.kit-contact__m-body{ color:var(--text-secondary); font-size:var(--fs-sm); margin-top:.15rem; }
.kit-contact__m-meta{ color:var(--text-muted); font-size:var(--fs-xs); margin-top:.25rem; }
.kit-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.kit-contact__form form{ display:flex; flex-direction:column; gap:1rem; }
.kit-field{ display:flex; flex-direction:column; gap:.45rem; }
.kit-field__label{ font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-secondary); }
.kit-textarea{ width:100%; font-family:var(--font-body); font-size:var(--fs-body); color:var(--text-primary);
  background:var(--bg-deep); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:.7rem .9rem; resize:vertical; transition:border-color var(--dur), box-shadow var(--dur); }
.kit-textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint-14); }
.kit-textarea::placeholder{ color:var(--text-muted); }
.kit-contact__sent{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:1.5rem 0; }
.kit-contact__sent-icon{ color:var(--accent); }
.kit-contact__sent p{ color:var(--text-tertiary); max-width:340px; }

/* ---- Responsive ---- */
@media (max-width: 920px){
  .kit-nav__links{ display:none; }
  .kit-nav__login{ display:none; }
  .kit-nav__burger{ display:inline-flex; }
  .kit-nav__mobile{ display:flex; }
  .kit-features, .kit-plans, .kit-quotes{ grid-template-columns:1fr; }
  .kit-stats__inner{ grid-template-columns:1fr 1fr; }
  .kit-stats__cell:nth-child(2){ border-right:0; }
  .kit-stats__cell{ border-bottom:1px solid var(--border-subtle); }
  .kit-coverage__inner{ grid-template-columns:1fr; }
  .kit-coverage__map{ max-width:380px; margin:0 auto; }
  .kit-footer__inner{ grid-template-columns:1fr; }
  .kit-footer__cols{ grid-template-columns:1fr 1fr; }
  .kit-faq__grid, .kit-values, .kit-about__stats, .kit-contact, .kit-form__row{ grid-template-columns:1fr; }
}

/* ===================== legal / prose pages ===================== */
.kit-legal{ max-width:var(--container-narrow); margin:0 auto; }
.kit-legal__lead{ font-size:var(--fs-lead); color:var(--text-tertiary); line-height:var(--lh-relaxed); margin:0 0 2rem; }
.kit-legal h2{ font-size:var(--fs-h3); font-family:var(--font-display); font-weight:var(--fw-bold); letter-spacing:var(--ls-tight); margin:2.5rem 0 .85rem; }
.kit-legal h3{ font-size:var(--fs-h4); font-family:var(--font-display); font-weight:var(--fw-bold); color:var(--text-primary); margin:1.75rem 0 .5rem; }
.kit-legal p{ color:var(--text-secondary); line-height:var(--lh-relaxed); font-size:var(--fs-body); margin:0 0 1rem; }
.kit-legal ul, .kit-legal ol{ margin:0 0 1.25rem; padding-left:1.3rem; display:flex; flex-direction:column; gap:.5rem; }
.kit-legal li{ color:var(--text-secondary); line-height:var(--lh-relaxed); }
.kit-legal a{ color:var(--accent); }
.kit-legal a:hover{ color:var(--accent-hover); }
.kit-legal strong{ color:var(--text-primary); font-weight:var(--fw-semibold); }
.kit-legal table{ width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:var(--fs-sm); }
.kit-legal th, .kit-legal td{ text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); vertical-align:top; }
.kit-legal th{ color:var(--text-primary); font-weight:var(--fw-semibold); }
.kit-legal__rule{ height:1px; background:var(--border-subtle); border:0; margin:2.5rem 0 1.5rem; }
.kit-legal__foot{ color:var(--text-muted); font-size:var(--fs-sm); }
.kit-legal__toc{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; padding:0; list-style:none; }
.kit-legal__toc a{ font-size:var(--fs-sm); color:var(--text-tertiary); border:1px solid var(--border-subtle); background:var(--surface-card); padding:.3rem .7rem; border-radius:var(--radius-pill); }
.kit-legal__toc a:hover{ color:var(--text-primary); border-color:var(--border-strong); }