/* =========================================================
   SmartSites — Rebuild. First-principles design language.
   PAPER is the field. COBALT is an instrument, used sparingly
   and deliberately. Three full pages share these tokens; each
   expresses them differently (scoped under .dA / .dB / .dC).
   ========================================================= */

:root{
  /* brand */
  --cobalt:#0040c1;
  --cobalt-deep:#06245f;
  --spark:#2970ff;
  --spark-soft:#5b8bff;

  /* neutrals — cool paper, true ink */
  --ink:#0c1322;
  --ink-2:#3a4256;
  --ink-3:#6b7488;
  --paper:#f6f7fb;
  --paper-2:#eef1f8;
  --tint:#eaf0ff;     /* whisper cobalt */
  --tint-2:#dde7ff;
  --line:#e4e7f0;
  --line-ink:#d4d9e6;
  --white:#ffffff;

  --font-title:"Instrument Sans",sans-serif;
  --font-body:"Poppins",sans-serif;

  --container:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{margin:0;padding:0;background:#0c1322;}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* the canvas that swaps between the three directions */
#root{min-height:100vh;}
.stage{min-height:100vh;}
.dpage{min-height:100vh;position:relative;overflow:hidden;}

.container{max-width:var(--container);margin:0 auto;padding:0 28px;width:100%;}

/* shared text-blue accent helper (color overridable per direction) */
.cobalt{color:var(--cobalt);}

/* =========================================================
   FLOATING DIRECTION SWITCHER
   ========================================================= */
.switch{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:6px;padding:7px;border-radius:100px;
  background:rgba(12,19,34,.82);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 20px 50px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.10);}
.switch__brand{display:flex;align-items:center;gap:9px;padding:0 14px 0 10px;color:#fff;}
.switch__brand svg{width:24px;height:24px;flex:0 0 24px;}
.switch__brand b{font-family:var(--font-title);font-weight:600;font-size:.95rem;letter-spacing:-.01em;}
.switch__div{width:1px;height:26px;background:rgba(255,255,255,.16);}
.switch__tab{display:flex;align-items:baseline;gap:8px;padding:9px 16px;border-radius:100px;
  font-family:var(--font-title);font-weight:500;font-size:.92rem;color:rgba(255,255,255,.62);
  transition:background .25s var(--ease),color .25s;white-space:nowrap;}
.switch__tab .n{font-size:.72rem;font-weight:600;letter-spacing:.04em;opacity:.6;}
.switch__tab:hover{color:#fff;}
.switch__tab.on{background:#fff;color:var(--ink);}
.switch__tab.on .n{color:var(--cobalt);opacity:1;}
@media(max-width:680px){
  .switch{flex-wrap:wrap;max-width:calc(100% - 24px);justify-content:center;}
  .switch__tab{padding:8px 12px;font-size:.84rem;}
  .switch__tab .lbl{display:none;}
}

/* subtle enter — translate only, never dims content */
@media (prefers-reduced-motion: no-preference){
  .dpage{animation:dfade .4s var(--ease);}
  @keyframes dfade{from{transform:translateY(8px);}to{transform:none;}}
}