@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  /* ── Palette ── */
  --bg:       #dde1e7;
  --bg-card:  #dde1e7;
  --bg-card2: #d4d8de;
  --bg-deep:  #c8ccd3;

  /* ── Accent (green works on light) ── */
  --accent:        #00A84A;
  --accent2:       #00C853;
  --accent3:       #1DE9B6;
  --accent-dim:    rgba(0,168,74,.1);
  --accent-border: rgba(0,168,74,.28);
  --accent-glow:   rgba(0,168,74,.22);

  /* ── State ── */
  --red:   #e53935;

  /* ── Text ── */
  --text:  #1e2327;
  --text2: #7a8590;
  --text3: #b0bac4;

  /* ── Borders ── */
  --border:  rgba(0,0,0,.06);
  --border2: rgba(0,0,0,.1);

  /* ── Neumorphic shadows (light source: top-left) ── */
  --neu:         8px 8px 16px #c3c7cd, -8px -8px 16px #f5f9ff;
  --neu-sm:      5px 5px 10px #c8ccd2, -5px -5px 10px #f2f6fc;
  --neu-xs:      3px 3px 7px  #c8ccd2, -3px -3px 7px  #f2f6fc;
  --neu-inset:   inset 5px 5px 10px #c3c7cd, inset -5px -5px 10px #f5f9ff;
  --neu-pressed: inset 3px 3px 7px  #c3c7cd, inset -3px -3px 7px  #f5f9ff;

  /* ── Nav (stays dark for contrast) ── */
  --nav-bg:   #1a1d22;
  --nav-text: rgba(255,255,255,.55);
  --nav-act:  #ffffff;

  /* ── Typography ── */
  --radius: 18px;
  --font:   'Space Grotesk', system-ui, sans-serif;
  --mono:   'Space Mono', monospace;
}

@keyframes pageFadeIn { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:translateY(0) } }

body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color .35s, color .35s;
  animation: pageFadeIn .45s ease both;
}

/* Subtle body texture — very light grain */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(0,0,0,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.018) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── ANIMATIONS ── */
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(0,168,74,.6)}50%{box-shadow:0 0 0 7px rgba(0,168,74,0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes line-grow{from{width:0}to{width:100%}}

/* Shimmer text — green gradient on light bg */
.shimmer-text{
  background: linear-gradient(90deg,#007A35 0%,#00A84A 20%,#00C853 50%,#00A84A 80%,#007A35 100%);
  background-size: 300% 100%;
  animation: shimmer 5s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.shimmer-bg{
  background: linear-gradient(90deg,#00A84A,#00C853,#1DE9B6,#00A84A);
  background-size: 300% 100%;
  animation: shimmer 4s ease infinite;
}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════ NAV ══════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:64px;padding:0 32px;
  display:flex;align-items:center;
  background: rgba(18,20,26,.68);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .3s, background .3s;
}
.nav.scrolled{
  background: rgba(14,16,22,.82);
  box-shadow: 0 4px 32px rgba(0,0,0,.32);
}
.nav-inner{max-width:1280px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo-wordmark{font-weight:700;font-size:17px;letter-spacing:3px;color:#fff}
/* Logo image — white by default (nav always dark); invert in light-theme footer */
.logo-img{height:36px;width:auto;display:block;transition:filter .3s}
.logo-img-sm{height:26px}
html:not([data-theme="dark"]) .footer-brand .logo-img{filter:invert(1)}

/* Links */
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links a{
  display:block;padding:6px 16px;border-radius:8px;
  text-decoration:none;font-size:13px;font-weight:500;
  color:var(--nav-text);transition:all .2s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-links a.active{
  color:#fff;
  background: rgba(255,255,255,.12);
}

/* CTA button */
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 22px;border-radius:8px;
  background: var(--accent);color:#fff;
  font-family:var(--font);font-size:13px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  transition:all .2s;letter-spacing:.3px;
  box-shadow: 0 2px 8px rgba(0,168,74,.35);
}
.nav-cta:hover{background:var(--accent2);box-shadow:0 4px 16px rgba(0,168,74,.45);transform:translateY(-1px)}

/* ══════════════════════════════ BUTTONS ════════════════════════════════ */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:12px;
  background: var(--accent);color:#fff;
  font-family:var(--font);font-size:15px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;transition:all .2s;
  box-shadow: 0 4px 14px rgba(0,168,74,.3);
}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,168,74,.4)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:12px;
  background: var(--bg);color:var(--text);
  font-family:var(--font);font-size:15px;font-weight:600;
  text-decoration:none;border:none;cursor:pointer;transition:all .2s;
  box-shadow: var(--neu-sm);
}
.btn-ghost:hover{box-shadow:var(--neu);transform:translateY(-1px)}
.btn-ghost:active{box-shadow:var(--neu-pressed);transform:translateY(0)}
.btn-sm{padding:8px 18px !important;font-size:13px !important;border-radius:9px !important}

/* ══════════════════════════════ CARDS ══════════════════════════════════ */
.card{
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--neu);
  transition: box-shadow .3s, transform .3s;
  border: 1px solid rgba(255,255,255,.65);
}
.card:hover{box-shadow:10px 10px 22px #bec2c8,-10px -10px 22px #fcffff;transform:translateY(-3px)}

/* ══════════════════════════ SECTION UTILS ══════════════════════════════ */
.section{padding:100px 32px}
.section-inner{max-width:1280px;margin:0 auto}
.section-hdr{margin-bottom:56px}

/* "Engraved / stamped" tag label — pressed into the surface */
.sec-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;
  color: #8a9aa6;
  text-shadow: 1px 1px 0 rgba(255,255,255,.9), -1px -1px 0 rgba(0,0,0,.05);
  margin-bottom:14px;
}
.sec-tag::before{content:'';width:22px;height:1px;background:var(--accent)}

.sec-title{
  font-size:clamp(30px,3.5vw,52px);font-weight:700;
  letter-spacing:-.5px;line-height:1.1;margin-bottom:14px;
  color: var(--text);
}
.sec-desc{font-size:16px;color:var(--text2);max-width:500px;line-height:1.7}

.divider{height:1px;background:rgba(0,0,0,.07);max-width:1280px;margin:0 auto}

/* ══════════════════════════ FORM ELEMENTS ══════════════════════════════ */
.form-group{margin-bottom:18px}
.form-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.8px;
  color:#8a9aa6;text-transform:uppercase;margin-bottom:8px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.8);
}
.form-input,.form-select,.form-textarea{
  width:100%;padding:12px 15px;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,.7);
  border-radius:10px;color:var(--text);font-family:var(--font);font-size:14px;
  transition:box-shadow .2s;outline:none;
  -webkit-appearance:none;appearance:none;
  box-shadow: var(--neu-inset);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color: var(--accent-border);
  box-shadow: var(--neu-inset), 0 0 0 2px rgba(0,168,74,.1);
}
.form-input::placeholder{color:var(--text3)}
.form-textarea{height:110px;resize:vertical}
.btn-submit{
  width:100%;padding:15px;border-radius:12px;font-family:var(--font);font-size:15px;font-weight:700;
  cursor:pointer;border:none;letter-spacing:.4px;color:#fff;
  background: var(--accent);
  box-shadow: 0 4px 16px rgba(0,168,74,.35);
  transition:transform .2s,box-shadow .2s;
}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,168,74,.45)}
.btn-submit:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,168,74,.25)}

/* ══════════════════════════ PAGE HERO BASE ═════════════════════════════ */
.page-hero{padding:120px 32px 80px;position:relative;overflow:hidden}
.page-hero-inner{max-width:1280px;margin:0 auto}
.page-hero-tag{
  display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:100px;
  background: var(--bg);
  box-shadow: var(--neu-sm);
  border: 1px solid rgba(255,255,255,.7);
  font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:24px;
}
.page-hero-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse-dot 2s ease infinite}
.page-hero-title{font-size:clamp(42px,5vw,70px);font-weight:700;line-height:1.06;letter-spacing:-1.5px;margin-bottom:20px;color:var(--text)}
.page-hero-desc{font-size:17px;color:var(--text2);line-height:1.75;max-width:560px}

/* ══════════════════════════════ BADGES ════════════════════════════════ */
.badge{display:inline-flex;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.badge-green{
  background: var(--accent-dim);color:var(--accent);
  border:1px solid var(--accent-border);
}
.badge-red{background:rgba(229,57,53,.08);color:var(--red);border:1px solid rgba(229,57,53,.2)}
.badge-gray{
  background: var(--bg);color:var(--text2);
  box-shadow: var(--neu-xs);
  border:1px solid rgba(255,255,255,.65);
}

/* ══════════════════════════════ FOOTER ════════════════════════════════ */
.footer{
  border-top:1px solid rgba(255,255,255,.55);
  padding:36px 32px;
  background: rgba(215,220,228,.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  position: relative;
  z-index: 1;
}
.footer-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff}
.footer-wordmark{font-weight:700;letter-spacing:3px;font-size:14px;color:var(--text)}
/* Logo inherits dark color from footer-brand; in light theme footer bg is light so logo must be dark */
html:not([data-theme="dark"]) .footer-brand { color: #1a1d22; }
.footer-links{display:flex;gap:22px}
.footer-links a{
  font-size:12px;color:var(--text2);text-decoration:none;transition:color .2s;
}
.footer-links a:hover{color:var(--accent)}
.footer-copy{font-size:12px;color:var(--text3)}
.footer-disc{
  max-width:1280px;margin:20px auto 0;
  font-size:10px;color:var(--text3);line-height:1.7;
  padding-top:20px;border-top:1px solid rgba(0,0,0,.07);
}

/* ══════════════════════════════════════════════════════════════════════
   DARK THEME — variable overrides
══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:            #060606;
  --bg-card:       #0e0e0e;
  --bg-card2:      #121212;
  --bg-deep:       #0a0a0a;

  --accent:        #00E676;
  --accent2:       #69FF47;
  --accent3:       #1DE9B6;
  --accent-dim:    rgba(0,230,118,.07);
  --accent-border: rgba(0,230,118,.18);
  --accent-glow:   rgba(0,230,118,.28);

  --red:    #FF5555;
  --text:   #F0F0F0;
  --text2:  #909090;
  --text3:  #444444;

  --border:  rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.1);

  /* kill neumorphic in dark mode */
  --neu:         0 0 0 transparent;
  --neu-sm:      0 0 0 transparent;
  --neu-xs:      0 0 0 transparent;
  --neu-inset:   inset 0 0 0 transparent;
  --neu-pressed: inset 0 0 0 transparent;
}

/* ── Dark mode component overrides ── */
html[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(0,230,118,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,118,.012) 1px, transparent 1px);
}
html[data-theme="dark"] .shimmer-text {
  background: linear-gradient(90deg,#00FF88 0%,#69FF47 20%,#1DE9B6 50%,#00C853 80%,#00FF88 100%);
  background-size: 300% 100%;
  /* Must re-declare clip props — browser won't re-evaluate from base rule alone */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="dark"] .shimmer-bg {
  background: linear-gradient(90deg,#00E676,#69FF47,#1DE9B6,#00E676);
  background-size: 300% 100%;
}
html[data-theme="dark"] .card {
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.06);
}
html[data-theme="dark"] .card:hover {
  box-shadow: none;
  border-color: rgba(0,230,118,.18);
}
html[data-theme="dark"] .sec-tag {
  color: rgba(255,255,255,.35);
  text-shadow: none;
}
html[data-theme="dark"] .divider {
  background: rgba(255,255,255,.05);
}
html[data-theme="dark"] .footer {
  background: rgba(6,6,8,.72);
  border-top-color: rgba(255,255,255,.06);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}
html[data-theme="dark"] .footer-disc {
  border-top-color: rgba(255,255,255,.05);
}
html[data-theme="dark"] .btn-ghost {
  box-shadow: none;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
html[data-theme="dark"] .btn-ghost:hover {
  box-shadow: none;
  background: rgba(0,230,118,.08);
  border-color: rgba(0,230,118,.2);
}
html[data-theme="dark"] .btn-ghost:active { box-shadow: none; }
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea {
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-textarea:focus {
  box-shadow: 0 0 0 2px rgba(0,230,118,.12);
  border-color: rgba(0,230,118,.3);
}
html[data-theme="dark"] .form-label {
  color: rgba(255,255,255,.35);
  text-shadow: none;
}
html[data-theme="dark"] .badge-gray {
  box-shadow: none;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
}
html[data-theme="dark"] .page-hero-tag {
  box-shadow: none;
  border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .nav-cta {
  box-shadow: 0 2px 8px rgba(0,230,118,.35);
}
html[data-theme="dark"] .nav-cta:hover {
  box-shadow: 0 4px 16px rgba(0,230,118,.45);
}

/* ══════════════════════════ THEME TOGGLE BUTTON ════════════════════════ */
/* Pill toggle — knob slides left (light) ↔ right (dark) */
.theme-toggle {
  position: relative;
  width: 56px; height: 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  margin-left: 8px;
  transition: background .3s, border-color .3s;
  padding: 0;
  vertical-align: middle;
}
.theme-toggle:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.22); }
.theme-toggle:active .tt-knob { width: 26px; }

/* Sliding knob */
.tt-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), width .15s;
}
html[data-theme="dark"] .tt-knob { transform: translateX(28px); }

/* Sun icon (left side) */
.tt-sun {
  position: absolute;
  left: 6px; top: 50%; transform: translateY(-50%);
  font-size: 11px; line-height: 1;
  transition: opacity .25s;
  pointer-events: none; user-select: none;
}
/* Moon icon (right side) */
.tt-moon {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 10px; line-height: 1;
  transition: opacity .25s;
  pointer-events: none; user-select: none;
}

/* Visibility logic */
html[data-theme="dark"]  .tt-sun  { opacity: .3; }
html[data-theme="dark"]  .tt-moon { opacity: .9; }
html:not([data-theme="dark"]) .tt-sun  { opacity: .9; }
html:not([data-theme="dark"]) .tt-moon { opacity: .3; }

/* ══════════════════════════ RESPONSIVE ════════════════════════════════ */
@media(max-width:768px){
  .nav-links{display:none}
  .section{padding:70px 20px}
  .page-hero{padding:110px 20px 60px}
  .footer-inner{flex-direction:column;gap:16px;text-align:center}
  .footer-links{flex-wrap:wrap;justify-content:center}
}