:root{
  --text:#eef6f2;
  --muted:#b6c6bf;
  --white:#ffffff;
  --lime:#e9ff6a;
  --lime-2:#d6ff6b;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:'Rethink Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 550px at 50% 2%, rgba(31,67,58,.55) 0%, rgba(31,67,58,.0) 65%),
    radial-gradient(1200px 800px at 100% 0%, rgba(35,77,64,.45) 0%, rgba(35,77,64,0) 60%),
    linear-gradient(180deg, #0B1D17 0%, #365146 100%);
  background-repeat:no-repeat,no-repeat,no-repeat;
  min-height:100dvh;
  overflow-x:hidden;
}

.wrap{
  width:min(1200px, 92vw);
  margin-inline:auto;
  position:relative;
  padding:28px 0 80px;
}

.topbar{display:flex; align-items:center; justify-content:space-between}
.logo{font-weight:700; letter-spacing:.2px; font-size:24px; color:var(--white); text-decoration:none}
.logo img{display:block; height:24px; width:auto}

.cta{
  appearance:none;
  border:none;
  background:linear-gradient(180deg,var(--lime) 0%, var(--lime-2) 100%);
  color:#0b140f;
  height:48px;
  padding:0 22px;
  border-radius:999px;
  font-weight:400;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(208,255,110,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.btn .icon,.cta .icon{display:block; width:8px; height:8px; margin-left:8px}
.cta:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(208,255,110,.28); filter:brightness(1.03) saturate(1.08)}
.cta:focus-visible{outline:2px solid var(--lime); outline-offset:2px}
.cta:active{transform:translateY(0); box-shadow:0 5px 14px rgba(208,255,110,.22); filter:brightness(.99) saturate(1.04)}

.hero{margin-top:80px; text-align:center}
.hero h1{margin:0 auto 18px; line-height:1.02; font-weight:500; font-size:clamp(36px, 6vw, 68px); letter-spacing:-.6px; max-width:16ch}
.hero p{margin:0 auto 28px; color:var(--muted); max-width:64ch; font-size:15px; line-height:1.6}
.hero .actions{display:flex; gap:12px; justify-content:center}
.will-animate{opacity:0; transform:translateY(8px)}

.splash{margin-top:100px}
.splash-inner{opacity:0; transform:translateY(12px) scale(.98); transform-origin:center center; will-change:transform,opacity; perspective:900px; transform-style:preserve-3d}
.splash-img{display:block; width:min(100%, 1200px); height:auto; margin:0 auto; transition:transform .7s cubic-bezier(.16,1,.3,1); will-change:transform; transform:translateZ(0); transform-origin:center center; pointer-events:auto; backface-visibility:hidden; transform-style:preserve-3d}
/* subtle tilt on hover (fallback when JS disabled) */
.splash-img:hover{transform:perspective(900px) rotateX(3deg) rotateY(-3deg)}
/* disable CSS hover when JS-driven tilt is active */
.js-tilt .splash-img:hover{transform:none}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--white);
  height:48px;
  padding:0 18px;
  border-radius:999px;
  font-weight:400;
  cursor:pointer;
  backdrop-filter:saturate(140%) blur(2px);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-decoration:none;
}
a.btn{text-decoration:none !important;}
.btn:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.10)}
.btn:focus-visible{outline:2px solid var(--lime); outline-offset:2px}
.btn:active{transform:translateY(0); box-shadow:0 4px 12px rgba(0,0,0,.12)}
.btn--solid{border:0; background:var(--white); color:#0e221c}
.btn--solid:hover{background:#f6f8f7; transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12)}
.btn--solid:active{background:#eef2f1}

@media (max-width: 640px){.hero{margin-top:56px}}
@media (prefers-reduced-motion: reduce){.will-animate{opacity:1 !important; transform:none !important} .splash-img{opacity:1 !important; transition:none !important} .splash-img:hover{transform:none !important} .btn,.cta{transition:none !important}}

/* Theme toggle button */
.theme-toggle{position:fixed; left:16px; bottom:16px; width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:var(--white); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:saturate(140%) blur(2px); transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease}
.theme-toggle:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12)}
.theme-toggle:focus-visible{outline:2px solid var(--lime); outline-offset:2px}
.theme-toggle .icon{display:block; width:18px; height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}

/* Light theme overrides */
[data-theme="light"]:root{--text:#0e221c; --muted:#4b5a56}
[data-theme="light"] body{color:var(--text); background:
  radial-gradient(1000px 520px at 50% 2%, rgba(140,190,170,.28) 0%, rgba(140,190,170,0) 60%),
  radial-gradient(1200px 800px at 100% 0%, rgba(170,210,190,.22) 0%, rgba(170,210,190,0) 65%),
  linear-gradient(180deg,#F3F7F5 0%, #DDEAE4 100%);
  background-repeat:no-repeat,no-repeat,no-repeat}
[data-theme="light"] .btn{background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.12); color:#0e221c}
[data-theme="light"] .btn:hover{background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.18); box-shadow:0 6px 18px rgba(0,0,0,.08)}
[data-theme="light"] .btn--solid{background:#0e221c; color:#ffffff}
[data-theme="light"] .btn--solid:hover{background:#0c1b16}
[data-theme="light"] .theme-toggle{border-color:rgba(0,0,0,.12); background:rgba(0,0,0,.06); color:#0e221c}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}