/* ============================================================
   ALUZIE — Live site design system
   Confident & modern. Warm cream canvas, decisive mint, blueprint motif.
   Brand: Mint #11AB9E + Aluzie Black #282828 · Typeface Aeonik (licensed, self-hosted)
   ============================================================ */

/* Brand typeface Aeonik (licensed, self-hosted from /public/fonts) is loaded
   via /css/fonts.css in app/layout.tsx. JetBrains Mono from Fontshare. */
@import url('https://api.fontshare.com/v2/css?f[]=jetbrains-mono@400,500&display=swap');

:root {
  /* Surfaces — cool, teal-undertoned neutrals (from the Aluzie palette) */
  --canvas:      #F4F7F6;   /* primary — soft cool off-white */
  --canvas-2:    #FBFCFC;   /* alternate sections — lighter */
  --paper:       #FFFFFF;   /* cards */
  --ink:         #16211F;   /* near-black bands / footer (teal-undertoned) */
  --ink-2:       #1E2A28;   /* Charcoal */

  /* Brand */
  --mint:        #11AB9E;
  --mint-700:    #0E8C82;
  --mint-600:    #0F9C90;
  --mint-80:     #41BCB1;
  --mint-40:     #A0DDD8;
  --mint-20:     #CFEEEC;
  --mint-08:     rgba(17,171,158,0.08);
  --mint-14:     rgba(17,171,158,0.14);

  --black:       #282828;

  /* Aqua ramp — full tint/shade scale anchored on the brand colour */
  --aqua-50:  #ECFBF9; --aqua-100: #CFF4EF; --aqua-200: #9FE8DF; --aqua-300: #66D6C9;
  --aqua-400: #2FC0B1; --aqua-500: #11AB9E; --aqua-600: #0E8C82; --aqua-700: #0C6F67;
  --aqua-800: #0B564F; --aqua-900: #0A413C;

  /* Neutrals — slight teal undertone, same family as Aqua */
  --n-ink: #0D1716; --n-charcoal: #1E2A28; --n-slate: #455450; --n-steel: #748480;
  --n-mist: #AAB6B3; --n-cloud: #DDE3E1; --n-paper: #F1F4F3; --n-white: #FFFFFF;

  /* Data-viz accents — categorical, CVD-aware. Lead with Aqua, then add in order. */
  --dv-aqua:   #11AB9E;
  --dv-indigo: #4C63D2;
  --dv-coral:  #EF6A4C;
  --dv-amber:  #E9A23B;
  --dv-violet: #9B5CD6;
  --dv-pink:   #E25C9A;

  /* Text on light */
  --fg:          #1A1A1A;
  --fg-2:        #4A4F4E;
  --fg-muted:    #6E7472;
  --fg-faint:    #9AA09E;

  /* Text on dark */
  --fg-inv:      #F1F4F3;
  --fg-inv-2:    #BCC6C3;
  --fg-inv-mut:  #7E8A86;

  /* Lines */
  --hair:        rgba(26,26,26,0.10);
  --hair-strong: rgba(26,26,26,0.16);
  --hair-inv:    rgba(244,241,234,0.14);

  /* Type */
  --font:  'Aeonik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Scale (fluid) */
  --t-display: clamp(2.7rem, 1.6rem + 4.6vw, 5rem);
  --t-h1:      clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  --t-h2:      clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --t-lg:      1.175rem;
  --t-base:    1rem;
  --t-sm:      0.9rem;
  --t-xs:      0.78rem;

  /* Spacing */
  --gut:   clamp(20px, 4vw, 48px);    /* comfortable side margins */
  --sec:   clamp(64px, 8vw, 128px);   /* section block padding */
  --maxw:  1320px;
  --narrow: 760px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(26,26,26,0.04), 0 8px 24px -16px rgba(26,26,26,0.12);
  --shadow-hov:  0 2px 6px rgba(26,26,26,0.06), 0 18px 40px -22px rgba(26,26,26,0.20);

  --dur: 220ms; --ease: cubic-bezier(0.2,0.8,0.2,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--fg);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.narrow { max-width: var(--narrow); margin-inline: auto; }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(44px, 5vw, 72px); }
.bg-2 { background: var(--canvas-2); }
.bg-paper { background: var(--paper); }

/* ---------- type ---------- */
.display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; }
h1, .h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; }
h2, .h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; }
h3, .h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; }
h4, .h4 { font-size: 1.05rem; line-height: 1.3; font-weight: 600; }
.lede { font-size: var(--t-lg); line-height: 1.65; color: var(--fg-2); }
p { color: var(--fg-2); }
.prose p + p { margin-top: 1.1em; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.measure { max-width: 60ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--mint-700);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--mint); transform: rotate(45deg); flex: none;
}
.eyebrow--inv { color: var(--mint-40); }

.lead-line { color: var(--fg); font-weight: 600; }
.mint-text { color: var(--mint-700); }

/* section header */
.sec-head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head h2 { margin-bottom: 16px; }
.sec-head .lede { margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent; transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--mint); color: #fff; }
.btn-primary:hover { background: var(--mint-600); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(17,171,158,0.7); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--hair-strong); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(26,26,26,0.03); }
.btn-inv { background: #fff; color: var(--ink); }
.btn-inv:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -14px rgba(0,0,0,0.5); }
.btn-ghost-inv { background: transparent; color: var(--fg-inv); border-color: var(--hair-inv); }
.btn-ghost-inv:hover { border-color: var(--fg-inv); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

.txtlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--mint-700); transition: gap var(--dur) var(--ease); }
.txtlink svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.txtlink:hover { gap: 11px; }
.txtlink:hover svg { transform: translateX(2px); }

/* ---------- nav (floating) ---------- */
.nav {
  position: sticky; top: 14px; z-index: 60;
  background: transparent;
  padding-inline: var(--gut);
  transition: top var(--dur);
}
.nav-row {
  display: flex; align-items: center; gap: 32px; height: 64px;
  background: #ffffff;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 0 12px 0 20px;
  box-shadow: 0 1px 2px rgba(13,23,22,0.04);
  transition: box-shadow var(--dur);
}
.nav.scrolled .nav-row { box-shadow: 0 8px 28px rgba(13,23,22,0.10); }
.nav-brand img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  padding: 9px 14px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 500;
  color: var(--fg-2); transition: color var(--dur), background var(--dur);
}
.nav-links a:hover { color: var(--fg); background: rgba(26,26,26,0.04); }
.nav-links a.active { color: var(--mint-700); }
.nav-cta { margin-left: auto; }
.nav-cta .btn {
  border-radius: var(--r-pill);
  padding: 12px 20px;
}
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--hair-strong); background: transparent; align-items: center; justify-content: center; }
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .nav-links, .nav .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 72px; left: var(--gut); right: var(--gut);
    background: #ffffff; border: 1px solid var(--hair); border-radius: var(--r-lg);
    box-shadow: 0 8px 28px rgba(13,23,22,0.10);
    padding: 12px; margin: 0;
  }
  .nav.open .nav-links a { padding: 13px 14px; font-size: 1.05rem; }
  .nav.open .nav-cta { display: inline-flex; margin: 10px var(--gut) 0; }
}

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--fg-inv-2); padding-block: clamp(56px, 7vw, 88px) 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand img { height: 28px; filter: brightness(0) invert(1); opacity: 0.95; margin-bottom: 20px; }
.footer-brand p { color: var(--fg-inv-mut); max-width: 30ch; }
.footer-col h5 { color: var(--fg-inv); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; color: var(--fg-inv-2); font-size: var(--t-sm); transition: color var(--dur); }
.footer-col a:hover { color: var(--fg-inv); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--hair-inv); font-size: var(--t-xs); color: var(--fg-inv-mut); }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- reveal animation (JS adds .pending to below-fold els) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.pending { opacity: 0; transform: translateY(18px); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal-stagger > * { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .reveal-stagger.pending > * { opacity: 0; transform: translateY(18px); }
  .reveal-stagger.in > * { opacity: 1; transform: none; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 70ms; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 140ms; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 210ms; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 280ms; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 350ms; }
  .reveal-stagger.in > *:nth-child(7) { transition-delay: 420ms; }
  .reveal-stagger.in > *:nth-child(8) { transition-delay: 490ms; }
}

/* ---------- blueprint motif ---------- */
.dotgrid { background-image: radial-gradient(rgba(26,26,26,0.06) 1px, transparent 1px); background-size: 28px 28px; }
.dotgrid-mint { background-image: radial-gradient(rgba(17,171,158,0.16) 1px, transparent 1px); background-size: 28px 28px; }
/* triangle halftone texture — subtle, fades from dense bottom-right */
.tri-mesh { background: url('../assets/tri-halftone-mint.svg') center / cover no-repeat; }