:root {
  --bg: #030303;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-border: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.58);
  --brand-a: #3b5bff;
  --brand-b: #54d4ff;
  --brand-c: #6b46ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  /* Original near-black fallback. The animated pool canvas paints
     over this with the same near-black base + cyan caustics on top,
     so even if the canvas misses a frame the page stays uniformly
     dark instead of flashing. */
  background: #020202;
  color: var(--text);
  font-family: "Inter", sans-serif;
}

/* The dark-pool canvas owns cursor lighting now — no body::before
   spotlight; doubling up would muddy the colors. */

/* Top-down dark pool. The canvas owns the entire viewport and
   draws a deep base + cursor-driven ripples — like looking down
   into a still pond, where touching the surface lights it up.
   Everything (color, ripples, ambient motion) is painted in the
   canvas; this rule just pins it behind the page chrome. */
.landing-pool {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.landing-shell,
.landing-topbar,
.landing-main {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .landing-pool {
    display: none;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

.landing-shell {
  min-height: 100vh;
  padding: 16px 24px 32px;
}

.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 70px;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.landing-brand span:last-child {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.landing-brand-mark,
.hero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #ffffff;
  filter: drop-shadow(0 10px 18px rgba(255, 255, 255, 0.08));
}

.landing-brand-mark svg,
.hero-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.landing-nav {
  display: inline-flex;
  align-items: center;
  gap: 34px;
}

.landing-nav a,
.landing-link {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1;
}

.landing-actions {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 40px;
}

.landing-login-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 40px;
}

.landing-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  min-width: 112px;
}

.landing-login-label {
  white-space: nowrap;
}

.landing-login-spinner {
  width: 13px;
  height: 13px;
  border: 1.8px solid rgba(255, 255, 255, 0.24);
  border-top-color: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 140ms ease, transform 140ms ease;
}

.landing-login-shell.is-loading .landing-login-spinner {
  opacity: 1;
  transform: scale(1);
  animation: landing-login-spin 0.78s linear infinite;
}

.landing-login-shell.is-loading .landing-link {
  pointer-events: none;
}

.landing-login-shell.is-loading .landing-google-login-root {
  pointer-events: none;
}

.landing-google-login-root {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.landing-login-shell.is-google-ready .landing-google-login-root {
  pointer-events: auto;
}

/* While a sign-in is in flight the shell carries BOTH is-loading and
   is-google-ready. The is-google-ready rule above (later in the file,
   same specificity) was re-enabling clicks on the Google button, so a
   second click could fire another auth attempt. This higher-
   specificity rule locks the button out for the duration of the
   loading state — no double-submit. */
.landing-login-shell.is-loading.is-google-ready .landing-google-login-root {
  pointer-events: none;
}

@keyframes landing-login-spin {
  to {
    transform: rotate(360deg);
  }
}

.landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  background: #ffffff;
  color: #0d1017;
  font-weight: 700;
}

.landing-main {
  display: grid;
  gap: 28px;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 48px;
}

.hero-panel {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 84px 16px 46px;
}

/* The hero's only line now that the h1 is gone (Korhan 2026-08-06),
   so it is sized like a headline rather than a caption: it scales
   with the viewport the way the h1 did, and the text sits at near
   full opacity — 0.72 was pitched to sit quietly under a big title
   that no longer exists. */
.hero-badge {
  margin-top: 26px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The kicker under it. Deliberately well short of the pill above —
   roughly half the type size and dimmer — so the two read as one line
   and its footnote rather than two claims arguing for the same
   attention. Tighter top margin for the same reason: it belongs to
   the pill above, not to the space below it. */
.hero-badge.is-sub {
  margin-top: 14px;
  padding: clamp(7px, 0.7vw, 10px) clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.66);
}

.hero-mark {
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  transform:
    translate3d(var(--mark-x, 0), var(--mark-y, 0), 0)
    rotate(var(--mark-r, 0deg));
  transition: transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1);
  animation: hero-mark-float 6s ease-in-out infinite;
  will-change: transform;
}

/* A gentle idle float so the icon doesn't feel frozen even when the
   cursor isn't moving. Combined with the parallax above, the mark
   subtly drifts on its own and tilts toward the pointer. */
@keyframes hero-mark-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark {
    animation: none;
    transition: none;
  }
  body::before {
    transition: none;
  }
}

.hero-panel p {
  max-width: 780px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(0.8rem, 1.45vw, 1.05rem);
  font-weight: 400;
  line-height: 1.35;
}

.hero-search-frame {
  width: min(100%, 780px);
  margin-top: 44px;
}

.hero-search-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 96px;
  padding: 0 24px;
  border-radius: 22px;
  background: #ffffff;
  color: rgba(12, 16, 23, 0.42);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
  font-size: 1.35rem;
}

.hero-arrow {
  color: #10151f;
  font-size: 2rem;
}

.hero-footnote {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.96rem;
  line-height: 1.5;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.landing-card,
.landing-band {
  border: 1px solid var(--panel-border);
  border-radius: 26px;
  background: var(--panel);
  backdrop-filter: blur(10px);
}

.landing-card {
  padding: 28px;
}

.landing-card h2,
.landing-band h2 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.landing-card p,
.landing-band p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.landing-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
}

.landing-band-copy {
  max-width: 760px;
}

.landing-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: #7cb8ff;
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.landing-band-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.landing-link.secondary {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 980px) {
  .landing-topbar,
  .landing-band {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-nav,
  .landing-actions {
    flex-wrap: wrap;
    gap: 14px;
  }

  .landing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .landing-shell {
    padding: 14px 16px 24px;
  }

  .landing-main {
    padding-top: 28px;
  }

  .hero-panel {
    padding-top: 48px;
  }

  .hero-search-input {
    min-height: 82px;
    font-size: 1.02rem;
  }
}