/* ─── THEME VARIABLES (dark UI = :root; paper UI = html.dark) ─── */
:root {
  /* Brand (dark-theme.md) */
  --brand-navy: #080c14;
  --brand-cyan: #00c2ff;
  --brand-cyan-dim: #0099cc;
  --brand-off-white: #e8edf5;
  --brand-muted-2: #8899aa;
  --brand-border: #1a2540;
  --brand-border-2: #243050;
  --brand-cyan-glow: rgba(0, 194, 255, 0.12);

  /* Surfaces */
  --navy: #080c14;
  --navy2: #111927;
  --navy3: #0c1220;

  --cyan: var(--brand-cyan);
  --white: var(--brand-off-white);
  --muted: #6d8299;
  --muted-2: var(--brand-muted-2);

  --nav-link: var(--muted);
  --border-default: var(--brand-border);
  --border-soft: color-mix(in srgb, var(--brand-border) 55%, transparent);
  --border-strong: var(--brand-border-2);
  --border-card: var(--brand-border);
  --frosted-nav: color-mix(in srgb, var(--navy) 90%, transparent);

  --cta-secondary-bg: transparent;
  --cta-secondary-fg: var(--muted-2);
  --nav-active-bg: var(--brand-border);
  --nav-active-fg: var(--brand-off-white);
  --cta-primary-bg: var(--brand-cyan);
  --cta-primary-fg: var(--brand-navy);
  --cta-primary-hover: var(--brand-cyan-dim);
  --hero-headline-secondary: var(--brand-off-white);
  /* LIVE badge on service card */
  --badge-live-bg: var(--brand-cyan);
  --badge-live-fg: var(--brand-navy);
}

/* Paper / light UI — neutral whites & grays (plans/light-theme.md) */
html.dark {
  --brand-navy: #0a0f1e;
  --brand-cyan: #0099cc;
  --brand-cyan-dim: #007799;
  --brand-off-white: #f7f8fa;
  --brand-muted-2: #9ca3af;
  --brand-border: #e2e8f0;
  --brand-border-2: #cbd5e0;
  --brand-cyan-glow: rgba(0, 153, 204, 0.2);

  --navy: #f7f8fa;
  --navy2: #f0f2f5;
  --navy3: #ffffff;

  --cyan: var(--brand-cyan);
  --white: #0a0f1e;
  --muted: #6b7280;
  --muted-2: #9ca3af;

  --nav-link: #6b7280;
  --border-default: #e2e8f0;
  --border-soft: #e2e8f0;
  --border-strong: #cbd5e0;
  --border-card: #e2e8f0;
  --frosted-nav: color-mix(in srgb, #f7f8fa 92%, transparent);

  --cta-secondary-bg: transparent;
  --cta-secondary-fg: #374151;
  --nav-active-bg: #0a0f1e;
  --nav-active-fg: #ffffff;
  --cta-primary-bg: #0a0f1e;
  --cta-primary-fg: #ffffff;
  --cta-primary-hover: #1a2540;

  --hero-headline-secondary: #0a0f1e;

  --badge-live-bg: #0a0f1e;
  --badge-live-fg: #ffffff;
}

/* ─── BASE ──────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  color-scheme: dark;
}
html.dark {
  color-scheme: light;
}

body {
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  transition:
    background 0.3s,
    color 0.3s;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--navy);
}
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

::selection {
  background: var(--brand-cyan-glow);
  color: var(--white);
}

html.dark ::-webkit-scrollbar-track {
  background: var(--navy);
}
html.dark ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--brand-navy) 35%, var(--border-strong));
}

html.dark ::selection {
  background: var(--brand-cyan-glow);
  color: var(--white);
}

/* Fades to transparent — brand cyan only */
.rule-brand-fade {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-cyan) 65%, transparent) 0%,
    transparent 78%
  );
}

html.dark .rule-brand-fade {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-cyan) 50%, transparent) 0%,
    transparent 78%
  );
}

/* ─── REVEAL ON SCROLL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.vis {
  opacity: 1;
  transform: none;
}

/* ─── FLUID DISPLAY SIZES (clamp — used in locale overrides) ── */
.display-hero-home {
  font-size: clamp(72px, 12vw, 160px);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.display-hero-vpn {
  font-size: clamp(64px, 10vw, 130px);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.display-hero-about {
  font-size: clamp(52px, 8vw, 100px);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.display-cta-wide {
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.section-title {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.section-heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ─── MYANMAR LOCALE OVERRIDES ──────────────────────────────── */
html[data-locale='my'] .section-title {
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 0.96;
}
html[data-locale='my'] .section-heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
html[data-locale='my'] .display-hero-home {
  font-size: clamp(54px, 8.8vw, 118px);
  line-height: 0.86;
}
html[data-locale='my'] .display-hero-vpn {
  font-size: clamp(48px, 7.5vw, 100px);
  line-height: 0.86;
}
html[data-locale='my'] .display-cta-wide {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.91;
}

/* ─── MYANMAR :lang(my) — layout safe (plans/locale-type-graphy-fix.md v2) ─── */

:lang(my) * {
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-style: normal !important;
}

html:lang(my) .nav-logo-lockup .nav-logo-track {
  letter-spacing: 0.12em !important;
}

:lang(my) p,
:lang(my) li,
:lang(my) span:not(.no-my-override) {
  line-height: 1.75;
  font-size: 0.94em;
}

:lang(my) .text-xs {
  font-size: 0.8rem;
  line-height: 1.5;
}

:lang(my) .text-sm {
  font-size: 0.85rem;
  line-height: 1.6;
}

:lang(my) .font-thin,
:lang(my) .font-extralight,
:lang(my) .font-light {
  font-weight: 400 !important;
}

:lang(my) .font-medium,
:lang(my) .font-semibold,
:lang(my) .font-bold,
:lang(my) .font-extrabold,
:lang(my) .font-black {
  font-weight: 700 !important;
}

:lang(my) .font-mono {
  font-family: 'Noto Sans Myanmar', sans-serif;
  letter-spacing: 0;
}

/* ─── FAQ SUMMARY MARKER ────────────────────────────────────── */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}