/* landing_hero.css — Hero section + glassmorphism navbar for Kivo landing page.
 * "The Digital Surgeon" dark theme with teal accents.
 * Compiled/served file. Edit in sync with landing_hero.scss (documentation).
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── DESIGN TOKENS (dark mode defaults) ─────────────────────────────────── */
:root {
  --lp-primary:       #00F5D4;        /* electric teal */
  --lp-secondary:     #0F172A;        /* deep navy */
  --lp-tertiary:      #38BDF8;        /* sky blue */
  --lp-bg:            #0a0f13;        /* darkest surface */
  --lp-surface:       #0f1418;        /* card surface */
  --lp-surface-high:  #1b2026;        /* elevated card */
  --lp-text:          #f1f4fa;        /* primary text */
  --lp-text-muted:    #a8abb1;        /* secondary text */
  --lp-outline:       #44484d;        /* ghost border */

  /* Transitions */
  --lp-t-fast: 160ms ease;
  --lp-t-med:  260ms ease;

  /* Radii */
  --lp-radius:      20px;
  --lp-radius-sm:   12px;
  --lp-radius-pill: 999px;
}

/* ── LIGHT MODE OVERRIDES ────────────────────────────────────────────────── */
[data-theme="light"] {
  --lp-bg:           #f0fdfa;
  --lp-surface:      #ffffff;
  --lp-surface-high: #e6faf6;
  --lp-text:         #0f172a;
  --lp-text-muted:   #475569;
  --lp-outline:      #cbd5e1;
}

/* ── KEYFRAMES ───────────────────────────────────────────────────────────── */

@keyframes aurora {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes paw-float {
  0%, 100% { transform: translateY(0px)    rotate(var(--rot, 0deg)); }
  50%       { transform: translateY(-13px) rotate(var(--rot, 0deg)); }
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
.landing-page {
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── CONTAINER ───────────────────────────────────────────────────────────── */
.lp-container {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 28px;
}

/* ── SCROLL REVEAL ───────────────────────────────────────────────────────── */
.lp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.60s ease, transform 0.60s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.lp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── FLOATING GLASSMORPHISM NAVBAR ──────────────────────────────────────── */
.lp-nav {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(10, 15, 19, 0.72);
  border: 1px solid rgba(0, 245, 212, 0.12);
  border-radius: 16px;
  left: 16px;
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 200;
}

[data-theme="light"] .lp-nav {
  background: rgba(240, 253, 250, 0.82);
  border-color: rgba(0, 245, 212, 0.22);
}

.lp-nav__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 20px;
}

.lp-nav__actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

/* ── BRAND ───────────────────────────────────────────────────────────────── */
.lp-brand {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  text-decoration: none;
  transition: opacity var(--lp-t-fast);
}
.lp-brand:hover { opacity: 0.80; }

.lp-brand__mark {
  align-items: center;
  background: var(--lp-primary);
  border-radius: 10px;
  color: #0a0f13;
  display: flex;
  font-family: "Bungee", cursive;
  font-size: 17px;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.lp-brand__name {
  color: var(--lp-text);
  font-family: "Bungee", cursive;
  font-size: 20px;
  letter-spacing: 0.02em;
}

/* ── THEME TOGGLE ────────────────────────────────────────────────────────── */
.lp-theme-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--lp-outline);
  border-radius: var(--lp-radius-pill);
  color: var(--lp-text-muted);
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  transition: background var(--lp-t-fast), border-color var(--lp-t-fast), color var(--lp-t-fast);
  width: 36px;
}
.lp-theme-toggle:hover {
  background: rgba(0, 245, 212, 0.10);
  border-color: var(--lp-primary);
  color: var(--lp-primary);
}
.lp-theme-toggle:focus-visible {
  outline: 3px solid var(--lp-primary);
  outline-offset: 3px;
}

/* Show moon in dark mode, sun in light mode */
.lp-theme-toggle__moon { display: block; }
.lp-theme-toggle__sun  { display: none;  }

[data-theme="light"] .lp-theme-toggle__moon { display: none;  }
[data-theme="light"] .lp-theme-toggle__sun  { display: block; }

/* ── NAV CTA ─────────────────────────────────────────────────────────────── */
.lp-nav__cta {
  font-size: 14px;
  min-height: 36px;
  padding: 8px 18px;
}

/* ── NAV LINKS ───────────────────────────────────────────────────────────── */
.lp-nav__links {
  align-items: center;
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-nav__link {
  border-radius: 8px;
  color: var(--lp-text-muted);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  text-decoration: none;
  transition: background var(--lp-t-fast), color var(--lp-t-fast);
}

.lp-nav__link:hover {
  background: rgba(0, 245, 212, 0.08);
  color: var(--lp-primary);
}

.lp-nav__link:focus-visible {
  outline: 3px solid var(--lp-primary);
  outline-offset: 3px;
}

[data-theme="light"] .lp-nav__link { color: var(--lp-text-muted); }
[data-theme="light"] .lp-nav__link:hover { color: var(--lp-primary); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.lp-btn {
  align-items: center;
  border: none;
  border-radius: var(--lp-radius-pill);
  cursor: pointer;
  display: inline-flex;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  line-height: 1;
  min-height: 46px;
  padding: 12px 24px;
  text-decoration: none;
  transition:
    background var(--lp-t-fast),
    box-shadow var(--lp-t-fast),
    border-color var(--lp-t-fast),
    color var(--lp-t-fast),
    opacity var(--lp-t-fast),
    transform var(--lp-t-fast);
  white-space: nowrap;
}
.lp-btn:focus-visible {
  outline: 3px solid var(--lp-primary);
  outline-offset: 3px;
}
.lp-btn--lg { font-size: 16px; min-height: 54px; padding: 15px 32px; }

/* Primary — solid teal, dark text */
.lp-btn--primary {
  background: var(--lp-primary);
  box-shadow: 0 4px 22px rgba(0, 245, 212, 0.28);
  color: #0a0f13;
}
.lp-btn--primary:hover {
  box-shadow: 0 8px 32px rgba(0, 245, 212, 0.42);
  color: #0a0f13;
  transform: translateY(-2px) scale(1.02);
}
.lp-btn--primary:active { transform: translateY(0) scale(0.99); }

/* Secondary — ghost with teal border */
.lp-btn--secondary {
  background: transparent;
  border: 1.5px solid var(--lp-primary);
  color: var(--lp-primary);
}
.lp-btn--secondary:hover {
  background: rgba(0, 245, 212, 0.10);
  color: var(--lp-primary);
  transform: translateY(-2px) scale(1.02);
}
.lp-btn--secondary:active { transform: translateY(0) scale(0.99); }

/* Outline — nav link */
.lp-btn--outline {
  background: transparent;
  border: 1.5px solid var(--lp-outline);
  color: var(--lp-text-muted);
  font-size: 14px;
  min-height: 36px;
  padding: 8px 18px;
}
.lp-btn--outline:hover {
  border-color: var(--lp-primary);
  color: var(--lp-primary);
  transform: scale(1.02);
}

/* ── HERO SECTION ────────────────────────────────────────────────────────── */
.lp-hero {
  animation: aurora 18s ease infinite;
  background: linear-gradient(
    -45deg,
    #0a0f13,
    #0d1f2d,
    #0f2a3a,
    rgba(0, 245, 212, 0.08) 60%,
    #0a0f13
  );
  background-size: 600% 600%;
  min-height: 100svh;
  overflow: hidden;
  padding: 144px 0 108px;
  position: relative;
  text-align: center;
}

/* Radial teal glow overlays */
.lp-hero::before {
  background:
    radial-gradient(ellipse 860px 560px at 28%  78%, rgba(0, 245, 212, 0.08) 0%, transparent 58%),
    radial-gradient(ellipse 580px 380px at 78%  18%, rgba(56, 189, 248, 0.06) 0%, transparent 54%);
  content: "";
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

/* Light mode hero gradient */
[data-theme="light"] .lp-hero {
  background: linear-gradient(
    -45deg,
    #e0fdf9,
    #f0fdfa,
    #ccfbf1,
    rgba(0, 245, 212, 0.18) 60%,
    #f0fdfa
  );
  background-size: 600% 600%;
}
[data-theme="light"] .lp-hero::before {
  background:
    radial-gradient(ellipse 860px 560px at 28% 78%, rgba(0, 245, 212, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 580px 380px at 78% 18%, rgba(56, 189, 248, 0.10) 0%, transparent 54%);
}

/* ── PAW PRINTS ──────────────────────────────────────────────────────────── */
.lp-paws {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.lp-paw {
  animation: paw-float var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  color: #ffffff;
  height: var(--size, 36px);
  left: var(--x, 50%);
  opacity: var(--op, 0.05);
  position: absolute;
  top: var(--y, 50%);
  width: var(--size, 36px);
}

[data-theme="light"] .lp-paw {
  color: #0f172a;
}

/* ── HERO CONTENT ────────────────────────────────────────────────────────── */
.lp-hero__content {
  position: relative;
  z-index: 2;
}

/* Eyebrow pill badge */
.lp-hero__eyebrow {
  background: rgba(0, 245, 212, 0.08);
  border: 1px solid rgba(0, 245, 212, 0.30);
  border-radius: var(--lp-radius-pill);
  color: var(--lp-primary);
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  margin: 0 0 28px;
  padding: 6px 18px;
  text-transform: uppercase;
}

[data-theme="light"] .lp-hero__eyebrow {
  background: rgba(0, 245, 212, 0.12);
  border-color: rgba(0, 245, 212, 0.40);
}

/* Headline */
.lp-hero__headline {
  color: var(--lp-text);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 28px;
}

/* Gradient accent span */
.lp-hero__accent {
  background: linear-gradient(95deg, #00F5D4 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  -webkit-text-fill-color: transparent;
}

/* Subtext */
.lp-hero__sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.72;
  margin: 0 auto 44px;
  max-width: 560px;
}

[data-theme="light"] .lp-hero__sub {
  color: var(--lp-text-muted);
}

/* CTA buttons row */
.lp-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 20px;
}

/* No-credit-card note */
.lp-hero__note {
  color: var(--lp-text-muted);
  font-size: 13px;
  margin: 0 0 52px;
}

/* ── TRUST STRIP ─────────────────────────────────────────────────────────── */
.lp-hero__trust {
  align-items: center;
  border-top: 1px solid rgba(0, 245, 212, 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 460px;
  padding-top: 36px;
}

.lp-trust-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
  min-width: 110px;
  padding: 0 20px;
  text-align: center;
}

.lp-trust-item strong {
  color: var(--lp-primary);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.lp-trust-item span {
  color: var(--lp-text-muted);
  font-size: 12px;
  font-weight: 500;
}

.lp-trust-divider {
  background: rgba(0, 245, 212, 0.15);
  height: 38px;
  width: 1px;
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp-hero { animation: none; }
  .lp-paw  { animation: none; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-btn,
  .lp-brand,
  .lp-theme-toggle { transition: none; }
  .lp-btn:hover,
  .lp-btn--primary:hover,
  .lp-btn--secondary:hover,
  .lp-btn--outline:hover { transform: none; }
}

/* ── RESPONSIVE — 1024px ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-hero { padding: 136px 0 96px; }
}

/* ── RESPONSIVE — 768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lp-nav { left: 12px; right: 12px; top: 12px; }
  .lp-nav__inner { min-height: 54px; padding: 0 16px; }
  .lp-nav__links { display: none; }
  .lp-hero { padding: 126px 0 88px; }
}

/* ── RESPONSIVE — 640px ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lp-nav__actions { gap: 8px; }
  .lp-hero { min-height: auto; padding: 112px 0 80px; }
  .lp-hero__actions {
    align-items: stretch;
    flex-direction: column;
    padding: 0 8px;
  }
  .lp-btn--lg { width: 100%; }
  .lp-hero__trust { gap: 8px; max-width: 100%; }
  .lp-trust-divider { display: none; }
  .lp-trust-item { flex: none; min-width: 88px; padding: 0 10px; }
}

/* ── RESPONSIVE — 375px ──────────────────────────────────────────────────── */
@media (max-width: 375px) {
  .lp-nav { border-radius: 12px; left: 8px; right: 8px; top: 8px; }
  .lp-brand__name { font-size: 17px; }
  .lp-hero__headline { letter-spacing: -0.03em; }
  .lp-hero__actions { padding: 0 4px; }
}