/* =====================================================================
   Joyful Systems · brand tokens v0.3
   One file, used by every route. Change a value here and it changes
   on the landing page and on /brand/ together.
   ===================================================================== */
:root{
  /* --- Flavors: the eight Joyful hues. Full strength, never darkened. --- */
  --blue:#5077FF;   --cyan:#00C4FF;   --green:#00C500;  --gold:#FFD700;
  --orange:#FFA422; --coral:#FF5A6F;  --violet:#B38CFD; --pink:#FF98D0;

  /* --- Neutrals: cool console greys --- */
  --paper:#EEF2F6;    /* page ground */
  --plastic:#FFFFFF;  /* tiles, panels, chips */
  --rim:#D5DCE6;      /* edges and dividers */
  --mute:#8A94A6;     /* labels, secondary text (large or mono only) */
  --slate:#4A5366;    /* body text on white */
  --ink:#10131A;      /* headlines, text on flavors, "Systems" */

  /* --- Roles --- */
  --focus:var(--cyan);                 /* the cursor ring */
  --glow:rgba(0,196,255,.55);
  --on:var(--green);                   /* switches, done */
  --jhue:var(--blue);                  /* the variable half of the wordmark */

  /* --- Type: IBM Plex --- */
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --t-display:clamp(44px,6.2vw,92px);
  --t-h2:clamp(30px,3.4vw,48px);
  --t-h3:22px; --t-body:18px; --t-small:14px; --t-label:12px;

  /* --- Space (4px base) and radius --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-panel:32px; --r-pill:999px;

  /* --- Motion --- */
  --e-out:cubic-bezier(.2,.9,.25,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --d-fast:80ms; --d-base:160ms; --d-slow:250ms;

  /* --- Plastic: one gloss on top, one cool shadow under --- */
  --gloss:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.12) 42%,rgba(255,255,255,0) 60%);
  --part-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 -2px 0 rgba(16,19,26,.10) inset,0 2px 3px rgba(30,50,120,.12),0 8px 16px -6px rgba(30,50,120,.28);
  --tile-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(16,19,26,.04) inset,0 2px 2px rgba(30,50,90,.06),0 10px 24px -8px rgba(30,50,90,.18);
  --tray-shadow:inset 0 6px 14px rgba(30,50,90,.14),inset 0 -1px 0 #fff,0 1px 0 #fff;
}

/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-size:var(--t-body);line-height:1.5;overflow-x:hidden;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 2px,transparent 2px 6px),linear-gradient(180deg,#F6F8FB 0%,var(--paper) 40%,#E7ECF2 100%)}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s6)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;padding:8px 14px;border-radius:var(--r-pill)}
.skip:focus{left:8px}

/* ===== Top bar ===== */
.top{position:sticky;top:0;z-index:20;padding:var(--s4) 0;background:linear-gradient(180deg,rgba(238,242,246,.95),rgba(238,242,246,0))}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.nav{display:flex;gap:var(--s2);align-items:center}
.nav a{font-size:15px;text-decoration:none;padding:8px 14px;border-radius:var(--r-pill);transition:background var(--d-base)}
.nav a:hover{background:rgba(255,255,255,.8)}
.nav a[aria-current=page]{background:#fff;box-shadow:var(--tile-shadow)}

/* ===== Wordmark: split mark, label on plastic ===== */
.wordmark{display:inline-flex;align-items:center;text-decoration:none;font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.5}
.wordmark .chip{white-space:nowrap;display:inline-flex;align-items:center;gap:.32em;padding:.26em .74em .26em .26em;background:var(--plastic);border-radius:var(--r-pill);box-shadow:var(--tile-shadow);border:1px solid var(--rim);color:var(--ink)}
.wordmark .j{position:relative;display:inline-flex;align-items:center;padding:.16em .53em .21em;border-radius:var(--r-pill);background:var(--jhue);color:var(--ink);box-shadow:var(--part-shadow);transition:background var(--d-base) var(--e-out),transform var(--d-slow) var(--e-spring)}
.wordmark .j::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gloss);pointer-events:none}
.wordmark .j span{position:relative}
a.wordmark:hover .j{transform:rotate(-4deg) scale(1.04)}

/* ===== Controls ===== */
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:var(--plastic);border:1px solid var(--rim);box-shadow:var(--tile-shadow);font-size:14px;font-weight:500;white-space:nowrap;transition:transform var(--d-fast) var(--e-out)}
.pill:active{transform:translateY(1px) scale(.98)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--rim);transition:background var(--d-base)}
.pill[aria-pressed=true] .dot{background:var(--on);box-shadow:0 0 0 3px rgba(0,197,0,.18)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-pill);font-weight:600;font-size:16px;text-decoration:none;transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-base)}
.btn-primary{background:var(--plastic);border:2px solid var(--cyan);box-shadow:0 0 0 4px rgba(0,196,255,.14),var(--tile-shadow)}
.btn-primary:hover{box-shadow:0 0 0 6px rgba(0,196,255,.22),var(--tile-shadow)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-ghost{color:#3A4252}

/* ===== Plastic part primitive ===== */
.part{position:relative;display:inline-block;background:var(--c,var(--blue));box-shadow:var(--part-shadow)}
.part::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gloss);pointer-events:none}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.85);color:var(--ink);white-space:nowrap}

/* ===== Sections and panels ===== */
section{padding:var(--s9) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s6);border-top:2px solid var(--ink);padding-top:var(--s4)}
.sec-head h2{font-size:var(--t-h2);letter-spacing:-.025em;line-height:1.05;font-weight:600}
.panel{background:var(--plastic);border:1px solid var(--rim);border-radius:var(--r-panel);box-shadow:var(--tile-shadow)}

/* ===== Footer ===== */
footer{padding:var(--s8) 0 var(--s7)}
.foot{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:end;border-top:2px solid var(--ink);padding-top:var(--s5)}
.foot .big{font-size:clamp(40px,6vw,96px);letter-spacing:-.04em;font-weight:600;line-height:.95}
.foot .meta{display:flex;gap:var(--s5);font-size:14px;color:var(--slate);flex-wrap:wrap;justify-content:flex-end}
.foot .meta a{text-decoration:none}
.pile{display:flex;align-items:flex-end;gap:10px;margin-top:var(--s6);height:72px}
.pile i{display:block;flex:none;position:relative;box-shadow:var(--part-shadow);cursor:pointer}
.pile i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gloss)}
.stripe{display:flex;height:10px;margin-top:var(--s6);border-radius:var(--r-pill);overflow:hidden}
.stripe i{flex:1}

/* ===== Reveal and reduced motion ===== */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.rv.in,.shot .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  .wrap{padding:0 var(--s4)}
  .nav a{display:none}
  .wordmark{font-size:17px}
  section{padding:var(--s8) 0}
  .foot{grid-template-columns:1fr}.foot .meta{justify-content:flex-start}
  .pile{gap:8px}.pile i:nth-child(n+6){display:none}
}