/* ============================================================
   OLVEDIA — WEBSITE STYLES
   Built on the Olvedia Design System (tokens inlined below).
   Native HTML/CSS/JS. Alternating dark/light bands via .dark scope.
   ============================================================ */

/* ---------- COLOR TOKENS ---------- */
:root {
  --green-50:#E6FBF1; --green-100:#C2F5DD; --green-200:#8CEBC0; --green-300:#4FDD9F;
  --green-400:#1FCB83; --green-500:#00B36A; --green-600:#009557; --green-700:#007644;
  --green-800:#005C35; --green-900:#06301E;

  --white:#FFFFFF;
  --ink-950:#0A0B0D; --ink-900:#101216; --ink-800:#16191F; --ink-700:#1F242C; --ink-600:#2A313B;
  --gray-50:#F7F8F9; --gray-100:#EEF0F2; --gray-200:#E1E4E8; --gray-300:#C8CDD4;
  --gray-400:#9AA1AB; --gray-500:#6B727C; --gray-600:#4A4F58; --gray-700:#32363D;
  --gray-800:#1F2329; --gray-900:#101216;

  /* Light theme semantic aliases (default) */
  --bg-base:var(--white);
  --bg-subtle:var(--gray-50);
  --surface-card:var(--white);
  --text-primary:var(--ink-950);
  --text-secondary:var(--gray-600);
  --text-tertiary:var(--gray-500);
  --text-on-accent:var(--ink-950);
  --accent:var(--green-500);
  --accent-hover:var(--green-600);
  --accent-text:var(--green-700);
  --accent-subtle:var(--green-50);
  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-focus:var(--green-500);
  --ring:color-mix(in srgb, var(--green-500) 45%, transparent);
  --shadow-sm:0 1px 3px rgba(10,11,13,.06), 0 1px 2px rgba(10,11,13,.04);
  --shadow-md:0 4px 12px rgba(10,11,13,.07), 0 2px 4px rgba(10,11,13,.04);
  --shadow-lg:0 12px 28px rgba(10,11,13,.10), 0 4px 8px rgba(10,11,13,.05);
  --shadow-accent:0 6px 20px color-mix(in srgb, var(--green-500) 28%, transparent);
  --focus-ring:0 0 0 3px var(--ring);

  /* Fonts */
  --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Type scale */
  --fs-display:4.5rem; --lh-display:1.02; --ls-display:-0.03em;
  --fs-h1:3rem;    --lh-h1:1.06; --ls-h1:-0.025em;
  --fs-h2:2.25rem; --lh-h2:1.1;  --ls-h2:-0.02em;
  --fs-h3:1.75rem; --lh-h3:1.15; --ls-h3:-0.018em;
  --fs-h4:1.375rem;--lh-h4:1.25; --ls-h4:-0.012em;
  --fs-body-lg:1.125rem; --lh-body-lg:1.6;
  --fs-body:1rem;  --lh-body:1.6;
  --fs-small:0.875rem; --lh-small:1.55;
  --fs-eyebrow:0.75rem; --lh-eyebrow:1.2; --ls-eyebrow:0.14em;

  /* Spacing */
  --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem;
  --space-10:5rem; --space-11:6rem; --space-12:8rem;

  --container-xl:1200px;
  --container-gutter:var(--space-5);

  /* Radii */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;

  /* Motion */
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms;
  --ease-standard:cubic-bezier(0.22,0.61,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --transition-colors:color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

/* ---------- DARK SCOPE (bands) ---------- */
.dark {
  --bg-base:var(--ink-950);
  --bg-subtle:var(--ink-900);
  --surface-card:var(--ink-900);
  --text-primary:var(--gray-50);
  --text-secondary:var(--gray-400);
  --text-tertiary:#7B828C;
  --text-on-accent:var(--ink-950);
  --accent:var(--green-400);
  --accent-hover:var(--green-300);
  --accent-text:var(--green-300);
  --accent-subtle:color-mix(in srgb, var(--green-400) 14%, var(--ink-900));
  --border-subtle:rgba(255,255,255,0.07);
  --border-default:rgba(255,255,255,0.12);
  --border-focus:var(--green-400);
  --ring:color-mix(in srgb, var(--green-400) 50%, transparent);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 6px 16px rgba(0,0,0,.5);
  --shadow-lg:0 16px 36px rgba(0,0,0,.55);
  --shadow-accent:0 6px 24px color-mix(in srgb, var(--green-400) 32%, transparent);
}

/* ---------- BASE / RESET ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; overflow-x:clip; }
body {
  margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:var(--fw-regular); color:var(--text-primary);
  /* Near-black page canvas: the top of the page is always the dark hero, and this
     prevents the light default background from showing through the sticky navbar.
     Light sections paint their own background over this. */
  background:var(--ink-950);
  /* Clip the off-canvas mobile menu when closed so it can't create horizontal
     overflow (clip, not hidden, so the sticky navbar keeps working). */
  overflow-x:clip;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--text-primary); margin:0; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:inherit; text-decoration:none; transition:var(--transition-colors); }
ul,ol { margin:0; padding:0; list-style:none; }
img,svg { display:block; max-width:100%; }
::selection { background:color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

.skip-link {
  position:absolute; left:-999px; top:0; z-index:100; background:var(--accent);
  color:var(--ink-950); padding:.75rem 1.25rem; border-radius:0 0 var(--radius-md) 0; font-weight:var(--fw-semibold);
}
.skip-link:focus { left:0; }

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

.olv-eyebrow {
  font-family:var(--font-mono); font-size:var(--fs-eyebrow); line-height:var(--lh-eyebrow);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--accent-text);
  margin:0 0 var(--space-5);
}

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-size:var(--fs-body); font-weight:var(--fw-semibold);
  line-height:1; padding:.875rem 1.5rem; border-radius:var(--radius-md); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; transition:var(--transition-colors), transform var(--dur-fast) var(--ease-standard);
}
.btn svg { transition:transform var(--dur-base) var(--ease-standard); }
.btn--primary { background:var(--accent); color:var(--text-on-accent); }
.btn--primary:hover { background:var(--accent-hover); box-shadow:var(--shadow-accent); }
.btn--primary:hover svg { transform:translateX(3px); }
.btn--ghost { background:transparent; color:var(--text-primary); border-color:var(--border-default); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent-text); }
.btn--sm { padding:.625rem 1.125rem; font-size:var(--fs-small); }
.btn--block { width:100%; padding:1rem 1.5rem; }
.btn:active { transform:translateY(1px) scale(.99); }

/* ---------- NAVBAR ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  /* At the top: a soft grey light-from-above scrim that fades into the black hero. */
  background:linear-gradient(180deg, rgba(210,214,220,0.60) 0%, rgba(120,126,135,0.24) 42%, rgba(10,11,13,0) 100%);
  border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
  color:var(--gray-50);
}
.nav.is-scrolled {
  background:color-mix(in srgb, var(--ink-950) 90%, transparent);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.08);
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:68px; gap:var(--space-6); }
.nav__brand { color:var(--gray-50); display:flex; align-items:center; }
.nav__logo { height:32px; width:auto; }
.nav__links { display:flex; align-items:center; gap:var(--space-6); }
.nav__links a { font-size:var(--fs-small); color:var(--gray-300); font-weight:var(--fw-medium); }
.nav__links a:hover { color:var(--gray-50); }
.nav__actions { display:flex; align-items:center; gap:var(--space-4); }

.nav__toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; }
.nav__toggle span { width:22px; height:2px; background:var(--gray-50); border-radius:2px; transition:transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display:none; /* desktop: not part of the layout at all. Enabled under the mobile breakpoint. */
  position:absolute; top:68px; right:0; width:min(320px,86vw);
  background:var(--ink-900); border-left:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0 0 0 var(--radius-lg); padding:var(--space-5); flex-direction:column; gap:var(--space-3);
  transform:translateX(105%); transition:transform var(--dur-base) var(--ease-out); box-shadow:var(--shadow-lg);
}
.nav__mobile.is-open { transform:translateX(0); }
.nav__mobile a { color:var(--gray-200); font-size:var(--fs-body-lg); padding:.5rem 0; font-weight:var(--fw-medium); }
.nav__mobile .btn { margin-top:var(--space-3); }

/* ---------- HERO ---------- */
.hero {
  /* Subtle depth: faint jade halo behind the node graph + soft top-to-dark gradient. */
  background:
    radial-gradient(78% 68% at 78% 32%, rgba(31,203,131,0.09) 0%, rgba(10,11,13,0) 55%),
    linear-gradient(180deg, #0E1116 0%, #0A0B0D 46%);
  padding:calc(68px + var(--space-10)) 0 var(--space-12); overflow:hidden; position:relative;
}
.hero__inner { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:var(--space-9); }
.hero__title {
  font-size:clamp(2.5rem, 4.6vw, 3.85rem); line-height:1.05; letter-spacing:var(--ls-display);
  margin:0 0 var(--space-5); text-wrap:balance;
}
.hero__sub { color:var(--text-secondary); font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); max-width:52ch; margin-bottom:var(--space-7); }
.hero__cta { display:flex; flex-wrap:wrap; gap:var(--space-4); }
.hero__visual { position:relative; aspect-ratio:1/1; width:100%; }
.hero__canvas { width:100%; height:100%; display:block; }

/* ---------- SECTIONS ---------- */
.section { background:var(--bg-base); padding:var(--space-12) 0; }
.section > .container + .container { margin-top:var(--space-11); }
.section__head { max-width:52ch; margin-bottom:var(--space-9); }
.section__head--center { margin-inline:auto; text-align:center; }
.section__title { font-size:clamp(1.9rem, 3.6vw, var(--fs-h2)); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); }
.section__lead { color:var(--text-secondary); font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); margin-top:var(--space-5); }
.section__head--center .section__lead { margin-inline:auto; max-width:60ch; }
.section__cta { margin-top:var(--space-8); }

/* ---------- CARDS ---------- */
.cards { display:grid; gap:var(--space-5); }
.cards--3 { grid-template-columns:repeat(3,1fr); }
.card {
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-6); transition:transform var(--dur-base) var(--ease-standard), var(--transition-colors);
}
.card:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 55%, var(--border-subtle)); box-shadow:var(--shadow-md); }
.dark .card:hover { box-shadow:var(--shadow-md); }
.card__icon { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--accent-subtle); color:var(--accent-text); margin-bottom:var(--space-5); }
.card__icon svg { width:22px; height:22px; }
.card__title { font-size:var(--fs-h4); line-height:var(--lh-h4); letter-spacing:var(--ls-h4); margin-bottom:var(--space-3); }
.card__body { color:var(--text-secondary); font-size:var(--fs-body); }
.cards--principle .card { text-align:left; }

/* ---------- STEPS ---------- */
.process-block { position:relative; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); counter-reset:step; }
.step { position:relative; padding-top:var(--space-6); border-top:1.5px solid var(--border-default); }
.step__num { font-family:var(--font-mono); font-size:var(--fs-small); font-weight:var(--fw-medium); letter-spacing:.1em; color:var(--accent-text); display:block; margin-bottom:var(--space-4); }
.step__title { font-size:var(--fs-h5, 1.125rem); font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:1.1875rem; line-height:1.3; letter-spacing:-.01em; margin-bottom:var(--space-3); }
.step__body { color:var(--text-secondary); font-size:var(--fs-small); line-height:var(--lh-small); }

/* ---------- VALUE POINTS ---------- */
.values { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); padding-top:var(--space-8); border-top:1px solid var(--border-subtle); }
.value { display:flex; gap:var(--space-4); align-items:flex-start; }
.value__icon { flex:none; display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:var(--radius-md); border:1px solid var(--border-default); color:var(--accent-text); }
.value__icon svg { width:20px; height:20px; }
.value__label { font-size:var(--fs-body-lg); font-weight:var(--fw-semibold); font-family:var(--font-display); letter-spacing:-.01em; margin-bottom:var(--space-2); line-height:1.25; }
.value__line { color:var(--text-secondary); font-size:var(--fs-small); }

/* ---------- CONTACT ---------- */
.contact { position:relative; overflow:hidden; }
.contact__inner { position:relative; z-index:1; max-width:640px; margin-inline:auto; text-align:center; }
.contact .section__head { max-width:none; margin-inline:auto; }
.contact__rings { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0; }
.contact__rings span {
  position:absolute; border:1px solid var(--green-400); border-radius:50%; opacity:0;
  width:220px; height:220px; animation:ring-pulse 6s var(--ease-out) infinite;
}
.contact__rings span:nth-child(2){ animation-delay:1.5s; }
.contact__rings span:nth-child(3){ animation-delay:3s; }
.contact__rings span:nth-child(4){ animation-delay:4.5s; }
@keyframes ring-pulse {
  0% { transform:scale(.4); opacity:0; }
  30% { opacity:.28; }
  100% { transform:scale(3.4); opacity:0; }
}

/* ---------- FORM ---------- */
.form { text-align:left; margin-top:var(--space-8); display:grid; gap:var(--space-5); }
.form__hp { position:absolute; left:-9999px; }
.field { position:relative; }
.field input, .field textarea {
  width:100%; font-family:var(--font-body); font-size:var(--fs-body); color:var(--text-primary);
  background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md);
  padding:1.35rem 1rem .6rem; transition:var(--transition-colors); resize:vertical;
}
.field textarea { min-height:120px; padding-top:1.6rem; }
.field input:focus, .field textarea:focus { border-color:var(--border-focus); box-shadow:var(--focus-ring); outline:none; }
.field label {
  position:absolute; left:1rem; top:1rem; font-size:var(--fs-body); color:var(--text-tertiary);
  pointer-events:none; transition:transform var(--dur-fast) var(--ease-standard), font-size var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  transform-origin:left top;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  transform:translateY(-.55rem) scale(.78); color:var(--accent-text);
}
.field--toggle { display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.field__legend { font-size:var(--fs-small); color:var(--text-secondary); font-weight:var(--fw-medium); }
.field__hint { margin-top:var(--space-2); font-size:var(--fs-small); color:var(--text-tertiary); }

.toggle { position:relative; display:inline-flex; background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:4px; }
.toggle__btn { position:relative; z-index:2; padding:.5rem 1.25rem; font-family:var(--font-body); font-size:var(--fs-small); font-weight:var(--fw-medium); color:var(--text-secondary); background:none; border:none; cursor:pointer; border-radius:var(--radius-pill); transition:color var(--dur-fast) var(--ease-standard); }
.toggle__btn.is-active { color:var(--ink-950); }
.toggle__slider { position:absolute; z-index:1; top:4px; left:4px; bottom:4px; width:calc(50% - 4px); background:var(--accent); border-radius:var(--radius-pill); transition:transform var(--dur-base) var(--ease-standard); pointer-events:none; }
.toggle.is-creator .toggle__slider { transform:translateX(100%); }
.toggle__btn:focus-visible { box-shadow:var(--focus-ring); outline:none; }

.form__micro { margin-top:var(--space-3); font-size:var(--fs-small); color:var(--text-tertiary); text-align:center; }
.form__micro a { color:var(--accent-text); }
.form__micro a:hover { color:var(--accent); }
.form__status { font-size:var(--fs-small); text-align:center; padding:.75rem 1rem; border-radius:var(--radius-md); }
.form__status--ok { background:var(--accent-subtle); color:var(--accent-text); }
.form__status--err { background:color-mix(in srgb, #E5484D 14%, transparent); color:#FF8487; }

/* ---------- FOOTER ---------- */
.footer { background:var(--ink-950); color:var(--gray-400); padding:var(--space-11) 0 var(--space-7); }
.footer__inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-8); padding-bottom:var(--space-9); border-bottom:1px solid rgba(255,255,255,.08); }
.footer__brand { color:var(--gray-50); }
.footer__brand svg { height:32px; width:auto; }
.footer__tag { margin-top:var(--space-4); color:var(--gray-400); font-size:var(--fs-small); }
.footer__col { display:flex; flex-direction:column; gap:var(--space-3); }
.footer__heading { font-family:var(--font-body); font-size:var(--fs-small); font-weight:var(--fw-semibold); color:var(--gray-50); text-transform:none; margin-bottom:var(--space-2); }
.footer__col a { color:var(--gray-400); font-size:var(--fs-small); }
.footer__col a:hover { color:var(--green-300); }
.footer__base { display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-6); font-size:var(--fs-small); color:var(--gray-500); }
.footer__mono { font-family:var(--font-mono); letter-spacing:.14em; font-size:var(--fs-eyebrow); }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity:1; transform:none; }
.cards .reveal:nth-child(2){ transition-delay:80ms; }
.cards .reveal:nth-child(3){ transition-delay:160ms; }
.steps .reveal:nth-child(2){ transition-delay:70ms; }
.steps .reveal:nth-child(3){ transition-delay:140ms; }
.steps .reveal:nth-child(4){ transition-delay:210ms; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px) {
  .hero__inner { grid-template-columns:1fr; gap:var(--space-8); }
  .hero__visual { max-width:460px; margin-inline:auto; order:-1; }
  .cards--3 { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); gap:var(--space-7); }
  .values { grid-template-columns:1fr; gap:var(--space-6); }
  .footer__inner { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1 / -1; }
}
@media (max-width:640px) {
  :root { --container-gutter:var(--space-4); }
  .section { padding:var(--space-10) 0; }
  .hero { padding:calc(68px + var(--space-8)) 0 var(--space-10); }
  .hero__visual { display:none; } /* no node-graph animation on phones */
  .nav__links { display:none; }
  .nav__actions .btn--sm { display:none; }
  .nav__toggle { display:flex; }
  .nav__mobile { display:flex; }
  .cards--3 { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; gap:var(--space-6); }
  .footer__inner { grid-template-columns:1fr; gap:var(--space-7); }
  .footer__base { flex-direction:column; gap:var(--space-3); align-items:flex-start; }
  .hero__title { max-width:none; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
  .contact__rings { display:none; }
}