/* ═══════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.55; color: var(--fg);
  background: var(--c-card);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6); }

/* Shared focus-visible ring — shadcn accessibility convention
   (every interactive component gets ring-2 ring-ring on keyboard focus). */
.nav-link:focus-visible,
.nav-login:focus-visible,
.btn:focus-visible,
.form-submit:focus-visible,
.footer-inner a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-card), 0 0 0 4px hsl(var(--ring));
}

/* ═══════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════ */
/* prussian appbar — sits flush against the prussian hero, and stays solid
   once it sticks over the lighter sections below */
.site-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--space-16); background: var(--prussian);
  border-bottom: 1px solid var(--prussian);
  box-shadow: var(--shadow-sm);
}
.header-inner { max-width: 1320px; height: 100%; display: flex; align-items: center; gap: var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-2); }
.brand-logo { height: var(--space-8); width: auto; display: block; }
.brand-logo .bl-mark { stroke: var(--cyan); }
.brand-logo .bl-word { fill: #fff; }
.site-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.nav-link {
  height: var(--space-8); padding: 0 var(--space-4); border-radius: 9999px;
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 500; color: rgba(221,231,234,.78);
  transition: background .15s, color .15s;
}
.nav-link:hover { background: rgba(221,231,234,.10); color: #fff; }
.nav-login {
  margin-left: var(--space-2); height: var(--space-8); padding: 0 var(--space-4); border-radius: 9999px;
  display: inline-flex; align-items: center;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 14px; font-weight: 600;
  transition: opacity .15s, box-shadow .15s;
}
.nav-login:hover { opacity: .92; box-shadow: 0 3px 12px rgba(0,155,194,.40); }

/* ═══════════════════════════════════════════════════
   HERO — copy left · energy field bleeding off the right
═══════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden; background: var(--prussian);
  padding: var(--space-28) 0 var(--space-30); min-height: 784px;
  display: flex; align-items: center;
}
/* glow sits directly behind the centre of the waveform field, so the
   blueprint grid lights up underneath it and falls away at the edges */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(900px 620px at 63% 44%, rgba(0,155,194,.30), transparent 66%),
    radial-gradient(520px 340px at 8% 82%, rgba(28,88,100,.42), transparent 70%);
}
/* blueprint grid — spans the whole hero, fading toward the bottom */
.hero::after {
  content: ''; position: absolute; inset: 0; opacity: .19; pointer-events: none;
  background-image:
    linear-gradient(rgba(221,231,234,.19) 1px, transparent 1px),
    linear-gradient(90deg, rgba(221,231,234,.19) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 0 -2px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero > .wrap { max-width: 1320px; position: relative; z-index: 2; }
.hero-copy { max-width: 720px; margin-top: calc(var(--space-6) * -3); margin-left: 56px; }
.hero h1 {
  margin-top: calc(var(--space-6) * -1);
  font-size: clamp(48px, 6.5vw, 80px); line-height: 1.05;
  font-weight: 700; letter-spacing: -.024em; color: #fff;
}
.hero p {
  margin-top: var(--space-6); max-width: 660px;
  font-size: 24px; line-height: 1.55; color: rgba(221,231,234,.84); font-weight: 300;
}
/* gap to the buttons is deliberately 2x the gap between the two sentences above;
   the extra --space-6 offsets the heading's own lift so the buttons stay put */
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: calc(var(--space-12) + var(--space-6)); }
.btn {
  height: var(--space-12); padding: 0 var(--space-6); border-radius: 9999px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600;
  transition: opacity .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 2px 10px rgba(0,155,194,.38); }
.btn-primary:hover { opacity: .93; box-shadow: 0 5px 18px rgba(0,155,194,.48); }
.btn-ghost { background: transparent; color: var(--alice); border-color: rgba(221,231,234,.30); }
.btn-ghost:hover { background: rgba(221,231,234,.10); border-color: rgba(221,231,234,.55); }

/* ── Hero visual: layered waveform field.
      Sits behind the copy, runs under the text on the left and bleeds
      off the right edge of the viewport. Masked so the text stays readable. ── */
.hero-visual {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; transform: translateY(-66%);
  left: 8%; right: -18%; height: 140%;
  /* horizontal fade keeps the copy readable; vertical fade stops the field
     from being cut off at the bottom of the hero */
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.26) 16%, #000 44%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.26) 16%, #000 44%, #000 100%),
    linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.hero-visual::before {
  content: ''; position: absolute; inset: 6% -4%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,155,194,.18), transparent 74%);
  filter: blur(8px);
}
.hero-visual canvas { position: relative; width: 100%; height: 100%; display: block; }

/* ═══════════════════════════════════════════════════
   SECTION CHROME
═══════════════════════════════════════════════════ */
.section { padding: var(--space-24) 0; }
.section.tinted { background: var(--bg); border-block: 1px solid var(--c-border); }
.section-head { max-width: 700px; margin: 0 auto var(--space-12); text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15;
  font-weight: 700; letter-spacing: -.018em; color: var(--prussian);
}
.section-head p { margin-top: var(--space-4); font-size: 16.5px; color: var(--c-muted-fg); line-height: 1.7; }

/* ── Feature cards — app card language: 1px border, sm shadow, hue-tinted icon ── */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); }
.feature-card {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.feature-icon {
  width: var(--space-10); height: var(--space-10); border-radius: var(--radius-lg);
  display: grid; place-items: center; margin-bottom: var(--space-4);
  background: color-mix(in srgb, var(--hue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue) 22%, transparent);
}
.feature-icon svg { width: 20px; height: 20px; color: var(--hue); }
.feature-card h3 { font-size: 16px; font-weight: 600; color: var(--prussian); letter-spacing: -.005em; }
.feature-card p { margin-top: var(--space-2); font-size: 14.5px; line-height: 1.65; color: var(--c-muted-fg); }

/* ═══════════════════════════════════════════════════
   DEMO
═══════════════════════════════════════════════════ */
.form-card {
  max-width: 620px; margin: 0 auto;
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden;
}
/* header styled to match the app's section card headers:
   prussian bar · white rounded icon tile with a cyan glyph ·
   white title over a vanilla subtitle */
.form-card-head {
  padding: var(--space-4) var(--space-6); min-height: var(--space-20); background: var(--prussian);
  display: flex; align-items: center; gap: var(--space-4);
}
.form-card-head-icon {
  width: var(--space-12); height: var(--space-12); flex: none;
  background: #fff; border-radius: var(--radius-xl);
  display: grid; place-items: center;
}
.form-card-head-icon svg { width: 21px; height: 21px; color: hsl(var(--primary)); }
.form-card-head-title { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.005em; }
.form-card-head-sub { font-size: 13.5px; color: var(--vanilla); margin-top: 2px; line-height: 1.4; }
.form-card-body { padding: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
.fld { display: flex; flex-direction: column; gap: var(--space-2); }
.fld.full { grid-column: 1 / -1; }
.lab { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted-fg); }
.inp {
  height: var(--space-10); padding: 0 var(--space-4); width: 100%;
  border: 1px solid var(--c-input); border-radius: var(--radius);
  background: #fff; font-family: inherit; font-size: 14px; color: var(--fg);
  transition: border-color .15s, box-shadow .15s;
}
textarea.inp { height: var(--space-24); padding: var(--space-2) var(--space-4); resize: vertical; line-height: 1.55; }
.inp::placeholder { color: var(--c-muted-fg); }
.inp:hover:not(:focus) { border-color: var(--teal-60); }
.inp:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px var(--cyan-14); }
.form-submit {
  grid-column: 1 / -1; width: 100%; height: var(--space-12); margin-top: 0;
  border: none; border-radius: 9999px; cursor: pointer;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-shadow: 0 2px 10px rgba(0,155,194,.38);
  transition: opacity .15s, box-shadow .15s;
}
.form-submit svg { width: 16px; height: 16px; flex: none; }
.form-submit:hover { opacity: .93; box-shadow: 0 5px 18px rgba(0,155,194,.48); }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.site-footer { background: var(--prussian); padding: var(--space-8) 0; }
.footer-inner { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 13px; color: rgba(221,231,234,.62); }
.footer-inner .footer-brand { font-weight: 700; letter-spacing: .01em; color: #fff; font-size: 15px; }
.footer-inner a { color: var(--alice); font-weight: 600; }
.footer-inner a:hover { color: var(--cyan); }
.footer-sep { width: 1px; height: 13px; background: rgba(221,231,234,.19); }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero { padding: var(--space-18) 0 var(--space-20); min-height: 544px; }
  .hero-visual { left: 0; right: -34%; height: 118%; opacity: .8; }
  .section { padding: var(--space-16) 0; }
}
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
  .form-card-body { grid-template-columns: 1fr; }
  .nav-link { display: none; }
  .hero p { font-size: 16.5px; }
  .hero-visual { right: -60%; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .hero-visual canvas { --paused: 1; } }

/* ═══════════════════════════════════════════════════
   WORDPRESS INTEGRATSIOON
   Väiksed lisad WP-menüü ja tavaliste lehtede jaoks.
═══════════════════════════════════════════════════ */
.site-nav ul { display: contents; }
.site-nav li { list-style: none; }
.page-content { padding-block: var(--space-16); }