/* ===== Theme tokens (Light defaults) ===== */
:root{
  --emerald:#059669;
  --emerald-600:#047857;

  /* light palette */
  --ink:#0a0a0a;
  --muted:#525252;
  --paper:#ffffff;

  /* surfaces, borders */
  --surface:#ffffff;
  --surface-2:#f7f7f7;
  --border:#e5e5e5;

  /* bottom glow opacity (light/dark balanced) */
  --glow: .18;
}

/* ===== Dark theme overrides when effective is dark ===== */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --ink:#ffffff;
    --muted:#b3b3b3;
    --paper:#0a0a0a;
    --surface:#0f0f0f;
    --surface-2:#111111;
    --border:#1f1f1f;
    --glow:.18;
  }
}
[data-theme="dark"]{
  --ink:#ffffff;
  --muted:#b3b3b3;
  --paper:#0a0a0a;
  --surface:#0f0f0f;
  --surface-2:#111111;
  --border:#1f1f1f;
  --glow:.18;
}
[data-theme="light"]{
  --ink:#0a0a0a;
  --muted:#525252;
  --paper:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7f7f7;
  --border:#e5e5e5;
  --glow:.18;
}

/* ===== Base ===== */
*{box-sizing:border-box} html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Links keep current color; subtle emerald underline on hover */
a, a:visited { color: inherit; text-decoration: none; }
a:hover { opacity:.96 }
a.link{ position:relative; padding-bottom:2px; }
a.link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
  background:linear-gradient(90deg, var(--emerald), var(--emerald-600));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
a.link:hover::after{ transform:scaleX(1); }

/* ===== Layout ===== */
.wrap{
  max-width:880px;
  margin:0 auto;
  min-height:100vh;
  padding:12vh 1.5rem 12vh;
  text-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Theme toggle (top-right) */
.theme-toggle{
  position: fixed;
  top: 16px; right: 16px;
  z-index: 10;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .7rem; border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer; user-select:none;
  font-weight:600; font-size:.9rem;
}
.theme-toggle .icon-sun{ display:inline }
.theme-toggle .icon-moon{ display:none }
[data-theme="dark"] .theme-toggle .icon-sun,
[data-theme="auto"] .is-dark .icon-sun { display:none }
[data-theme="dark"] .theme-toggle .icon-moon,
[data-theme="auto"] .is-dark .icon-moon { display:inline }
.theme-toggle .theme-label{ opacity:.7; font-weight:600; font-size:.85rem }

/* Brand */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.logo-wrap{
  position: relative; display:grid; place-items:center;
  width:48px; height:48px; border-radius:14px; isolation:isolate;
}
/* Emerald halo ring */
.logo-wrap::before{
  content:""; position:absolute; inset:-2px; border-radius:16px;
  background:conic-gradient(from 210deg, rgba(5,150,105,0) 0%, rgba(5,150,105,.55) 40%, rgba(5,150,105,0) 80%);
  filter:blur(.4px); opacity:.55;
}
/* Transparent plate so it works on both light & dark */
.logo-wrap::after{
  content:""; position:absolute; inset:0; border-radius:12px; background:transparent;
}
/* Use contain to avoid cropping, no forced white background */
.logo{ width:48px; height:48px; border-radius:0; position:relative; z-index:1; object-fit:contain }

.brand-name{
  margin:0;
  font:700 clamp(26px, 5vw, 34px) "Space Grotesk", Inter, ui-sans-serif;
  letter-spacing:.02em;
}
.brand-tag{
  margin-top:2px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.16em;
}

.intro{
  margin:1.5rem auto 0; color:var(--muted); line-height:1.7;
  font-size:1.075rem;
  max-width:52rem;
}

/* ===== Buttons ===== */
.actions{
  display:flex; justify-content:center; gap:1rem; margin:2rem auto 0; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.2rem; border-radius:999px; border:1px solid var(--border);
  font-weight:600; background:transparent; color:var(--ink); transition:.2s ease;
}
.btn:focus-visible{ outline:3px solid rgba(5,150,105,.25); outline-offset:2px }

.btn-primary{
  background:var(--emerald); color:#fff; border-color:var(--emerald);
  box-shadow:0 6px 16px rgba(5,150,105,.22), 0 2px 6px rgba(5,150,105,.18);
}
.btn-primary:hover{ background:var(--emerald-600); border-color:var(--emerald-600) }

.btn-ghost{
  background:var(--surface-2); border-color:var(--border);
}
.btn-ghost:hover{ filter:brightness(.96) }

/* visited override */
.btn, .btn:visited { color: var(--ink); }
.btn-primary, .btn-primary:visited { color:#fff; }

/* ===== Footer ===== */
.foot{
  margin-top:-2vh;
  padding:3rem 1.5rem 4rem;
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  border-top:1px solid var(--border);
  background:transparent;
}

/* ===== Subtle grain (applies in both modes, very faint in light) ===== */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* Bottom emerald glow (light + dark) */
body::after{
  content:""; position:fixed; bottom:-22vh; left:50%; transform:translateX(-50%);
  width:140vw; height:70vh; pointer-events:none; z-index:-1;
  background:radial-gradient( circle at bottom center, rgba(5,150,105,var(--glow)) 0%, rgba(5,150,105,0) 65% );
  filter:blur(60px);
}

/* ===== Responsive polish ===== */
@media (min-width: 900px){
  .intro{ font-size:1.1rem }
  .btn{ padding:.95rem 1.25rem }
}