/* === Design Tokens (light/dark + elevations) === */
:root{
  --color-bg:#0B0F1A;           /* darker surface to match reference look */
  --color-surface:#121826;
  --color-soft:#1B2233;
  --color-text:#F8FAFC;
  --color-muted:#A3ADC2;
  --color-primary:#E11D48;      /* pinkish accent like reference */
  --color-accent:#38BDF8;       /* cyan accent for hovers/links */
  --color-border:#263245;

  --radius-sm:10px; --radius-md:16px; --radius-lg:22px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --elev-1:0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset;
  --elev-2:0 6px 16px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --elev-3:0 18px 40px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06) inset;

  color-scheme: dark light;
}

/* Optional explicit theme override */
:root[data-theme="light"]{
  --color-bg:#F8FAFC; --color-surface:#FFFFFF; --color-soft:#F1F5F9;
  --color-text:#0F172A; --color-muted:#475569; --color-border:#E2E8F0;
  --color-primary:#E11D48; --color-accent:#2563EB;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --color-bg:#F8FAFC; --color-surface:#FFFFFF; --color-soft:#F1F5F9;
    --color-text:#0F172A; --color-muted:#475569; --color-border:#E2E8F0;
  }
} /* prefers-color-scheme + override pattern for robust theming [9][12] */

/* === Base / Reset improvements === */
*,
*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 20% -10%, rgba(225,29,72,.18), transparent 60%),
             radial-gradient(900px 600px at 120% 10%, rgba(56,189,248,.12), transparent 60%),
             var(--color-bg);
  color:var(--color-text);
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  text-rendering:optimizeLegibility;
} /* radial accents evoke reference gradient feel while staying generic [6] */

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}

/* === Typography scale (fluid) === */
h1{font-weight:800;letter-spacing:-.01em;font-size:clamp(1.75rem,3.2vw,2.75rem)}
h2{font-weight:750;font-size:clamp(1.25rem,2.2vw,1.75rem)}
h3{font-weight:700;font-size:clamp(1.05rem,1.6vw,1.25rem)}
.lead{font-size:clamp(1rem,1.2vw,1.125rem);color:var(--color-muted)} /* fluid size best practice [5] */

/* === Containers === */
.container{max-width:1200px;margin-inline:auto;padding-inline:24px}

/* === Sticky Header (dark, pill nav) === */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(18,24,38,.85);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--color-border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-block:14px;gap:16px}
.brand-link{font-weight:800}
.nav-toggle{border:1px solid var(--color-border);background:var(--color-soft);color:var(--color-text);border-radius:10px}
.site-nav{position:fixed;inset:0 0 0 auto;width:min(84vw,320px);transform:translateX(100%);
  transition:transform .18s ease; background:var(--color-surface);box-shadow:var(--elev-2);padding:24px}
.site-nav.open{transform:translateX(0)}
.nav-list{list-style:none;display:grid;gap:16px;padding:0;margin:0}
@media (min-width:768px){
  .site-nav{position:static;transform:none;width:auto;background:transparent;box-shadow:none;padding:0}
  .nav-list{display:flex;gap:24px}
  .nav-toggle{display:none}
} /* mobile-first nav layout [3] */

/* === Hero === */
.hero{
  padding-block:64px;
  background:linear-gradient(180deg, transparent, rgba(56,189,248,.07) 60%, transparent);
}
.hero-grid{display:grid;gap:32px}
@media (min-width:1024px){.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(225,29,72,.16);color:#fff;font-weight:700}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;
  padding:10px 16px;border-radius:12px;border:1px solid var(--color-border);
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease
}
.btn-primary{background:var(--color-primary);color:#fff;border-color:transparent;box-shadow:var(--elev-1)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.2)}
.btn-outline:hover{background:rgba(255,255,255,.06)}

/* === Spec Card “APK-style” panel === */
.specs{padding-block:64px}
.section-head{margin-bottom:24px}
.specs-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media (min-width:640px){.specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.specs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{
  background:
    linear-gradient(135deg, rgba(225,29,72,.18), rgba(56,189,248,.10) 60%),
    var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:16px; padding:20px; box-shadow:var(--elev-1);
}
.spec-card .spec-label{color:var(--color-muted);font-size:.9rem;margin:0 0 6px}
.spec-card .spec-value{font-weight:700;margin:0}

/* === Feature, Pros/Cons sections === */
.features,.pros-cons{padding-block:64px}
.features-grid{display:grid;gap:20px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:768px){.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.features-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feature.card{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--color-soft)}

.pros-cons-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:768px){.pros-cons-grid{grid-template-columns:repeat(2,1fr)}}
.list-check,.list-cross{padding-left:1.35rem}
.list-check li::marker{content:"✓ ";color:#22C55E}
.list-cross li::marker{content:"– ";color:var(--color-muted)}

/* === Accordion (accessible visual states) === */
.accordion{display:grid;gap:12px}
.accordion-item{
  border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);box-shadow:var(--elev-1);overflow:clip
}
.accordion-trigger{
  width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;background:transparent;border:0;color:inherit;font-weight:700;cursor:pointer
}
.accordion-trigger:hover{background:rgba(255,255,255,.05)}
.accordion-trigger[aria-expanded="true"]{background:rgba(56,189,248,.08);border-bottom:1px solid var(--color-border)}
.accordion-panel{padding:12px 18px 18px} /* ARIA pattern matches best-practice CSS states [8][11] */

/* === CTA Strip === */
.cta-strip{
  padding-block:56px;
  background:linear-gradient(180deg, rgba(56,189,248,.10), transparent 80%);
  border-block:1px solid var(--color-border)
}
.cta-inner{display:grid;gap:16px;align-items:center}
@media (min-width:768px){.cta-inner{grid-template-columns:1fr auto}}
.cta-form{display:flex;gap:10px;flex-wrap:wrap}
.cta-form input[type="email"]{
  min-width:240px;padding:10px 12px;border-radius:12px;border:1px solid var(--color-border);
  background:var(--color-soft);color:var(--color-text)
}

/* === Footer === */
.site-footer{border-top:1px solid var(--color-border);background:var(--color-surface);padding-block:40px;margin-top:64px}
.footer-grid{display:grid;gap:16px;align-items:center;grid-template-columns:1fr}
@media (min-width:768px){.footer-grid{grid-template-columns:1fr auto auto}}

/* === Motion preference === */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
} /* motion-safety for a11y [6] */