/* Cal Cove Labs — umbrella site stylesheet
   Shares the type scale, spacing and dark base of the product sites
   (skyloq.app, patloq.app, mmcloq.app, amtloq.app) so the family reads as one
   system, but uses its own sea-glass accent so the umbrella is the parent
   brand rather than a fifth product. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #04080B;              /* near-black, a touch cooler than product black */
  --surface: #0A1A22;         /* deep ocean */
  --surface-2: #0F242E;
  --accent: #5FE3A1;          /* sea glass — Cal Cove Labs */
  --accent-contrast: #04150D; /* text color on accent buttons */
  --sand: #E9D8BE;            /* warm California sand, used sparingly */
  --text: #FFFFFF;
  --text-secondary: #C3D0D6;
  --success: #0CC07F;
  --radius-card: 16px;
  --radius-btn: 12px;
}

/* Per-product accent themes — identical values to the product sites so a card
   here reads as the same brand the visitor lands on. */
.theme-skyloq { --accent: #00B3FF; --surface: #0B1F2A; --accent-contrast: #000; }
.theme-patloq { --accent: #D9B44A; --surface: #1B2A4A; --accent-contrast: #10182B; }
.theme-mmcloq { --accent: #14C9B4; --surface: #122B28; --accent-contrast: #081717; }
.theme-amtloq { --accent: #FF7A1A; --surface: #2A1708; --accent-contrast: #1A0E02; }
.theme-next   { --accent: var(--sand); --surface: #17202A; --accent-contrast: #10182B; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(4,8,11,0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-mark { height: 34px; width: auto; }

/* Placeholder wordmark — set in type until the real logo lands.
   Swap .nav-logo contents for an <img class="nav-logo-mark"> and nothing else
   needs to change. */
.wordmark {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.6px;
  color: var(--text);
  white-space: nowrap;
}
.wordmark .labs { color: var(--accent); }
.wordmark-sm { font-size: 15px; }

.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.nav-active { color: var(--text); }
.nav-hamburger { display: none; }

/* ── HERO ── */
main {
  flex: 1;
  padding: 132px 24px 72px;
  position: relative;
  overflow: hidden;
}
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.hero-glow {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 520px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 66%);
  pointer-events: none;
}
h1 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(33px, 6.2vw, 64px);
  /* Keeps each line whole if it ever has to wrap on a very narrow screen,
     rather than dropping a single word onto its own row.
     Progressive enhancement - older browsers just wrap normally. */
  text-wrap: balance;
  line-height: 1.07;
  letter-spacing: -1.8px;
  max-width: 860px;
  margin-bottom: 20px;
  animation: fadeUp 0.5s 0.08s ease both;
}
h1 span { color: var(--accent); }
.hero-sub {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--text-secondary);
  max-width: 580px;
  margin-bottom: 16px;
  line-height: 1.65;
  animation: fadeUp 0.5s 0.16s ease both;
}
.hero-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 14px;
  animation: fadeUp 0.5s 0.04s ease both;
}

/* ── SECTIONS ── */
.section {
  max-width: 1060px;
  margin: 0 auto;
  padding: 60px 0 8px;
}
.section-title {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 36px);
  letter-spacing: -1px;
  margin-bottom: 8px;
  text-align: center;
}
.section-sub {
  color: var(--text-secondary);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: 15px;
}
.section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-align: center;
  margin-bottom: 10px;
}

/* ── PRODUCT GRID ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.product-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, border-color 0.2s;
}
.product-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.product-name {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.5px;
}
.product-name .loq { color: var(--accent); }
.product-domain {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.product-tagline { font-weight: 600; font-size: 15px; }
.product-desc { color: var(--text-secondary); font-size: 14px; flex: 1; }
.product-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.learn-more {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.learn-more:hover { text-decoration: underline; }
.visit-btn {
  display: inline-block;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: var(--radius-btn);
  transition: background 0.2s, transform 0.2s;
}
.visit-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); transform: translateY(-1px); }

/* ── STORE BADGES ── */
.store-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.store-badge { display: block; text-decoration: none; transition: opacity 0.2s, transform 0.2s; }
.store-badge:hover { opacity: 0.85; transform: translateY(-1px); }
.store-badge img { height: 38px; width: auto; display: block; }
.store-badge-google img { height: 54px; margin: -8px; }
.store-soon .store-badge { opacity: 0.35; pointer-events: none; filter: grayscale(1); }
.soon-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  padding: 3px 12px;
}

/* ── FEATURE CARDS ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-card);
  padding: 26px 24px;
}
.feature-card h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}
.feature-card p { color: var(--text-secondary); font-size: 14px; }

/* ── WHAT'S NEXT (future apps) ── */
.next-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.next-card {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.next-card h3 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.next-card p { color: var(--text-secondary); font-size: 14px; flex: 1; }
.next-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sand);
}

/* ── CASE / CALLOUT BLOCK ── */
.case-block {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 28px 30px;
  max-width: 860px;
  margin: 0 auto;
}
.case-block p { color: var(--text-secondary); font-size: 15px; }
.case-block p + p { margin-top: 14px; }
.case-block strong { color: var(--text); }

/* ── BUTTONS ── */
.btn-cta {
  display: inline-block;
  text-align: center;
  padding: 13px 26px;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  cursor: pointer;
}
.btn-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-accent { background: var(--accent); color: var(--accent-contrast); }
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
}
.btn-outline:hover { border-color: rgba(255,255,255,0.3); }

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 64px 0 12px;
}

/* ── LONG-FORM PAGE (about, privacy, contact) ── */
.page {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.page-glow {
  position: absolute;
  top: 40px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 320px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.page-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  animation: fadeUp 0.5s ease both;
}
.page h1 {
  text-align: left;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -1.5px;
  margin-bottom: 40px;
  max-width: none;
}
.prose { animation: fadeUp 0.5s 0.16s ease both; }
.prose p { font-size: 17px; line-height: 1.72; margin-bottom: 22px; }
.prose h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 36px 0 14px;
}
.prose ul { margin: -6px 0 22px; padding-left: 24px; }
.prose li { font-size: 17px; line-height: 1.72; margin-bottom: 8px; }
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
/* Buttons inside .prose must not inherit the prose link colour. `.prose a`
   (specificity 0,1,1) otherwise beats `.btn-accent` (0,1,0), which paints
   accent-coloured text onto an accent-coloured button — i.e. invisible. */
.prose a.btn-accent { color: var(--accent-contrast); }
.prose a.btn-outline { color: var(--text); }
.prose a.btn-cta:hover { text-decoration: none; }
.prose .muted { color: var(--text-secondary); font-size: 15px; }

.signoff { animation: fadeUp 0.5s 0.24s ease both; }
.signoff-tagline {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: -0.5px;
  color: var(--accent);
  margin-bottom: 12px;
}
.signoff-name { color: var(--text-secondary); font-size: 16px; }

/* ── FOOTER ── */
footer { border-top: 1px solid rgba(255,255,255,0.07); padding: 20px 24px; }
.footer-inner {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.footer-links { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; }
.footer-links a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--text); }
.footer-copy {
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.22);
  margin-top: 8px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  .product-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .next-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px; height: 18px;
    background: none; border: none;
    cursor: pointer; padding: 0;
  }
  .nav-hamburger span {
    display: block; height: 2px; width: 100%;
    background: #FFFFFF; border-radius: 2px;
  }
  .nav-links.open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 58px; right: 0;
    width: 220px;
    background: var(--surface);
    padding: 16px;
    gap: 16px;
    z-index: 100;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0 0 12px 12px;
  }
  main { padding: 116px 20px 60px; }
  .prose p, .prose li { font-size: 16px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}