/* ============================================================
   CE OS — BRAND SYSTEM  ·  brand.css
   Single source of truth for design tokens + brand primitives.
   Aesthetic: "Operator's Console" — near-black canvas, amber
   signal accent, monospace instrument labels, hairline structure.

   USAGE: load this FIRST, before any page-specific <style>.
     <link rel="stylesheet" href="/brand/brand.css">
   Everything below is a token or a reusable primitive. Pages
   should consume var(--token) and .ce-* classes, never hardcode.
   ============================================================ */

:root{
  /* ---- CANVAS / SURFACES ---------------------------------- */
  --ce-bg:        #090B10;   /* page canvas — the void            */
  --ce-bg-2:      #0e1219;   /* raised canvas / alt sections      */
  --ce-panel:     #141922;   /* console card                      */
  --ce-panel-2:   #1b212b;   /* raised card / input               */
  --ce-panel-3:   #15171c;   /* hover / active surface            */

  /* ---- STRUCTURE (hairlines) ------------------------------ */
  --ce-line:      rgba(255,255,255,.08);  /* default border      */
  --ce-line-2:    rgba(255,255,255,.14);  /* emphasized border   */
  --ce-line-3:    rgba(255,255,255,.22);  /* focus / active edge */

  /* ---- INK / TEXT ----------------------------------------- */
  --ce-ink:       #F5F7FA;   /* primary text                      */
  --ce-ink-mut:   #A4B0C2;   /* secondary / body-muted            */
  --ce-ink-dim:   #5A6474;   /* captions / disabled               */
  --ce-steel:     #C6D0DC;   /* light UI chrome (buttons)         */
  --ce-steel-2:   #7E8A9A;   /* mid chrome                        */

  /* ---- SIGNAL (the one accent — amber) -------------------- */
  --ce-signal:    #58F2C3;   /* PRIMARY accent. Use sparingly.    */
  --ce-signal-2:  #86F5D2;   /* highlight / hover lift            */
  --ce-signal-3:  #6B6EFF;   /* deep / gradient anchor            */
  --ce-signal-dim:rgba(88,242,195,.14);  /* tint fill            */
  --ce-signal-glow:rgba(88,242,195,.10); /* ambient glow         */
  --ce-grad:      linear-gradient(100deg,#86F5D2 0%,#58F2C3 52%,#6B6EFF 100%);
  --ce-grad-steel:linear-gradient(180deg,#f2f3f5,#ced1d6); /* light btn */

  /* ---- STATE ---------------------------------------------- */
  --ce-ok:        #4ea56b;   /* success / live                    */
  --ce-warn:      #58F2C3;   /* = signal                          */
  --ce-err:       #e5484d;   /* error / destructive               */

  /* ---- TYPE ----------------------------------------------- */
  --ce-font-display:'Sora',-apple-system,'Segoe UI',Arial,sans-serif;
  --ce-font-body:   'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --ce-font-mono:   ui-monospace,'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  /* Type scale (fluid, 1.20 minor-third-ish, clamped) */
  --ce-t-eyebrow: .72rem;                                  /* mono label */
  --ce-t-small:   clamp(.8rem, .78rem + .2vw, .875rem);
  --ce-t-body:    clamp(.95rem,.9rem + .3vw, 1.05rem);
  --ce-t-lead:    clamp(1.1rem, 1rem + .6vw, 1.35rem);
  --ce-t-h3:      clamp(1.25rem,1.1rem + .8vw, 1.6rem);
  --ce-t-h2:      clamp(1.7rem, 1.3rem + 2vw, 2.8rem);
  --ce-t-h1:      clamp(2.4rem, 1.6rem + 4vw, 4.6rem);

  --ce-lh-tight:  1.05;
  --ce-lh-snug:   1.25;
  --ce-lh-body:   1.6;
  --ce-track-label:.16em;  /* letter-spacing for mono eyebrows */

  /* ---- SPACE (8px base) ----------------------------------- */
  --ce-1:4px;  --ce-2:8px;  --ce-3:12px; --ce-4:16px; --ce-5:24px;
  --ce-6:32px; --ce-7:48px; --ce-8:64px; --ce-9:96px; --ce-10:128px;

  /* ---- RADIUS / SHADOW / MOTION --------------------------- */
  --ce-r-sm:8px; --ce-r:12px; --ce-r-lg:20px; --ce-r-xl:20px; --ce-r-pill:999px;
  --ce-shadow:    0 10px 30px -20px rgba(0,0,0,.6);
  --ce-shadow-signal:0 10px 30px -20px rgba(0,0,0,.6);
  --ce-ease:      cubic-bezier(.2,.7,.2,1);
  --ce-dur:       .2s;

  --ce-maxw: 1200px;   /* content column max width */
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ce{
  margin:0; background:var(--ce-bg); color:var(--ce-ink);
  font-family:var(--ce-font-body); font-size:var(--ce-t-body);
  line-height:var(--ce-lh-body); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.ce ::selection{background:var(--ce-signal);color:#06110d}
.ce a{color:var(--ce-signal);text-decoration:none}
.ce img{max-width:100%;display:block}
.ce h1,.ce h2,.ce h3{font-family:var(--ce-font-display);font-weight:700;line-height:var(--ce-lh-tight);margin:0}
.ce h1{font-size:var(--ce-t-h1);letter-spacing:-.02em}
.ce h2{font-size:var(--ce-t-h2);letter-spacing:-.015em;line-height:var(--ce-lh-snug)}
.ce h3{font-size:var(--ce-t-h3);letter-spacing:-.01em}
.ce p{margin:0 0 1em;color:var(--ce-ink-mut)}
.ce strong{color:var(--ce-ink);font-weight:600}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .ce *,.ce *::before,.ce *::after{animation:none!important;transition:none!important}
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.ce-wrap{max-width:var(--ce-maxw);margin-inline:auto;padding-inline:var(--ce-5)}
.ce-section{padding-block:var(--ce-9);border-bottom:1px solid var(--ce-line)}
.ce-grid{display:grid;gap:var(--ce-5)}
@media(min-width:760px){.ce-grid.cols-2{grid-template-columns:1fr 1fr}
  .ce-grid.cols-3{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   EYEBROW / INSTRUMENT LABEL  — the mono "console" voice
   <span class="ce-eyebrow">03 / preview</span>
   ============================================================ */
.ce-eyebrow{
  display:inline-block;font-family:var(--ce-font-mono);
  font-size:var(--ce-t-eyebrow);letter-spacing:var(--ce-track-label);
  text-transform:uppercase;color:var(--ce-signal);
}

/* ============================================================
   BUTTONS
   .ce-btn (default outline) · --primary (steel) · --signal (amber)
   ============================================================ */
.ce-btn{
  display:inline-flex;align-items:center;gap:var(--ce-2);
  font-family:var(--ce-font-body);font-weight:600;font-size:var(--ce-t-small);
  padding:.72em 1.15em;border-radius:var(--ce-r-sm);cursor:pointer;
  border:1px solid var(--ce-line-2);background:transparent;color:var(--ce-ink);
  transition:border-color var(--ce-dur) var(--ce-ease),
             background var(--ce-dur) var(--ce-ease),
             transform var(--ce-dur) var(--ce-ease),filter var(--ce-dur);
  text-decoration:none;line-height:1;
}
.ce-btn:hover{border-color:var(--ce-steel-2);color:#fff;background:rgba(255,255,255,.03)}
.ce-btn--primary{background:var(--ce-signal);color:#052018;border:1px solid var(--ce-signal)}
.ce-btn--primary:hover{background:#6ff6cf;border-color:#6ff6cf;color:#052018}
.ce-btn--signal{background:var(--ce-signal);color:#052018;border:1px solid var(--ce-signal);font-weight:600}
.ce-btn--signal:hover{background:#6ff6cf;color:#052018;border-color:#6ff6cf}
.ce-btn--lg{font-size:var(--ce-t-body);padding:.9em 1.5em}

/* ============================================================
   CONSOLE CARD — panel with corner tick, signal-lift on hover
   ============================================================ */
.ce-card{
  position:relative;background:var(--ce-panel);
  border:1px solid var(--ce-line);border-radius:var(--ce-r);
  padding:var(--ce-5);
  transition:border-color var(--ce-dur) var(--ce-ease),
             transform var(--ce-dur) var(--ce-ease);
}
.ce-card::after{display:none} /* corner tick removed — calm register */
.ce-card:hover{transform:translateY(-2px);border-color:var(--ce-line-3)}
.ce-card--flat{padding:var(--ce-5)}
.ce-card--flat::after{display:none}
.ce-card--flat:hover{transform:none}

/* Featured / "most picked" ribbon */
.ce-card--featured{border-color:var(--ce-line-2)}
.ce-ribbon{
  position:absolute;top:-1px;left:var(--ce-5);transform:translateY(-50%);
  font-family:var(--ce-font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:#052018;background:var(--ce-signal);
  padding:.32em .6em;border-radius:var(--ce-r-pill);
}

/* ============================================================
   PILL / TAG  (mono chips)
   ============================================================ */
.ce-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ce-font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ce-ink-mut);
  border:1px solid var(--ce-line);background:var(--ce-panel);
  padding:.4em .7em;border-radius:var(--ce-r-pill);
}
.ce-pill--live{color:var(--ce-signal);border-color:var(--ce-signal-dim)}
.ce-pill--live::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ce-ok);box-shadow:0 0 0 3px rgba(78,165,107,.18)}

/* ============================================================
   RESULT CALLOUT — left signal rule
   ============================================================ */
.ce-result{
  border-left:3px solid var(--ce-signal);
  background:var(--ce-panel);
  border:1px solid var(--ce-line);border-left-width:3px;
  border-radius:var(--ce-r);padding:var(--ce-5) var(--ce-6);
}

/* ============================================================
   STAT / TRUST STRIP
   ============================================================ */
.ce-stats{display:flex;flex-wrap:wrap;gap:var(--ce-6)}
.ce-stat b{display:block;font-family:var(--ce-font-mono);font-size:clamp(1.4rem,1rem+2vw,2.2rem);
  color:var(--ce-signal);line-height:1}
.ce-stat span{font-size:var(--ce-t-small);color:var(--ce-ink-dim)}

/* ============================================================
   AMBIENT GLOW (hero) — amber, not purple
   ============================================================ */
.ce-glow::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 50% at 50% -10%,rgba(88,242,195,.05),transparent 70%);
}

/* ============================================================
   FOCUS — always visible, signal-colored
   ============================================================ */
.ce :focus-visible{outline:2px solid var(--ce-signal);outline-offset:2px;border-radius:4px}

/* ============================================================
   BRAND LOCKUP  — logo mark + wordmark
   <a class="ce-brand"><span class="ce-brand__mark"></span>
     CE OS<em>THE OPERATING SYSTEM FOR GROWING BUSINESSES</em></a>
   ============================================================ */
.ce-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ce-ink);font-family:var(--ce-font-display);font-weight:700}
.ce-brand__mark{width:28px;height:28px;border-radius:7px;flex:none;
  background:url(/logo.svg) center/contain no-repeat}
.ce-brand em{display:block;font-family:var(--ce-font-mono);font-style:normal;
  font-size:.58rem;letter-spacing:.14em;color:var(--ce-ink-dim);text-transform:uppercase}