/* Helios — original AI-trading template. All colour keyed off CSS vars so the pipeline
 (theme.apply) recolours per site. Default identity: warm-dark ink + copper accent. */
:root{
 /* warm off-white keyed to the copper accent — a neutral chosen, not inherited grey */
 --bg:#f5f6fb; --surface:#ffffff; --surface-2:#eef0f8; --panel:#ffffff;
 --text:#0f172a; --heading:#0b1020; --muted:#64748b; --fog:#334155;
 --accent:#4f46e5; --accent-2:#6366f1; --accent2:#6366f1; --gold:#6366f1; --champ:#4f46e5;
 --border:rgba(15,23,42,.12); --hover:rgba(15,23,42,.04);
 --pos:#16a34a; --neg:#dc2626; --on-accent:#ffffff;
 --glass-bar:rgba(255,255,255,.78); --track:rgba(15,23,42,.09);
 --shell:1180px; --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 Inter,system-ui,sans-serif}
h1,h2,h3,h4{font-family:Sora,sans-serif;color:var(--heading);line-height:1.12;letter-spacing:-.02em;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.fai{height:1em;width:auto;fill:currentColor;vertical-align:-.125em}
.shell{max-width:var(--shell);margin:0 auto;padding:0 22px}
.eyebrow{font:600 12px/1 Sora,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:14px}
.sec{padding:88px 0;border-top:1px solid var(--border)}
.sec-sm{padding:56px 0}
.sec-head{max-width:660px}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.lede{color:var(--fog);margin:14px 0 0;font-size:1.05rem}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px Sora,sans-serif;border-radius:12px;padding:14px 24px;border:1px solid transparent;cursor:pointer;transition:.18s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--hover)}
.grid{display:grid;gap:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:26px}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--glass-bar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font:700 19px Sora,sans-serif;color:var(--heading)}
.brand img{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;gap:26px;margin-left:32px}
.nav-links a{color:var(--muted);font:500 15px Inter;transition:.15s}
.nav-links a.mnav-cta{color:var(--on-accent)} /* moved CTA keeps button text colour, not the muted link colour */
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;width:42px;height:42px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);align-items:center;justify-content:center;cursor:pointer}
.nav-toggle svg{width:20px;height:20px}
/* mnav clones CTA into .nav-links for the mobile drawer — hide clone on desktop */
@media (min-width:761px){
  .mnav-cta{display:none!important}
}
@media (max-width:760px){
  .mnav-orig{display:none!important}
  .mnav-cta{display:inline-flex!important;width:calc(100% - 32px);margin:10px 16px 14px!important;justify-content:center;box-sizing:border-box}
}

/* hero */
/* .hero-grid also carries .shell — use padding-block, never the `padding` shorthand,
 or it wins on order and kills .shell's 22px gutter (text goes flush on phones). */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:66px;padding-bottom:40px}
.hero h1{font-size:clamp(2.3rem,5vw,3.5rem);font-weight:800}
.hero h1 .brandword{color:var(--accent)}
.hero-sub{color:var(--fog);font-size:1.1rem;margin:20px 0 26px;max-width:520px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-cta .btn-primary{padding:17px 36px;font-size:16px;box-shadow:0 16px 34px -16px var(--accent)}
.hero-note{margin-top:18px;color:var(--muted);font-size:.9rem;display:flex;align-items:center;gap:8px}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 24px}
.chip{display:inline-flex;align-items:center;gap:7px;font:600 13px Inter;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--fog)}
.chip svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.hero-media{position:relative}
.hero-media img{width:100%;border-radius:20px;border:1px solid var(--border);box-shadow:0 30px 64px -34px rgba(16,15,12,.22)}
.hero-float{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px;box-shadow:0 16px 34px -18px rgba(16,15,12,.18);font:600 13px Sora}
.hero-float.a{top:18px;left:-14px}
.hero-float.b{bottom:22px;right:-10px}
.hero-float .up{color:var(--pos)}

/* lead form */
.lead{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px}
.lead h2,.lead h3{font-size:1.3rem;margin-bottom:4px}
.lead .sub{color:var(--muted);font-size:.92rem;margin-bottom:18px}
.field{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 15px;color:var(--text);font:400 15px Inter;margin-bottom:12px}
.field::placeholder{color:var(--muted)}
.lead .row{display:flex;gap:12px}
.lead .row>.fld{flex:1 1 0;min-width:0} /* the .fld is the flex item — not the input inside it */
.lead .row .field{width:100%}
.lead .btn{width:100%;justify-content:center}
.lead-secure{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.8rem;margin-top:12px}
.lead-consent{color:var(--muted);font-size:.74rem;margin-top:14px;line-height:1.55}
.lead-consent a{color:var(--accent)}
.fld{margin-bottom:12px}
.fld label{display:block;font:500 12px Inter;color:var(--muted);margin-bottom:6px}
.fld .field{margin-bottom:0}
.pay-row{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;align-items:center;margin:18px 0 4px}
.pay-row .fai{font-size:25px;color:var(--muted)}
.pay-row .fai.pay-ok{color:var(--pos);font-size:19px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:8px;padding-bottom:8px}
.stat b{display:block;font:800 2rem Sora;color:var(--heading)}
.stat span{color:var(--muted);font-size:.9rem}

/* platform */
.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
/* realistic phone mockup — static WebP (SERP image) with a baked shadow + caption */
.platform-media{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0}
.phone-shot{max-width:330px;width:100%;height:auto;display:block}
.phone-cap{color:var(--muted);font-size:.92rem;line-height:1.5;text-align:center;max-width:340px}
.platform-points{list-style:none;padding:0;margin:22px 0 0}
.platform-points li{display:flex;gap:12px;padding:9px 0;color:var(--fog)}
.platform-points svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;margin-top:2px}

/* features */
.feat-grid{grid-template-columns:repeat(3,1fr)}
.feat .ic{width:46px;height:46px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:16px}
.feat .ic svg{width:24px;height:24px}
.feat h3{font-size:1.1rem;margin-bottom:8px}
.feat p{color:var(--muted);font-size:.95rem;margin:0}

/* markets — live prices card */
.markets-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.mkt-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px}
.mkt-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px 14px;border-bottom:1px solid var(--border);font:600 12px Sora;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mkt-live{display:inline-flex;align-items:center;gap:7px;color:var(--pos)}
.mkt-live i{width:7px;height:7px;border-radius:50%;background:var(--pos);display:inline-block;animation:mpulse 2s infinite}
@keyframes mpulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.mkt-list{margin-top:6px}
.mkt-row{display:flex;justify-content:space-between;align-items:center;padding:16px 8px}
.mkt-row+.mkt-row{border-top:1px solid var(--border)}
.mkt-c b{display:block;color:var(--heading);font:700 15px Sora}
.mkt-c span{color:var(--muted);font-size:.8rem}
.mkt-p{text-align:right}
.mkt-p .px{display:block;color:var(--heading);font:700 15px Sora;font-variant-numeric:tabular-nums}
.mkt-p .chg{font-size:.8rem;font-weight:600}
.chg.up{color:var(--pos)}.chg.down{color:var(--neg)}

/* how */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step .n{width:38px;height:38px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font:700 15px Sora;margin-bottom:14px}
.step h3{font-size:1rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.88rem;margin:0}

/* payment */
.pay-list{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.pay{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 18px;color:var(--fog);font:600 14px Sora}
.pay .fai{font-size:20px;color:var(--accent)}

/* testimonials */
.testi{grid-template-columns:repeat(3,1fr)}
.testi .card p{color:var(--fog);font-style:italic;margin:0 0 16px}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .who img{width:42px;height:42px;border-radius:50%}
.testi .who .ini{width:42px;height:42px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font:700 16px Sora;color:var(--accent)}
.testi .who b{color:var(--heading);font:600 14px Sora;display:block}
.testi .who span{color:var(--muted);font-size:.82rem}

/* faq */
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid var(--border);padding:18px 0}
.faq summary{cursor:pointer;font:600 1.05rem Sora;color:var(--heading);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin:12px 0 0}

/* capabilities — spec table */
.spec{margin-top:30px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--surface)}
.spec-row{display:grid;grid-template-columns:38% 1fr;gap:20px;align-items:center;padding:20px 26px}
.spec-row+.spec-row{border-top:1px solid var(--border)}
.spec-k{color:var(--heading);font:600 15px Sora}
.spec-v{color:var(--muted);font-size:.95rem}
.spec-row--hl{background:rgba(184,85,29,.10);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.spec-row--hl .spec-v a{color:var(--accent);font-weight:600}

/* final CTA — headline + form split */
.cta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.cta-h{font-size:clamp(1.9rem,4vw,3rem);margin-top:4px}

/* footer */
.foot{border-top:1px solid var(--border);padding:54px 0 30px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.foot .brand{margin-bottom:14px}
.foot p{color:var(--muted);font-size:.9rem;max-width:280px}
.foot h4{font:600 13px Sora;letter-spacing:.08em;text-transform:uppercase;color:var(--fog);margin:0 0 14px}
.foot-links{display:flex;flex-direction:column;gap:10px}
.foot-links a{color:var(--muted);font-size:.92rem}
.foot-links a:hover{color:var(--text)}
.foot-bottom{border-top:1px solid var(--border);margin-top:36px;padding-top:22px;color:var(--muted);font-size:.82rem}

@media(max-width:900px){
 .hero-grid,.platform-grid{grid-template-columns:1fr}
 .stats{grid-template-columns:repeat(2,1fr)}
 .feat-grid,.markets-grid,.testi,.cta-grid{grid-template-columns:1fr}
 .spec-row{grid-template-columns:1fr;gap:6px;padding:16px 18px}
 .steps{grid-template-columns:1fr 1fr}
 .foot-top{grid-template-columns:1fr 1fr}
 .nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--border);margin:0;padding:8px 0}
 .nav-links.open{display:flex}
 .nav-links a{padding:14px 22px}
 .nav-toggle{display:flex}
}

/* phones — the 900px step only unstacks the grids; below ~560 the desktop rhythm
 (88px sections, 5-up steps, 4-up footer, side-by-side spec rows) stops fitting. */
@media(max-width:560px){
 .shell{padding:0 18px}
 .sec{padding:56px 0}
 .sec-sm{padding:38px 0}
 .hero-grid{padding-top:38px;padding-bottom:28px;gap:32px}
 .hero h1{font-size:clamp(1.95rem,8.4vw,2.4rem)}
 .hero-sub{font-size:1rem;margin:16px 0 20px}
 .steps{grid-template-columns:1fr} /* title+body 2-up is unreadable at 390px */
 .stats{gap:14px} /* stats + footer stay 2-up — they fit */
 /* full-bleed primary actions read as tappable targets, not inline links */
 .hero .btn-primary,.cta-grid .btn-primary,.lead .btn{width:100%;justify-content:center}
 .btn{padding:14px 18px}
 .card{padding:20px}
 .lead{padding:22px 18px}
 .lead .row{flex-direction:column;gap:0} /* two 50% name fields are unusable at 390px */
 .foot-top{gap:22px}
}


/* === Offerra form bridge === */
.leadform .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.leadform .field-full{grid-column:1/-1}
.leadform .field{display:flex;flex-direction:column;gap:6px}
.leadform .field-label{font:600 13px Sora,sans-serif;color:var(--fog)}
.leadform .input, .leadform input.input{
  width:100%;border:1px solid var(--border);border-radius:12px;padding:12px 14px;
  background:var(--surface-2);color:var(--text);font:400 15px Inter,system-ui,sans-serif
}
.leadform .input::placeholder,.leadform input.input::placeholder{color:var(--muted);opacity:1}
.leadform .btn-block{width:100%;justify-content:center}
.leadform .form-subtitle{color:var(--muted);margin:0 0 14px;font-size:.95rem}
.leadform .form-card-title{margin:0 0 6px;font-size:1.25rem}
.leadform .form-already-registered{text-align:center;padding:18px 8px}
.leadform .form-already-registered.hidden,.leadform .hidden,.hide{display:none!important}
.leadform .field-error{color:var(--neg);font-size:12px;margin-top:4px}
.leadform .form-message{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.payment-icons{margin:14px 0 8px;text-align:center}
.payment-icons-list{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 12px;list-style:none;margin:0;padding:0
}
.payment-icons-list li{list-style:none;margin:0;padding:0;display:flex;align-items:center;line-height:0}
.payment-icons-list img{display:block;height:22px;width:auto;max-width:56px;object-fit:contain;opacity:.85}
.payment-icons--compact{margin-top:14px}
.leadform .form-legal,.leadform .lead-consent{color:var(--muted);font-size:.74rem;margin-top:14px;line-height:1.55;text-align:center}
.leadform .form-legal a,.leadform .lead-consent a{color:var(--accent)}
.iti{width:100%}
.iti input,.iti input[type=tel]{width:100%}
.iti input::placeholder{color:var(--muted);opacity:1}

/* legal pages */
.legal-hero{padding:66px 0 20px}
.legal-hero h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:800}
.legal-body{padding:20px 0 88px}
.legal-body .shell>*{max-width:820px}
.legal-body h2{font-size:1.35rem;margin:36px 0 12px}
.legal-body p,.legal-body li{color:var(--fog);font-size:1rem}
.legal-body ul{padding-left:20px;margin:10px 0}
.legal-body li{margin:6px 0}
.legal-body .meta{color:var(--muted);font-size:.9rem}
.legal-body a{color:var(--accent)}
@media(max-width:640px){.leadform .form-grid{grid-template-columns:1fr}}