@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

/* ── Tokens ── */
:root {
  /* Dark-forest palette (inspired by Breega) */
  --bg-main:      #071c13;
  --bg-alt:       #0a2318;
  --bg-alt2:      #0d2b1e;
  --bg-card:      #0d2a1a;
  --bg-dark:      #040d08;

  --dark-forest:  #071c13;
  --dark-forest-2:#0a2a18;
  --neon:         #22FF6E;

  --text-primary:  #FFFFFF;
  --text-secondary:rgba(255,255,255,0.72);
  --text-muted:    rgba(255,255,255,0.38);

  --green:         #1DB954;
  --green-dark:    #15a046;
  --green-deeper:  #0d7a34;
  --green-tint:    rgba(34,255,110,0.07);
  --green-border:  rgba(34,255,110,0.18);

  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);
  --cream:         #F4EFE6;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.5);
  --shadow-green: 0 6px 24px rgba(34,255,110,0.3);

  --ease-out:   cubic-bezier(0.16,1,0.3,1);
  --fast: 150ms; --base: 280ms; --slow: 500ms;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-height: 66px;

  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-full: 9999px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font);background:var(--bg-main);color:var(--text-primary);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none;}
input,textarea,select{font-family:inherit;}

/* ── Typography ── */
h1,h2,h3,h4{font-weight:800;line-height:1.1;letter-spacing:-0.04em;color:var(--text-primary);}
h1{font-size:clamp(2.6rem,5.5vw,5rem);}
h2{font-size:clamp(2rem,4vw,3.4rem);}
h3{font-size:clamp(1.25rem,2.5vw,1.75rem);}
h4{font-size:1.1rem;letter-spacing:-0.02em;}
p{font-size:1rem;line-height:1.75;color:var(--text-secondary);}

.gradient-text{
  background:linear-gradient(130deg, var(--neon) 10%, #1DB954 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── Section wrapper ── */
.section{padding:7rem 2rem;max-width:1120px;margin:0 auto;}
.section-header{text-align:center;margin-bottom:4.5rem;}
.section-header .eyebrow{
  display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--neon);background:var(--green-tint);
  border:1px solid var(--green-border);padding:0.3em 1em;border-radius:var(--r-full);
  margin-bottom:1.1rem;
}
.section-header h2{margin-bottom:0.85rem;}
.section-header>p{max-width:540px;margin:0 auto;color:var(--text-muted);font-size:1.05rem;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:0.5em;
  padding:0.8em 1.9em;border-radius:var(--r-full);
  font-size:0.9rem;font-weight:700;letter-spacing:-0.01em;
  transition:all var(--base) var(--ease-out);white-space:nowrap;
}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:var(--shadow-green);}
.btn-outline{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-strong);}
.btn-outline:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px);}
.btn-ghost{background:var(--green-tint);color:var(--green-dark);border:1px solid var(--green-border);}
.btn-ghost:hover{background:var(--green);color:#fff;border-color:var(--green);}

/* ── Cards ── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.75rem;transition:all var(--base) var(--ease-out);}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--green-border);}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:0.72rem;font-weight:700;padding:0.28em 0.8em;border-radius:var(--r-full);}
.badge-green{background:var(--green-tint);color:var(--green-dark);border:1px solid var(--green-border);}
.badge-dark{background:rgba(0,0,0,0.05);color:var(--text-muted);border:1px solid rgba(0,0,0,0.08);}
.badge-amber{background:rgba(245,158,11,0.08);color:#92400e;border:1px solid rgba(245,158,11,0.2);}
.badge-dot::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Divider ── */
.divider{height:1px;background:rgba(255,255,255,0.06);}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);}
.reveal-left{opacity:0;transform:translateX(-24px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);}
.reveal-right{opacity:0;transform:translateX(24px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);}
.reveal.visible,.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none;}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}.d5{transition-delay:.35s}

/* ── Grid helpers ── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}

/* ── Misc ── */
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:var(--bg-alt);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;}::-webkit-scrollbar-thumb:hover{background:var(--neon);}
::selection{background:rgba(34,255,110,0.2);color:#fff;}

/* ── Responsive ── */
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}.section{padding:5rem 1.5rem;}}
@media(max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}.section{padding:4rem 1.25rem;}.section-header{margin-bottom:3rem;}}
@media(max-width:480px){.section{padding:3rem 1rem;}.btn{padding:.7em 1.4em;font-size:.85rem;}}