/* ================================================================
   TWO DOTS — custom.css  v4
   Palette: Parchment · Near-black · Terracotta · Chartreuse
   Fonts: Fraunces (optical) + Outfit (geometric sans)
   ================================================================ */

:root {
  --bg:      #F0ECE4;
  --bg2:     #E7E2D8;
  --bg3:     #DDD8CE;
  --ink:     #0E0C0A;
  --ink2:    #3D3A35;
  --ink3:    #7A766F;
  --fire:    #D4531A;
  --fire-lt: #E86B35;
  --lime:    #C2EE30;
  --lime-dk: #A8D420;
  --white:   #FAFAF8;
  --border:  #CCC8BF;
  --border2: #B8B3AA;
  --font-d: 'Fraunces', Georgia, serif;
  --font-s: 'Outfit', system-ui, sans-serif;
  --r:  10px; --rl: 18px;
  --ease:  cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.4,0,.2,1);
  --shadow:    0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 32px 80px rgba(0,0,0,.16);
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { font-family: var(--font-s); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: none; }
@media (hover:none) { body { cursor: auto; } }
::selection { background: var(--lime); color: var(--ink); }
a { text-decoration: none; color: inherit; }

/* noise */
.noise { position: fixed; inset:0; z-index:9999; pointer-events:none; opacity:.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:250px; mix-blend-mode:multiply; }

/* cursor */
.cur { position:fixed; z-index:10000; pointer-events:none; width:40px; height:40px; transform:translate(-50%,-50%); transition:transform .18s var(--ease); }
.cur span { display:block; width:10px; height:10px; border-radius:50%; background:var(--fire); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:width .22s var(--ease),height .22s var(--ease),background .2s; }
.cur.is-hover span { width:38px; height:38px; background:transparent; border:2px solid var(--fire); }
.cur.is-link span  { width:48px; height:48px; background:var(--fire); opacity:.15; }
@media (hover:none) { .cur { display:none; } }

/* layout */
.wrap { max-width:1180px; margin:0 auto; padding:0 2rem; }
.section-gap { padding:7rem 0; }
.w-full { width:100%; }
.d-hide-sm { display:flex; }
@media (max-width:768px) { .d-hide-sm { display:none; } }

/* tags */
.tag { display:inline-flex; align-items:center; font-family:var(--font-s); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .75rem; border-radius:100px; border:1.5px solid transparent; white-space:nowrap; }
.tag--fire    { background:var(--fire);  color:#fff;       border-color:var(--fire); }
.tag--lime    { background:var(--lime);  color:var(--ink); border-color:var(--lime); }
.tag--outline { background:transparent; color:var(--ink2); border-color:var(--border); }
.tag--sm      { font-size:.6rem; padding:.18rem .55rem; }
.tag--concept {
  background: transparent;
  color: #b45309;
  border-color: #b45309;
  font-size: .6rem;
  padding: .18rem .55rem;
  opacity: .75;
}
/* buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-s); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.85rem 2rem; border-radius:var(--r); border:2px solid transparent; cursor:none; transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s; }
.btn .arr { transition:transform .2s var(--ease); }
.btn:hover .arr { transform:translateX(4px); }
.btn--fire  { background:var(--fire); color:#fff; border-color:var(--fire); }
.btn--fire:hover  { background:var(--fire-lt); border-color:var(--fire-lt); box-shadow:0 8px 32px rgba(212,83,26,.3); transform:translateY(-2px); }
.btn--dark  { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn--dark:hover  { background:var(--ink2); transform:translateY(-2px); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--border); }
.btn--ghost:hover { border-color:var(--ink); background:var(--ink); color:var(--bg); transform:translateY(-2px); }

/* status pill */
.status-pill { display:inline-flex; align-items:center; gap:.45rem; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--white); border:1.5px solid var(--border); padding:.38rem .88rem; border-radius:100px; color:var(--ink2); }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--lime-dk); animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(162,212,32,.5)} 50%{box-shadow:0 0 0 5px rgba(162,212,32,0)} }

/* section heads */
.section-head { margin-bottom:3rem; }
.section-title { font-family:var(--font-d); font-size:clamp(2rem,4.5vw,3.1rem); font-weight:700; font-optical-sizing:auto; line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin-top:.65rem; }
.section-title em { font-style:italic; color:var(--fire); font-weight:400; }
.section-sub { font-size:.85rem; color:var(--ink3); margin-top:.6rem; font-weight:500; letter-spacing:.04em; }

/* ── NAV ── */
/* ══════════════════════════════════════════
   NAV — complete mobile-first rewrite
══════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(240,236,228,.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1.5px solid var(--border);
  transition: box-shadow .3s;
}
.nav.is-scrolled { box-shadow: var(--shadow); }

/* the bar itself */
.nav__wrap {
  max-width: 1180px; margin: 0 auto;
  padding: 0 1.5rem; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}

/* logo */
.nav__logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-s); font-size: .8rem;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); cursor: none; flex-shrink: 0; text-decoration: none;
}
.nav__logo-text { white-space: nowrap; }
.nav__dots { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.nav__dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transition: transform .3s var(--ease); }
.nav__dots .i--fire { background: var(--fire); }
.nav__logo:hover .nav__dots i { transform: scale(1.35); }

/* desktop centre links */
.nav__center--desktop {
  display: flex; align-items: center; gap: 2rem;
  flex: 1; justify-content: center;
}
.nav__item {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink3);
  cursor: none; position: relative; transition: color .2s;
  text-decoration: none; white-space: nowrap;
}
.nav__item::after {
  content: ''; position: absolute; bottom: -4px;
  left: 0; right: 100%; height: 2px; background: var(--fire);
  transition: right .25s var(--ease);
}
.nav__item:hover, .nav__item.is-on { color: var(--ink); }
.nav__item:hover::after, .nav__item.is-on::after { right: 0; }

/* right cluster */
.nav__right { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }
.nav__desktop-only { display: inline-flex; }

/* ── MUSIC BUTTON (always visible in nav) ── */
.nav__music {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: background .25s, transform .2s var(--ease), box-shadow .25s;
  outline: none;
}
.nav__music:hover { background: var(--fire); transform: scale(1.08); box-shadow: 0 4px 16px rgba(212,83,26,.4); }
.nav__music.is-playing { background: var(--fire); box-shadow: 0 0 0 0 rgba(212,83,26,.4); animation: musicRing 2s ease-in-out infinite; }
@keyframes musicRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,83,26,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(212,83,26,0); }
}
.nav__music-note, .nav__music-pause {
  position: absolute; transition: opacity .2s, transform .2s var(--ease);
}
.nav__music-pause { opacity: 0; transform: scale(.6); }
.nav__music.is-playing .nav__music-note  { opacity: 0; transform: scale(.6); }
.nav__music.is-playing .nav__music-pause { opacity: 1; transform: scale(1); }
/* tiny eq bars under icon */
.nav__music-eq {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 2px;
  height: 12px; opacity: 0; transition: opacity .3s; pointer-events: none;
}
.nav__music.is-playing .nav__music-eq { opacity: 1; }
.nav__music-eq span {
  width: 2px; border-radius: 1px; background: var(--fire);
  animation: eqBar var(--ed,.4s) ease-in-out infinite alternate;
  transform-origin: bottom;
}
.nav__music-eq span:nth-child(1){height:5px;--ed:.3s}
.nav__music-eq span:nth-child(2){height:9px;--ed:.22s}
.nav__music-eq span:nth-child(3){height:7px;--ed:.38s}
.nav__music-eq span:nth-child(4){height:11px;--ed:.27s}
@keyframes eqBar { from{transform:scaleY(.15)} to{transform:scaleY(1)} }

/* ── HAMBURGER — mobile only ── */
.nav__ham {
  display: none; /* hidden on desktop */
  flex-direction: column; justify-content: center;
  align-items: center; gap: 5px;
  width: 38px; height: 38px; padding: 0;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer; flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.nav__ham:hover { background: var(--bg2); border-color: var(--border2); }
.nav__ham span {
  width: 18px; height: 2px; background: var(--ink);
  border-radius: 2px; display: block;
  transition: transform .32s var(--ease), opacity .25s, width .25s;
  transform-origin: center;
}
/* animated X when open */
.nav__ham.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__ham.is-open span:nth-child(2) { opacity: 0; width: 10px; }
.nav__ham.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── FULLSCREEN DRAWER ── */
.nav__overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(14,12,10,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.nav__overlay.is-open { opacity: 1; pointer-events: all; }

.nav__drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 960; width: min(340px, 88vw);
  background: var(--bg);
  box-shadow: -8px 0 48px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  overflow-y: auto;
}
.nav__drawer.is-open { transform: translateX(0); }

/* drawer header */
.nav__drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.5rem;
  border-bottom: 1.5px solid var(--border);
}
.nav__close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg2); border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .2s;
  color: var(--ink2); flex-shrink: 0;
}
.nav__close:hover { background: var(--fire); color: #fff; transform: rotate(90deg); }

/* drawer links */
.nav__drawer-links { padding: 1rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.nav__drawer-link {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1rem; border-radius: 12px;
  font-family: var(--font-s); font-size: 1rem; font-weight: 600;
  color: var(--ink2); text-decoration: none;
  transition: background .2s, color .2s, transform .2s var(--ease);
  position: relative;
}
.nav__drawer-link svg:first-of-type { width: 20px; height: 20px; color: var(--ink3); flex-shrink: 0; transition: color .2s; }
.nav__drawer-link .nav__drawer-arr { margin-left: auto; width: 16px; height: 16px; color: var(--border2); transition: transform .2s var(--ease), color .2s; }
.nav__drawer-link:hover { background: var(--bg2); color: var(--ink); transform: translateX(4px); }
.nav__drawer-link:hover svg:first-of-type { color: var(--fire); }
.nav__drawer-link:hover .nav__drawer-arr { transform: translateX(3px); color: var(--ink3); }
.nav__drawer-link.is-on { background: rgba(212,83,26,.08); color: var(--fire); }
.nav__drawer-link.is-on svg:first-of-type { color: var(--fire); }
.nav__drawer-num { font-size: .58rem; font-weight: 700; letter-spacing: .12em; color: var(--ink3); min-width: 1.4rem; }
.nav__drawer-link.is-on .nav__drawer-num { color: var(--fire); }

/* drawer footer */
.nav__drawer-footer {
  padding: 1.5rem; border-top: 1.5px solid var(--border);
  display: flex; flex-direction: column; gap: .85rem;
}

/* ── RESPONSIVE: show/hide ── */
@media (max-width: 768px) {
  .nav__wrap { padding: 0 1.1rem; height: 60px; gap: .5rem; }
  .nav__center--desktop { display: none !important; }
  .nav__desktop-only    { display: none !important; }
  .nav__ham             { display: flex !important; }
  .nav__right           { gap: .5rem; }
  .nav__music           { width: 36px; height: 36px; }
}

/* ── HERO ── */
.hero { min-height:100svh; padding:110px 2rem 5rem; max-width:1180px; margin:0 auto; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.hero__label-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.hero__title { display:flex; flex-direction:column; gap:.05em; margin-bottom:3rem; }
.hero__row { display:flex; align-items:baseline; flex-wrap:wrap; gap:.25em; }
.split-word { display:inline-block; font-family:var(--font-d); font-size:clamp(3.5rem,9vw,7.5rem); font-weight:900; font-optical-sizing:auto; line-height:.95; letter-spacing:-.03em; color:var(--ink); opacity:0; transform:translateY(60px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.split-word.in { opacity:1; transform:translateY(0); }
.hero__italic { font-style:italic; font-weight:400; color:var(--fire); }
.hero__stroke  { -webkit-text-stroke:3px var(--ink); color:transparent; }
.hero__bottom  { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; }
.hero__sub     { font-size:1rem; color:var(--ink2); line-height:1.8; max-width:480px; }
.hero__actions { display:flex; gap:.75rem; flex-wrap:wrap; flex-shrink:0; }
.hero__float { position:absolute; font-family:var(--font-s); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--white); border:1.5px solid var(--border); padding:.45rem .95rem; border-radius:100px; color:var(--ink2); box-shadow:var(--shadow); pointer-events:none; }
.hero__float--1 { bottom:8rem; right:2rem; animation:floatA 5s ease-in-out infinite; }
.hero__float--2 { bottom:12rem; right:12rem; animation:floatB 6s ease-in-out infinite .5s; }
.hero__float--3 { bottom:6rem; right:14rem; animation:floatA 7s ease-in-out infinite 1s; }
@keyframes floatA { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
@keyframes floatB { 0%,100%{transform:translateY(0) rotate(1deg)}  50%{transform:translateY(-12px) rotate(-1.5deg)} }
.hero__bgnum { position:absolute; bottom:-1rem; right:-1rem; font-family:var(--font-d); font-size:clamp(8rem,20vw,18rem); font-weight:900; color:rgba(0,0,0,.04); line-height:1; pointer-events:none; user-select:none; letter-spacing:-.04em; }
@media (max-width:768px) { .hero__bottom{grid-template-columns:1fr} .hero__float{display:none} .hero__bgnum{display:none} .hero__stroke{-webkit-text-stroke:2px var(--ink)} }

/* ── MARQUEE ── */
.marquee { border-top:1.5px solid var(--border); border-bottom:1.5px solid var(--border); overflow:hidden; padding:1rem 0; background:var(--ink); }
.marquee__track { display:flex; gap:2.5rem; white-space:nowrap; animation:marquee 30s linear infinite; width:max-content; }
.marquee__track span { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.marquee__sep { color:var(--lime) !important; font-size:.62rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── BENTO GRID ── */
.bento__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:1024px) { .bento__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px)  { .bento__grid { grid-template-columns:1fr; } }

.bento-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--rl); padding:2rem; position:relative; overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s,border-color .3s; }
.bento-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--border2); }
.bento-card--lg { grid-column:span 2; padding:2.5rem; min-height:300px; display:flex; flex-direction:column; }
.bento-card--sm { display:flex; flex-direction:column; justify-content:flex-end; min-height:155px; }

.bento-card--scraping { background:var(--ink); border-color:var(--ink); }
.bento-card--scraping .bento-card__tag   { color:rgba(255,255,255,.35); }
.bento-card--scraping .bento-card__title { color:var(--bg); }
.bento-card--scraping .bento-card__desc  { color:rgba(255,255,255,.58); }
.bento-card--scraping .bento-card__link  { color:var(--lime); }
.bento-card--scraping .bento-card__chips span { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.68); }
.bento-card--dev .bento-card__link { color:var(--fire); }

.bento-card--fire { background:var(--fire); border-color:var(--fire); }
.bento-card--fire .bento-stat      { color:#fff; }
.bento-card--fire .bento-stat-unit { color:rgba(255,255,255,.75); }
.bento-card--fire p { color:rgba(255,255,255,.7); }

.bento-card--available .avail-label { font-size:.92rem; font-weight:700; color:var(--ink); display:block; margin-top:.5rem; margin-bottom:.2rem; }
.bento-card--available p { font-size:.78rem; color:var(--ink3); }
.bento-card--loc .loc-label { font-size:.92rem; font-weight:700; color:var(--ink); display:block; margin-bottom:.2rem; }
.bento-card--loc p { font-size:.78rem; color:var(--ink3); }
.loc-dot { width:8px; height:8px; border-radius:50%; background:var(--fire); display:inline-block; margin-bottom:.6rem; }

.bento-card__tag { font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-bottom:1.1rem; }
.bento-card__title { font-family:var(--font-d); font-size:clamp(1.35rem,2.5vw,1.8rem); font-weight:700; font-optical-sizing:auto; line-height:1.15; color:var(--ink); margin-bottom:.85rem; }
.bento-card__desc  { font-size:.875rem; color:var(--ink2); line-height:1.75; margin-bottom:1.2rem; flex:1; }
.bento-card__chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem; }
.bento-card__chips span { font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .55rem; border-radius:6px; background:var(--bg2); border:1px solid var(--border); color:var(--ink3); }
.bento-card__link { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.4rem; transition:gap .2s var(--ease); margin-top:auto; cursor:none; }
.bento-card__link:hover { gap:.8rem; }
.bento-stat      { font-family:var(--font-d); font-size:3.2rem; font-weight:900; color:var(--ink); line-height:1; display:block; }
.bento-stat-unit { font-family:var(--font-d); font-size:2rem; font-weight:700; color:var(--ink2); }
.bento-card--stat p { font-size:.75rem; color:var(--ink3); margin-top:.3rem; }

/* terminal */
.bento-card__deco { position:absolute; bottom:-8px; right:-8px; opacity:.92; }
.terminal { width:205px; background:#0E0C0A; border-radius:8px; border:1px solid rgba(255,255,255,.1); overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.terminal__bar { background:#1C1A18; padding:.42rem .7rem; display:flex; gap:.32rem; }
.terminal__bar span { width:8px; height:8px; border-radius:50%; }
.terminal__bar span:nth-child(1){background:#FF5F57} .terminal__bar span:nth-child(2){background:#FFBD2E} .terminal__bar span:nth-child(3){background:#28CA40}
.terminal__body { padding:.7rem; }
.terminal__line { font-family:'SFMono-Regular',monospace; font-size:.63rem; line-height:1.65; color:rgba(255,255,255,.6); }
.t-prompt{color:var(--lime)} .t-cmd{color:#79C0FF} .t-out{color:#56D364}
.blink-line { animation:blink .9s step-end infinite; }
@keyframes blink { 50%{opacity:0} }

/* mini browser */
.bento-card__deco--browser { bottom:-4px; right:-4px; }
.mini-browser { width:175px; background:#F5F1EB; border-radius:8px; border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-lg); }
.mini-browser__bar { background:var(--bg2); padding:.38rem .55rem; display:flex; gap:.28rem; }
.mini-browser__bar span { width:7px; height:7px; border-radius:50%; background:var(--border); }
.mini-browser__bar span:nth-child(1){background:#FF5F57} .mini-browser__bar span:nth-child(2){background:#FFBD2E} .mini-browser__bar span:nth-child(3){background:#28CA40}
.mini-browser__body { padding:9px; }
.mb-nav   { height:10px; background:var(--bg3); border-radius:4px; margin-bottom:7px; }
.mb-hero  { height:36px; background:linear-gradient(135deg,var(--fire) 0%,#E86B35 100%); border-radius:5px; margin-bottom:7px; opacity:.7; }
.mb-cards { display:flex; gap:5px; }
.mb-cards div { flex:1; height:20px; background:var(--bg2); border-radius:4px; }

/* ── WORK GRID ── */
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:900px) { .work-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .work-grid { grid-template-columns:1fr; } }

.proj-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s; cursor:none; display:block; color:inherit; position:relative; }
.proj-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.proj-card__num { position:absolute; top:1rem; left:1.2rem; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); z-index:2; }
.proj-card__visual { height:180px; overflow:hidden; }
.proj-card__screen { height:100%; display:flex; flex-direction:column; }
.pcs-nav  { height:13px; flex-shrink:0; }
.pcs-hero { flex:1; padding:11px 13px; }
.pcs-hl   { height:9px; border-radius:4px; width:65%; margin-bottom:6px; }
.pcs-sub  { height:5px; border-radius:3px; width:44%; margin-bottom:11px; }
.pcs-btn  { height:17px; border-radius:4px; width:65px; }
.pcs-body { flex:1; padding:9px 13px; display:flex; gap:7px; }
.pcs-card { flex:1; border-radius:4px; }
.proj-card__info { padding:1.35rem; }
.proj-card__meta { margin-bottom:.55rem; }
.proj-card__info h3 { font-family:var(--font-d); font-size:1.2rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; line-height:1.2; }
.proj-card__info p  { font-size:.78rem; color:var(--ink3); line-height:1.6; }
.proj-card__cta { display:inline-block; margin-top:.85rem; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fire); transition:letter-spacing .2s var(--ease); }
.proj-card:hover .proj-card__cta { letter-spacing:.16em; }

/* ── ABOUT ── */
.about__grid { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:start; }
@media (max-width:900px) { .about__grid { grid-template-columns:1fr; gap:3rem; } }
.about__text { font-size:.975rem; color:var(--ink2); line-height:1.85; margin-bottom:1.2rem; }
.about__pills { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.75rem; }
.pill { font-size:.7rem; font-weight:600; letter-spacing:.06em; background:var(--bg2); border:1.5px solid var(--border); padding:.38rem .88rem; border-radius:100px; color:var(--ink2); transition:background .2s,border-color .2s,color .2s; }
.pill:hover { background:var(--lime); border-color:var(--lime-dk); color:var(--ink); }

/* ── PROCESS STEPS (clean grid, light bg) ── */
.process { background:var(--bg2); }
.process .tag--fire { background:rgba(212,83,26,.1); color:var(--fire); border-color:rgba(212,83,26,.22); }
.process .section-title em { color:var(--fire); }

.process-steps { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden; }
@media (max-width:680px) { .process-steps { grid-template-columns:1fr; } }

.pstep { background:var(--white); padding:2rem 2.25rem; display:flex; gap:1.4rem; align-items:flex-start; transition:background .22s; }
.pstep:hover { background:var(--bg); }
.pstep__num { font-family:var(--font-d); font-size:.78rem; font-weight:700; color:var(--fire); letter-spacing:.05em; flex-shrink:0; width:1.8rem; padding-top:.1rem; }
.pstep__title { font-family:var(--font-s); font-size:.95rem; font-weight:700; color:var(--ink); margin-bottom:.35rem; line-height:1.3; }
.pstep__desc { font-size:.84rem; color:var(--ink3); line-height:1.7; }

/* ── PAGE HERO ── */
.page-hero { padding:148px 2rem 5.5rem; border-bottom:1.5px solid var(--border); }
.page-hero__inner { max-width:760px; }
.page-hero__title { display:flex; flex-direction:column; margin:.7rem 0 1.6rem; }
.page-hero__title span,.page-hero__title em { font-family:var(--font-d); font-size:clamp(2.8rem,7vw,5.2rem); font-weight:900; font-optical-sizing:auto; line-height:.95; letter-spacing:-.03em; color:var(--ink); display:block; }
.page-hero__title em { font-style:italic; font-weight:400; color:var(--fire); }
.page-hero__sub { font-size:1.02rem; color:var(--ink2); max-width:520px; line-height:1.8; margin-bottom:2.5rem; }
.page-hero__stat-row { display:flex; gap:2rem; flex-wrap:wrap; }
.inline-stat { display:flex; flex-direction:column; gap:.18rem; }
.inline-stat strong { font-size:.88rem; font-weight:700; color:var(--ink); }
.inline-stat span   { font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); }

/* ── CAP BENTO — 2 col, no orphan ── */
.cap-bento { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden; }
@media (max-width:680px) { .cap-bento { grid-template-columns:1fr; } }
.cap-card { background:var(--white); padding:2.25rem; transition:background .22s; }
.cap-card:hover { background:var(--bg2); }
.cap-card--wide { grid-column:1 / -1; }
.cap-card__n { font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fire); display:block; margin-bottom:.9rem; }
.cap-card h3 { font-family:var(--font-s); font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.55rem; line-height:1.3; }
.cap-card p  { font-size:.875rem; color:var(--ink2); line-height:1.75; }
.cap-card__tech { display:flex; flex-wrap:wrap; gap:.38rem; margin-top:1.1rem; }
.cap-card__tech span { font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.22rem .55rem; border-radius:6px; background:var(--bg3); border:1px solid var(--border); color:var(--ink3); }

/* ── SCRAPING PROCESS 6 STEPS ── */
.scrape-process { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden; }
@media (max-width:900px) { .scrape-process { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .scrape-process { grid-template-columns:1fr; } }
.scrape-step { background:var(--white); padding:1.85rem 2rem; transition:background .22s; }
.scrape-step:hover { background:var(--bg); }
.scrape-step__n { font-family:var(--font-d); font-size:.72rem; font-weight:700; color:var(--fire); letter-spacing:.06em; display:block; margin-bottom:.7rem; }
.scrape-step__title { font-size:.97rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; line-height:1.3; }
.scrape-step__desc  { font-size:.83rem; color:var(--ink3); line-height:1.68; }

/* ── CASE STUDIES ── */
.case-section { background:var(--bg2); }
.case-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:768px) { .case-grid { grid-template-columns:1fr; } }
.case-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--rl); padding:2.5rem; transition:box-shadow .3s,transform .3s; }
.case-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.case-card__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.case-num { font-family:var(--font-d); font-size:2rem; font-weight:900; color:var(--bg3); }
.case-card__title { font-family:var(--font-d); font-size:1.4rem; font-weight:700; color:var(--ink); margin-bottom:1.65rem; line-height:1.2; }
.case-row { margin-bottom:1.05rem; }
.case-key { display:block; font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin-bottom:.32rem; }
.case-row p { font-size:.875rem; color:var(--ink2); line-height:1.7; }
.case-result { color:var(--fire) !important; font-weight:600; }

/* ── OUTPUT ── */
.output-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:900px) { .output-grid { grid-template-columns:1fr; } }
.output-block__label { margin-bottom:.7rem; }
.code-block { background:var(--ink); color:#C8C0B4; border-radius:var(--rl); padding:1.65rem; font-family:'SFMono-Regular','Consolas',monospace; font-size:.73rem; line-height:1.8; overflow-x:auto; margin:0; border:1.5px solid rgba(255,255,255,.05); }
.data-tbl-wrap { border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden; }
.data-tbl { width:100%; border-collapse:collapse; }
.data-tbl thead th { background:var(--bg2); padding:.62rem .9rem; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); text-align:left; border-bottom:1.5px solid var(--border); white-space:nowrap; }
.data-tbl tbody td { padding:.58rem .9rem; font-family:'SFMono-Regular',monospace; font-size:.76rem; color:var(--ink2); border-bottom:1px solid var(--border); }
.data-tbl tbody tr:last-child td { border-bottom:none; }
.data-tbl tbody tr:hover td { background:var(--bg2); }
.schema { border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden; background:var(--white); }
.schema__head { background:var(--ink); color:rgba(255,255,255,.8); padding:.62rem .9rem; font-size:.7rem; font-weight:700; letter-spacing:.1em; }
.schema__row { display:flex; align-items:center; justify-content:space-between; padding:.52rem .9rem; border-bottom:1px solid var(--border); font-size:.78rem; color:var(--ink2); }
.schema__row:last-child { border-bottom:none; }
.pk { font-size:.56rem; font-weight:700; background:var(--fire); color:#fff; padding:.08rem .32rem; border-radius:3px; margin-right:.45rem; letter-spacing:.05em; }
.stype { font-family:'SFMono-Regular',monospace; font-size:.68rem; color:var(--fire); }

/* ── FAQ ── */
.faq-section { background:var(--bg2); }
.faq-list { border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden; background:var(--white); }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.4rem 2rem; background:none; border:none; font-family:var(--font-s); font-size:.93rem; font-weight:600; color:var(--ink); cursor:none; text-align:left; transition:background .2s; }
.faq-q:hover { background:var(--bg); }
.faq-icon { font-size:1.2rem; font-weight:300; color:var(--fire); flex-shrink:0; transition:transform .3s var(--ease); }
.faq-item.is-open .faq-icon { transform:rotate(45deg); }
.faq-a { display:none; padding:0 2rem 1.4rem; }
.faq-item.is-open .faq-a { display:block; animation:fadeUp .3s var(--ease); }
.faq-a p { font-size:.88rem; color:var(--ink2); line-height:1.8; }

/* ── TECH STACK — 4 col even ── */
.stack-section { background:var(--bg2); }
.stack-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden; }
@media (max-width:900px) { .stack-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .stack-grid { grid-template-columns:1fr; } }
.stack-item { background:var(--white); padding:1.45rem 1.7rem; display:flex; align-items:center; gap:.9rem; transition:background .2s; }
.stack-item:hover { background:var(--bg); }
.stack-item__dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.stack-item strong { display:block; font-size:.92rem; font-weight:700; color:var(--ink); }
.stack-item span   { font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }

/* ── SHOWCASE ── */
.showcase { display:grid; grid-template-columns:1.1fr 1fr; gap:4.5rem; align-items:center; padding:4.5rem 0; border-bottom:1.5px solid var(--border); }
.showcase:last-child { border-bottom:none; }
.showcase--flip { grid-template-columns:1fr 1.1fr; }
.showcase--flip .showcase__browser { order:2; }
.showcase--flip .showcase__info    { order:1; }
@media (max-width:900px) { .showcase{grid-template-columns:1fr;gap:2.5rem} .showcase--flip .showcase__browser,.showcase--flip .showcase__info{order:unset} }
.showcase__browser { border-radius:var(--rl); overflow:hidden; border:1.5px solid var(--border); box-shadow:var(--shadow-lg); transition:transform .4s var(--ease); }
.showcase:hover .showcase__browser { transform:translateY(-6px) rotate(-.5deg); }
.showcase__browser-bar { background:var(--bg2); padding:.62rem .9rem; display:flex; align-items:center; gap:.42rem; border-bottom:1px solid var(--border); }
.showcase__browser-bar span { width:10px; height:10px; border-radius:50%; }
.showcase__browser-bar span:nth-child(1){background:#FF5F57} .showcase__browser-bar span:nth-child(2){background:#FFBD2E} .showcase__browser-bar span:nth-child(3){background:#28CA40}
.showcase__url { font-family:'SFMono-Regular',monospace; font-size:.68rem; color:var(--ink3); margin-left:auto; background:var(--bg3); padding:.22rem .7rem; border-radius:100px; }
.showcase__tags  { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.9rem; }
.showcase__title { font-family:var(--font-d); font-size:clamp(1.75rem,3.5vw,2.4rem); font-weight:900; font-optical-sizing:auto; color:var(--ink); line-height:1.1; margin-bottom:.9rem; }
.showcase__desc  { font-size:.88rem; color:var(--ink2); line-height:1.85; margin-bottom:1.4rem; }
.showcase__feat  { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.9rem; }
.showcase__feat li { font-size:.82rem; color:var(--ink2); padding-left:1.2rem; position:relative; }
.showcase__feat li::before { content:'→'; position:absolute; left:0; color:var(--fire); font-size:.8rem; }

/* ── CONTACT ── */
.contact { background:var(--ink); padding:7.5rem 2rem; }
.contact__wrap { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.2fr; gap:5.5rem; align-items:start; }
@media (max-width:900px) { .contact__wrap { grid-template-columns:1fr; gap:3.5rem; } }
.contact__head { font-family:var(--font-d); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:900; font-optical-sizing:auto; color:var(--bg); line-height:1.05; margin:.9rem 0 1.15rem; }
.contact__head em { font-style:italic; font-weight:400; color:var(--lime); }
.contact__sub { font-size:.88rem; color:rgba(255,255,255,.48); line-height:1.8; max-width:360px; margin-bottom:2.3rem; }
.contact__links { display:flex; flex-direction:column; gap:.7rem; }
.contact__email { font-size:.92rem; color:rgba(255,255,255,.62); display:flex; justify-content:space-between; padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.1); transition:color .2s; cursor:none; }
.contact__email span { color:var(--lime); }
.contact__email:hover { color:var(--bg); }
.cform__grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:600px) { .cform__grid { grid-template-columns:1fr; } }
.cform__f { margin-bottom:1rem; }
.cform__f label { display:block; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:.45rem; }
.cform__f input,.cform__f select,.cform__f textarea { width:100%; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.1); border-radius:var(--r); padding:.82rem 1rem; font-family:var(--font-s); font-size:.875rem; color:var(--bg); outline:none; cursor:none; transition:border-color .2s,box-shadow .2s; appearance:none; }
.cform__f input::placeholder,.cform__f textarea::placeholder { color:rgba(255,255,255,.24); }
.cform__f input:focus,.cform__f select:focus,.cform__f textarea:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(194,238,48,.1); }
.cform__f select { color:rgba(255,255,255,.58); }
.cform__f select option { background:var(--ink2); color:var(--bg); }
.cform__f textarea { resize:vertical; min-height:108px; }
.cform__ok { display:none; text-align:center; font-size:.84rem; color:var(--lime); margin-top:.7rem; letter-spacing:.04em; }
.cform__ok.visible { display:block; }

/* ── FOOTER ── */
.foot { background:var(--ink); border-top:1px solid rgba(255,255,255,.07); padding:1.65rem 2rem; }
.foot__wrap { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.foot__brand { display:flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.32); }
.foot__clock { font-family:'SFMono-Regular',monospace; font-size:.78rem; color:rgba(255,255,255,.28); }
.foot__tz    { font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); margin-right:.45rem; }
.foot__nav   { display:flex; gap:2rem; }
.foot__nav a { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.28); transition:color .2s; cursor:none; }
.foot__nav a:hover { color:var(--lime); }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.delay-1{transition-delay:.1s} .delay-2{transition-delay:.2s} .delay-3{transition-delay:.32s} .delay-4{transition-delay:.44s}
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .section-gap{padding:4.5rem 0} .wrap{padding:0 1.25rem}
  .page-hero{padding:118px 1.25rem 3.5rem} .hero{padding:100px 1.25rem 3rem}
  .contact{padding:4.5rem 1.25rem} .showcase{padding:3rem 0}
  .bento__grid{grid-template-columns:1fr 1fr}
  .bento-card--lg{grid-column:span 2;min-height:auto}
  .bento-card__deco{display:none}
}
@media (max-width:480px) { .bento__grid{grid-template-columns:1fr} .bento-card--lg{grid-column:span 1} }

/* ═══════════════════════════════════════════════════════
   PREMIUM PROCESS TABS — used on index + scraping pages
   Dark section · animated tracker · slide-in panels
═══════════════════════════════════════════════════════ */

.proc-section {
  background: #0E0C0A;
  padding: 7rem 0;
  overflow: hidden;
  position: relative;
}

/* subtle grain texture on the dark bg */
.proc-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px; opacity: .03; pointer-events: none;
}

.proc-header {
  margin-bottom: 4rem;
}
.proc-header .tag--fire {
  background: rgba(212,83,26,.18);
  color: var(--fire-lt);
  border-color: rgba(212,83,26,.35);
}
.proc-header .section-title { color: var(--bg); margin-top: .65rem; }
.proc-header .section-title em { color: var(--fire); }

/* two-column layout */
.proc-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .proc-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── LEFT NAV ── */
.proc-nav {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative; /* for the tracker line */
}
@media (max-width: 860px) {
  .proc-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
}

/* vertical tracker line */
.proc-nav__line {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
}
.proc-nav__fill {
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  background: var(--fire);
  border-radius: 2px;
  transition: height .45s var(--ease), top .45s var(--ease);
  box-shadow: 0 0 12px rgba(212,83,26,.6);
}
@media (max-width: 860px) {
  .proc-nav__line, .proc-nav__fill { display: none; }
}

/* tab buttons */
.proc-tab {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  background: none;
  border: none;
  padding: 1.1rem 1rem 1.1rem 1.75rem;
  text-align: left;
  cursor: none;
  position: relative;
  transition: background .2s;
  border-radius: 0 var(--r) var(--r) 0;
}
.proc-tab:hover { background: rgba(255,255,255,.04); }
.proc-tab.is-active { background: rgba(212,83,26,.1); }

.proc-tab__num {
  font-family: var(--font-d);
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  letter-spacing: .08em;
  flex-shrink: 0;
  transition: color .3s;
  min-width: 1.8rem;
}
.proc-tab.is-active .proc-tab__num { color: var(--fire); }

.proc-tab__label {
  font-family: var(--font-s);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.38);
  transition: color .3s;
  flex: 1;
}
.proc-tab.is-active .proc-tab__label { color: #fff; }
.proc-tab:hover .proc-tab__label { color: rgba(255,255,255,.65); }

.proc-tab__arr {
  font-size: .8rem;
  color: rgba(255,255,255,.15);
  transition: color .3s, transform .3s var(--ease);
  flex-shrink: 0;
}
.proc-tab.is-active .proc-tab__arr {
  color: var(--fire);
  transform: translateX(4px);
}

/* mobile tab variant */
@media (max-width: 860px) {
  .proc-tab {
    padding: .6rem 1rem;
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: var(--r);
    width: auto;
  }
  .proc-tab.is-active {
    border-color: var(--fire);
    background: rgba(212,83,26,.15);
  }
  .proc-tab__arr { display: none; }
}

/* ── RIGHT PANELS ── */
.proc-panels {
  position: relative;
  min-height: 380px;
}

.proc-panel {
  display: none;
  position: relative;
  overflow: hidden;
}
.proc-panel.is-active {
  display: block;
  animation: procSlideIn .42s var(--ease) forwards;
}
@keyframes procSlideIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* giant ghost number */
.proc-panel__ghost {
  position: absolute;
  top: -2rem; right: -1rem;
  font-family: var(--font-d);
  font-size: clamp(7rem, 18vw, 13rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.04);
  pointer-events: none;
  user-select: none;
  transition: color .4s;
}
.proc-panel.is-active .proc-panel__ghost {
  animation: ghostPop .5s var(--ease) forwards;
}
@keyframes ghostPop {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

.proc-panel__inner {
  position: relative;
  z-index: 1;
  padding: .5rem 0;
}

.proc-panel__tag {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fire-lt);
  margin-bottom: 1rem;
  opacity: 0;
  animation: none;
}
.proc-panel.is-active .proc-panel__tag {
  animation: fadeSlide .35s var(--ease) .08s forwards;
}

.proc-panel__title {
  font-family: var(--font-d);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  font-optical-sizing: auto;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.4rem;
  opacity: 0;
}
.proc-panel.is-active .proc-panel__title {
  animation: fadeSlide .38s var(--ease) .14s forwards;
}

.proc-panel__desc {
  font-size: .96rem;
  color: rgba(255,255,255,.55);
  line-height: 1.85;
  margin-bottom: 2rem;
  max-width: 520px;
  opacity: 0;
}
.proc-panel.is-active .proc-panel__desc {
  animation: fadeSlide .4s var(--ease) .2s forwards;
}

.proc-panel__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.proc-panel__list li {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  opacity: 0;
}
.proc-panel.is-active .proc-panel__list li:nth-child(1) { animation: fadeSlide .38s var(--ease) .28s forwards; }
.proc-panel.is-active .proc-panel__list li:nth-child(2) { animation: fadeSlide .38s var(--ease) .36s forwards; }
.proc-panel.is-active .proc-panel__list li:nth-child(3) { animation: fadeSlide .38s var(--ease) .44s forwards; }
.proc-panel.is-active .proc-panel__list li:nth-child(4) { animation: fadeSlide .38s var(--ease) .52s forwards; }
.proc-panel.is-active .proc-panel__list li:nth-child(5) { animation: fadeSlide .38s var(--ease) .60s forwards; }
.proc-panel.is-active .proc-panel__list li:nth-child(6) { animation: fadeSlide .38s var(--ease) .68s forwards; }

.proc-panel__list li::before {
  content: '';
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(212,83,26,.2);
  border: 1.5px solid rgba(212,83,26,.5);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.proc-panel__list li::after {
  content: '✓';
  position: absolute;
  font-size: .6rem;
  color: var(--fire-lt);
  margin-left: calc(-22px - .85rem + 5px);
}

/* shared keyframe */
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* progress bar at bottom of section (decorative) */
.proc-progress {
  display: flex;
  gap: .4rem;
  margin-top: 3.5rem;
}
.proc-progress__dot {
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.12);
  flex: 1;
  transition: background .35s, flex .35s var(--ease);
  cursor: none;
}
.proc-progress__dot.is-active {
  background: var(--fire);
  box-shadow: 0 0 8px rgba(212,83,26,.5);
}

/* ═══════════════════════════════════════════════════
   REDESIGNED BENTO STAT CARDS — v5 polish pass
═══════════════════════════════════════════════════ */

/* override sm card to have more height & proper flex */
.bento-card--sm {
  min-height: 185px !important;
  padding: 1.6rem 1.75rem !important;
  overflow: hidden;
  position: relative;
}

/* ── SITES CARD ── */
.bento-card--sites {
  background: var(--white);
  border-color: var(--border);
}
/* ghost background digit */
.bento-stat__bg {
  position: absolute;
  top: -.15em; right: -.05em;
  font-family: var(--font-d);
  font-size: 7.5rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(0,0,0,.055);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.bento-stat__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: .7rem;
}
.bento-stat__label {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  padding-bottom: .2rem;
}
.bento-stat__title {
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
}
.bento-stat__sub {
  font-size: .65rem;
  font-weight: 600;
  color: var(--ink3);
  letter-spacing: .06em;
  text-transform: uppercase;
  display: block;
}
/* terracotta accent bottom line */
.bento-stat__bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fire) 0%, var(--fire-lt) 40%, transparent 100%);
}

/* ── YEARS CARD (fire bg) ── */
.bento-card--years {
  overflow: hidden;
  position: relative;
}
.bento-stat__grid-deco {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}
.bento-card--years .bento-stat__content {
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  z-index: 1;
}
.bento-stat__num-row {
  display: flex;
  align-items: baseline;
  gap: .1rem;
}

/* shared stat number styles (override) */
.bento-stat {
  font-family: var(--font-d) !important;
  font-size: 3.5rem !important;
  font-weight: 900 !important;
  color: var(--ink);
  line-height: 1 !important;
  display: block !important;
}
.bento-card--fire .bento-stat { color: #fff !important; }
.bento-card--years .bento-stat { color: #fff !important; }
.bento-stat-unit {
  font-family: var(--font-d);
  font-size: 2.1rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  line-height: 1;
}

/* ── AVAILABLE CARD ── */
.bento-card--available {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}
.avail-ring {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(162,212,32,.12);
  border: 1.5px solid rgba(162,212,32,.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .8rem;
  position: relative;
  flex-shrink: 0;
}
.avail-ring::before {
  content: '';
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(162,212,32,.15);
  animation: ringPulse 2.8s ease-out infinite;
}
.avail-ring::after {
  content: '';
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(162,212,32,.08);
  animation: ringPulse 2.8s ease-out infinite .5s;
}
.avail-ring__inner {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--lime-dk);
  animation: pulse 2s ease infinite;
}
@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.7); opacity: 0; }
}
.bento-card--available .avail-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: .18rem;
}
.bento-card--available p {
  font-size: .74rem;
  color: var(--ink3);
  margin-bottom: .55rem;
}
.avail-cta {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fire);
  transition: letter-spacing .22s var(--ease), color .2s;
  display: inline-block;
  cursor: none;
}
.bento-card--available:hover .avail-cta {
  letter-spacing: .14em;
  color: var(--fire-lt);
}

/* ── LOCATION CARD ── */
.bento-card--loc {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}
.loc-globe {
  width: 36px; height: 36px;
  position: relative;
  margin-bottom: .8rem;
  flex-shrink: 0;
}
.loc-globe__ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
}
.loc-globe__ring--1 {
  width: 36px; height: 36px;
  border-width: 1.5px;
  border-color: rgba(212,83,26,.3);
}
.loc-globe__ring--2 {
  width: 22px; height: 22px;
  border-width: 1.5px;
  border-color: rgba(212,83,26,.15);
}
.loc-globe__dot {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fire);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(212,83,26,.18), 0 0 12px rgba(212,83,26,.4);
}
.bento-card--loc .loc-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: .22rem;
}
.loc-time {
  font-size: .78rem;
  color: var(--ink3);
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
}
.loc-tz {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: .1rem .38rem;
  border-radius: 4px;
  color: var(--ink3);
}

/* ═══════════════════════════════════════════════════
   GLOBAL POLISH — extra interactivity & detail pass
═══════════════════════════════════════════════════ */

/* 3D tilt on small bento cards */
.bento-card--sm {
  transition: transform .35s var(--ease), box-shadow .35s, border-color .3s !important;
}
.bento-card--sm:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Service cards — subtle shine sweep on hover */
.bento-card--lg {
  transition: transform .4s var(--ease), box-shadow .4s, border-color .3s;
  overflow: hidden;
}
.bento-card--lg::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transition: left .55s var(--ease);
  pointer-events: none;
}
.bento-card--lg:hover::after { left: 150%; }

/* Project cards — border glow on hover */
.proj-card {
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s !important;
}
.proj-card:hover {
  border-color: var(--fire) !important;
  box-shadow: 0 20px 60px rgba(212,83,26,.15), 0 4px 12px rgba(0,0,0,.08) !important;
}

/* Showcase browser — glow on hover */
.showcase__browser {
  transition: transform .4s var(--ease), box-shadow .4s;
}
.showcase:hover .showcase__browser {
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(212,83,26,.15) !important;
}

/* Section heading underline accent */
.section-title {
  position: relative;
  display: inline-block;
}

/* Pill hover spring */
.pill {
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease) !important;
}
.pill:hover { transform: translateY(-2px) !important; }

/* Cap cards subtle left border on hover */
.cap-card {
  transition: background .22s, border-left .22s;
  border-left: 3px solid transparent;
}
.cap-card:hover { border-left-color: var(--fire) !important; }

/* Stack items — dot scales */
.stack-item {
  transition: background .2s, padding-left .22s var(--ease) !important;
}
.stack-item:hover { padding-left: 2.1rem !important; }
.stack-item:hover .stack-item__dot { transform: scale(1.4); }
.stack-item__dot { transition: transform .2s var(--ease); }

/* FAQ icon smooth + item highlight */
.faq-item.is-open {
  border-left: 3px solid var(--fire);
}
.faq-item {
  border-left: 3px solid transparent;
  transition: border-left-color .25s;
}

/* Buttons — subtle shadow lift */
.btn--fire:active  { transform: translateY(0) !important; box-shadow: none !important; }
.btn--ghost:active { transform: translateY(0) !important; }

/* Marquee separator glow */
.marquee__sep {
  text-shadow: 0 0 12px rgba(194,238,48,.6);
}

/* Bento section — subtle radial glow behind the grid */
.bento {
  position: relative;
}
.bento::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(212,83,26,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero italic — terracotta underline decoration */
.hero__italic {
  position: relative;
  display: inline-block;
}
.hero__italic::after {
  content: '';
  position: absolute;
  bottom: .05em; left: 0; right: 0;
  height: 3px;
  background: var(--fire);
  opacity: .35;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════
   ICON ADDITIONS — v6 polish
═══════════════════════════════════════════════════ */

/* ── Bento service card: large decorative background icon ── */
.bento-card__icon {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 64px;
  height: 64px;
  opacity: .12;
  color: #fff;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.bento-card__icon--ink {
  color: var(--ink);
  opacity: .07;
}
.bento-card:hover .bento-card__icon {
  opacity: .2;
  transform: scale(1.08) rotate(-4deg);
}
.bento-card:hover .bento-card__icon--ink {
  opacity: .12;
}

/* ── Stat card: small accent icon ── */
.bento-stat__icon {
  width: 20px;
  height: 20px;
  color: var(--fire);
  opacity: .45;
  margin-bottom: .55rem;
  display: block;
}
.bento-stat__icon--light {
  color: #fff;
  opacity: .45;
}

/* ── Hero float pills: icon inside ── */
.hero__float {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.hero__float svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: .6;
  color: var(--fire);
}

/* ── Project card: industry icon in meta row ── */
.proj-card__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
}
.proj-card__ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.proj-card__ico svg {
  width: 12px;
  height: 12px;
  color: var(--ink3);
  transition: color .2s;
}
.proj-card:hover .proj-card__ico {
  background: rgba(212,83,26,.08);
  border-color: rgba(212,83,26,.25);
}
.proj-card:hover .proj-card__ico svg {
  color: var(--fire);
}

/* ── About pills: inline icon ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.pill__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--fire);
  opacity: .7;
  transition: opacity .2s;
}
.pill:hover .pill__icon {
  opacity: 1;
}

/* ── Process tabs: icon before number ── */
.proc-tab__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proc-tab__icon svg {
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,.2);
  transition: color .3s;
}
.proc-tab.is-active .proc-tab__icon svg {
  color: var(--fire);
}
.proc-tab:hover .proc-tab__icon svg {
  color: rgba(255,255,255,.5);
}

/* ── Nav item icons (slide in on hover) ── */
.nav__item-icon {
  width: 13px; height: 13px; flex-shrink: 0;
  opacity: 0; transform: translateX(-3px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), color .2s;
}
.nav__item:hover .nav__item-icon,
.nav__item.is-on .nav__item-icon { opacity: 1; transform: translateX(0); }
.nav__item.is-on .nav__item-icon { color: var(--fire); }

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — 2-col layout with right visual
═══════════════════════════════════════════════════════════ */
.page-hero {
  padding: 148px 2rem 5.5rem;
  border-bottom: 1.5px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.page-hero__inner { max-width: unset; }
.page-hero__title { display:flex; flex-direction:column; margin:.7rem 0 1.6rem; }
.page-hero__title span,
.page-hero__title em { font-family:var(--font-d); font-size:clamp(2.8rem,6vw,5.2rem); font-weight:900; font-optical-sizing:auto; line-height:.95; letter-spacing:-.03em; color:var(--ink); display:block; }
.page-hero__title em { font-style:italic; font-weight:400; color:var(--fire); }
.page-hero__sub { font-size:1rem; color:var(--ink2); max-width:460px; line-height:1.8; margin-bottom:2.5rem; }
.page-hero__stat-row { display:flex; gap:1.5rem; flex-wrap:wrap; }
.inline-stat strong { display:block; font-size:.88rem; font-weight:700; color:var(--ink); }
.inline-stat span   { font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); }

/* right-side visual container */
.page-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
}

/* ── FLOATING ICON CHIPS ── */
.fchip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: .42rem .85rem .42rem .55rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink2);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.fchip svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}
/* colour variants */
.fchip--fire  { background: var(--fire);  border-color: var(--fire);  color: #fff; box-shadow: 0 4px 20px rgba(212,83,26,.35); }
.fchip--lime  { background: var(--lime);  border-color: var(--lime-dk); color: var(--ink); box-shadow: 0 4px 20px rgba(194,238,48,.3); }
.fchip--ink   { background: var(--ink);   border-color: var(--ink);   color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.fchip--purple{ background: #7C3AED;      border-color: #6D28D9;      color: #fff; box-shadow: 0 4px 20px rgba(124,58,237,.3); }
.fchip--blue  { background: #2563EB;      border-color: #1D4ED8;      color: #fff; box-shadow: 0 4px 20px rgba(37,99,235,.3); }
.fchip--teal  { background: #0D9488;      border-color: #0F766E;      color: #fff; box-shadow: 0 4px 20px rgba(13,148,136,.3); }
/* float animations */
.fchip { animation: chipFloat var(--cd,5s) ease-in-out var(--dd,0s) infinite; }
@keyframes chipFloat {
  0%,100% { transform: translateY(0) rotate(var(--cr,0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--cr2,1deg)); }
}

/* ── DEV PAGE: animated code window ── */
.dev-visual {
  width: 100%;
  max-width: 420px;
  background: #0E0C0A;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.1);
  box-shadow: 0 32px 80px rgba(0,0,0,.25), 0 0 0 1px rgba(212,83,26,.08);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.dev-visual__bar {
  background: #1C1A18;
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dev-visual__bar span {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
}
.dev-visual__url {
  margin-left: .6rem;
  font-family: 'SFMono-Regular', monospace;
  font-size: .62rem;
  color: rgba(255,255,255,.25);
  letter-spacing: .03em;
  flex: 1;
}
.dev-visual__live {
  display: flex; align-items: center; gap: .3rem;
  font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  color: var(--lime-dk); text-transform: uppercase;
}
.dev-visual__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime-dk);
  animation: pulse 2s ease infinite;
}
.dev-visual__body {
  padding: 1rem 1.2rem 1.2rem;
  font-family: 'SFMono-Regular', monospace;
  font-size: .72rem;
  line-height: 1.9;
}
.dv-line { display: flex; gap: .5rem; align-items: baseline; }
.dv-ln { color: rgba(255,255,255,.15); min-width: 1.2rem; text-align: right; font-size: .6rem; user-select: none; }
.dv-dim    { color: rgba(255,255,255,.22); }
.dv-blue   { color: #79C0FF; }
.dv-purple { color: #D2A8FF; }
.dv-green  { color: #56D364; }
.dv-orange { color: var(--fire-lt); }
.dv-yellow { color: #FFA657; }
.dv-string { color: #A5D6FF; }
.dev-visual__cursor {
  display: inline-block; width: 7px; height: 1em;
  background: var(--fire); animation: blink .9s step-end infinite;
  vertical-align: text-bottom; margin-left: 2px;
}
/* animated progress bar at bottom */
.dev-visual__progress {
  height: 2px;
  background: linear-gradient(90deg, var(--fire) 0%, var(--lime) 100%);
  animation: progressLoop 3s ease-in-out infinite;
  transform-origin: left;
}
@keyframes progressLoop {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes blink { 50%{opacity:0} }

/* ── SCRAPING PAGE: data flow visual ── */
.scrape-visual {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sv-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  position: relative;
}
.sv-card__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sv-card__icon svg { width: 18px; height: 18px; }
.sv-card__icon--fire   { background: rgba(212,83,26,.12); color: var(--fire); }
.sv-card__icon--lime   { background: rgba(194,238,48,.2);  color: var(--lime-dk); }
.sv-card__icon--purple { background: rgba(124,58,237,.1);  color: #7C3AED; }
.sv-card__icon--blue   { background: rgba(37,99,235,.1);   color: #2563EB; }
.sv-card__label { font-size: .82rem; font-weight: 700; color: var(--ink); display: block; margin-bottom: .08rem; }
.sv-card__sub   { font-size: .68rem; color: var(--ink3); }
.sv-card__badge {
  margin-left: auto;
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 100px;
  background: var(--bg2); color: var(--ink3);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.sv-card__badge--live { background: rgba(194,238,48,.2); color: var(--lime-dk); border-color: var(--lime-dk); }
.sv-card__badge--fire { background: rgba(212,83,26,.12); color: var(--fire); border-color: var(--fire); }
/* animated connector */
.sv-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 0 1.5rem;
  position: relative;
}
.sv-connector__line {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--border) 0%, var(--fire) 50%, var(--border) 100%);
  background-size: 200% 100%;
  animation: lineFlow 2s linear infinite;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.sv-connector__line::after {
  content: '';
  position: absolute; top: 0; left: -40px; width: 40px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,83,26,.8), transparent);
  animation: dotTravel 2s linear infinite;
}
@keyframes lineFlow { 0%{background-position:100% 0} 100%{background-position:0% 0} }
@keyframes dotTravel { 0%{left:-40px} 100%{left:calc(100% + 40px)} }
.sv-connector__arrow {
  color: var(--fire); font-size: .9rem; flex-shrink: 0;
  animation: arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse { 0%,100%{opacity:.4;transform:translateX(0)} 50%{opacity:1;transform:translateX(3px)} }
/* data rows animation */
.sv-rows { display: flex; flex-direction: column; gap: 3px; }
.sv-row {
  height: 6px; border-radius: 3px; background: var(--bg3);
  position: relative; overflow: hidden;
}
.sv-row::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--fire), var(--lime));
  border-radius: 3px;
  animation: rowFill 2s ease var(--rd,0s) infinite;
}
.sv-row:nth-child(1) { width: 80%; --rd: 0s; }
.sv-row:nth-child(2) { width: 65%; --rd: .15s; }
.sv-row:nth-child(3) { width: 90%; --rd: .3s; }
@keyframes rowFill { 0%{left:-100%} 60%,100%{left:100%} }

/* ═══════════════════════════════════════════════════════════
   COLOUR BOOSTS
═══════════════════════════════════════════════════════════ */
/* chip colours */
.chip--fire   { background: rgba(212,83,26,.1);  color: var(--fire);    border-color: rgba(212,83,26,.25); }
.chip--lime   { background: rgba(194,238,48,.2);  color: var(--lime-dk); border-color: rgba(194,238,48,.4); }
.chip--purple { background: rgba(124,58,237,.08); color: #7C3AED;        border-color: rgba(124,58,237,.2); }
.chip--blue   { background: rgba(37,99,235,.08);  color: #2563EB;        border-color: rgba(37,99,235,.2); }
/* colorful cap-card numbers */
.cap-card__n { color: var(--fire); }
/* section accent bar */
.section-accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--fire), var(--lime), #7C3AED, #2563EB);
  border-radius: 2px;
  margin-bottom: 3rem;
  opacity: .6;
  background-size: 300% 100%;
  animation: barShift 5s ease-in-out infinite;
}
@keyframes barShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST OVERHAUL
═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .page-hero .wrap { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero__visual { height: 260px; }
  .dev-visual, .scrape-visual { max-width: 100%; }
}
@media (max-width: 768px) {
  /* hero */
  .hero { padding: 88px 1.25rem 3rem; }
  .hero__wrap { padding: 0; }
  .split-word { font-size: clamp(2.8rem,11vw,4.5rem); }
  .hero__bottom { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__float  { display: none; }
  .hero__bgnum  { display: none; }
  /* page hero */
  .page-hero { padding: 100px 1.25rem 3rem; }
  .page-hero .wrap { grid-template-columns: 1fr; }
  .page-hero__visual { display: none; }
  /* sections */
  .section-gap { padding: 4rem 0; }
  .wrap { padding: 0 1.25rem; }
  /* bento */
  .bento__grid { grid-template-columns: 1fr 1fr; }
  .bento-card--lg { grid-column: span 2; }
  .bento-card__deco { display: none; }
  .bento-card__icon { display: none; }
  /* work */
  .work-grid { grid-template-columns: 1fr 1fr; }
  /* about */
  .about__grid { grid-template-columns: 1fr; }
  /* cap bento */
  .cap-bento { grid-template-columns: 1fr; }
  /* contact */
  .contact__wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact { padding: 4.5rem 1.25rem; }
  /* proc */
  .proc-section { padding: 4rem 0; }
  .proc-layout { grid-template-columns: 1fr; gap: 2rem; }
  .proc-panels { min-height: unset; }
}
@media (max-width: 560px) {
  .bento__grid { grid-template-columns: 1fr; }
  .bento-card--lg { grid-column: span 1; }
  .bento-card--sm { min-height: 160px; }
  .work-grid { grid-template-columns: 1fr; }
  .hero__label-row { gap: .35rem; }
  .hero__title { gap: .02em; }
  .split-word { font-size: clamp(2.5rem,10vw,4rem); }
  .section-title { font-size: clamp(1.8rem,8vw,2.5rem); }
  .page-hero__title span,
  .page-hero__title em { font-size: clamp(2.4rem,9vw,3.2rem); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .btn { padding: .75rem 1.5rem; }
  .music-btn { bottom: 1.25rem; right: 1.25rem; width: 46px; height: 46px; }
  .nav__drawer-link { font-size: .95rem; }
  .proc-tab { padding: .5rem .75rem; font-size: .8rem; }
  .proc-panel__title { font-size: clamp(1.6rem,7vw,2.2rem); }
  .cform__grid { grid-template-columns: 1fr; }
}