/* =========================================================================
   theme.css — OpenPrem re-skin
   Loads AFTER styles.css. Changes ONLY the look (color, type, surfaces,
   nav, buttons, glows) to the ELECTROQ design language. It does not touch
   content, markup, or behavior. Every element stays exactly what it was;
   it just wears a new skin: pure-black canvas, electric-blue + blocking-red
   accents, Inter Display headings, floating glass nav, glow-lit cards.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap");

/* ---- 1. Token overrides (cascade re-skins ~70% of the site) ---------- */
:root {
  --bg: #050608;
  --bg-elev-1: #0a0c11;
  --bg-elev-2: #0e1118;
  --bg-card: linear-gradient(180deg, #0b0d12 0%, #06070a 100%);
  --bg-card-soft: linear-gradient(180deg, #090b10 0%, #06070a 100%);

  --border: rgba(102, 238, 255, 0.16);        /* signature electric-blue hairline */
  --border-soft: rgba(255, 255, 255, 0.05);
  --border-hard: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.34);

  --fg: #ffffff;
  --fg-2: #d1d4e3;
  --fg-3: #9ba9c4;
  --fg-4: #8491ab;
  --fg-5: rgba(255, 255, 255, 0.26);

  /* Accent: load-bearing electric blue, with blocking red as the second voice.
     --teal is the original's one accent var (links, diagram edges); we
     repoint it to blue so every accent re-skins in one move. */
  --teal: #66eeff;
  --teal-dim: rgba(102, 238, 255, 0.16);
  --blue: #66eeff;
  --orange: #ff7799;
  --amber: #ff99bb;
  --violet: #66eeff;
  --lime: #ff7799;
  --rose: #ff99bb;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 70px -34px rgba(0, 0, 0, 0.8),
    0 10px 30px -16px rgba(102, 238, 255, 0.12);

  --font:
    "Inter", "Public Sans", "Public Sans Fallback", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- 2. Base ---------------------------------------------------------- */
body { background: var(--bg); color: var(--fg-2); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(102, 238, 255, 0.35); color: #fff; }

/* Headings -> Inter, lighter weight, tighter tracking (Inter Display feel) */
h1, h2, h3, h4,
.hero__title, .section-title, .team-intro__title, .cta__title,
.post__head h1, .problem__inner > .section-title {
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* ---- 3. Page background: grid + blue/amber glow ---------------------- */
.page-bg__grid {
  display: block;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
}
.page-bg__glow { opacity: 0.3; }
.page-bg__glow--teal {
  background: radial-gradient(circle, #66eeff 0%, transparent 62%);
  width: 820px; height: 820px;
  top: -260px; left: 50%; transform: translateX(-58%);
}
.page-bg__glow--violet {
  background: radial-gradient(circle, #ff7799 0%, transparent 62%);
  opacity: 0.12;
  top: 220px; right: -200px;
}

/* ---- 4. Nav: floating glass pill ------------------------------------ */
.nav {
  position: sticky;
  top: 14px;
  max-width: 1180px;
  margin: 14px auto 0;
  padding: 12px 16px 12px 22px;
  gap: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(to bottom, rgba(8, 9, 12, 0.74), rgba(8, 9, 12, 0.6));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset -3px -2px 8px rgba(255, 255, 255, 0.04),
    0 24px 50px -28px rgba(0, 0, 0, 0.85);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.nav__links a { letter-spacing: -0.01em; }
.nav__links a:hover { color: var(--fg); }

/* ---- 5. Buttons: COSMOQ dual inner-glow primary + glass ghost -------- */
.btn { border-radius: 14px; letter-spacing: -0.01em; }
.btn--primary {
  background: #000;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset -4px 3px 9px 0 rgba(102, 238, 255, 0.9),
    inset 3px -2px 8px 0 rgba(255, 153, 187, 0.85),
    0 12px 30px -16px rgba(0, 0, 0, 0.8);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: #000;
  color: #fff;
  filter: brightness(1.13);
  transform: translateY(-1px);
}
.btn--ghost {
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
}

/* ---- 6. Eyebrow dot: blue, gently pulsing --------------------------- */
.eyebrow__dot {
  background: #66eeff;
  box-shadow: 0 0 0 4px rgba(102, 238, 255, 0.16);
  animation: op-pulse 2.6s var(--ease-out) infinite;
}
@keyframes op-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(102, 238, 255, 0.16); }
  50% { box-shadow: 0 0 0 7px rgba(102, 238, 255, 0.04); }
}

/* ---- 7. Cards & surfaces: rim border + soft blue lift on hover ------ */
.card, .founder-card, .card-cta,
.problem-card, .benefit-card, .step-card, .os-card, .feature-card,
[class$="__card"], [class*="__card "] {
  border-radius: var(--radius-lg);
}
.founder-card, .card-cta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.founder-card:hover, .card-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(102, 238, 255, 0.32);
}

/* ---- 8. Hero title: bigger, lighter, blue second line --------------- */
.hero__title {
  font-size: clamp(44px, 6vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.hero__title-accent { color: #66eeff; font-weight: 500; }
.hero__sub { color: var(--fg-2); }

/* ---- 9. Accent text, links, focus ----------------------------------- */
a { color: inherit; }
.section-sub, .team-intro__sub { color: var(--fg-3); }
:focus-visible { outline-color: rgba(102, 238, 255, 0.8); }

/* ---- 10. Mono labels keep their voice; tint dividers ---------------- */
hr, .divider { border-color: var(--border-soft); }

/* ---- 11. Footer: blue-tint top edge --------------------------------- */
.footer, [class*="footer"] { border-top-color: var(--border-soft); }

/* ---- 12. Respect reduced motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eyebrow__dot { animation: none; }
}

/* =========================================================================
   13. Footer — EXACT code from the reference repo
   (D:/DATA/WORK/OpenPrem/Apps/open-prem-website-redesign · styles.css 348-360)
   ========================================================================= */

/* Tokens the reference footer + its inline styles rely on. */
:root {
  --hair: rgba(255, 255, 255, 0.07);
  --hair-2: rgba(255, 255, 255, 0.1);
  --rim: rgba(102, 238, 255, 0.16);
  --surface-2: #0c0f16;
  --r-sm: 10px;
  --gutter: 40px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The reference repo applies a global `* { margin: 0 }` reset and has no old
   footer rules; this project has neither, so normalize within the footer so it
   renders identically to the reference. */
.footer * { margin: 0; }
.footer__brand { display: block; }

.footer .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.footer { background: #050608; border-top: 1px solid var(--hair); padding: 72px 0 40px; margin-top: 40px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; margin-bottom: 56px; }
.footer__brand img { height: 26px; margin-bottom: 16px; }
.footer__brand p { font-size: 14px; color: var(--fg-4); max-width: 32ch; line-height: 1.6; }
.footer__col h4 { font-family: var(--font); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-4); font-weight: 600; margin-bottom: 16px; }
.footer__col a { display: block; font-size: 14.5px; color: var(--fg-3); padding: 6px 0; transition: color 0.2s var(--ease); }
.footer__col a:hover { color: var(--fg); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 28px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--fg-4); flex-wrap: wrap; }
#mailing-list-container { grid-column: 1; grid-row: 2; }
.footer__social { display: flex; gap: 12px; }
.footer__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--fg-3); transition: border-color 0.2s, color 0.2s; }
.footer__social a:hover { border-color: var(--rim); color: var(--fg); }
.footer__social svg { width: 16px; height: 16px; }
@media (max-width: 860px) {
    .footer__grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
    #mailing-list-container { grid-column: auto; grid-row: auto; }
    .footer__brand { text-align: center; }
    .footer__brand img { display: block; margin: 0 auto 16px; height: 32px; }
    .footer__brand p { max-width: none; font-size: 16px; }
    .footer__brand, .footer__col, #mailing-list-container, .footer__bottom {
        border-bottom: 1px solid var(--hair-2);
        padding: 20px 0;
        text-align: center;
    }
    #mailing-list-form {
        justify-content: center;
    }
    .footer__social {
        justify-content: center;
    }
    .footer__bottom {
        flex-direction: column;
    }
}