:root{
  --bg:#0B1D14; --fg:#F0F7F4; --tan:#D9CBAA; --accent:#2ECC71; --accent2:#4EEA8A;
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
/* Background energy field */
body::before{
  content:""; position:fixed; inset:-20vmax; z-index:-2;
  background: radial-gradient(60vmax 60vmax at 20% 10%, rgba(46,204,113,.20), transparent 60%),
              radial-gradient(50vmax 50vmax at 80% 0%, rgba(217,203,170,.18), transparent 60%),
              radial-gradient(80vmax 80vmax at 50% 90%, rgba(46,234,138,.12), transparent 70%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.05));
  filter: blur(10px);
}
/* Animated energy waves */
.energy{ position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.45; }
.energy .wave{
  position:absolute; width:140vmax; height:140vmax; left:50%; top:50%; transform:translate(-50%,-50%);
  background: conic-gradient(from 0deg, transparent, rgba(46,204,113,.12), transparent 30%);
  border-radius:50%;
  animation:spin 24s linear infinite;
}
.energy .wave:nth-child(2){ animation-duration: 36s; opacity:.35; filter:hue-rotate(30deg) }
.energy .wave:nth-child(3){ animation-duration: 48s; opacity:.28; filter:hue-rotate(-20deg) }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg)} }

/* Header */
header{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.15));
  border-bottom:1px solid var(--stroke); display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
}
.brand img{height:42px; filter: drop-shadow(0 0 6px rgba(46,204,113,.35));}
nav a{opacity:.9; margin-left:14px}
nav a:hover{opacity:1; text-shadow:0 0 18px rgba(46,204,113,.45)}

/* Hero */
.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:28px; padding:72px 22px 44px;
}
.kicker{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.chip{background:var(--tan); color:#0b1d14; padding:7px 11px; border-radius:999px; font-weight:700; font-size:12px}
h1.title{
  font-size: clamp(38px, 6vw, 56px); line-height:1.02; margin:.1em 0 .3em;
  background: linear-gradient(90deg, var(--fg), var(--accent2) 60%, var(--tan));
  -webkit-background-clip: text; background-clip: text; color:transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.25));
}
h1.title .pulse{
  position:relative;
}
h1.title .pulse::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius:999px; box-shadow:0 0 16px rgba(46,204,113,.75);
  animation:potency 2.6s ease-in-out infinite;
}
@keyframes potency{ 0%,100%{ transform:scaleX(.6); opacity:.8} 50%{ transform:scaleX(1); opacity:1} }
.sub{
  font-size: clamp(16px, 2.2vw, 20px); opacity:.92;
}
.btn{
  display:inline-block; margin-top:16px; padding:13px 18px; border-radius:14px; font-weight:800; letter-spacing:.2px;
  background: radial-gradient(120% 120% at 10% 10%, var(--accent2), var(--accent));
  color:#0b1d14; box-shadow:0 10px 30px rgba(46,204,113,.28), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ transform: translateY(-1px); filter: saturate(1.2) }
.btn.alt{ background: linear-gradient(90deg, var(--tan), #fff7); color:#0b1d14 }

/* Glass card */
.card{
  background: var(--glass); border:1px solid var(--stroke); border-radius:18px; padding:18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(46,204,113,.45); box-shadow: 0 18px 40px rgba(46,204,113,.12) }

.grid{ display:grid; gap:18px }
.grid.cards{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }

/* Potency Meter */
.meter{ aspect-ratio:1/1; width:min(260px, 38vw); position:relative; margin:auto; }
.meter .ring{
  --pct: 0.92;
  background: conic-gradient(var(--accent) calc(var(--pct)*1turn), rgba(255,255,255,.08) 0);
  border-radius:50%; padding:10px; box-shadow: 0 0 60px rgba(46,204,113,.22);
}
.meter .ring::before{
  content:""; display:block; background: radial-gradient(circle at 50% 30%, rgba(46,204,113,.18), transparent 60%);
  border-radius:50%; width:100%; height:100%;
}
.meter .cap{
  position:absolute; inset:18px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
  border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  border:1px solid var(--stroke);
}
.meter strong{ font-size:28px; display:block }
.badge{ background:rgba(46,204,113,.18); border:1px solid rgba(46,204,113,.45); color:#c6f6d5; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700 }

/* Sections */
section{ padding:38px 22px; border-top:1px solid var(--stroke) }
section h2{ font-size:28px; margin:0 0 14px; background:linear-gradient(90deg, var(--fg), var(--tan)); -webkit-background-clip:text; color:transparent }

/* Table */
table{ width:100%; border-collapse:collapse }
th,td{ padding:10px; border-bottom:1px solid var(--stroke) }
th{ text-align:left; opacity:.8 }

/* Footer */
footer{ padding:20px 22px; border-top:1px solid var(--stroke); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap }
small, .muted{ opacity:.8 }

@media (max-width:1000px){
  .hero{ grid-template-columns:1fr }
}