/* Base styles: load BEFORE tw.css (Tailwind utilities must win the cascade). */
body{font-family:'Geist',system-ui,-apple-system,sans-serif;margin:0;background:#f7f9fc;color:#1e293b}
  .glass-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.font-display{font-family:'Geist',system-ui,sans-serif}
  .font-mono-tech{font-family:'Geist Mono',ui-monospace,monospace}
  .hover\:bg-slate-50:hover{background-color:#f8fafc}
  .bg-slate-300{background-color:#cbd5e1}
  #calculator input[type=number]{-moz-appearance:textfield}
  #calculator input[type=number]::-webkit-outer-spin-button,#calculator input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  #calculator input[type=checkbox]{width:1rem;height:1rem;accent-color:#2563eb;flex:none}
  .tech-tag{font-family:'Geist Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#2563eb;display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
  .tech-tag::before{content:'';width:18px;height:2px;background:#2563eb;display:inline-block;border-radius:2px}
  .gradient-text{background:linear-gradient(100deg,#1d4ed8,#06b6d4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .section-title{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.02em;color:#0f172a}
  .section-sub{color:#475569;font-size:1.05rem;max-width:46rem;margin:1rem auto 0}
  .card{background:#fff;border:1px solid #e7edf5;border-radius:1rem;box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1),border-color .25s ease}
  .card:hover{box-shadow:0 22px 40px -24px rgba(37,99,235,.28);transform:translateY(-3px);border-color:#cfe0fa}
  .grid-bg{background-image:linear-gradient(#e8eefb 1px,transparent 1px),linear-gradient(90deg,#e8eefb 1px,transparent 1px);background-size:42px 42px}
  .grid-fade{-webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 30%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 75% 60% at 50% 30%,#000 40%,transparent 100%)}
  .pulse-dot{position:relative}
  .pulse-dot::after{content:'';position:absolute;inset:-4px;border-radius:9999px;border:1px solid currentColor;opacity:.6;animation:pl 1.8s ease-out infinite}
  @keyframes pl{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.7);opacity:0}}
  /* system UI (light) */
  .sysui{background:#fff;border:1px solid #e2e8f0;border-radius:1.1rem;box-shadow:0 30px 60px -30px rgba(15,23,42,.25);overflow:hidden}
  .sys-head{background:#f1f5f9;border-bottom:1px solid #e2e8f0}
  .toggle{width:42px;height:24px;border-radius:9999px;background:#cbd5e1;position:relative;transition:.2s;cursor:pointer;flex:none}
  .toggle.on{background:#2563eb}
  .toggle .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:9999px;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  .toggle.on .knob{left:21px}
  input[type=range].sig{-webkit-appearance:none;appearance:none;height:6px;border-radius:9999px;background:#e2e8f0;outline:none}
  input[type=range].sig::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#2563eb;cursor:pointer;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
  input[type=range].sig::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#2563eb;cursor:pointer}
  .bar{width:100%;background:linear-gradient(180deg,#3b82f6,#06b6d4);border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.22,1,.36,1)}
  .bar.alt{background:linear-gradient(180deg,#22c55e,#16a34a)}
  .chip{font-family:'Geist Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.05em;padding:.18rem .5rem;border-radius:.4rem;border:1px solid #dbe3ee;color:#475569;background:#f8fafc;display:inline-block}
  .sys-rail-btn{font-family:'Geist Mono',ui-monospace,monospace;font-size:.72rem}
  details>summary{list-style:none;cursor:pointer}
  details>summary::-webkit-details-marker{display:none}
  details[open] summary .fa-chevron-down{transform:rotate(180deg)}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  /* telegram animation along bus */
  .bus-line{position:relative;height:3px;background:#dbeafe;border-radius:3px;overflow:hidden}
  .telegram{position:absolute;top:-3px;width:9px;height:9px;border-radius:50%;background:#2563eb;box-shadow:0 0 10px #3b82f6;animation:run 2.6s linear infinite}
  @keyframes run{0%{left:-2%}100%{left:102%}}
  .count-tween{font-variant-numeric:tabular-nums}
  ::selection{background:#2563eb;color:#fff}
  html{scroll-padding-top:80px}
  .donut{background:conic-gradient(#2563eb 0 var(--a),#06b6d4 var(--a) var(--b),#94a3b8 var(--b) 100%)}
  /* ===== Futuristic / Iron-Man HUD ===== */
  .hud{position:relative;background:radial-gradient(120% 120% at 50% -10%,#0a1a2b 0%,#05070f 60%);color:#cffafe;border:1px solid #11324a;border-radius:1.25rem;overflow:hidden}
  .hud-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(34,211,238,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.07) 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
  .neon{color:#22d3ee;text-shadow:0 0 10px rgba(34,211,238,.65)}
  .neon-amber{color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.6)}
  .glass-panel{position:relative;background:rgba(8,18,30,.55);border:1px solid rgba(34,211,238,.22);border-radius:1rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 18px 50px -22px rgba(34,211,238,.3)}
  .scanline{position:absolute;left:0;right:0;height:130px;top:-130px;background:linear-gradient(180deg,transparent,rgba(34,211,238,.10),transparent);animation:scan 4.5s linear infinite;pointer-events:none}
  @keyframes scan{0%{top:-130px}100%{top:110%}}
  .g-track{fill:none;stroke:rgba(148,163,184,.16);stroke-width:7}
  .g-arc{fill:none;stroke:#22d3ee;stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 5px rgba(34,211,238,.85))}
  .g-arc.amber{stroke:#fbbf24;filter:drop-shadow(0 0 5px rgba(251,191,36,.85))}
  .g-arc.violet{stroke:#a78bfa;filter:drop-shadow(0 0 5px rgba(167,139,250,.85))}
  .reactor{animation:react 2.8s ease-in-out infinite}
  @keyframes react{0%,100%{filter:drop-shadow(0 0 6px rgba(34,211,238,.5))}50%{filter:drop-shadow(0 0 18px rgba(34,211,238,.95))}}
  .eq{display:flex;align-items:flex-end;gap:3px;height:26px}
  .eq i{display:block;width:4px;height:6px;background:#22d3ee;border-radius:2px;animation:eqp 1s ease-in-out infinite;box-shadow:0 0 7px rgba(34,211,238,.8)}
  @keyframes eqp{0%,100%{height:5px}50%{height:24px}}
  .hudbtn{border:1px solid rgba(34,211,238,.35);color:#a5f3fc;background:rgba(34,211,238,.06);transition:.2s}
  .hudbtn:hover{background:rgba(34,211,238,.18);box-shadow:0 0 16px rgba(34,211,238,.45);transform:translateY(-1px)}
  .floor-row{border:1px solid rgba(34,211,238,.16);transition:.2s;cursor:pointer}
  .floor-row:hover{border-color:rgba(34,211,238,.45)}
  .floor-row.act{border-color:#22d3ee;box-shadow:inset 0 0 18px rgba(34,211,238,.3)}
  .term{font-family:'Geist Mono',ui-monospace,monospace;font-size:.74rem;line-height:1.5}
  .term .ok{color:#34d399}.term .ga{color:#22d3ee}.term .wn{color:#fbbf24}.term .tm{color:#64748b}
  .anim-border::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,#22d3ee,transparent 30%,#a78bfa 60%,transparent 80%,#22d3ee);background-size:300% 300%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:bord 6s linear infinite;opacity:.55;pointer-events:none}
  @keyframes bord{0%{background-position:0% 50%}100%{background-position:300% 50%}}
  .ticker{animation:tick 1.4s steps(1) infinite}
  @keyframes tick{50%{opacity:.25}}
  .radar{position:relative;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.07),transparent 70%);border:1px solid rgba(34,211,238,.25);overflow:hidden}
  .radar::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(34,211,238,.40),transparent 32%);animation:sweep 3.4s linear infinite}
  @keyframes sweep{to{transform:rotate(360deg)}}
  .radar .ring{position:absolute;inset:16%;border:1px solid rgba(34,211,238,.18);border-radius:50%}
  .radar .ring.r2{inset:33%}
  .radar .cx{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(34,211,238,.12)}
  .radar .cy{position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(34,211,238,.12)}
  .blip{position:absolute;width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 9px #22d3ee;animation:blip 2.6s ease-in-out infinite}
  @keyframes blip{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}
  .core-ring{position:absolute;border-radius:50%;border:2px solid transparent;border-top-color:#22d3ee;border-right-color:rgba(34,211,238,.35);animation:spin 3s linear infinite}
  .core-ring.b{border-top-color:#a78bfa;border-right-color:rgba(167,139,250,.35);animation-duration:4.5s;animation-direction:reverse}
  @keyframes spin{to{transform:rotate(360deg)}}
  .flowbar{height:6px;border-radius:3px;background:linear-gradient(90deg,#22d3ee,transparent);background-size:200% 100%;animation:flow 1.8s linear infinite}
  @keyframes flow{to{background-position:-200% 0}}

  /* ===== 2026 refresh: typography, evidence layer, segmented tracks ===== */
  h1,h2,h3,.font-display{font-optical-sizing:auto}
  .section-title{letter-spacing:-.025em}
  .lede{color:#475569;font-size:1.075rem;line-height:1.65;max-width:44rem}
  .eyebrow{font-family:'Geist Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#2563eb;font-weight:600}
  /* spring-ish, interruptible-feeling transitions (damping ~1.0, response ~.4) */
  .spring{transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s cubic-bezier(.22,1,.36,1),border-color .25s ease,background-color .25s ease}
  .press:active{transform:scale(.985)}
  /* feedback on press, not on release; keyboard focus always visible */
  summary:active,.filter-chip:active,.seg button:active{transform:scale(.99)}
  summary{cursor:pointer;transition:background-color .18s ease}
  summary:hover{background:#f8fafc}
  a:focus-visible,button:focus-visible,summary:focus-visible,details:focus-visible,[tabindex]:focus-visible{outline:2px solid #2563eb;outline-offset:3px;border-radius:.5rem}
  /* portfolio ledger */
  .ledger{display:grid;gap:1px;background:#e2e8f0;border:1px solid #e2e8f0;border-radius:1rem;overflow:hidden}
  .ledger>div{background:#fff;padding:1.4rem 1.25rem}
  .ledger .n{font-family:'Geist',system-ui,sans-serif;font-weight:800;font-size:clamp(1.65rem,3.1vw,2.3rem);line-height:1;letter-spacing:-.03em;color:#0f172a;font-variant-numeric:tabular-nums}
  /* project-type matrix */
  .pt-row{display:grid;grid-template-columns:1fr auto;gap:.75rem 1rem;align-items:baseline;padding:.85rem 0}
  .pt-bar{grid-column:1/-1;height:3px;border-radius:3px;background:#eef2f7;overflow:hidden}
  .pt-bar span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#2563eb,#06b6d4);transform-origin:left;transition:width .55s cubic-bezier(.22,1,.36,1)}
  .pt-count{font-family:'Geist Mono',ui-monospace,monospace;font-size:.82rem;color:#2563eb;font-weight:600;font-variant-numeric:tabular-nums}
  .filter-chip{font-family:'Geist Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.04em;padding:.5rem .85rem;border-radius:.6rem;border:1px solid #dbe3ee;background:#fff;color:#475569;transition:.2s;cursor:pointer}
  .filter-chip:hover{border-color:#93b4f5;color:#1d4ed8}
  .filter-chip.on{background:#2563eb;border-color:#2563eb;color:#fff}
  /* segmented audience control */
  .seg{display:flex;gap:.35rem;padding:.35rem;background:#eef2f7;border-radius:.85rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:1 0 auto;white-space:nowrap;padding:.7rem 1.1rem;border-radius:.6rem;font-weight:600;font-size:.9rem;color:#475569;transition:.28s cubic-bezier(.22,1,.36,1)}
  .seg button.on{background:#fff;color:#1d4ed8;box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px -10px rgba(37,99,235,.45)}
  /* photo frames */
  .shot{position:relative;overflow:hidden;border-radius:1rem;background:#0f172a}
  .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
  .shot:hover img{transform:scale(1.035)}
  .shot-cap{position:absolute;inset:auto 0 0 0;padding:1.1rem 1.15rem;background:linear-gradient(to top,rgba(2,6,23,.88),rgba(2,6,23,.35) 55%,transparent);color:#fff}
  /* the fixed WhatsApp button sits bottom-right; keep caption text clear of it on small screens */
  @media (max-width:640px){.shot-cap{padding-right:5.25rem}}
  .spec-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1rem;padding:.7rem 0}
  @media (max-width:640px){.spec-row{grid-template-columns:1fr;gap:.15rem}}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
  }