/* ==========================================================================
   CATBYTE — Developer Studio Portfolio
   Custom design layer on top of Tailwind (CDN). Tailwind handles layout/
   utility spacing; this file handles brand look: glass, glow, gradients,
   custom components (terminal, flow diagrams, dashboard mockup, etc).
   ========================================================================== */

:root,
:root[data-theme="dark"]{
  --bg:#020617;
  --bg-secondary:#0F172A;
  --card:#111827;
  --card-alt:#1E293B;
  --primary:#2563EB;
  --secondary:#3B82F6;
  --accent:#06B6D4;
  --text:#FFFFFF;
  --text-secondary:#CBD5E1;
  --text-muted:#94A3B8;
  --success:#22C55E;
  --warning:#F59E0B;
  --border:rgba(255,255,255,0.08);

  /* Surface tokens — the many components below were originally hand-tuned with
     literal rgba() values; these let the same components repaint for light mode
     without rewriting every rule. */
  --surface-navbar:rgba(2,6,23,0.55);
  --surface-navbar-scrolled:rgba(2,6,23,0.78);
  --surface-mobile-menu:rgba(2,6,23,0.98);
  --surface-glass:rgba(15,23,42,.55);
  --surface-card-1:rgba(30,41,59,.55);
  --surface-card-2:rgba(17,24,39,.55);
  --surface-overlay:rgba(2,6,23,.72);
  --surface-sidebar:rgba(2,6,23,.7);
  --surface-sidebar-mobile:rgba(2,6,23,.98);
  --surface-toast:rgba(15,23,42,.95);
  --surface-input:rgba(2,6,23,.5);
  --surface-btn-outline:rgba(255,255,255,0.03);
  --surface-hairline:rgba(255,255,255,.04);
  --surface-hairline-strong:rgba(255,255,255,.06);
  --hover-tint:rgba(255,255,255,.04);
  --hover-tint-strong:rgba(255,255,255,.05);
  --grid-line:rgba(255,255,255,.035);
  --noise-blend:overlay;
  --noise-opacity:.03;
  --shadow-ambient:rgba(0,0,0,.5);
  --receipt-bg:#0b1327;
  --receipt-border:rgba(255,255,255,.25);
  --receipt-text:#e2e8f0;
  --surface-sidebar-footer:rgba(2,6,23,.85);
  --spinner-track:rgba(255,255,255,.2);
}

:root[data-theme="light"]{
  --bg:#F4F6FB;
  --bg-secondary:#E9EDF5;
  --card:#FFFFFF;
  --card-alt:#F1F4F9;
  --primary:#2563EB;
  --secondary:#3B82F6;
  --accent:#0E7490;
  --text:#0F172A;
  --text-secondary:#334155;
  --text-muted:#64748B;
  --success:#15803D;
  --warning:#B45309;
  --border:rgba(15,23,42,0.1);

  --surface-navbar:rgba(255,255,255,0.6);
  --surface-navbar-scrolled:rgba(255,255,255,0.85);
  --surface-mobile-menu:rgba(255,255,255,0.98);
  --surface-glass:rgba(255,255,255,.7);
  --surface-card-1:rgba(255,255,255,.9);
  --surface-card-2:rgba(241,244,249,.85);
  --surface-overlay:rgba(15,23,42,.45);
  --surface-sidebar:rgba(255,255,255,.85);
  --surface-sidebar-mobile:rgba(255,255,255,0.98);
  --surface-toast:rgba(255,255,255,.98);
  --surface-input:rgba(255,255,255,.9);
  --surface-btn-outline:rgba(15,23,42,0.03);
  --surface-hairline:rgba(15,23,42,.05);
  --surface-hairline-strong:rgba(15,23,42,.08);
  --hover-tint:rgba(15,23,42,.035);
  --hover-tint-strong:rgba(15,23,42,.05);
  --grid-line:rgba(15,23,42,.05);
  --noise-blend:multiply;
  --noise-opacity:.02;
  --shadow-ambient:rgba(15,23,42,.14);
  --receipt-bg:#FFFFFF;
  --receipt-border:rgba(15,23,42,.2);
  --receipt-text:#0F172A;
  --surface-sidebar-footer:rgba(255,255,255,.92);
  --spinner-track:rgba(15,23,42,.15);
}

*{ scroll-behavior:smooth; }

html,body{
  background:var(--bg);
  color:var(--text-secondary);
  font-family:'Prompt','Sarabun',sans-serif;
  overflow-x:hidden;
}
/* Tailwind's .font-prompt utility (class specificity) would otherwise beat the
   plain-element rule above; body.font-prompt (class+element) beats it back so
   Latin letters/numbers render in Inter while Thai falls through to Prompt —
   Inter has no Thai glyphs, so the browser skips it automatically per-glyph. */
body.font-prompt{ font-family:'Inter','Prompt','Sarabun',sans-serif; }

body{
  position:relative;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(37,99,235,0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 20%, rgba(6,182,212,0.07), transparent 60%),
    var(--bg);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:var(--noise-opacity);
  mix-blend-mode:var(--noise-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--card-alt); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--primary); }

.font-mono-code{ font-family:'JetBrains Mono', monospace; }

h1,h2,h3,h4,h5,h6{ color:var(--text); font-weight:600; letter-spacing:-0.02em; }

a{ text-decoration:none; }

/* ==========================================================================
   Background ambience
   ========================================================================== */
.bg-grid{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.glow-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.35;
  pointer-events:none;
  z-index:0;
  animation:orbPulse 9s ease-in-out infinite;
}
@keyframes orbPulse{
  0%,100%{ transform:scale(1); opacity:.32; }
  50%{ transform:scale(1.1); opacity:.48; }
}

/* ==========================================================================
   Container
   ========================================================================== */
.container-catbyte{
  max-width:1360px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}
@media (min-width:768px){
  .container-catbyte{ padding-left:32px; padding-right:32px; }
}

/* ==========================================================================
   Navigation — floating bar (all portfolio pages)
   ========================================================================== */
.cb-nav{
  position:fixed;
  top:14px; left:0; right:0;
  z-index:100;
  padding:0 14px;
  transition:opacity .6s ease, transform .6s ease;
}
.cb-nav__bar{
  max-width:1180px;
  height:58px;
  margin:0 auto;
  display:flex; align-items:center; gap:1rem;
  padding:0 10px 0 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-glass);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#navbar.scrolled .cb-nav__bar,
#navbar.menu-open .cb-nav__bar{
  background:var(--surface-navbar-scrolled);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.55);
}
.cb-nav__brand{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Inter', sans-serif;
  font-weight:800; font-size:.92rem; letter-spacing:.08em;
  color:var(--text);
  flex-shrink:0;
}
.cb-nav__logo{ width:30px; height:30px; border-radius:8px; object-fit:cover; }
.cb-nav__links{ display:none; margin:0 auto; gap:.15rem; }
@media (min-width:1024px){ .cb-nav__links{ display:flex; } }
.cb-nav__actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }
@media (min-width:1024px){ .cb-nav__actions{ margin-left:0; } }

.nav-link{
  font-size:.86rem;
  font-weight:500;
  color:var(--text-secondary);
  transition:color .2s ease, background .2s ease;
}
.cb-nav__links .nav-link{ padding:.45rem .62rem; border-radius:999px; white-space:nowrap; }
@media (min-width:1280px){ .cb-nav__links .nav-link{ padding:.45rem .75rem; } }
.nav-link:hover{ color:var(--text); background:var(--hover-tint); }
.nav-link.active{ color:var(--text); background:var(--hover-tint-strong); }

.cb-icon-btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px;
  border:1px solid var(--border);
  color:var(--text);
  transition:background .2s ease, border-color .2s ease;
}
.cb-icon-btn:hover{ background:var(--hover-tint-strong); border-color:rgba(59,130,246,.35); }
.cb-nav__cta{
  display:none;
  align-items:center;
  height:40px;
  padding:0 1rem;
  border-radius:11px;
  background:var(--text);
  color:var(--bg);
  font-size:.84rem; font-weight:600;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cb-nav__cta:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(59,130,246,.7); }
/* 9 nav links: the CTA only shows when there is room (tablet bar, or wide desktop) */
@media (min-width:768px) and (max-width:1023px), (min-width:1280px){ .cb-nav__cta{ display:inline-flex; } }
@media (min-width:1024px){ .cb-nav__menu{ display:none; } }

.cb-nav__mobile{
  max-width:1180px;
  max-height:0;
  margin:8px auto 0;
  overflow:hidden;
  opacity:0;
  border:1px solid transparent;
  border-radius:16px;
  background:var(--surface-mobile-menu);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:max-height .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease, border-color .3s ease;
}
.cb-nav__mobile.open{ max-height:min(720px, calc(100vh - 96px)); max-height:min(720px, calc(100dvh - 96px)); overflow-y:auto; opacity:1; border-color:var(--border); }
.cb-nav__mobile .nav-link{
  display:flex; align-items:center; gap:1rem;
  padding:.85rem 1.25rem;
  border-bottom:1px solid var(--border);
  font-size:1rem; font-weight:600;
  color:var(--text);
  border-radius:0;
}
.cb-nav__mobile .nav-link:last-child{ border-bottom:0; }
.cb-nav__mobile .nav-link span{ width:1.5rem; font-family:'JetBrains Mono', monospace; font-size:.72rem; color:var(--accent); }
@media (min-width:1024px){ .cb-nav__mobile{ display:none; } }

.logo-mark{
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 0 24px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.3);
  font-weight:700;
  color:#fff;
  object-fit:cover;
  flex-shrink:0;
}

/* ==========================================================================
   Redesign buttons + links
   ========================================================================== */
.cb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:48px;
  padding:0 1.45rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.92rem; font-weight:600;
  white-space:nowrap;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.cb-btn--primary{ background:var(--text); color:var(--bg); }
.cb-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(59,130,246,.75); }
.cb-btn--ghost{ border-color:var(--border); color:var(--text); }
.cb-btn--ghost:hover{ border-color:rgba(59,130,246,.55); background:var(--hover-tint); }
.cb-btn--sm{ height:40px; padding:0 1.1rem; font-size:.85rem; }
.cb-btn--block{ width:100%; }
.cb-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.9rem; font-weight:600;
  color:var(--text);
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:2px;
  transition:background-size .35s ease, color .25s ease;
}
.cb-link::after{ content:"→"; transition:transform .3s ease; }
.cb-link:hover{ background-size:100% 1px; color:var(--accent); }
.cb-link:hover::after{ transform:translateX(4px); }
.cb-link--muted{ color:var(--text-muted); }

/* ==========================================================================
   Footer (redesign)
   ========================================================================== */
.cb-footer{ border-top:1px solid var(--border); padding:2.5rem 0 3rem; }
.cb-footer__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem 2rem; }
.cb-footer__brand{ display:flex; align-items:center; gap:.75rem; }
.cb-footer__brand img{ border-radius:7px; }
.cb-footer__brand strong{ display:block; font-family:'Inter', sans-serif; font-size:.88rem; letter-spacing:.1em; color:var(--text); }
.cb-footer__brand span{ font-size:.75rem; color:var(--text-muted); }
.cb-footer__links{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.cb-footer__links a{ font-size:.85rem; color:var(--text-secondary); transition:color .2s ease; }
.cb-footer__links a:hover{ color:var(--accent); }
.cb-footer__copy{ width:100%; font-size:.75rem; color:var(--text-muted); }
.has-music .cb-footer{ padding-bottom:6.5rem; }   /* keep footer links clear of the floating CD + contact buttons */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:48px;
  padding:0 26px;
  border-radius:10px;
  font-weight:600;
  font-size:.95rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  box-shadow:0 8px 24px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
}
.btn-primary::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}
.btn-primary:hover::after{ left:130%; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-outline{
  background:var(--surface-btn-outline);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-outline:hover{ border-color:var(--secondary); background:rgba(59,130,246,.08); transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,99,235,.15); }
.btn-sm{ height:40px; padding:0 18px; font-size:.85rem; border-radius:8px; }
.btn-block{ width:100%; }

/* ==========================================================================
   Cards / Glass / Glow
   ========================================================================== */
.card{
  position:relative;
  background:linear-gradient(180deg, var(--surface-card-1), var(--surface-card-2));
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:inset 0 1px 0 var(--surface-hairline);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(59,130,246,.4), rgba(6,182,212,.3));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(59,130,246,.35);
  box-shadow:inset 0 1px 0 var(--surface-hairline-strong), 0 16px 36px var(--shadow-ambient), 0 0 22px rgba(37,99,235,.08);
}
.card:hover::before{ opacity:1; }
.glass{
  background:var(--surface-glass);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);
}
.icon-box{
  width:48px; height:48px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(6,182,212,.18));
  border:1px solid rgba(59,130,246,.25);
  color:var(--accent);
  font-size:1.25rem;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover .icon-box{
  transform:scale(1.06);
  border-color:rgba(6,182,212,.5);
  box-shadow:0 0 20px rgba(6,182,212,.2);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .75rem;
  border-radius:99px;
  font-size:.75rem;
  font-weight:500;
  background:rgba(59,130,246,.1);
  border:1px solid rgba(59,130,246,.28);
  color:#93c5fd;
  backdrop-filter:blur(6px);
}
.badge-cyan{ background:rgba(6,182,212,.1); border-color:rgba(6,182,212,.3); color:#67e8f9; }
.badge-green{ background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.3); color:#86efac; }
.badge-amber{ background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.3); color:#fcd34d; }

.section-tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem 1rem;
  border-radius:99px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(59,130,246,.25);
  color:var(--accent);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.04em;
  backdrop-filter:blur(6px);
}
.section-tag::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  flex-shrink:0;
}

/* ==========================================================================
   Hero terminal UI
   ========================================================================== */
.terminal-window{
  position:relative;
  background:rgba(15,23,42,.75);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 25px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02), 0 0 50px rgba(37,99,235,.1);
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.terminal-window::before{
  content:"";
  position:absolute;
  top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  z-index:1;
}
.terminal-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);
}
.terminal-dot{ width:11px; height:11px; border-radius:50%; }
@keyframes blink{ 50%{ opacity:0; } }

.status-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 3px rgba(34,197,94,.2); }
  50%{ box-shadow:0 0 0 7px rgba(34,197,94,0); }
}

/* ==========================================================================
   Gradient text / glow blobs
   ========================================================================== */
.text-gradient{
  background:linear-gradient(135deg,#93c5fd,var(--accent) 60%,#38bdf8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(59,130,246,.25));
}

/* ==========================================================================
   Flow Diagram (System Flow) — built with HTML/CSS, no images
   ========================================================================== */
.flow-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
}
.flow-step{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px 20px;
  min-width:140px;
  text-align:center;
  transition:border-color .25s ease, transform .25s ease;
}
.flow-step:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 26px rgba(6,182,212,.15); }
.flow-step .flow-icon{ color:var(--accent); font-size:1.4rem; margin-bottom:6px; }
.flow-step .flow-label{ color:var(--text); font-weight:600; font-size:.9rem; }
.flow-arrow{
  color:var(--text-muted);
  font-size:1.1rem;
  padding:0 14px;
}
@media (max-width:767px){
  .flow-wrap{ flex-direction:column; }
  .flow-arrow{ transform:rotate(90deg); padding:8px 0; }
}

/* Before / After columns */
.ba-col{
  border-radius:14px;
  border:1px solid var(--border);
  padding:28px;
}
.ba-time{
  font-size:2.4rem;
  font-weight:700;
  font-family:'JetBrains Mono', monospace;
}

/* ==========================================================================
   Dashboard mockup (for demo + project detail)
   ========================================================================== */
.dash-shell{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02);
}
.dash-sidebar{
  background:rgba(2,6,23,.6);
  border-right:1px solid var(--border);
}
.dash-nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:10px;
  color:var(--text-muted);
  font-size:.875rem;
  transition:background .2s, color .2s;
}
.dash-nav-item:hover, .dash-nav-item.active{
  background:rgba(37,99,235,.12);
  color:var(--text);
}
.dash-nav-item.active{ border:1px solid rgba(59,130,246,.3); }
.stat-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  background:linear-gradient(180deg, var(--surface-card-1), var(--surface-card-2));
}
.stat-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  opacity:.55;
}
.stat-value{ font-family:'JetBrains Mono', monospace; font-size:1.6rem; font-weight:700; color:var(--text); }

/* ==========================================================================
   Project preview — fixed 16:10 frame for screenshots (assets/images/projects)
   ========================================================================== */
.placeholder-preview{
  position:relative;
  aspect-ratio:16 / 10;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(135deg, #0b1327, #111827);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.placeholder-preview .pp-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;   /* keep each app's sidebar + header in frame */
  transition:transform .6s ease;
  z-index:0;
}
.placeholder-preview:hover .pp-photo,
.card:hover .placeholder-preview .pp-photo{ transform:scale(1.04); }
.placeholder-preview .pp-grid{ display:none; }
/* bottom scrim only, so the caption stays readable without dimming the UI */
.placeholder-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 52%, rgba(2,6,23,.55) 78%, rgba(2,6,23,.9) 100%);
  z-index:1;
  pointer-events:none;
}
.placeholder-preview .pp-label{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  width:100%;
  color:#fff;
  font-weight:600;
  justify-content:flex-start;
  text-align:left;
}
.placeholder-preview .pp-label i{
  color:var(--accent);
  font-size:1rem !important;
  width:34px; height:34px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.6);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}

/* Shown instead of the browser's broken-image icon if a preview fails to load */
.pp-fallback{
  position:absolute; inset:0;
  z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  text-align:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(37,99,235,.22), transparent 55%),
    linear-gradient(135deg, #0b1327, #0f172a);
}
.pp-fallback img{ width:40px; height:40px; border-radius:10px; margin-bottom:6px; }
.pp-fallback__brand{ font-weight:800; letter-spacing:.06em; color:#fff; font-size:.95rem; }
.pp-fallback__cat{ font-weight:700; letter-spacing:.08em; color:#67e8f9; font-size:.8rem; text-transform:uppercase; }
.pp-fallback__note{ font-family:'JetBrains Mono', monospace; letter-spacing:.18em; color:#64748b; font-size:.65rem; }
.placeholder-preview.pp-failed .pp-photo{ display:none; }
.placeholder-preview.pp-failed .pp-label{ display:none; }

/* Subtle tag for images that are not CATBYTE's own work (temporary previews) */
.pp-badge{
  position:absolute; top:12px; left:12px; z-index:3;
  padding:.2rem .55rem;
  border-radius:6px;
  font-size:.65rem; font-weight:600; letter-spacing:.04em;
  color:#cbd5e1;
  background:rgba(2,6,23,.65);
  border:1px solid rgba(255,255,255,.1);
}
/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.faq-item{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface-card-2);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover{ border-color:rgba(59,130,246,.25); }
.faq-item.open{ border-color:rgba(6,182,212,.35); box-shadow:0 10px 26px rgba(2,6,23,.4); }
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  text-align:left;
  color:var(--text);
  font-weight:600;
  cursor:pointer;
}
.faq-question .faq-icon{ transition:transform .3s ease; color:var(--accent); flex-shrink:0; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  padding:0 22px;
}
.faq-item.open .faq-answer{ padding-bottom:20px; }

/* ==========================================================================
   Form
   ========================================================================== */
.field-label{ display:block; font-size:.85rem; color:var(--text-secondary); margin-bottom:6px; font-weight:500; }
.field-input{
  width:100%;
  background:var(--surface-input);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 16px;
  color:var(--text);
  font-size:.9rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field-input:hover{ border-color:var(--surface-hairline-strong); }
.field-input::placeholder{ color:var(--text-muted); }
.field-input:focus{
  outline:none;
  border-color:var(--secondary);
  box-shadow:0 0 0 4px rgba(59,130,246,.15);
}
select.field-input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
.field-error{ font-size:.78rem; color:#f87171; margin-top:5px; display:none; }
.field-input.invalid{ border-color:#f87171; }
.field-input.invalid + .field-error{ display:block; }

/* ==========================================================================
   Floating contact
   ========================================================================== */
#float-contact-panel{
  transform:translateY(16px) scale(.96);
  opacity:0;
  pointer-events:none;
  transition:all .25s ease;
}
#float-contact-panel.open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
.float-btn{
  width:60px; height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(37,99,235,.5);
  color:#fff;
  font-size:1.35rem;
  transition:transform .25s ease;
}
.float-btn:hover{ transform:scale(1.08); }

/* ==========================================================================
   Scroll progress + back to top
   ========================================================================== */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  z-index:200; width:0%;
  transition:width .1s linear;
}
#back-to-top{
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#back-to-top.show{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   Utility animations (lightweight, no heavy libs required)
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

.hover-lift{ transition:transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover{ transform:translateY(-5px); }

.divider-fade{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border) 20%, rgba(59,130,246,.3) 50%, var(--border) 80%, transparent);
}

/* Sticky section nav for project detail pages */
.detail-tag{
  padding:.3rem .8rem;
  border-radius:8px;
  font-size:.78rem;
  font-weight:600;
  background:var(--hover-tint-strong);
  border:1px solid var(--border);
  color:var(--text-secondary);
  backdrop-filter:blur(6px);
}

/* ==========================================================================
   Hero — brand title, availability pill, 3D laptop stage
   ========================================================================== */
.status-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.4rem .9rem .4rem .75rem;
  border-radius:99px;
  border:1px solid rgba(34,197,94,.28);
  background:rgba(34,197,94,.07);
  color:var(--text-secondary);
  font-size:.8rem;
  font-weight:500;
}
.hero-title{ color:var(--text); line-height:1.02; letter-spacing:-.035em; }
.hero-title__brand{
  display:block;
  font-size:clamp(3rem, 9vw, 5.6rem);
  font-weight:800;
}
.hero-title__role{
  display:block;
  margin-top:.35rem;
  font-size:clamp(1.6rem, 4.2vw, 2.6rem);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.15;
}
.hero-lead{
  color:var(--text);
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  line-height:1.6;
  max-width:34rem;
  opacity:.92;
}

.hero-visual{
  position:relative;
  width:100%;
  height:340px;
}
@media (min-width:640px){ .hero-visual{ height:440px; } }
@media (min-width:1024px){ .hero-visual{ height:560px; } }

.hero-visual__glow{
  position:absolute; inset:8% 6%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(37,99,235,.32), rgba(6,182,212,.12) 55%, transparent 75%);
  filter:blur(30px);
  pointer-events:none;
}
.hero-visual__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(closest-side, #000 30%, transparent 80%);
  mask-image:radial-gradient(closest-side, #000 30%, transparent 80%);
  pointer-events:none;
}

.hero-laptop{ position:absolute; inset:0; z-index:2; }
.hero-laptop canvas{
  display:block;
  width:100% !important; height:100% !important;
  /* vertical swipes still scroll the page on touch; horizontal drags rotate */
  touch-action:pan-y;
  cursor:grab;
  opacity:0;
  transition:opacity .7s ease;
  outline:none;
}
.hero-laptop.is-ready canvas{ opacity:1; }
.hero-laptop.is-dragging canvas{ cursor:grabbing; }

/* Pre-rendered laptop picture: visible immediately, fades out once the 3D
   canvas (same pose) has faded in. Stays if WebGL is unavailable. */
.laptop-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  pointer-events:none;
  transition:opacity .6s ease .35s;
}
.hero-laptop.is-ready .laptop-poster{ opacity:0; }
.hero-laptop:has(.laptop-poster).is-fallback .laptop-fallback{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Static editor shown only if WebGL / the 3D module is unavailable */
.laptop-fallback{
  display:none;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(92%, 480px);
  border-radius:12px;
  border:1px solid var(--border);
  background:#0b1020;
  box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 40px rgba(37,99,235,.15);
  overflow:hidden;
}
.hero-laptop.is-fallback .laptop-fallback{ display:block; }
.laptop-fallback pre{
  margin:0; padding:16px 18px;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem; line-height:1.7;
  color:#e2e8f0;
  overflow-x:auto;
}
.tok-kw{ color:#c792ea; } .tok-str{ color:#a5e075; } .tok-fn{ color:#ffcb6b; }
.tok-prop{ color:#82aaff; } .tok-punc{ color:#89ddff; } .tok-var{ color:#7dd3fc; }

/* Faint code glyphs + tech badges orbiting the laptop */
.code-glyph{
  position:absolute;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:clamp(.9rem, 1.6vw, 1.3rem);
  color:var(--accent);
  opacity:.16;
  pointer-events:none;
  user-select:none;
  animation:glyphDrift 9s ease-in-out infinite;
  animation-delay:var(--d, 0s);
  z-index:1;
}
@keyframes glyphDrift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

.float-badge{
  position:absolute;
  z-index:3;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .7rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface-glass);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--text);
  font-size:.75rem;
  font-weight:600;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 10px 24px rgba(2,6,23,.25);
  animation:badgeFloat 6s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
.float-badge i{ color:var(--accent); font-size:.85rem; }
@keyframes badgeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.hero-laptop.is-lowend ~ .code-glyph{ display:none; }

.hero-laptop.over-lid canvas,
.hero-laptop.is-lid-dragging canvas{ cursor:ns-resize; }
.hero-laptop.is-ready .laptop-fallback{ display:none; }

/* Hint + Open/Close control under the laptop */
.laptop-controls{
  position:absolute; left:50%; bottom:2px;
  transform:translateX(-50%);
  z-index:4;
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.hero-laptop.is-ready ~ .laptop-controls{ opacity:1; }
.drag-hint{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .75rem;
  border-radius:99px;
  font-size:.72rem;
  color:var(--text-muted);
  background:var(--surface-btn-outline);
  border:1px solid var(--border);
  transition:opacity .4s ease;
}
.hero-visual.has-interacted .drag-hint{ opacity:0; }
.hint-touch{ display:none; }
@media (hover:none){
  .hint-mouse{ display:none; }
  .hint-touch{ display:inline; }
}
.laptop-toggle{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:34px;
  padding:.3rem .8rem;
  border-radius:99px;
  font-size:.72rem; font-weight:600;
  color:var(--text);
  background:var(--surface-glass);
  border:1px solid var(--border);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.laptop-toggle:hover{ border-color:rgba(59,130,246,.45); }
.laptop-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.laptop-toggle i{ color:var(--accent); }
.laptop-toggle[disabled]{ opacity:.5; cursor:default; }
@media (pointer:coarse){ .laptop-toggle{ min-height:40px; padding:.4rem .95rem; } }

/* ==========================================================================
   Trust strip — lightweight row (not cards) under the hero
   ========================================================================== */
.trust-strip{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
@media (min-width:640px){ .trust-strip{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .trust-strip{ grid-template-columns:repeat(4,1fr); } }
.trust-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:22px 20px;
}
@media (min-width:1024px){
  .trust-item + .trust-item{ border-left:1px solid var(--border); }
}
.trust-item i{ color:var(--accent); font-size:1.05rem; margin-top:3px; width:20px; text-align:center; }

/* ==========================================================================
   About — stat tiles (text values where we have no real numbers)
   ========================================================================== */
.stat-tile{
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  background:var(--surface-card-2);
}
.stat-tile__value{
  font-family:'JetBrains Mono', monospace;
  font-size:1.6rem;
  font-weight:700;
  color:var(--text);
  line-height:1.1;
}
.stat-tile__label{ margin-top:6px; font-size:.82rem; color:var(--text-muted); }

/* ==========================================================================
   Skills — tech stack cards
   ========================================================================== */
.skill-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px;
  background:var(--surface-card-2);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.skill-card:hover{
  transform:translateY(-4px);
  border-color:rgba(59,130,246,.35);
  box-shadow:0 14px 30px var(--shadow-ambient);
}
.skill-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.skill-card__icon{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(37,99,235,.12);
  border:1px solid rgba(59,130,246,.25);
  color:var(--accent);
  font-size:.9rem;
}
.skill-card__count{
  margin-left:auto;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  color:var(--text-muted);
}
.skill-list{ display:flex; flex-wrap:wrap; gap:8px; }
.skill-list li{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .7rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--hover-tint-strong);
  color:var(--text-secondary);
  font-size:.82rem;
  font-weight:500;
  transition:border-color .2s ease, color .2s ease;
}
.skill-list li i{ color:var(--accent); font-size:.85rem; }
.skill-card:hover .skill-list li{ border-color:rgba(59,130,246,.2); }

/* ==========================================================================
   Services — minimal hairline grid (deliberately not cards)
   ========================================================================== */
.service-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
@media (min-width:640px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .service-grid{ grid-template-columns:repeat(4,1fr); } }
.service-item{
  background:var(--bg);
  padding:28px 24px;
  transition:background .3s ease;
}
.service-item:hover{ background:var(--surface-card-2); }
.service-item i{
  color:var(--accent);
  font-size:1.25rem;
  transition:transform .3s ease;
}
.service-item:hover i{ transform:translateY(-3px); }

/* ==========================================================================
   Developer Terminal section — sequential typing
   ========================================================================== */
.term-body{
  padding:22px 22px 26px;
  font-family:'JetBrains Mono', monospace;
  font-size:.86rem;
  line-height:2;
  min-height:300px;
  color:#cbd5e1;
}
.term-line{ white-space:pre-wrap; word-break:break-word; }
.term-line .term-prompt{ color:#38bdf8; margin-right:.5rem; }
.term-line .term-ok{ color:#4ade80; }
.term-line.is-final{ color:#67e8f9; }
.term-cursor{
  display:inline-block;
  width:.55em; height:1.05em;
  margin-left:2px;
  vertical-align:-2px;
  background:#38bdf8;
  animation:blink 1.1s steps(1) infinite;
}

/* ==========================================================================
   Mini CD music player (assets/js/music/player.js)
   ========================================================================== */
.cb-music{ position:fixed; right:18px; bottom:18px; z-index:160; font-family:'Inter', sans-serif; }
.cb-music__disc{
  position:relative;
  display:block;
  width:58px; height:58px;
  padding:0; border:0; border-radius:50%;
  background:none;
  cursor:pointer;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
}
.cb-disc{
  position:absolute; inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.07) 31.5% 32.5%, transparent 33%),
    repeating-radial-gradient(circle, #0c0e13 0 1.4px, #161920 1.4px 2.8px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.55);
  will-change:transform;
}
.cb-disc__label{
  position:absolute; inset:30%;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle, #1e293b, #0b1120);
  border:1px solid rgba(255,255,255,.12);
}
.cb-disc__label img{ width:58%; height:auto; border-radius:4px; }
/* light reflection stays fixed while the disc turns underneath it */
.cb-music__disc::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 200deg, transparent 0deg, rgba(255,255,255,.2) 30deg, transparent 70deg, transparent 180deg, rgba(103,232,249,.16) 215deg, transparent 255deg);
  pointer-events:none;
}
.cb-music__disc::before{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid rgba(34,211,238,.5);
  opacity:0; transform:scale(.92);
  transition:opacity .4s ease, transform .4s ease;
}
.cb-music.is-playing .cb-music__disc::before{ opacity:1; transform:scale(1); }
.cb-music__disc:focus-visible{ outline:2px solid #22d3ee; outline-offset:4px; }

.cb-music__panel{
  position:absolute; right:0; bottom:calc(100% + 12px);
  width:284px; max-width:calc(100vw - 28px);
  max-height:calc(100vh - 110px);
  overflow:auto;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(7,10,19,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#e2e8f0;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75);
  opacity:0; visibility:hidden;
  transform:translateY(10px) scale(.98);
  transform-origin:bottom right;
  transition:opacity .25s ease, transform .3s ease, visibility 0s linear .3s;
}
.cb-music.is-open .cb-music__panel{ opacity:1; visibility:visible; transform:none; transition:opacity .25s ease, transform .3s ease; }
.cb-music__head{ display:flex; align-items:center; justify-content:space-between; }
.cb-music__eyebrow{ font-family:'JetBrains Mono', monospace; font-size:.6rem; letter-spacing:.3em; color:#67e8f9; }
.cb-music button{ color:#cbd5e1; transition:color .2s ease, background .2s ease; }
.cb-music button:hover{ color:#fff; }
.cb-music__icon{ width:28px; height:28px; border-radius:8px; }
.cb-music__icon:hover{ background:rgba(255,255,255,.07); }
.cb-music__video{ margin-top:10px; height:200px; border-radius:10px; overflow:hidden; background:#000; }
.cb-music__video[hidden]{ display:none; }
.cb-music__video iframe{ display:block; width:100%; height:100%; border:0; }
.cb-music__meta{ margin-top:12px; min-width:0; }
.cb-music__title{ font-weight:600; font-size:1rem; color:#f8fafc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-music__artist{ margin-top:2px; font-size:.8rem; color:#94a3b8; }
.cb-music__msg{ margin-top:4px; font-size:.72rem; color:#fca5a5; }
.cb-music__msg:empty{ display:none; }
.cb-music__controls{ display:flex; align-items:center; justify-content:center; gap:16px; margin:12px 0 6px; }
.cb-music__controls button{ width:38px; height:38px; border-radius:50%; }
.cb-music__controls button:hover{ background:rgba(255,255,255,.07); }
.cb-music__controls .is-main{ width:46px; height:46px; background:#f8fafc; color:#020617; }
.cb-music__controls .is-main:hover{ background:#fff; color:#020617; }
.cb-music__volume{ display:grid; grid-template-columns:30px minmax(0,1fr) 40px; align-items:center; gap:8px; }
.cb-music__volume button{ height:30px; border-radius:8px; }
.cb-music__volume input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; border-radius:3px;
  background:linear-gradient(90deg, #22d3ee var(--fill, 30%), rgba(255,255,255,.15) var(--fill, 30%));
  cursor:pointer;
}
.cb-music__volume input::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; border:0; }
.cb-music__volume input::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:#fff; border:0; }
.cb-music__volume input:focus-visible{ outline:2px solid #22d3ee; outline-offset:4px; }
.cb-music__vol-num{ text-align:right; font-family:'JetBrains Mono', monospace; font-size:.66rem; color:#94a3b8; }
.cb-music__pl-toggle{
  width:100%;
  display:flex; align-items:center; gap:8px;
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:'JetBrains Mono', monospace; font-size:.62rem; letter-spacing:.26em;
  color:#94a3b8;
}
.cb-music__pl-count{ margin-left:auto; letter-spacing:.1em; }
.cb-music__pl-toggle i{ transition:transform .25s ease; }
.cb-music.is-list-open .cb-music__pl-toggle i{ transform:rotate(180deg); }
.cb-music__list{ margin-top:6px; }
.cb-music__list button{
  width:100%;
  display:grid; grid-template-columns:28px minmax(0,1fr) 10px; align-items:center;
  padding:8px 6px;
  border-radius:8px;
  text-align:left; font-size:.82rem;
}
.cb-music__list button:hover{ background:rgba(255,255,255,.05); }
.cb-music__list .is-current{ color:#fff; }
.cb-music__num{ font-family:'JetBrains Mono', monospace; font-size:.68rem; color:#64748b; }
.cb-music__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-music__dot{ width:6px; height:6px; border-radius:50%; background:#22d3ee; }
@media (max-width:640px){
  .cb-music{ right:14px; bottom:14px; }
  .cb-music__disc{ width:50px; height:50px; }
}
/* Floating contact button on sub-pages sits above the disc */
/* Floating dock: the contact button sits right above the CD disc, centred on it */
div:has(> #float-contact-toggle){ right:21px !important; bottom:24px !important; }
.has-music div:has(> #float-contact-toggle){ bottom:88px !important; }
#float-contact-toggle.float-btn{ width:52px; height:52px; font-size:1.15rem; box-shadow:0 8px 22px -6px rgba(37,99,235,.55); }
#float-contact-panel{ bottom:64px !important; }
@media (max-width:640px){
  div:has(> #float-contact-toggle){ right:16px !important; }
  .has-music div:has(> #float-contact-toggle){ bottom:74px !important; }
  #float-contact-toggle.float-btn{ width:46px; height:46px; font-size:1.05rem; }
  #float-contact-panel{ bottom:58px !important; }
  #back-to-top{ left:14px !important; bottom:14px !important; width:42px !important; height:42px !important; }
}
/* Phones/tablets: the dock slides away while reading (scrolling down) and
   comes back on scroll up / near the end of the page (main.js toggles .dock-hide) */
@media (max-width:1023px){
  .cb-music, div:has(> #float-contact-toggle), #back-to-top{ transition:transform .35s ease, opacity .35s ease; }
  html.dock-hide .cb-music:not(.is-open),
  html.dock-hide div:has(> #float-contact-toggle):not(:has(#float-contact-panel.open)),
  html.dock-hide #back-to-top{ transform:translateY(150%); opacity:0; pointer-events:none; }
}

/* Project image that failed to load (fallback frame drawn by main.js) */
.pp-failed > img[data-image-type]{ display:none; }

/* ==========================================================================
   Reduced motion — user preference overrides all animation/transition
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   Arrow micro-interaction — buttons/links with a trailing arrow icon nudge
   forward on hover
   ========================================================================== */
.btn .fa-arrow-right,
a:not(.btn) .fa-arrow-right{ transition:transform .25s ease; display:inline-block; }
.btn:hover .fa-arrow-right,
a:hover .fa-arrow-right{ transform:translateX(4px); }

/* Preview-card corner arrow chip — appears on card hover (Demo Systems) */
.pp-arrow{
  position:absolute;
  top:14px; right:14px;
  z-index:3;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--surface-glass);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:.85rem;
  opacity:0;
  transform:translate(-8px,8px);
  transition:opacity .3s ease, transform .3s ease;
}
.card:hover .pp-arrow{ opacity:1; transform:translate(0,0); }

/* ==========================================================================
   Tabs — Systems We Can Build (interactive category switch)
   ========================================================================== */
.tab-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1.3rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-btn-outline);
  color:var(--text-secondary);
  font-weight:600;
  font-size:.85rem;
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.tab-btn:hover{ border-color:rgba(59,130,246,.35); color:var(--text); }
.tab-btn.active{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 26px rgba(37,99,235,.35);
  transform:translateY(-1px);
}
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:tabFadeIn .4s ease; }
@keyframes tabFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

/* ==========================================================================
   Timeline — Development Process (vertical on mobile/tablet, horizontal
   connected-line row from xl breakpoint up)
   ========================================================================== */
.timeline{ display:flex; flex-direction:column; gap:0; position:relative; }
.timeline-item{ position:relative; display:flex; gap:20px; padding-bottom:34px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-marker{
  flex-shrink:0;
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--card), var(--card-alt));
  border:1px solid var(--border);
  color:var(--accent);
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:.9rem;
  position:relative;
  z-index:2;
  box-shadow:0 0 0 6px var(--bg);
}
.timeline-item::before{
  content:"";
  position:absolute;
  left:26px; top:52px; bottom:0;
  width:2px;
  background:linear-gradient(180deg, rgba(59,130,246,.35), var(--border));
}
.timeline-item:last-child::before{ display:none; }
.timeline-body{ padding-top:8px; }
.timeline-step-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  color:var(--accent);
  font-weight:700;
  letter-spacing:.06em;
}

@media (min-width:1280px){
  .timeline{ flex-direction:row; align-items:flex-start; }
  .timeline-item{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-bottom:0;
    flex:1;
    padding-left:10px;
    padding-right:10px;
  }
  /* Line runs from this marker's center to the next marker's center — since
     items are equal-flex, left:50% + width:100% lands it exactly there. */
  .timeline-item::before{
    left:50%; right:auto; top:26px; bottom:auto;
    width:100%; height:2px;
    background:linear-gradient(90deg, rgba(59,130,246,.35), var(--border));
  }
  .timeline-marker{ box-shadow:0 0 0 8px var(--bg); }
  .timeline-body{ padding-top:16px; }
}

/* Responsive guardrails */
img, svg{ max-width:100%; }
table{ width:100%; }

/* ==========================================================================
   Light theme — overrides for Tailwind's built-in white/opacity utilities
   (Tailwind CDN compiles text-white / border-white/5 / bg-white/5 etc. as
   literal rgb() rules; these attribute-scoped selectors win on specificity
   and repaint them for data-theme="light" without touching any HTML)
   ========================================================================== */
[data-theme="light"] .text-white{ color:var(--text); }
[data-theme="light"] .text-gradient{
  background:linear-gradient(135deg, #1d4ed8, var(--accent) 65%, #0369a1);
  -webkit-background-clip:text;
  background-clip:text;
  filter:none;
}
[data-theme="light"] .border-white\/5{ border-color:var(--surface-hairline); }
[data-theme="light"] .border-white\/10{ border-color:var(--surface-hairline-strong); }
[data-theme="light"] .border-white\/15{ border-color:var(--surface-hairline-strong); }
[data-theme="light"] .hover\:bg-white\/5:hover{ background-color:var(--hover-tint); }
[data-theme="light"] .bg-white\/\[0\.03\]{ background-color:var(--surface-btn-outline); }

/* Custom-token opacity-modifier utilities (Tailwind can't alpha-blend a
   var() color token via the /NN syntax, so these bake a literal rgba
   at build time — override them directly for light mode) */
[data-theme="light"] .bg-bgsecond\/40{ background-color:var(--bg-secondary); }
[data-theme="light"] .bg-success\/5{ background-color:rgba(21,128,61,.08); }
[data-theme="light"] .border-success\/25{ border-color:rgba(21,128,61,.3); }
.no-scrollbar::-webkit-scrollbar{ display:none; }

/* ==========================================================================
   Legal pages (terms.html, privacy.html)
   ========================================================================== */
.legal{ padding:clamp(110px, 14vw, 150px) 0 clamp(70px, 10vw, 110px); }
.legal__wrap{ max-width:820px; }
.legal__eyebrow{ font-family:'JetBrains Mono', monospace; font-size:.72rem; font-weight:700; letter-spacing:.24em; color:var(--accent); }
.legal__title{ margin-top:.8rem; font-family:'Inter','Prompt', sans-serif; font-weight:700; font-size:clamp(1.9rem, 5vw, 3rem); line-height:1.15; letter-spacing:-.02em; color:var(--text); }
.legal__meta{ margin-top:.7rem; font-size:.85rem; color:var(--text-muted); }
.legal__toc{ display:grid; gap:.35rem; margin-top:2rem; padding:1.1rem 1.25rem; border:1px solid var(--border); border-radius:14px; background:var(--surface-card-2); }
.legal__toc a{ font-size:.9rem; color:var(--text-secondary); }
.legal__toc a:hover{ color:var(--accent); }
.legal section{ margin-top:2.4rem; scroll-margin-top:96px; }
.legal h2{ font-weight:600; font-size:1.2rem; color:var(--text); }
.legal p, .legal li{ font-size:.95rem; line-height:1.8; color:var(--text-secondary); }
.legal p{ margin-top:.7rem; }
.legal ul{ margin-top:.7rem; padding-left:1.2rem; list-style:disc; display:grid; gap:.45rem; }
.legal li::marker{ color:var(--accent); }
.legal strong{ color:var(--text); }
.legal a:not(.cb-btn){ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal__note{ font-size:.8rem !important; color:var(--text-muted) !important; }

/* Cookie consent banner (assets/js/analytics.js) */
.cb-consent{
  position:fixed; left:16px; bottom:16px; z-index:300;
  max-width:min(420px, calc(100vw - 32px));
  padding:1rem 1.1rem;
  border:1px solid var(--border); border-radius:14px;
  background:var(--surface-toast); color:var(--text-secondary);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.cb-consent p{ font-size:.84rem; line-height:1.6; }
.cb-consent a{ color:var(--accent); text-decoration:underline; }
.cb-consent__actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.75rem; }

/* ==========================================================================
   Review form (review.html)
   ========================================================================== */
.review-form{ display:grid; gap:1.2rem; margin-top:2rem; padding:clamp(1.25rem, 3vw, 2rem); border:1px solid var(--border); border-radius:16px; background:var(--surface-card-2); }
.rf-grid{ display:grid; gap:1.2rem; }
@media (min-width:640px){ .rf-grid{ grid-template-columns:1fr 1fr; } }
.rf-stars{ border:0; padding:0; margin:0; }
/* 5 radios laid out right-to-left so "hover a star = it and all before it light up" works with ~ */
.rf-stars__row{ display:inline-flex; flex-direction:row-reverse; gap:.35rem; margin-top:.4rem; }
.rf-stars__row input{ position:absolute; opacity:0; pointer-events:none; }
.rf-stars__row label{ font-size:1.9rem; line-height:1; color:var(--border); cursor:pointer; transition:color .15s ease, transform .15s ease; -webkit-text-stroke:1px var(--text-muted); color:transparent; }
.rf-stars__row label:hover,
.rf-stars__row label:hover ~ label,
.rf-stars__row input:checked ~ label{ color:#fbbf24; -webkit-text-stroke:0; }
.rf-stars__row label:hover{ transform:scale(1.12); }
.rf-stars__row input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.rf-stars.invalid .field-error{ display:block; }
.rf-consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:.86rem; line-height:1.6; color:var(--text-secondary); cursor:pointer; }
.rf-consent input{ margin-top:.3rem; width:1.05rem; height:1.05rem; accent-color:var(--primary); flex:none; }
.rf-consent a{ color:var(--accent); text-decoration:underline; }
.rf-consent__error{ margin-top:-.8rem; }
.rf-consent__error.show{ display:block; }
.rf-note{ margin-top:-.4rem; text-align:center; font-size:.78rem; color:var(--text-muted); }
.rf-result{ margin-top:2rem; padding:2rem 1.5rem; border:1px solid var(--border); border-radius:16px; background:var(--surface-card-2); text-align:center; }
.rf-result i{ font-size:2.2rem; }
.rf-result.is-ok i{ color:var(--success); }
.rf-result.is-error i{ color:#f87171; }
.rf-result h2{ margin-top:.8rem !important; }
.rf-result .cb-btn{ margin-top:1.2rem; }

/* Soft page change in progress (assets/js/nav.js) */
html.is-soft-loading{ cursor:progress; }
html.is-soft-loading main{ opacity:.55; transition:opacity .2s ease; }

/* Light theme: tag badges need darker text to stay readable */
:root[data-theme="light"] .badge{ background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.28); color:#1d4ed8; }
:root[data-theme="light"] .badge-cyan{ background:rgba(14,116,144,.08); border-color:rgba(14,116,144,.3); color:#0e7490; }
:root[data-theme="light"] .badge-green{ background:rgba(21,128,61,.08); border-color:rgba(21,128,61,.3); color:#15803d; }
:root[data-theme="light"] .badge-amber{ background:rgba(180,83,9,.08); border-color:rgba(180,83,9,.3); color:#b45309; }

/* Touch screens: text links and small controls get a 44px tall tap area */
@media (max-width:767px), (pointer:coarse){
  .cb-link{ min-height:44px; }
  .back-link{ display:inline-flex; align-items:center; min-height:44px; }
  .cb-nav__brand{ min-height:44px; }
}