/* =========================================================
   TECH BREAK OS — design system
   Logo palette: deep navy · electric blue · silver/white
   Red kept only for security / alert states.
   ========================================================= */

:root {
  /* original neutrals (kept for content text) */
  --black:     #000000;
  --bg:        #050505;
  --panel:     #0c0c0d;
  --gray-900:  #111113;
  --gray-700:  #1c1c1f;
  --gray-500:  #3a3a3f;
  --gray-300:  #8a8a90;
  --gray-100:  #d6d6d8;
  --white:     #ffffff;

  /* brand reds — security / alert only */
  --red:       #ff2a2a;
  --red-deep:  #b00d0d;

  /* OS palette (logo-matched) */
  --os-navy:         #060912;
  --os-navy-mid:     #0a1020;
  --os-accent:       #2E9BFF;
  --os-accent-deep:  #0A5EBF;
  --os-accent-glow:  rgba(46,155,255,0.18);
  --os-silver:       #c8cdd6;
  --os-silver-dim:   #8892a0;
  --os-glass:        rgba(6,10,24,0.58);
  --os-glass-bar:    rgba(8,14,32,0.88);
  --os-border:       rgba(200,205,214,0.14);
  --os-border-lit:   rgba(46,155,255,0.35);

  /* typography */
  --font-display: "Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;
  --font-body:    "Helvetica Neue",Arial,system-ui,-apple-system,sans-serif;
  --font-mono:    "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --maxw:    1280px;
  --gutter:  clamp(20px,5vw,80px);
  --ease:    cubic-bezier(.7,0,.2,1);

  /* OS chrome measurements */
  --menubar-h: 32px;
  --dock-h:    48px;
}

/* ── reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:  var(--font-body);
  background:   var(--os-navy);
  color:        var(--white);
  line-height:  1.5;
  overflow:     hidden; /* OS desktop — no page scroll */
  -webkit-font-smoothing: antialiased;
}
img,svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer }
::selection { background:var(--os-accent); color:var(--white) }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0
}

.skip-link {
  position:fixed; top:-100px; left:16px; z-index:1000;
  background:var(--os-accent); color:#fff; padding:12px 18px;
  font-weight:700; letter-spacing:.05em;
  transition:top .2s var(--ease);
}
.skip-link:focus { top:16px }

a:focus-visible,
button:focus-visible { outline:2px solid var(--os-accent); outline-offset:3px }

/* =========================================================
   3D CANVAS + fallback (unchanged)
   ========================================================= */
#bg-canvas {
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; display:block; pointer-events:none;
}
.scene-fallback {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 70% 10%, #0d1222 0%, transparent 55%),
    radial-gradient(80%  60% at 10% 90%, #0a0f1e 0%, transparent 50%),
    var(--os-navy);
  display:none;
}

/* =========================================================
   INTRO / LOADING SEQUENCE (unchanged visually)
   ========================================================= */
.intro {
  position:fixed; inset:0; z-index:900;
  background:
    linear-gradient(90deg,rgba(0,102,255,.08),transparent 26%,transparent 74%,rgba(255,42,42,.06)),
    var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
}
.intro.is-hidden { opacity:0; visibility:hidden }
.intro__inner { width:min(980px,92vw); padding:0 var(--gutter); position:relative; text-align:center }
.brand-logo { display:block; height:auto }
.intro__logo {
  position:relative; display:inline-block; margin:0 auto 28px;
  border:1px solid rgba(255,255,255,.16); border-radius:6px; overflow:hidden;
  background:#f4f5f8;
  box-shadow:
    0 0 0 1px rgba(0,102,255,.18),
    12px 14px 0 rgba(0,102,255,.16),
    28px 34px 70px rgba(0,0,0,.84),
    inset 0 1px 0 rgba(255,255,255,.75);
  opacity:0;
  transform:perspective(920px) rotateX(12deg) rotateY(-18deg) translateY(18px) scale(.94);
  transform-style:preserve-3d; will-change:opacity,transform,filter;
}
.brand-logo--intro { width:clamp(280px,72vw,760px); transform:translateZ(28px); filter:drop-shadow(0 18px 16px rgba(0,18,45,.22)) }
.intro__logo::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent 0 46%,rgba(0,102,255,.35) 49%,rgba(255,255,255,.6) 50%,transparent 54% 100%);
  opacity:0; transform:translateY(-100%);
}
.intro__logo::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:1;
  background:linear-gradient(90deg,transparent,#0066ff 32%,#fff 50%,#0066ff 68%,transparent);
  transform:scaleX(0); transform-origin:left;
}
.intro__logo.in { animation:tbStaticIn 1s var(--ease) .2s forwards, tbStaticGlitch .7s steps(2,end) 1.15s 1, tbLogoHold 8s ease-in-out 1.8s forwards }
.intro__logo.in::before { animation:tbScan 1.25s var(--ease) .9s 1 }
.intro__logo.in::after  { animation:tbBar .75s var(--ease) 1s forwards }
@keyframes tbStaticIn { to { opacity:1; transform:perspective(920px) rotateX(5deg) rotateY(-9deg) translateY(0) scale(1); filter:none } }
@keyframes tbStaticGlitch {
  0%,100%{filter:none}
  20%{filter:contrast(1.4) saturate(1.35);transform:perspective(920px) rotateX(5deg) rotateY(-9deg) translate(-2px,0) scale(1)}
  40%{filter:hue-rotate(14deg);transform:perspective(920px) rotateX(4deg) rotateY(-11deg) translate(2px,0) scale(1)}
  60%{filter:brightness(1.16);transform:perspective(920px) rotateX(6deg) rotateY(-8deg) translate(-1px,0) scale(1)}
}
@keyframes tbLogoHold {
  0%  {transform:perspective(920px) rotateX(5deg)  rotateY(-9deg)  translateY(0)    scale(1)}
  38% {transform:perspective(920px) rotateX(2deg)  rotateY(7deg)   translateY(-10px) scale(1.015)}
  72% {transform:perspective(920px) rotateX(7deg)  rotateY(-5deg)  translateY(-4px)  scale(1.01)}
  100%{transform:perspective(920px) rotateX(4deg)  rotateY(0deg)   translateY(0)    scale(1)}
}
@keyframes tbScan { 0%{opacity:0;transform:translateY(-100%)} 12%,78%{opacity:.8} 100%{opacity:0;transform:translateY(100%)} }
@keyframes tbBar  { to{transform:scaleX(1)} }

.intro__boot {
  width:min(760px,100%); margin:0 auto 18px; padding:12px 14px;
  border:1px solid rgba(0,102,255,.36); background:rgba(2,8,18,.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.05),inset 0 0 24px rgba(0,102,255,.12);
  font-family:var(--font-mono); text-align:left; position:relative; overflow:hidden;
  opacity:0; transform:translateY(8px); animation:tbBootIn .65s var(--ease) 1.15s forwards;
}
.intro__boot::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.18;
  background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(255,255,255,.22) 6px);
}
.intro__boot-head { display:flex; justify-content:space-between; gap:16px; color:#dcecff; font-size:12px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:10px }
.intro__boot-bar  { height:14px; border:1px solid rgba(255,255,255,.22); background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 18px),rgba(0,0,0,.62); overflow:hidden; position:relative }
.intro__boot-bar span { display:block; width:0; height:100%; background:linear-gradient(90deg,#0066ff,#7db6ff 56%,#ffffff); box-shadow:0 0 18px rgba(0,102,255,.7); transition:width .18s linear }
.intro__boot-status { margin-top:9px; color:#8fbaff; font-size:12px; letter-spacing:.08em; text-transform:uppercase }
@keyframes tbBootIn { to{opacity:1;transform:none} }

.intro__welcome {
  width:min(760px,100%); margin:0 auto 14px; text-align:left;
  font-family:var(--font-display); font-size:clamp(22px,4vw,42px); line-height:.95;
  text-transform:uppercase; letter-spacing:.04em; color:#fff;
  text-shadow:0 0 18px rgba(0,102,255,.75),2px 0 0 rgba(255,42,42,.45);
  opacity:0; transform:translateY(8px);
  animation:tbWelcomeIn .8s var(--ease) 2.1s forwards, tbWelcomePulse 2.6s ease-in-out 3s infinite;
}
@keyframes tbWelcomeIn    { to{opacity:1;transform:none} }
@keyframes tbWelcomePulse { 0%,100%{filter:none} 50%{filter:brightness(1.25)} }

.intro__terminal { font-family:var(--font-mono); font-size:clamp(15px,2.4vw,24px); color:var(--gray-100); white-space:pre-wrap; word-break:break-word; text-align:left; width:min(760px,100%); margin:0 auto }
.intro__prompt   { color:var(--red) }
.caret           { display:inline-block; color:#fff; animation:blink 1s steps(1) infinite }
.intro__skip     { position:absolute; bottom:-72px; right:var(--gutter); background:none; border:1px solid var(--gray-500); color:var(--gray-300); font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; padding:10px 16px; cursor:pointer; text-transform:uppercase; transition:.2s var(--ease) }
.intro__skip:hover { border-color:var(--os-accent); color:#fff }

@keyframes blink  { 50%{opacity:0} }
@keyframes fadeUp { to{opacity:1;transform:none} }


/* =========================================================
   OS MENU BAR
   ========================================================= */
.os-menubar {
  position:fixed; top:0; left:0; right:0; z-index:600;
  height:var(--menubar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:rgba(4,8,20,0.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--os-border);
  opacity:0; transition:opacity .6s var(--ease);
}
.os-menubar.is-visible { opacity:1 }

.os-menubar__left  { display:flex; align-items:center; gap:20px }
.os-menubar__right { display:flex; align-items:center; gap:14px }

.os-menubar__brand {
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
  user-select:none;
}

.os-menubar__nav { display:flex; gap:14px }
.os-menubar__nav a {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:rgba(200,205,214,0.55); transition:color .15s;
}
.os-menubar__nav a:hover { color:#fff }

.os-menubar__status {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--os-accent); opacity:.75;
}
.os-menubar__clock {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:rgba(200,205,214,0.65);
}


/* =========================================================
   ENVIRONMENT OVERLAY  (logo world: curves · streak · vignette)
   z-index: above 3D canvas (0), below desktop (10)
   ========================================================= */
.os-environment {
  position:fixed; inset:0; z-index:2; pointer-events:none;
}

/* flowing silver corner curves */
.os-env__curves {
  position:absolute;
  width:clamp(380px,60vw,760px);
  height:clamp(380px,60vw,760px);
}
.os-env__curves--tr { top:-8%; right:-8% }
.os-env__curves--bl { bottom:-8%; left:-8%; transform:scale(-1,-1) }

/* diagonal blue light cut — the TB logo streak across the desktop */
.os-env__streak {
  position:absolute; inset:0;
  background:linear-gradient(
    108deg,
    transparent              0%,
    transparent              36%,
    rgba(46,155,255,0.000)   42%,
    rgba(46,155,255,0.018)   46%,
    rgba(255,255,255,0.012)  48.5%,
    rgba(46,155,255,0.018)   51%,
    transparent              56%,
    transparent              100%
  );
  animation:envStreakPulse 9s ease-in-out infinite;
}
@keyframes envStreakPulse {
  0%,100% { opacity:.55 }
  45%     { opacity:1   }
  80%     { opacity:.65 }
}

/* barely-there vignette — just enough depth without dimming the 3D */
.os-env__vignette {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 72% 15%, rgba(46,155,255,0.025) 0%, transparent 60%),
    radial-gradient(ellipse 110% 110% at 50% 50%, transparent 60%, rgba(0,0,0,0.18) 100%);
}


/* =========================================================
   OS DESKTOP
   ========================================================= */
.os-desktop {
  position:fixed; inset:0;
  z-index:10;
  pointer-events:none;
  padding-top:var(--menubar-h);
  padding-bottom:var(--dock-h);
}

/* Ghost headline — full-bleed watermark centered behind everything */
.os-desktop__hero {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  text-align:center;
  opacity:0; /* JS animates in after intro */
  width:90vw;
}
.os-desktop__eyebrow {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.35em;
  text-transform:uppercase; color:rgba(200,205,214,0.12);
  margin-bottom:16px;
}
.os-desktop__headline {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(28px,7vw,96px);
  line-height:.9; letter-spacing:-.03em; text-transform:uppercase;
  color:rgba(255,255,255,0.04);
  text-shadow:0 0 120px rgba(46,155,255,0.08);
  user-select:none;
}
.os-desktop__headline span { color:rgba(46,155,255,0.06) }

/* Tagline — pinned above dock */
.os-desktop__tagline {
  position:absolute;
  bottom:10px;
  right:clamp(24px,4vw,60px);
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(200,205,214,0.18);
  white-space:nowrap; pointer-events:none;
  opacity:0; /* JS animates in */
}

/* App icon grid — bottom-left, always clear of default window zone */
.os-icons {
  position:absolute;
  left:clamp(24px,4vw,60px);
  bottom:clamp(16px,3vh,36px);
  display:grid;
  grid-template-columns:repeat(3, auto);
  gap:clamp(12px,1.8vw,22px);
  pointer-events:auto;
}
.os-icon-wrap { display:flex }

.os-icon {
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:none; border:none; padding:0; color:var(--white);
  opacity:0; /* staggered in by GSAP after intro */
}

.os-icon__tile {
  width:72px; height:72px;
  background:rgba(8,18,42,0.4);
  backdrop-filter:blur(14px);
  border:1px solid var(--os-border);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  transition:
    transform      .22s var(--ease),
    background     .22s var(--ease),
    border-color   .22s var(--ease),
    box-shadow     .22s var(--ease);
}
/* glass sheen */
.os-icon__tile::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.09) 0%,transparent 55%);
  border-radius:inherit; pointer-events:none;
}

.os-icon:hover .os-icon__tile,
.os-icon:focus-visible .os-icon__tile {
  background:rgba(46,155,255,0.13);
  border-color:var(--os-border-lit);
  transform:translateY(-5px) scale(1.07);
  box-shadow:
    0 14px 42px rgba(46,155,255,0.22),
    0 0 0 1px rgba(46,155,255,0.18);
}

.os-icon.is-open .os-icon__tile {
  background:rgba(46,155,255,0.18);
  border-color:rgba(46,155,255,0.5);
  box-shadow:0 0 0 1px rgba(46,155,255,0.2), 0 8px 28px rgba(46,155,255,0.2);
}

.os-icon__label {
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  color:rgba(200,205,214,0.82); text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,0.9);
}
.os-icon__ext { color:rgba(46,155,255,0.72) }


/* =========================================================
   OS WINDOWS
   ========================================================= */
.os-window {
  position:fixed;
  min-width:320px; min-height:260px;
  background:var(--os-glass);
  backdrop-filter:blur(18px);
  border:1px solid var(--os-border);
  border-radius:10px;
  box-shadow:
    0 36px 90px rgba(0,0,0,0.75),
    0 0 0 0.5px rgba(46,155,255,0.08);
  overflow:hidden;
  z-index:300;
  display:flex; flex-direction:column;
  transition:
    box-shadow     .2s var(--ease),
    border-color   .2s var(--ease),
    opacity        .18s var(--ease),
    transform      .18s var(--ease);
}
.os-window[hidden] { display:none }

/* active window: blue rim + glow */
.os-window.is-active {
  border-color:var(--os-border-lit);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.82),
    0 0 0 1px rgba(46,155,255,0.22),
    0 0 48px rgba(46,155,255,0.07);
}

/* minimize: shrink to dock, animate out */
.os-window.is-minimized {
  opacity:0;
  transform:scale(0.82) translateY(30px);
  pointer-events:none;
}

/* maximized: fill viewport between menubar and dock */
.os-window.is-maximized {
  top:    calc(var(--menubar-h) + 4px) !important;
  left:   4px !important;
  width:  calc(100vw - 8px) !important;
  height: calc(100vh - var(--menubar-h) - var(--dock-h) - 8px) !important;
  border-radius:8px;
}

/* window open animation */
@keyframes winOpen {
  from { opacity:0; transform:scale(0.94) translateY(12px) }
  to   { opacity:1; transform:scale(1)    translateY(0) }
}
.os-window.is-opening {
  animation:winOpen .22s var(--ease) forwards;
}

/* ── title bar ─────────────────────────────────────────── */
.os-window__bar {
  position:relative; flex-shrink:0;
  height:36px;
  display:flex; align-items:center;
  padding:0 10px;
  background:var(--os-glass-bar);
  border-bottom:1px solid var(--os-border);
  cursor:grab; user-select:none;
  overflow:hidden;
  gap:8px;
}
.os-window__bar:active { cursor:grabbing }

/* blue diagonal streak — sweeps across on focus */
.os-window__bar-streak {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(
    108deg,
    transparent         0%,
    transparent         20%,
    rgba(46,155,255,0.7) 46%,
    rgba(255,255,255,0.5) 48%,
    rgba(46,155,255,0.5) 50%,
    transparent         74%,
    transparent         100%
  );
  transform:translateX(-120%);
  opacity:0;
}
/* alert variant (spotlight window) — red streak */
.os-window__bar-streak--alert {
  background:linear-gradient(
    108deg,
    transparent         0%,
    transparent         20%,
    rgba(255,42,42,0.7) 46%,
    rgba(255,200,200,0.5) 48%,
    rgba(255,42,42,0.5) 50%,
    transparent         74%,
    transparent         100%
  );
}

/* when the window becomes active, fire the streak sweep */
.os-window.is-active .os-window__bar-streak {
  animation:streakSweep .55s var(--ease) forwards;
}
@keyframes streakSweep {
  0%   { transform:translateX(-120%); opacity:0 }
  20%  { opacity:1 }
  100% { transform:translateX(120%);  opacity:0 }
}

/* persistent faint glow on active bar */
.os-window.is-active .os-window__bar::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(108deg,transparent 30%,rgba(46,155,255,0.06) 50%,transparent 70%);
}

/* window title */
.os-window__title {
  flex:1; text-align:center;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em;
  color:rgba(200,205,214,0.65); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.os-window.is-active .os-window__title { color:rgba(255,255,255,0.92) }

/* ── traffic-light controls ─────────────────────────────── */
.os-window__controls {
  display:flex; gap:6px; align-items:center; flex-shrink:0;
}
.os-win-btn {
  width:14px; height:14px; border-radius:50%; border:none;
  font-size:0; display:flex; align-items:center; justify-content:center;
  background:rgba(200,205,214,0.22); transition:background .15s, font-size .1s;
  padding:0; flex-shrink:0;
}
.os-window__controls:hover .os-win-btn { font-size:9px; color:rgba(0,0,0,0.7) }
.os-win-close:hover { background:#ff5f57 }
.os-win-min:hover   { background:#febc2e }
.os-win-max:hover   { background:#28c840 }

/* ── window body ─────────────────────────────────────────── */
.os-window__body {
  flex:1; overflow-y:auto;
  padding:clamp(22px,3.5vw,44px);
  scrollbar-width:thin;
  scrollbar-color:rgba(46,155,255,0.28) transparent;
}
.os-window__body::-webkit-scrollbar       { width:4px }
.os-window__body::-webkit-scrollbar-thumb {
  background:rgba(46,155,255,0.28); border-radius:2px;
}
.os-window__body--center {
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
}

/* tighten service item margins inside windows */
.os-window__body .service { margin-top:clamp(24px,4vh,44px) }
.os-window__body .team    { margin-top:clamp(28px,4vh,48px) }


/* =========================================================
   OS DOCK
   ========================================================= */
.os-dock {
  position:fixed; bottom:0; left:0; right:0; z-index:600;
  height:var(--dock-h);
  display:flex; align-items:center;
  padding:0 16px; gap:12px;
  background:rgba(4,8,20,0.82);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--os-border);
  opacity:0; transition:opacity .6s var(--ease);
}
.os-dock.is-visible { opacity:1 }

.os-dock__brand { display:flex; align-items:center; flex-shrink:0 }
.os-dock__divider {
  width:1px; height:20px; flex-shrink:0;
  background:var(--os-border);
}
.os-dock__windows {
  display:flex; align-items:center; gap:6px; flex:1; overflow-x:auto;
  scrollbar-width:none;
}
.os-dock__windows::-webkit-scrollbar { display:none }

.os-dock__item {
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; flex-shrink:0;
  background:rgba(46,155,255,0.07);
  border:1px solid var(--os-border);
  border-radius:6px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  color:rgba(200,205,214,0.75);
  cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
.os-dock__item:hover      { background:rgba(46,155,255,0.15); border-color:rgba(46,155,255,0.3); color:#fff }
.os-dock__item.is-active  { background:rgba(46,155,255,0.2);  border-color:rgba(46,155,255,0.45); color:#fff }
.os-dock__item.is-minimized { opacity:.5 }

.os-dock__item-close {
  background:none; border:none; padding:0;
  color:rgba(200,205,214,0.35); font-size:13px; line-height:1;
  transition:color .12s;
}
.os-dock__item-close:hover { color:#ff5f57 }

.os-dock__right {
  display:flex; align-items:center; gap:12px;
  margin-left:auto; flex-shrink:0;
}
.os-dock__year {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  color:rgba(200,205,214,0.35);
}
.os-dock__link {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  color:rgba(200,205,214,0.4); transition:color .15s;
}
.os-dock__link:hover { color:#fff }


/* =========================================================
   TYPOGRAPHY / CONTENT (shared between all window bodies)
   ========================================================= */
.eyebrow {
  font-family:var(--font-mono); font-size:13px; letter-spacing:.35em;
  text-transform:uppercase; color:var(--gray-300); margin-bottom:24px;
}
.eyebrow.accent { color:var(--red) }  /* spotlight only — stays red */

/* accent spans in headlines → blue (logo colour) */
.accent { color:var(--os-accent) }

.display {
  font-family:var(--font-display); font-weight:900; line-height:.92;
  letter-spacing:-.02em; text-transform:uppercase;
  font-size:clamp(44px,11vw,150px);
}
.display--lg { font-size:clamp(54px,13vw,180px) }
.display--md { font-size:clamp(40px,8vw,110px) }
.display--sm { font-size:clamp(26px,4vw,62px); line-height:.95 }

.lede  { font-size:clamp(16px,2vw,22px); max-width:46ch; margin-top:28px; color:var(--gray-100) }
.prose { font-size:clamp(15px,1.4vw,19px); max-width:60ch; margin-top:24px; color:var(--gray-100); line-height:1.65 }
.prose--center { margin-left:auto; margin-right:auto }

/* ── buttons ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:14px; padding:16px 28px;
  border:1px solid #fff; cursor:pointer;
  transition:transform .2s var(--ease), background .25s, color .25s, border-color .25s;
  position:relative; overflow:hidden; background:transparent; color:#fff;
}
.btn--primary { background:var(--os-accent); border-color:var(--os-accent) }
.btn--primary:hover { background:#fff; border-color:#fff; color:#000; transform:translateY(-3px) }
.btn--ghost { background:transparent }
.btn--ghost:hover   { background:#fff; color:#000; transform:translateY(-3px) }
.btn--lg { padding:20px 40px; font-size:16px }
.btn--sm { padding:10px 18px; font-size:12px }

.hero__actions { display:flex; gap:16px; flex-wrap:wrap; margin-top:40px }

/* ── about / team ─────────────────────────────────────────── */
.team__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-top:40px }
.member { display:flex; flex-direction:column; border:1px solid var(--gray-700); background:rgba(8,8,9,.55); backdrop-filter:blur(4px) }
.member__photo {
  aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,#0d0d0e 0 12px,#141416 12px 24px);
  display:flex; align-items:center; justify-content:center;
  position:relative; filter:grayscale(1) contrast(1.1);
  border-bottom:1px solid var(--gray-700);
}
.member__photo--filled { background:transparent; filter:none }
.member__photo--filled::after { content:none }
.member__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28% }
.member__photo--ceo img { object-position:52% 42%; filter:none }
.member__photo--cto img { object-position:50% 31%; filter:none }
.member__body { padding:24px }
.member__name { font-family:var(--font-display); font-size:clamp(20px,2.4vw,32px); text-transform:uppercase; letter-spacing:-.01em }
/* role → blue (was red) */
.member__role { color:var(--os-accent); font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; margin:6px 0 14px }
.member__bio  { color:var(--gray-100); line-height:1.65; font-size:15px }

/* ── services ─────────────────────────────────────────────── */
.service {
  position:relative; border-top:1px solid var(--gray-700); padding-top:36px;
}
/* service index → blue (was red) */
.service__index { font-family:var(--font-mono); color:var(--os-accent); font-size:14px; letter-spacing:.2em }
.service h3 { margin:16px 0 }
.badge { display:inline-block; margin-top:18px; font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--red); color:var(--red) }
.badge--dev::before { content:"● "; color:var(--red) }
.service--spotlight-teaser .btn { margin-top:0 }

/* ── pricing ──────────────────────────────────────────────── */
/* (content inherits from typography + buttons above) */

/* ── security spotlight ───────────────────────────────────── */
.spotlight-card {
  margin-top:40px; border:1px solid var(--red-deep);
  background:rgba(12,4,4,.72); backdrop-filter:blur(6px);
  padding:clamp(20px,3.5vw,44px); position:relative;
  box-shadow:0 0 0 1px rgba(255,42,42,.12), 0 28px 70px rgba(0,0,0,.55);
}
.spotlight-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--red),transparent) }
.spotlight-card__head { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start; border-bottom:1px solid var(--gray-700); padding-bottom:22px }
.spotlight-card__company { font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:var(--red) }
.spotlight-card__title   { font-family:var(--font-display); font-size:clamp(20px,2.8vw,38px); text-transform:uppercase; margin-top:10px; line-height:1 }
.spotlight-card__month   { font-family:var(--font-mono); font-size:13px; letter-spacing:.2em; color:var(--gray-300); white-space:nowrap }
.spotlight-card__grid    { display:grid; grid-template-columns:repeat(2,1fr); gap:24px 36px; margin-top:24px }
.spotlight-card__grid dt { font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:7px }
.spotlight-card__grid dd { color:var(--gray-100); line-height:1.6; font-size:14px }
.disclaimer { margin-top:28px; padding-top:18px; border-top:1px dashed var(--gray-500); font-size:13px; color:var(--gray-300); line-height:1.6 }

/* archive → date blue (was red) */
.archive__title { margin-top:clamp(28px,4vh,52px) }
.archive { list-style:none; margin-top:28px; border-top:1px solid var(--gray-700) }
.archive__item {
  display:grid; grid-template-columns:130px 180px 1fr; gap:16px;
  padding:20px 0; border-bottom:1px solid var(--gray-700);
  align-items:baseline; transition:background .2s, padding-left .2s var(--ease);
}
.archive__item:hover { background:rgba(46,155,255,0.04); padding-left:10px }
.archive__date { font-family:var(--font-mono); color:var(--os-accent); font-size:12px; letter-spacing:.15em }
.archive__co   { font-family:var(--font-display); text-transform:uppercase; font-size:17px }
.archive__desc { color:var(--gray-300); font-size:14px }

/* glitch effect */
.glitch { position:relative }
.glitch::before,.glitch::after {
  content:attr(data-text); position:absolute; inset:0;
  clip-path:inset(0 0 0 0);
}
.glitch::before { color:var(--red);    transform:translate(-2px,0); animation:glitch1 2.6s infinite linear alternate }
.glitch::after  { color:#19d3ff; transform:translate(2px,0); mix-blend-mode:screen; animation:glitch2 3.4s infinite linear alternate }
@keyframes glitch1 { 0%,92%{clip-path:inset(0 0 100% 0)} 93%{clip-path:inset(20% 0 40% 0)} 96%{clip-path:inset(60% 0 10% 0)} 100%{clip-path:inset(0 0 100% 0)} }
@keyframes glitch2 { 0%,90%{clip-path:inset(100% 0 0 0)} 91%{clip-path:inset(40% 0 30% 0)} 95%{clip-path:inset(10% 0 70% 0)} 100%{clip-path:inset(100% 0 0 0)} }

/* ── contact ──────────────────────────────────────────────── */
.contact__actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:40px }
.contact__note    { margin-top:22px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--gray-500) }

/* ── cookie banner ────────────────────────────────────────── */
.cookie {
  position:fixed; bottom:calc(var(--dock-h) + 10px);
  left:18px; right:18px; z-index:700; max-width:520px; margin:0 auto;
  background:var(--gray-900); border:1px solid var(--gray-700);
  padding:18px 20px;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.cookie p          { font-size:13px; color:var(--gray-100); line-height:1.5; flex:1 1 260px }
.cookie__actions   { display:flex; gap:12px; align-items:center }
.cookie__link      { font-family:var(--font-mono); font-size:11px; color:var(--gray-300); text-decoration:underline }
.cookie__link:hover{ color:var(--os-accent) }


/* =========================================================
   RESPONSIVE  (≤ 860 px)
   ========================================================= */
@media (max-width:860px) {
  /* icons: 3-per-row grid */
  .os-icons { max-width:380px; gap:16px }
  .os-icon__tile { width:64px; height:64px; border-radius:14px }
  .os-icon__label { font-size:9.5px }

  /* windows: slide up as full-screen sheets on mobile */
  .os-window {
    top:       var(--menubar-h) !important;
    left:      0  !important;
    width:     100vw !important;
    height:    calc(100vh - var(--menubar-h) - var(--dock-h)) !important;
    border-radius:0;
    border-left:none; border-right:none;
  }
  /* disable drag grab cursor on mobile */
  .os-window__bar { cursor:default }

  .team__grid           { grid-template-columns:1fr }
  .spotlight-card__grid { grid-template-columns:1fr }
  .archive__item        { grid-template-columns:1fr; gap:4px }
  .archive__co          { font-size:15px }

  .os-desktop__headline { font-size:clamp(16px,5vw,28px) }

  .os-menubar__nav { display:none } /* too cramped on mobile */
  .os-dock__right  { display:none }
}

@media (max-width:480px) {
  .os-icons { max-width:280px; gap:12px }
  .os-icon__tile { width:56px; height:56px; border-radius:12px }
  .display--lg { font-size:clamp(32px,10vw,54px) }
  .display--md { font-size:clamp(26px,8vw,44px) }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .glitch::before,.glitch::after { display:none }
  .os-env__streak { animation:none }
  .os-window__bar-streak { display:none }
}