/* Ember Bots v2.1 — visual standard carried over from the original (Gemini-built) site:
   "Controlled Flame" palette, layered radial-gradient atmosphere, glass panels with
   blue-violet borders, gold→ember gradient CTAs with glow, Space Grotesk display type. */
:root{
  --bg:#08090d;
  --bg2:rgba(10,14,28,.88);
  --surface:rgba(18,24,44,.82);
  --border:rgba(91,105,164,.28);
  --ink:#edf2ff;
  --white:#ffffff;
  --muted:#a6b0c8;
  --ember-red:#c93a2f;
  --ember:#ff6a00;
  --ember-dim:rgba(255,106,0,.14);
  --ember-glow:rgba(255,106,0,.24);
  --gold:#ffb84d;
  --gold-dim:rgba(255,184,77,.10);
  --violet:#7a3cff;
  --blue:#2563ff;
  --radius:20px;
}
*{box-sizing:border-box}
img,svg,video{max-width:100%}
canvas.hero-canvas{max-width:none}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.6;overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(122,60,255,.16) 0%, transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(37,99,255,.14) 0%, transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(255,106,0,.10) 0%, transparent 28%),
    var(--bg);
  background-attachment:fixed;
}
h1,h2,h3,.brand{font-family:'Space Grotesk','Inter',sans-serif;line-height:1.15;margin:0 0 .5em;color:var(--white)}
h1{font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;letter-spacing:-.02em}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1em}
a{color:var(--gold)}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ─── Header ─── */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(8,10,18,.84);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;gap:28px;padding:13px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;color:var(--white);text-decoration:none;margin:0;white-space:nowrap}
.brand img{width:32px;height:32px}
.nav .links{margin-left:auto;display:flex;gap:30px}
.nav .links a{color:var(--muted);text-decoration:none;font-size:.875rem;font-weight:500;letter-spacing:.02em;transition:color .2s;white-space:nowrap}
.nav .links a:hover{color:var(--white)}
header.site .btn{padding:10px 22px;font-size:.92rem}

/* Mobile: header is NOT sticky and collapses to brand + CTA, links become a slim scroll row.
   It scrolls away with the page instead of eating screen height. */
@media(max-width:860px){
  header.site{position:static;backdrop-filter:none;background:rgba(8,10,18,.96)}
  .nav{flex-wrap:wrap;gap:8px 14px;padding:10px 0 8px}
  .brand{font-size:1.05rem}
  .brand img{width:26px;height:26px}
  header.site .btn{margin-left:auto;padding:8px 16px;font-size:.85rem}
  .nav .links{order:3;flex-basis:100%;margin-left:0;gap:18px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav .links::-webkit-scrollbar{display:none}
  .nav .links a{font-size:.82rem}
}

/* ─── Buttons (old standard: gold→ember gradient, layered glow, 8px radius) ─── */
.btn{
  display:inline-block;color:var(--white)!important;text-decoration:none;font-weight:600;cursor:pointer;border:0;
  background:linear-gradient(135deg,var(--gold) 0%,#ff9f2f 24%,var(--ember) 62%,#ff5a1f 100%);
  padding:15px 32px;border-radius:8px;font-size:1rem;letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(20,24,46,.30),0 0 24px rgba(255,106,0,.20),0 0 34px rgba(255,184,77,.16);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.05);box-shadow:0 16px 36px rgba(16,20,42,.38),0 0 32px rgba(255,106,0,.26),0 0 44px rgba(255,184,77,.18)}
.btn.ghost{
  background:transparent;color:var(--muted)!important;border:1px solid var(--border);box-shadow:none;font-weight:500;
}
.btn.ghost:hover{color:var(--white)!important;border-color:rgba(122,60,255,.35);background:linear-gradient(135deg,rgba(122,60,255,.10),rgba(37,99,255,.08));transform:translateY(-2px)}

/* ─── Sections & type ─── */
section{padding:88px 0}
.eyebrow,.kicker{
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;
}
.eyebrow{color:#ff8a1f;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:'';width:44px;height:1px;background:linear-gradient(90deg,#ff8a1f,var(--gold));opacity:.55}
.kicker{color:var(--violet)}
.lede{font-size:1.13rem;color:var(--muted);max-width:640px;line-height:1.75}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px;align-items:center}
.note{font-size:.92rem;color:var(--muted)}
.center{text-align:center}

/* ─── Hero (old standard: multi-ellipse atmosphere + faint grid + ember particles) ─── */
.hero{position:relative;overflow:hidden;padding:96px 0 84px}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero::before{ /* atmosphere */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 82% 62% at 50% 0%, rgba(255,106,0,.10) 0%, transparent 68%),
    radial-gradient(ellipse 56% 42% at 78% 18%, rgba(56,189,248,.10) 0%, transparent 56%),
    radial-gradient(ellipse 60% 44% at 84% 82%, rgba(122,60,255,.12) 0%, transparent 62%),
    radial-gradient(ellipse 42% 30% at 18% 66%, rgba(37,99,255,.10) 0%, transparent 54%),
    radial-gradient(ellipse 28% 22% at 48% 56%, rgba(255,184,77,.08) 0%, transparent 48%);
}
.hero::after{ /* grid */
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(122,60,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,255,.035) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 50%, black 30%, transparent 100%);
          mask-image:radial-gradient(ellipse 100% 80% at 50% 50%, black 30%, transparent 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero .lede{font-size:1.15rem}

/* ─── Cards (old standard: gradient glass, inset highlight, hover lift + flame hairline) ─── */
.grid{display:grid;gap:22px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid.c3,.grid.c2{grid-template-columns:1fr}section{padding:60px 0}.hero{padding:64px 0 56px}}
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(26,20,39,.96), rgba(18,14,28,.96));
  border:1px solid var(--border);border-radius:var(--radius);padding:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 48px rgba(8,8,14,.24);
  transition:border-color .3s,background .3s,transform .3s,box-shadow .3s;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--ember-red),var(--ember),var(--gold),transparent);
  opacity:0;transition:opacity .3s;
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,138,31,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 22px 52px rgba(8,8,14,.34)}
.card:hover::before{opacity:1}
.card p{color:var(--muted);line-height:1.75}
.price{
  font-family:'Space Grotesk',sans-serif;font-size:2.1rem;font-weight:700;margin-bottom:.35em;
  background:linear-gradient(135deg,var(--gold) 0%,#ff9f2f 30%,var(--ember) 70%,#ff5a1f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price small{font-size:1rem;font-weight:400;-webkit-text-fill-color:var(--muted);color:var(--muted)}

/* ─── Lists ─── */
ul.ticks{list-style:none;padding:0;margin:0 0 1em}
ul.ticks li{padding:8px 0 8px 34px;position:relative;color:var(--muted);line-height:1.65}
ul.ticks li::before{
  content:"✓";position:absolute;left:0;top:8px;width:20px;height:20px;border-radius:50%;
  background:var(--ember-dim);border:1px solid rgba(255,106,0,.25);color:var(--ember);
  font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
ol.steps{counter-reset:step;list-style:none;padding:0}
ol.steps li{counter-increment:step;padding:12px 0 12px 54px;position:relative;color:var(--muted);line-height:1.7}
ol.steps li::before{
  content:counter(step);position:absolute;left:0;top:9px;width:34px;height:34px;border-radius:8px;
  background:var(--ember-dim);border:1px solid rgba(255,106,0,.22);color:var(--ember);
  font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
ol.steps li strong{color:var(--white)}

/* ─── FAQ / Amber / footer ─── */
.faq dt{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--white);margin-top:20px}
.faq dd{margin:6px 0 0;color:var(--muted);line-height:1.75}
.amber{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.amber img{
  width:210px;height:210px;object-fit:cover;object-position:center top;border-radius:50%;
  border:3px solid var(--ember);box-shadow:0 0 24px var(--ember-glow);
}
footer{border-top:1px solid var(--border);padding:40px 0;color:var(--muted);font-size:.9rem;background:var(--bg2)}
footer a{color:var(--muted)}
footer a:hover{color:var(--white)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}