/* ============================================================
   LATENTIC — Brand stylesheet
   Applied AI layer. Warm, open, community.
   ============================================================ */

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

:root {
  /* ---- Core palette ---- */
  --navy:        #0F1419;   /* Deep Navy   */
  --cyan:        #00E5FF;   /* Electric Cyan */
  --offwhite:    #FAF9F6;   /* Warm Off-White */
  --coral:       #FF6B4A;   /* Coral */
  --lime:        #A8FF35;   /* Graspy Lime */
  --violet:      #8B5CF6;   /* Karia Violet */

  /* ---- Derived neutrals (warm, off the off-white) ---- */
  --paper:       #FAF9F6;
  --paper-2:     #F2F0EA;   /* slightly deeper panel */
  --paper-3:     #EAE7DE;   /* card edge / hairline base */
  --ink:         #0F1419;
  --ink-2:       #3A4149;   /* secondary text */
  --ink-3:       #6B7077;   /* tertiary / muted */
  --line:        #E2DED4;   /* hairlines on paper */
  --line-strong: #CFC9BB;

  /* navy surface scale (for dark sections / cards) */
  --navy-1:      #0F1419;
  --navy-2:      #161D24;
  --navy-3:      #1E2730;
  --navy-line:   #2A343E;

  /* tints */
  --cyan-soft:   #D6F8FF;
  --cyan-tint:   #E9FCFF;
  --lime-tint:   #EEFFD2;
  --violet-tint: #EDE7FF;
  --coral-tint:  #FFE6DF;

  /* ---- Semantic theme tokens (reassigned wholesale in the dark block) ---- */
  --nav-bg:               rgba(250,249,246,.82);
  --card-bg:              #fff;
  --surface-inverse:      var(--navy);   /* .dark sections + .cta-band */
  --band-ring:            none;
  --selection-fg:         var(--navy);

  --btn-primary-bg:       var(--navy);
  --btn-primary-bg-hover: #1c252e;
  --btn-primary-fg:       var(--offwhite);
  --btn-primary-border:   transparent;

  --btn-coral-bg:         var(--coral);
  --btn-coral-bg-hover:   #ff8163;
  --btn-coral-fg:         #fff;

  --btn-ghost-hover-bg:     rgba(15,20,25,.03);
  --btn-ghost-hover-border: var(--ink);
  --btn-ghost-hover-fg:     var(--ink);

  --bloom-blend:          multiply;
  --bloom-out-x:          #89E7FC;   /* left / right discs */
  --bloom-out-y:          #A6E5F8;   /* top / bottom discs */
  --bloom-ros-a:          #7E9DC9;   /* rosette petal pairs */
  --bloom-ros-b:          #969CC2;
  --bloom-ros-c:          #85A6D0;
  --dot-a:                var(--cyan);
  --dot-b:                var(--navy);
  --dot-glow:             none;

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Spacing (8px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --maxw: 1240px;

  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--cyan); color: var(--selection-fg); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

.section { padding: var(--s9) 0; }
.section-sm { padding: var(--s8) 0; }

/* eyebrow / kicker */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kicker::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--cyan);
  display: inline-block;
}

/* ============================================================
   TYPE SCALE
   ============================================================ */
.display { font-size: clamp(40px, 6vw, 76px); line-height: 1.0; letter-spacing: -0.03em; }
.h1 { font-size: clamp(34px, 4.4vw, 56px); }
.h2 { font-size: clamp(28px, 3.2vw, 40px); }
.h3 { font-size: clamp(21px, 2vw, 26px); }
.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: transform .15s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-border); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }

.btn-cyan { background: var(--cyan); color: var(--navy); }
.btn-cyan:hover { background: #4fefff; }

.btn-coral { background: var(--btn-coral-bg); color: var(--btn-coral-fg); }
.btn-coral:hover { background: var(--btn-coral-bg-hover); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--btn-ghost-hover-border); background: var(--btn-ghost-hover-bg); color: var(--btn-ghost-hover-fg); }

.btn-on-dark { background: transparent; color: var(--offwhite); border-color: var(--navy-line); }
.btn-on-dark:hover { border-color: var(--cyan); color: var(--cyan); }

.btn .arr { transition: transform .18s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  line-height: 1;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.badge-active  { background: var(--lime-tint);   color: #3c5400; }
.badge-active  .dot { background: var(--lime); }
.badge-analyzing { background: var(--violet-tint); color: #4b2a9e; }
.badge-analyzing .dot { background: var(--violet); }
.badge-ready   { background: var(--cyan-tint);   color: #006b7a; }
.badge-ready   .dot { background: var(--cyan); }
.badge-soon    { background: var(--paper-3);     color: var(--ink-3); }
.badge-soon    .dot { background: var(--ink-3); }
.badge-coral   { background: var(--coral-tint);  color: #b23a20; }
.badge-coral   .dot { background: var(--coral); }

/* pill label (uppercase mono on dark/light) */
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }



/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 32px;
  display: flex; align-items: center; gap: 28px;
}
@media (max-width: 720px){ .nav-inner { padding: 12px 20px; } }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .mark { width: 30px; height: 30px; }
.brand .word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.nav-links { display: flex; gap: 26px; margin-left: 14px; }
.nav-links a {
  font-size: 15px; font-weight: 450; color: var(--ink-2);
  transition: color .15s var(--ease);
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-spacer { flex: 1; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
@media (max-width: 880px){ .nav-links { display: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s7); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 880px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-col h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; font-weight: 500;
}
.footer-col a { display: block; font-size: 15px; color: var(--ink-2); padding: 5px 0; transition: color .15s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-3); gap: 16px; flex-wrap: wrap;
}
.social { display: flex; gap: 10px; }
.social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; color: var(--ink-2);
  transition: all .15s var(--ease);
}
.social a:hover { border-color: var(--ink); color: var(--ink); }
.social svg { width: 17px; height: 17px; }

/* ============================================================
   DARK SECTION
   ============================================================ */
.dark { background: var(--surface-inverse); color: var(--offwhite); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--offwhite); }
.dark .lead { color: #AEB6BE; }
.dark .muted { color: #7E8993; }
.dark .kicker { color: #7E8993; }

/* ============================================================
   CODE BLOCK
   ============================================================ */
.code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  background: var(--navy);
  color: #C9D1D9;
  border-radius: var(--radius);
  padding: 20px 22px;
  overflow-x: auto;
}
.code .c-key { color: var(--violet); }
.code .c-fn  { color: var(--cyan); }
.code .c-str { color: var(--lime); }
.code .c-cm  { color: #5C6B78; }
.code .c-flag{ color: var(--coral); }
.code .prompt { color: #5C6B78; user-select: none; }

/* utilities */
.flex { display: flex; }
.center { align-items: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 24px; }
.grid { display: grid; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================
   DARK THEME — applied via :root[data-theme="dark"].
   Theme is chosen by the inline init script in index.html:
   stored preference, else the visitor's OS color-scheme.
   Remaps the warm-paper neutrals to a near-black surface
   scale; the cyan/teal accent carries the brand.
   ========================================================= */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }
body { transition: background-color .25s var(--ease), color .25s var(--ease); }

:root[data-theme="dark"]{
  /* palette */
  --paper:#0A0E12; --paper-2:#11171D; --paper-3:#1A222A;
  --ink:#ECF1F4; --ink-2:#AAB3BB; --ink-3:#76808A;
  --line:#212A33; --line-strong:#33404B;
  --accent:#19C4E0; --accent-tint:rgba(25,196,224,.12);
  --cyan-tint:rgba(0,229,255,.12);
  --cw-raised:#161E26; --cw-recessed:#0F151B;

  /* semantic */
  --nav-bg:rgba(10,14,18,.82);
  --card-bg:var(--paper-2);
  --surface-inverse:#0E151B;
  --band-ring:inset 0 0 0 1px var(--line);
  --selection-fg:#06243A;

  --btn-primary-bg:#161E26;
  --btn-primary-bg-hover:#1d2730;
  --btn-primary-fg:var(--ink);
  --btn-primary-border:var(--line-strong);

  --btn-coral-bg:var(--cyan);
  --btn-coral-bg-hover:#4fefff;
  --btn-coral-fg:#06243A;

  --btn-ghost-hover-bg:rgba(0,229,255,.06);
  --btn-ghost-hover-border:var(--cyan);
  --btn-ghost-hover-fg:var(--cyan);

  --bloom-blend:screen;
  --bloom-out-x:#003340;
  --bloom-out-y:#00232E;
  --bloom-ros-a:#123A5C;
  --bloom-ros-b:#0F2F4E;
  --bloom-ros-c:#153F63;
  --dot-a:#19C4E0;
  --dot-b:#19C4E0;
  --dot-glow:0 0 9px rgba(25,196,224,.55);
}

/* theme toggle button (nav) */
.theme-toggle{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; margin-right:4px; transition:border-color .18s var(--ease), color .18s var(--ease); }
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ico-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .ico-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .ico-moon{ display:none; }

/* header logo: light/dark artwork swapped with the theme */
.brand .mark-dark{ display:none; }
:root[data-theme="dark"] .brand .mark-light{ display:none; }
:root[data-theme="dark"] .brand .mark-dark{ display:block; }