/* ============================================================
   Score Guardians — shared.css  (V3 futuristic restyle)
   Concept: "Three guardians, one shield" — a live credit-
   monitoring console. Obsidian base, holographic aqua→violet→
   magenta signature, telemetry-style mono readouts.

   This file = V3's design system (tokens/base/components,
   copied from the V3 source) + a LEGACY TOKEN BRIDGE so the
   existing /revised/ portal, admin, plans, and products pages
   render in the V3 look without being rewritten.
   ============================================================ */

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

:root {
  /* base */
  --obsidian: #06070d;
  --panel:    #0c0f1d;
  --panel-2:  #11152a;
  --line:     rgba(255,255,255,0.08);
  --line-2:   rgba(255,255,255,0.14);

  /* holographic signature */
  --aqua:    #2ff3c8;
  --violet:  #8a7bff;
  --magenta: #ff6ad5;
  --gold:    #ffd166;
  --grad:    linear-gradient(100deg, var(--aqua) 0%, var(--violet) 55%, var(--magenta) 100%);
  --grad-soft: linear-gradient(100deg, rgba(47,243,200,0.16), rgba(138,123,255,0.16) 55%, rgba(255,106,213,0.16));

  /* text */
  --ink:    #f1f4ff;
  --muted:  #8b94b4;
  --muted-2: #616c8f;

  /* type */
  --display: 'Space Grotesk', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --radius: 16px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--obsidian);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Ambient console grid + glow */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 78% -5%, rgba(138,123,255,0.16), transparent 60%),
    radial-gradient(800px 520px at 10% 8%, rgba(47,243,200,0.12), transparent 60%),
    linear-gradient(transparent 0 96%, rgba(255,255,255,0.025) 96%) 0 0 / 100% 46px,
    linear-gradient(90deg, transparent 0 96%, rgba(255,255,255,0.025) 96%) 0 0 / 46px 100%;
}
.bg-noise::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--aqua); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   TYPE SCALE
   ============================================================ */
h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--aqua);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--aqua); opacity: 0.7;
}
.grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn-primary { position: relative; color: #04130f; background: var(--grad); box-shadow: 0 8px 30px -10px rgba(47,243,200,0.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(138,123,255,0.7); }
.btn-ghost { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,0.02); }
.btn-ghost:hover { border-color: var(--aqua); color: var(--aqua); background: rgba(47,243,200,0.06); }
.btn-lg { font-size: 1rem; padding: 16px 30px; }
.btn-block { width: 100%; justify-content: center; }

/* ============================================================
   NAV
   ============================================================ */
#sg-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 5vw, 48px); height: 70px;
  background: rgba(6,7,13,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
#sg-nav .logo { display: flex; align-items: center; gap: 10px; }
#sg-nav .logo img { height: 30px; width: auto; }
#sg-nav .logo b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { color: var(--muted); font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-right .btn { padding: 9px 18px; font-size: 0.88rem; }
.nav-burger { display: none; background: none; border: none; color: var(--ink); font-size: 1.5rem; cursor: pointer; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; }
section { position: relative; z-index: 1; padding: clamp(72px, 10vw, 116px) clamp(18px, 5vw, 48px); }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 16px 0 14px; }
.section-head p { color: var(--muted); font-size: 1.06rem; font-weight: 300; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Glass panel */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--line); border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.glass::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--grad-soft); opacity: 0.9; }

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero { position: relative; z-index: 1; padding: 132px clamp(18px,5vw,48px) 48px; text-align: center; }
.page-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin: 16px auto 16px; max-width: 16ch; }
.page-hero p { color: var(--muted); font-size: 1.05rem; font-weight: 300; max-width: 620px; margin: 0 auto; }

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.faq-groups { display: flex; flex-direction: column; gap: 40px; }
.faq-group > h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 6px; font-family: var(--mono); font-weight: 500; letter-spacing: 0.04em; }
.accordion { display: flex; flex-direction: column; }
.ac-item { border-bottom: 1px solid var(--line); }
.ac-item:first-child { border-top: 1px solid var(--line); }
.ac-btn { width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; }
.ac-q { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--ink); transition: color 0.2s; }
.ac-btn:hover .ac-q { color: var(--aqua); }
.ac-icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.ac-icon::before, .ac-icon::after { content: ''; position: absolute; background: var(--aqua); transition: transform 0.3s var(--ease); }
.ac-icon::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.ac-icon::after  { top: 3px; left: 10px; width: 2px; height: 16px; }
.ac-item.open .ac-icon::after { transform: scaleY(0); }
.ac-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.ac-body-inner { padding: 0 4px 22px; color: var(--muted); font-size: 0.95rem; line-height: 1.75; }
.ac-body-inner p { margin-bottom: 12px; }
.ac-body-inner p:last-child { margin-bottom: 0; }
.ac-body-inner ul { margin: 8px 0 12px 20px; }
.ac-body-inner li { margin-bottom: 6px; }

/* ============================================================
   LEGAL / LONGFORM CONTENT
   ============================================================ */
.legal { max-width: 820px; margin: 0 auto; padding: 0 clamp(18px,5vw,48px) 110px; position: relative; z-index: 1; }
.legal h2 { font-size: 1.45rem; margin: 40px 0 14px; }
.legal h3 { font-size: 1.1rem; margin: 26px 0 10px; color: var(--aqua); font-family: var(--mono); font-weight: 500; }
.legal p, .legal li { color: var(--muted); font-size: 0.96rem; line-height: 1.8; margin-bottom: 14px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal strong { color: var(--ink); }
.legal .updated { font-family: var(--mono); font-size: 0.8rem; color: var(--muted-2); }
.legal .callout { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--aqua);
  border-radius: 10px; padding: 16px 20px; margin: 0 0 22px; }
.legal .callout p { margin: 0; color: var(--ink); font-size: 0.92rem; }

/* ============================================================
   COMPLIANCE DISCLOSURE BLOCKS
   ============================================================ */
.disclosure {
  font-size: 0.78rem; line-height: 1.6; color: var(--muted-2);
  border: 1px dashed var(--line-2); border-radius: 10px; padding: 14px 16px;
}
.disclosure strong { color: var(--muted); }
.rosca {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; text-align: left; font-size: 0.85rem; color: var(--muted); line-height: 1.65;
}
.rosca b { color: var(--ink); }

/* ============================================================
   SHARED COMPONENTS (used across home + interior pages)
   ============================================================ */

/* Feature cards */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { padding: 30px 26px; transition: transform 0.3s var(--ease), border-color 0.3s; }
.feature:hover { transform: translateY(-5px); border-color: var(--line-2); }
.feature .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
  background: var(--grad-soft); border: 1px solid var(--line-2); margin-bottom: 18px; }
.feature h3 { font-size: 1.12rem; margin-bottom: 9px; }
.feature p { color: var(--muted); font-size: 0.92rem; line-height: 1.65; }

/* Stat row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--obsidian); padding: 28px 22px; text-align: center; }
.stat .num { font-family: var(--mono); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--ink); letter-spacing: -0.02em; }
.stat .lbl { color: var(--muted); font-size: 0.8rem; margin-top: 6px; }

/* Numbered steps (legitimate sequence: enroll → verify → monitor) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step { padding: 30px 26px; }
.step .idx { font-family: var(--mono); font-size: 0.82rem; color: var(--aqua); letter-spacing: 0.1em; }
.step h3 { font-size: 1.1rem; margin: 14px 0 9px; }
.step p { color: var(--muted); font-size: 0.92rem; line-height: 1.65; }

/* Pricing / plan cards */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan-card { padding: 32px 28px; display: flex; flex-direction: column; }
.plan-featured { border-color: rgba(47,243,200,0.4); box-shadow: 0 30px 80px -40px rgba(47,243,200,0.5); }
.plan-badge { align-self: flex-start; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; background: var(--grad-soft); border: 1px solid var(--line-2); color: var(--ink); margin-bottom: 18px; }
.plan-name { font-size: 1.4rem; }
.plan-tag { color: var(--muted); font-size: 0.9rem; margin: 8px 0 20px; min-height: 40px; }
.plan-price { font-family: var(--display); font-weight: 700; font-size: 3.4rem; line-height: 1; letter-spacing: -0.03em; }
.plan-cur { font-size: 1.5rem; vertical-align: super; margin-right: 2px; }
.plan-cents { font-size: 1.5rem; }
.plan-price.plan-soon { font-size: 1.7rem; color: var(--muted); }
.plan-per { color: var(--muted-2); font-size: 0.82rem; margin: 6px 0 22px; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; flex: 1; }
.plan-feats li { position: relative; padding-left: 26px; color: var(--ink); font-size: 0.9rem; }
.plan-feats li::before { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 8px;
  border-left: 2px solid var(--aqua); border-bottom: 2px solid var(--aqua); transform: rotate(-45deg); }

/* Compare table */
.compare { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.compare th { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.compare th.us, .compare td.us { background: rgba(47,243,200,0.05); color: var(--ink); }
.compare td:first-child, .compare th:first-child { text-align: left; color: var(--ink); }
.compare tr:last-child td { border-bottom: none; }
.compare .yes { color: var(--aqua); font-weight: 700; }
.compare .no { color: var(--muted-2); }

/* CTA band */
.cta-band { text-align: center; padding: clamp(40px, 6vw, 64px); }
.cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 14px; }
.cta-band p { color: var(--muted); max-width: 540px; margin: 0 auto 28px; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes pulse { 0%,100%{ opacity: 1; transform: scale(1);} 50%{ opacity: 0.35; transform: scale(0.7);} }
@keyframes floatUp { from { opacity: 0; transform: translateY(26px);} to { opacity: 1; transform: translateY(0);} }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes ring { from { stroke-dashoffset: var(--len); } }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

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

/* ============================================================
   ██  LEGACY TOKEN BRIDGE  ███████████████████████████████████
   The existing /revised/ pages (index, plans, products, portal/*,
   admin/*, contact, terms, cancellation, faq) and config.js's
   skin applier still reference the OLD "V2" token names. Rather
   than rewrite every page, we alias the old names to V3 values so
   they inherit the V3 look automatically. config.js applies a skin
   by setting these same var names inline on <html>; its "v3" skin
   is set to V3 values, so the inline values agree with these.

   OLD  ->  V3
   --navy      near-black obsidian background
   --slate     elevated console background (panel-2)
   --teal      -> --aqua (holographic signature)
   --teal-dim  darker aqua for hovers/gradients
   --gold      -> --gold (V3 gold)
   --white     -> --ink (primary text)
   --gray      -> --muted (secondary text)
   --light     bright text/hairline
   --ink       (legacy footer bg) -> deep panel
   --card      V3 card background
   --border    -> --line
   --font-head -> Space Grotesk (display)
   --font-body -> Inter (body)
   ============================================================ */
:root {
  --navy:      #06070d;
  --slate:     #11152a;      /* elevated console bg (V3 --panel-2) */
  --teal:      var(--aqua);
  --teal-dim:  #17b394;      /* darker aqua */
  /* --gold stays var(--gold) — already V3 */
  --white:     var(--ink);
  --gray:      var(--muted);
  --light:     #e8ecff;
  --card:      #0c0f1d;      /* V3 panel / card bg */
  --border:    var(--line);
  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}
/* NOTE: legacy pages set body bg via --navy and text via --white above.
   --ink is used by legacy footer as a background in a couple of pages;
   we keep footer readable by theming .footer / footer explicitly below. */

/* ---- Retheme legacy component classes to V3 tokens/gradients ---- */

/* Legacy nav CTA buttons (index/plans/products use .btn-primary/.btn-ghost
   WITHOUT a leading .btn — give them the V3 button base directly) */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, border-color 0.2s;
}
.btn-primary { color: #04130f; background: var(--grad); box-shadow: 0 8px 30px -10px rgba(47,243,200,0.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(138,123,255,0.7); background: var(--grad); }
.btn-ghost { color: var(--ink); border: 1px solid var(--line-2); background: rgba(255,255,255,0.02); }
.btn-ghost:hover { border-color: var(--aqua); color: var(--aqua); background: rgba(47,243,200,0.06); }

/* Section eyebrow labels used by legacy pages */
.section-label {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 14px;
}

/* Legacy footer (nav.js renders <footer> with .footer-* classes) */
footer { background: #04050a; border-top: 1px solid var(--line); }
.footer-brand p { color: var(--muted); }
.footer-col h5 { font-family: var(--display); color: var(--ink); }
.footer-col a { color: var(--muted); }
.footer-col a:hover { color: var(--aqua); }
.footer-copy { color: var(--muted-2); }
.footer-legal a { color: var(--muted-2); }
.footer-legal a:hover { color: var(--ink); }

/* Cards / panels used across legacy pages inherit V3 card bg + hairline;
   add the V3 gradient top-hairline treatment to give them the console feel */
.contact-card, .plan-card, .plan-mini, .pillar, .xsell-card, .prod-item,
.family-note, .prod-compliance, .score-card, .score-mini-card, .contact-form-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
}

/* Flagship / featured accents -> V3 aqua */
.plan-mini.flagship, .plan-card.flagship { border-color: rgba(47,243,200,0.45); }

/* Form controls -> V3 focus ring */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(47,243,200,0.14);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    position: fixed; top: 70px; left: 0; right: 0; background: rgba(6,7,13,0.98);
    padding: 24px clamp(18px,5vw,48px); border-bottom: 1px solid var(--line); }
  .nav-burger { display: block; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .row-2 { grid-template-columns: 1fr; }
  .card-grid, .steps, .plan-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  /* legacy nav (nav.js uses .nav-hamburger + .nav-cta) */
  .nav-hamburger { display: block; }
  .nav-cta .btn-ghost { display: none; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .nav-right .btn-ghost { display: none; }
  .stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   LEGACY NAV / HAMBURGER (nav.js markup uses these class names)
   ============================================================ */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-img { height: 34px; width: auto; display: block; }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav-hamburger { display: none; background: none; border: none; color: var(--ink); font-size: 1.4rem; cursor: pointer; }
.nav-cta .btn-ghost { padding: 9px 18px; font-size: 0.88rem; }
.nav-cta .btn-primary { padding: 9px 18px; font-size: 0.88rem; }

/* ============================================================
   LEGACY FOOTER LAYOUT (nav.js .footer-* structure)
   ============================================================ */
footer { padding: 60px 5% 36px; position: relative; z-index: 1; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand p { font-size: 0.85rem; line-height: 1.65; margin-top: 14px; max-width: 240px; }
.footer-col h5 { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.875rem; transition: color 0.2s; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-copy { font-size: 0.78rem; line-height: 1.6; max-width: 700px; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; flex-shrink: 0; }
.footer-legal a { font-size: 0.78rem; white-space: nowrap; transition: color 0.2s; }

/* ============================================================
   LEGACY PAGE HERO GLOW + ACCORDION (used by faq/contact/terms)
   ============================================================ */
.page-hero::after {
  content: ''; position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(138,123,255,0.14) 0%, transparent 70%);
  border-radius: 50%; top: 0; left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: -1;
}
.page-content { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 5% 100px; }

.accordion { display: flex; flex-direction: column; gap: 0; }
.accordion-item { border-bottom: 1px solid var(--line); overflow: hidden; }
.accordion-item:first-child { border-top: 1px solid var(--line); }
.accordion-btn { width: 100%; background: none; border: none; text-align: left; padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 16px; transition: color 0.2s; }
.accordion-btn:hover { color: var(--aqua); }
.accordion-q { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; text-align: left; transition: color 0.2s; }
.accordion-btn:hover .accordion-q { color: var(--aqua); }
.accordion-arrow { color: var(--aqua); font-size: 1.1rem; flex-shrink: 0; transition: transform 0.3s; }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease), padding 0.3s; padding: 0; }
.accordion-body.open { max-height: 1000px; padding-bottom: 22px; }
.accordion-arrow.open { transform: rotate(180deg); }
.accordion-body p { color: var(--muted); font-size: 0.9rem; line-height: 1.75; margin-bottom: 12px; }
.accordion-body p:last-child { margin-bottom: 0; }
.accordion-body ul { margin: 10px 0 12px 20px; color: var(--muted); font-size: 0.9rem; line-height: 1.75; }
.accordion-body a { color: var(--aqua); }

/* ============================================================
   LEGACY CONTACT + FORM (contact.html)
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
.contact-card { border-radius: 16px; padding: 32px 28px; transition: border-color 0.3s, transform 0.3s; }
.contact-card:hover { border-color: rgba(47,243,200,0.35); transform: translateY(-3px); }
.contact-card-icon { font-size: 2rem; margin-bottom: 16px; display: block; }
.contact-card h3 { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.contact-card p { font-size: 0.875rem; color: var(--muted); margin-bottom: 16px; }
.contact-card a.cta-link { color: var(--aqua); font-weight: 600; text-decoration: none; font-size: 1rem; display: inline-flex; align-items: center; gap: 6px; }
.contact-card a.cta-link:hover { color: var(--ink); }
.contact-form-wrap { border-radius: 20px; padding: 40px; margin-top: 48px; }
.contact-form-wrap h2 { font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.contact-form-wrap .sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.form-group input, .form-group select, .form-group textarea {
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink);
  font-family: var(--body); font-size: 0.9rem; padding: 12px 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted-2); }
.form-group select option { background: var(--panel); }
.form-group textarea { resize: vertical; min-height: 120px; }
.btn-primary.form-submit { font-size: 1rem; padding: 14px 32px; border-radius: 10px; border: none; cursor: pointer; margin-top: 8px; }
.form-success { display: none; background: rgba(47,243,200,0.1); border: 1px solid rgba(47,243,200,0.3); border-radius: 10px; padding: 20px 24px; color: var(--aqua); font-size: 0.9rem; margin-top: 16px; }

@media(max-width:900px){
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media(max-width:540px){
  .footer-top { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 24px; }
}