/* ============================================================================
   EwizPro "Engine" — the mothership design system (ewizpro.com and its inner pages).
   Owner directive 2026-10-13/14: AI / Matrix-like / futuristic, and "inner pages of the website
   should be a continuation of the main landing page" — so every platform surface loads THIS file
   and renders through layouts/engine.php. Dark is the default; Day Mode is a first-class theme.

   NOT for tenant sites: a club's public site keeps its own brand colour (house rule S4.3) and
   keeps layouts/base.php + theme.css. This file is the PLATFORM's face only.
   Class names mirror theme.css (.hero/.card/.grid/.btn/.section…) so pages are drop-in.
   ============================================================================ */

:root{
    --bg:#05080f; --bg2:#0a1322; --ink:#e8f1ff; --ink2:#8fa5c5; --line:#13263f;
    --neon:#27e9b5; --neon2:#37b6ff; --amber:#f5b041;
    --cardbg1:rgba(19,38,63,.4); --cardbg2:rgba(10,19,34,.65);
    --barbg:rgba(5,8,15,.82); --btng:rgba(255,255,255,.03); --fxo:.85;
    --mono:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
}
/* Day Mode — same engine, lighter room */
[data-theme="light"]{
    --bg:#eef5f1; --bg2:#ffffff; --ink:#0c1f17; --ink2:#43604f; --line:#cfe2d8;
    --neon:#0b8a63; --neon2:#1273c4; --amber:#b97708;
    --cardbg1:rgba(255,255,255,.85); --cardbg2:rgba(244,250,247,.9);
    --barbg:rgba(238,245,241,.85); --btng:rgba(11,138,99,.06); --fxo:.5;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}            /* PROP-1: never a sideways page scroll */
body{background:var(--bg);color:var(--ink);font-family:Poppins,system-ui,sans-serif;line-height:1.6}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap,.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}

/* ── top bar ───────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:var(--barbg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:1rem;height:62px}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:.4px;text-decoration:none}
.logo .dot{width:11px;height:11px;border-radius:3px;background:var(--neon);box-shadow:0 0 12px var(--neon)}
.logo small{color:var(--neon);font-family:var(--mono);font-weight:500;font-size:.68rem;border:1px solid var(--line);border-radius:6px;padding:.1rem .4rem;margin-left:.3rem}
.bar .cta{text-decoration:none;font-size:.88rem;color:var(--bg);background:var(--neon);padding:.45rem .95rem;border-radius:9px;font-weight:600;white-space:nowrap}
.bar__spacer{margin-left:auto}
.iconbtn{border:1px solid var(--line);background:var(--btng);border-radius:9px;padding:.3rem .5rem;cursor:pointer;font-size:1rem;line-height:1;color:inherit}

/* ── type ──────────────────────────────────────────────────────────────── */
h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.14;font-weight:700}
h2{font-size:clamp(1.35rem,2.5vw,1.95rem);line-height:1.2}
h3{font-size:1.05rem}
.grad{background:linear-gradient(100deg,var(--ink) 20%,var(--neon) 60%,var(--neon2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead,.muted{color:var(--ink2)}
.lead{font-size:1.03rem;max-width:60ch}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;color:var(--neon);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;text-transform:uppercase}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--neon);box-shadow:0 0 8px var(--neon)}
.badge,.chip{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--amber);border:1px solid rgba(245,176,65,.4);border-radius:6px;padding:.14rem .5rem}

/* ── layout ────────────────────────────────────────────────────────────── */
section,.section{padding:3.4rem 0;position:relative}
.hero{position:relative;padding:4.5rem 0 3rem;overflow:hidden}
.pagehead{margin-bottom:1.6rem}
.pagehead h1{margin-bottom:.4rem}
.grid{display:grid;gap:1rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.stack{display:flex;flex-direction:column;gap:.4rem}

/* ── components ────────────────────────────────────────────────────────── */
.card{background:linear-gradient(170deg,var(--cardbg1),var(--cardbg2));border:1px solid var(--line);border-radius:15px;padding:1.4rem;transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:rgba(39,233,181,.5);box-shadow:0 10px 36px rgba(39,233,181,.1);transform:translateY(-3px)}
.card h3{margin-bottom:.35rem}
.card p{color:var(--ink2);font-size:.9rem}
.card__ic,.card .ic{font-size:1.4rem;margin-bottom:.6rem;filter:drop-shadow(0 0 10px rgba(39,233,181,.5))}
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;font-size:.95rem;padding:.72rem 1.3rem;border-radius:12px;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn--brand,.btn-n{background:linear-gradient(95deg,var(--neon),var(--neon2));color:#031018;box-shadow:0 6px 28px rgba(39,233,181,.35)}
.btn--ghost,.btn-g{border:1px solid var(--line);color:var(--ink);background:var(--btng)}
.btn--ghost:hover,.btn-g:hover{border-color:var(--neon);box-shadow:0 0 18px rgba(39,233,181,.2)}
.hero__cta,.ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}

/* long-form content (blog posts) */
.post-body{color:var(--ink);max-width:70ch}
.post-body p{margin:0 0 1rem}
.post-body h2,.post-body h3{margin:1.6rem 0 .6rem}
.post-body a{color:var(--neon)}
.post-body ul,.post-body ol{margin:0 0 1rem 1.2rem}
.post-body img{border-radius:12px;border:1px solid var(--line)}
.post-body code,.post-body pre{font-family:var(--mono);background:var(--btng);border:1px solid var(--line);border-radius:8px}
.post-body pre{padding:1rem;overflow-x:auto}

/* ── closing band + footer ─────────────────────────────────────────────── */
.band{border-top:1px solid var(--line);background:radial-gradient(60% 120% at 50% 0%,rgba(39,233,181,.1),transparent 70%)}
.band .wrap{text-align:center;padding:3.4rem 1.25rem}
.foot{border-top:1px solid var(--line);padding:1.4rem 0;color:var(--ink2);font-size:.82rem;text-align:center}

@media(max-width:900px){
    .grid--3,.grid--2{grid-template-columns:1fr}
    .hero{padding-top:3rem}
    .bar .wrap{gap:.6rem}
    .logo small{display:none}
}