/* ═══════════════════════════════════════════════════════════
   PROBIN.DEV — components.css
   Work · Vitals · Responsive lab · Services · Process
   Arcade · Contact · Robo Probin · Palette · Peek
   ═══════════════════════════════════════════════════════════ */

/* ── WORK GRID ──────────────────────────────────────────── */
.work__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(16px,2.2vw,26px); }

.pcard{
  position:relative; grid-column:span 3; display:flex; flex-direction:column;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface);
  overflow:hidden; isolation:isolate;
  transition:border-color .45s var(--ease), transform .6s var(--ease-out);
}
.pcard--wide{ grid-column:span 6; }
.pcard--third{ grid-column:span 2; }
.pcard:hover{ border-color:var(--line-2); transform:translateY(-6px); }
.pcard::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s;
  background:radial-gradient(500px 300px at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--pc,#4FF0D6) 15%,transparent), transparent 70%);
}
.pcard:hover::after{ opacity:1; }

/* mini browser preview built from CSS art */
.pcard__stage{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));
  border-bottom:1px solid var(--line);
}
.pcard--wide .pcard__stage{ aspect-ratio:21/8; }
.pcard--third .pcard__stage{ aspect-ratio:4/3; }

.mini{
  position:absolute; inset:14px; border-radius:10px; overflow:hidden;
  background:var(--mini-bg,#0d1018); border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
  transform:translateY(0) scale(1); transform-origin:50% 100%;
  transition:transform .7s var(--ease-out);
}
.pcard:hover .mini{ transform:translateY(-6px) scale(1.035); }
.mini__bar{
  height:20px; display:flex; align-items:center; gap:4px; padding:0 8px;
  background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.07);
}
.mini__bar i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.22); }
.mini__bar b{
  margin-left:8px; font-family:var(--font-mono); font-size:7.5px; font-weight:400;
  color:rgba(255,255,255,.4); letter-spacing:.04em; overflow:hidden; white-space:nowrap;
}
.mini__view{ position:absolute; inset:20px 0 0; padding:10px; display:flex; flex-direction:column; gap:7px; }
.mini__row{ display:flex; gap:6px; align-items:center; }
.mini__blk{ border-radius:3px; background:rgba(255,255,255,.1); height:7px; flex:1; }
.mini__blk--accent{ background:var(--pc,#4FF0D6); opacity:.85; }
.mini__blk--tall{ height:100%; border-radius:5px; }
.mini__hero{
  flex:1.6; border-radius:6px; position:relative; overflow:hidden;
  background:var(--mini-hero,linear-gradient(135deg,#1a2030,#0d1018));
}
.mini__hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);
  transform:translateX(-100%);
}
.pcard:hover .mini__hero::after{ animation:sheen 1.1s var(--ease) forwards; }
@keyframes sheen{ to{ transform:translateX(100%); } }
/* The real site, framed and scaled. Sits above the CSS placeholder and
   fades in on load — if it never loads, the placeholder is what shows. */
.mini__live{
  position:absolute; inset:20px 0 0; overflow:hidden;
  /* the project's own palette, not white — a third-party page that
     leaves part of the frame unpainted then blends into the card
     instead of flashing a white block at the viewer */
  background:var(--mini-bg,#0d1018);
  opacity:0; transition:opacity .8s var(--ease); pointer-events:none;
}
.mini__live.is-live{ opacity:1; }
.mini__live iframe{ border:0; display:block; transform-origin:0 0; }

.mini__grid{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.mini__grid i{ border-radius:4px; background:rgba(255,255,255,.08); }
.mini__grid i:nth-child(2){ background:rgba(255,255,255,.13); }

.pcard__live{
  position:absolute; top:22px; right:22px; z-index:3;
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px;
  background:rgba(6,7,11,.72); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#fff;
}
.pcard__live i{ width:5px; height:5px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:pulseRing 2s infinite; }

.pcard__body{ padding:24px 24px 22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.pcard__meta{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.pcard__meta b{ color:var(--pc,var(--cyan)); font-weight:400; }
/* Card accents are chosen for the dark canvas; on paper they'd be
   unreadable at 10px, so the year falls back to body ink. */
[data-theme="light"] .pcard__meta b{ color:var(--text-2); }
.pcard__title{ font-size:clamp(20px,2vw,27px); letter-spacing:-.03em; }
.pcard--wide .pcard__title{ font-size:clamp(24px,3vw,36px); }
.pcard__desc{ color:var(--text-2); font-size:14.5px; flex:1; }
.pcard__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  padding:4px 10px; border-radius:99px; border:1px solid var(--line);
  color:var(--muted); transition:color .3s, border-color .3s;
}
.pcard:hover .tag{ border-color:var(--line-2); color:var(--text-2); }
.pcard__acts{ display:flex; gap:9px; margin-top:6px; flex-wrap:wrap; }

/* ── INDUSTRY DEMOS ─────────────────────────────────────── */
.demos{ padding:clamp(80px,12vw,150px) 0; }
.sec-flag--amber{ background:var(--amber); color:var(--on-accent); }
[data-theme="light"] .sec-flag--amber{ color:#fff; }

.demo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,24px); }

/* No-JS / stale-cache fallback — plain links, never an empty section */
.demo-fallback{ grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.demo-fallback a{
  display:block; padding:18px 20px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface);
  font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em;
  transition:border-color .3s, transform .3s var(--ease-out);
}
.demo-fallback a:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.demo-fallback span{
  display:block; margin-top:6px; font-family:var(--font-body); font-weight:400;
  font-size:13.5px; letter-spacing:0; color:var(--muted);
}
.dcard{
  position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface);
  transition:border-color .4s, transform .5s var(--ease-out);
}
.dcard:hover{ border-color:var(--line-2); transform:translateY(-5px); }
.dcard::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--pc,#4FF0D6) 16%,transparent), transparent 70%);
}
.dcard:hover::after{ opacity:1; }

.dcard__stage{
  position:relative; aspect-ratio:16/11; overflow:hidden;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2)); border-bottom:1px solid var(--line);
}
.dcard__kind{
  position:absolute; top:20px; right:20px; z-index:3;
  padding:4px 11px; border-radius:99px; background:rgba(6,7,11,.72); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16); color:#fff;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
}
.dcard__body{ padding:22px; display:flex; flex-direction:column; gap:11px; flex:1; }
.dcard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dcard__top h3{ font-size:21px; letter-spacing:-.03em; }
.dcard__brand{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pc,var(--cyan));
}
[data-theme="light"] .dcard__brand{ color:var(--muted); }
.dcard__desc{ color:var(--text-2); font-size:14.2px; flex:1; }

@media (max-width:1000px){ .demo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .demo-grid{ grid-template-columns:1fr; } }

/* ── VITALS ─────────────────────────────────────────────── */
.vitals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:clamp(50px,7vw,84px); }
.vital{
  padding:24px 22px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); position:relative; overflow:hidden;
}
.vital::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0; transition:opacity .6s;
}
.vital.is-good::before{ opacity:1; }
.vital h4{ font-family:var(--font-mono); font-size:10.5px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.vital__num{ display:flex; align-items:baseline; gap:5px; font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4vw,46px); letter-spacing:-.04em; line-height:1; }
.vital__num i{ font-style:normal; font-size:15px; color:var(--muted); font-weight:400; font-family:var(--font-mono); }
.vital__bar{ height:3px; border-radius:2px; background:var(--surface-2); overflow:hidden; margin:16px 0 10px; }
.vital__bar i{ display:block; height:100%; width:0; border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width 1.2s var(--ease-out); }
.vital p{ font-size:12.5px; color:var(--muted); font-family:var(--font-mono); }

/* ── RESPONSIVE LAB ─────────────────────────────────────── */
.responsive-lab{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.rl__head{ padding:28px clamp(20px,3vw,34px) 6px; }
.rl__head h3{ font-size:clamp(20px,2.4vw,28px); margin-bottom:8px; }
.rl__head p{ color:var(--text-2); font-size:14.5px; }
.rl__stage{
  padding:26px clamp(20px,3vw,34px) 34px;
  background-image:radial-gradient(var(--grid-line) 1.2px,transparent 1.2px); background-size:22px 22px;
}
.rl__frame{
  position:relative; width:100%; max-width:100%; margin-inline:auto;
  border-radius:12px; border:1px solid var(--line-2); background:var(--bg-3);
  overflow:hidden; box-shadow:var(--shadow); min-width:280px;
}
.rl__chrome{
  height:30px; display:flex; align-items:center; gap:5px; padding:0 12px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.rl__chrome i{ width:7px; height:7px; border-radius:50%; background:var(--line-2); }
.rl__chrome span{ margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--muted); }
.rl__page{ padding:16px; container-type:inline-size; }
.rl__nav{ display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:12px; }
.rl__nav b{ font-family:var(--font-display); color:var(--cyan); }
.rl__nav span{ height:5px; width:32px; border-radius:3px; background:var(--surface-2); }
.rl__nav em{ margin-left:auto; font-style:normal; font-size:10px; padding:4px 10px; border-radius:99px; background:var(--cyan); color:var(--on-accent); font-weight:700; }
.rl__hero{ padding:22px 0 20px; }
.rl__hero h5{ font-size:clamp(18px,4cqw,34px); margin-bottom:6px; }
.rl__hero p{ color:var(--muted); font-size:13px; margin-bottom:14px; }
.rl__btn{ font-style:normal; display:inline-block; font-size:11px; font-weight:700; padding:7px 15px; border-radius:99px; border:1px solid var(--line-2); }
.rl__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.rl__cards i{ height:52px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); }
@container (max-width:640px){
  .rl__cards{ grid-template-columns:repeat(2,1fr); }
  .rl__nav span:nth-child(4){ display:none; }
}
@container (max-width:430px){
  .rl__cards{ grid-template-columns:1fr; }
  .rl__nav span{ display:none; }
  .rl__hero{ padding:14px 0; }
}
.rl__handle{
  position:absolute; top:0; right:-1px; bottom:0; width:16px; z-index:4;
  display:grid; place-items:center; cursor:ew-resize; background:transparent;
  touch-action:none;
}
.rl__handle span{ width:4px; height:46px; border-radius:4px; background:var(--cyan); box-shadow:0 0 14px rgba(79,240,214,.6); transition:height .3s var(--spring), width .2s; }
.rl__handle:hover span,.rl__handle:active span{ height:70px; width:5px; }

/* ── SERVICES ───────────────────────────────────────────── */
.svc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; margin-bottom:clamp(50px,7vw,80px); }
.scard{
  position:relative; padding:30px 26px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:color-mix(in srgb,var(--bg-2) 80%,transparent);
  backdrop-filter:blur(6px); overflow:hidden;
  transition:transform .5s var(--ease-out), border-color .4s;
}
.scard:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.scard__ic{ width:44px; height:44px; margin-bottom:20px; color:var(--cyan); }
.scard__ic svg{ width:100%; height:100%; overflow:visible; }
.scard__ic .an{ transform-box:fill-box; transform-origin:center; }
.scard:hover .scard__ic .an{ animation:icSpin 1.4s var(--ease) ; }
@keyframes icSpin{ 50%{ transform:rotate(180deg) scale(1.15); } 100%{ transform:rotate(360deg); } }
.scard h3{ font-size:21px; margin-bottom:10px; }
.scard p{ color:var(--text-2); font-size:14.5px; margin-bottom:16px; }
.scard ul{ display:flex; flex-direction:column; gap:7px; }
.scard li{ font-size:13.5px; color:var(--muted); display:flex; gap:9px; align-items:flex-start; }
.scard li::before{ content:'▸'; color:var(--cyan); flex:0 0 auto; }
.scard__glow{
  position:absolute; width:180px; height:180px; border-radius:50%; filter:blur(60px);
  background:var(--cyan); opacity:0; top:-60px; right:-40px; transition:opacity .6s;
  pointer-events:none;
}
.scard:hover .scard__glow{ opacity:.16; }

.stack-marquee{
  border-block:1px solid var(--line); padding:16px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.stack-marquee__track{ display:flex; gap:18px; width:max-content; animation:tick 30s linear infinite; }
.stack-marquee__track b{
  font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--text-2);
  padding:7px 16px; border:1px solid var(--line); border-radius:99px; white-space:nowrap;
  transition:color .3s, border-color .3s, background .3s;
}
.stack-marquee__track b:hover{ color:var(--cyan); border-color:var(--cyan); background:var(--surface); }

/* ── PROCESS ────────────────────────────────────────────── */
.steps{ display:grid; gap:0; position:relative; }
.steps::before{
  content:''; position:absolute; left:27px; top:24px; bottom:24px; width:1px;
  background:linear-gradient(var(--line),var(--line));
}
.steps::after{
  content:''; position:absolute; left:27px; top:24px; width:1px; height:var(--prog,0%);
  background:linear-gradient(var(--cyan),var(--violet)); box-shadow:0 0 12px rgba(79,240,214,.5);
  transition:height .2s linear;
}
.step{ position:relative; padding:26px 0 26px 74px; }
.step__no{
  position:absolute; left:0; top:22px; width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center; background:var(--bg-2); border:1px solid var(--line);
  font-family:var(--font-mono); font-size:14px; color:var(--muted); z-index:2;
  transition:color .4s, border-color .4s, background .4s, transform .5s var(--spring);
}
.step.is-in .step__no{ color:var(--on-accent); background:var(--cyan); border-color:var(--cyan); transform:scale(1.04); }
.step h3{ font-size:clamp(19px,2.2vw,26px); margin-bottom:9px; }
.step p{ color:var(--text-2); font-size:14.8px; max-width:62ch; }
.step__when{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); display:block; margin-bottom:8px; }
@media (max-width:640px){
  .steps::before,.steps::after{ left:19px; }
  .step{ padding-left:56px; }
  .step__no{ width:40px; height:40px; border-radius:12px; font-size:12px; }
}

/* ── ARCADE ─────────────────────────────────────────────── */
.cabinet{
  border-radius:var(--r-lg); border:1px solid var(--line-2); overflow:hidden;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); box-shadow:var(--shadow);
}
.cabinet__tabs{
  display:flex; align-items:stretch; border-bottom:1px solid var(--line); background:var(--surface);
  overflow-x:auto; scrollbar-width:none;
}
.cabinet__tabs::-webkit-scrollbar{ display:none; }
.tabs__label{
  display:flex; align-items:center; padding:0 14px; flex:0 0 auto;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); border-right:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 40%,transparent);
}
.tabs__label--alt{ color:var(--violet); border-left:1px solid var(--line); }
.gtab{
  flex:1 0 auto; min-width:118px; padding:15px 14px;
  display:flex; flex-direction:column; gap:2px; align-items:center;
  border-right:1px solid var(--line); position:relative; transition:background .3s, color .3s;
  color:var(--muted);
}
.gtab:last-child{ border-right:none; }
.gtab--demo.is-on{ color:var(--violet); background:color-mix(in srgb,var(--violet) 9%,transparent); }
.gtab--demo::after{ background:var(--violet); }
.gtab b{ font-family:var(--font-display); font-size:15px; letter-spacing:-.02em; }
.gtab span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.7; }
.gtab::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--cyan); transform:scaleX(0); transition:transform .4s var(--ease-out); }
.gtab:hover{ color:var(--text-2); background:var(--surface); }
.gtab.is-on{ color:var(--cyan); background:color-mix(in srgb,var(--cyan) 7%,transparent); }
.gtab.is-on::after{ transform:scaleX(1); }

.cabinet__screen{ position:relative; background:#04050A; aspect-ratio:16/9; }
.cabinet__screen canvas{ width:100%; height:100%; display:block; touch-action:manipulation; }
.screen__scan{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
}
.screen__scan::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.55));
}
.screen__hud{
  position:absolute; top:0; left:0; right:0; z-index:4; display:flex; gap:20px;
  padding:12px 18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  color:rgba(255,255,255,.45); text-transform:uppercase; pointer-events:none;
}
.hud__item b{ color:var(--cyan); font-weight:700; }
.screen__overlay{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;
  background:radial-gradient(circle at 50% 50%,rgba(6,7,11,.82),rgba(4,5,10,.96));
  backdrop-filter:blur(3px);
  transition:opacity .4s, visibility .4s;
}
.screen__overlay.is-off{ opacity:0; visibility:hidden; }
.screen__overlay h3{ font-size:clamp(24px,3.4vw,38px); color:#fff; }
.screen__overlay p{ color:rgba(255,255,255,.6); max-width:44ch; font-size:14.5px; }
.screen__overlay small{ font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.32); letter-spacing:.1em; }
.cabinet__foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px 20px; border-top:1px solid var(--line);
}
.cabinet__foot p{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }

/* experiences have nothing to score, so the arcade HUD steps aside */
.cabinet.is-demo .screen__hud{ display:none; }

.cabinet__note{
  margin-top:20px; text-align:center; color:var(--text-2); font-size:14.5px;
}

/* the playground gets a louder frame than the rest of the page */
.arcade .cabinet{ position:relative; }
.arcade .cabinet::before{
  content:''; position:absolute; inset:-1.5px; border-radius:inherit; z-index:-1;
  background:linear-gradient(120deg,var(--cyan),var(--violet),var(--amber),var(--cyan));
  background-size:300% 300%; opacity:.5; animation:hotEdge 9s linear infinite;
}
@keyframes hotEdge{ to{ background-position:300% 0; } }
.sec-flag{
  margin-left:10px; padding:3px 9px; border-radius:99px; font-weight:700; font-size:10px;
  background:var(--violet); color:#fff; letter-spacing:.1em;
}

/* ── ROBO PROBIN BAND ───────────────────────────────────── */
.botband{
  padding:clamp(70px,10vw,120px) 0;
  background:
    radial-gradient(70% 90% at 15% 20%, color-mix(in srgb,var(--violet) 14%,transparent), transparent 70%),
    radial-gradient(60% 80% at 85% 80%, color-mix(in srgb,var(--cyan) 11%,transparent), transparent 70%),
    var(--bg);
  border-block:1px solid var(--line);
}
.botband__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:880px){
  .botband__inner{ grid-template-columns:1fr; }
  .botband__stage{ order:2; }
}

.botband__stage{ position:relative; display:grid; place-items:center; min-height:260px; }
.botband__face{
  position:relative; width:132px; height:132px; border-radius:38px;
  background:linear-gradient(145deg,var(--violet),var(--cyan));
  box-shadow:0 26px 70px -22px color-mix(in srgb,var(--violet) 70%,transparent);
  animation:botFloat 5s var(--ease) infinite;
}
@keyframes botFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-14px) rotate(2deg); } }
.botband__face .eye{ top:46px; width:15px; height:15px; }
.botband__face .eye--l{ left:32px; } .botband__face .eye--r{ right:32px; }
.botband__face .mouth{ bottom:30px; width:44px; height:19px; }
.botband__ring{
  position:absolute; width:220px; height:220px; border-radius:50%;
  border:1px dashed var(--line-2); animation:spin 26s linear infinite;
}
.botband__chip{
  position:absolute; padding:7px 14px; border-radius:99px; white-space:nowrap;
  background:var(--bg-3); border:1px solid var(--line-2); box-shadow:var(--shadow);
  font-size:12.5px; font-family:var(--font-mono); color:var(--text-2);
  animation:botFloat 6s var(--ease) infinite;
}
.botband__chip--1{ top:8%;  left:-4%;  animation-delay:.4s; }
.botband__chip--2{ bottom:14%; right:-2%; animation-delay:1.1s; }
.botband__chip--3{ bottom:2%; left:6%;  animation-delay:1.8s; color:var(--cyan); border-color:var(--cyan); }
@media (max-width:520px){ .botband__chip--1,.botband__chip--2{ display:none; } }

.botband__copy .sec-title{ font-size:clamp(30px,4.6vw,52px); margin-bottom:16px; }
.botband__copy .grad{
  background:linear-gradient(104deg,var(--violet),var(--cyan) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.botband__list{ display:flex; flex-direction:column; gap:10px; margin:22px 0 28px; }
.botband__list li{ position:relative; padding-left:26px; color:var(--text-2); font-size:14.8px; }
.botband__list li b{ color:var(--text); }
.botband__list li::before{
  content:''; position:absolute; left:0; top:9px; width:11px; height:11px; border-radius:4px;
  background:linear-gradient(145deg,var(--violet),var(--cyan));
}
.botband__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ── CONTACT ────────────────────────────────────────────── */
/* Two paths into the same form. Quick is the default: the
   configurator and the optional fields stay out of the way until
   someone actually asks for them. */
.cmodes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:clamp(20px,2.8vw,30px); }
@media (max-width:620px){ .cmodes{ grid-template-columns:1fr; } }
.cmode{
  display:grid; gap:4px; text-align:left; padding:16px 20px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  color:var(--text); transition:border-color .3s, background .3s, transform .4s var(--ease-out);
}
.cmode:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.cmode:focus-visible{ outline:none; box-shadow:var(--ring); }
.cmode b{ font-size:15px; font-weight:700; }
.cmode em{ font-style:normal; font-size:12.5px; color:var(--muted); }
.cmode.is-on{
  border-color:color-mix(in srgb,var(--cyan) 55%,transparent);
  background:color-mix(in srgb,var(--cyan) 9%,transparent);
}
.cmode.is-on b::after{ content:'✓'; margin-left:8px; color:var(--cyan); font-size:12px; }

.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.6vw,32px); align-items:start; }
@media (max-width:920px){ .contact__grid{ grid-template-columns:1fr; } }

.contact.is-quick .configurator{ display:none; }
.contact.is-quick .contact__grid{ grid-template-columns:1fr; max-width:700px; }
.contact.is-quick [data-brief-only]{ display:none; }
/* the name/company row loses half its content in quick mode, so it
   closes up rather than leaving a hole beside the name */
.contact.is-quick .cform__row:has([data-brief-only]){ grid-template-columns:1fr; }
.contact:not(.is-quick) [data-quick-only]{ display:none; }
.cform__switch{
  font-size:13px; color:var(--muted); margin:-6px 0 18px;
}

.configurator{
  padding:clamp(24px,3vw,34px); border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); position:sticky; top:92px;
}
@media (max-width:920px){ .configurator{ position:static; } }
.cfg__block{ margin-bottom:26px; }
.cfg__block h4{ font-size:14px; font-family:var(--font-body); font-weight:700; letter-spacing:0; margin-bottom:13px; display:flex; align-items:center; gap:9px; }
.cfg__block h4 i{ font-family:var(--font-mono); font-style:normal; font-size:10px; color:var(--cyan); border:1px solid var(--line); border-radius:5px; padding:2px 6px; }
.chipset{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 15px; border-radius:99px; border:1px solid var(--line);
  font-size:13.5px; color:var(--text-2); background:transparent;
  transition:all .3s var(--ease); position:relative;
}
.chip:hover{ border-color:var(--line-2); color:var(--text); transform:translateY(-2px); }
.chip.is-on{ background:var(--cyan); border-color:var(--cyan); color:var(--on-accent); font-weight:700; }
.chip.is-on::after{ content:'✓'; margin-left:7px; font-size:11px; }

/* budget block — deliberately the loudest step in the configurator */
.cfg__block--budget{
  padding:20px; margin-inline:-4px; border-radius:var(--r);
  border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--cyan) 6%,transparent);
}
.cfg__block h4 em{
  font-style:normal; font-weight:400; font-size:11px; color:var(--cyan);
  border:1px solid var(--line-2); border-radius:99px; padding:2px 9px; margin-left:auto;
  font-family:var(--font-mono); letter-spacing:.06em;
}
.cfg__exact{ margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cfg__exact label{ font-size:12.5px; color:var(--muted); }
.cfg__money{
  display:flex; align-items:center; gap:2px; border:1px solid var(--line-2);
  border-radius:10px; padding:0 12px; background:var(--bg);
  transition:border-color .3s, box-shadow .3s;
}
.cfg__money:focus-within{ border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent); }
.cfg__money i{ font-style:normal; color:var(--muted); font-family:var(--font-mono); }
.cfg__money input{ width:96px; padding:10px 4px; font-family:var(--font-mono); }
.cfg__money input:focus{ outline:none; }
.cfg__money input::-webkit-outer-spin-button,
.cfg__money input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cfg__money input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

.cfg__verdict{
  font-size:13.5px; line-height:1.6; margin-bottom:12px; padding:12px 14px;
  border-radius:10px; border:1px solid var(--line); color:var(--text-2);
}
.cfg__verdict:empty{ display:none; }
.cfg__verdict b{ color:var(--text); }
.cfg__verdict.is-good{ border-color:color-mix(in srgb,var(--cyan) 45%,transparent); background:color-mix(in srgb,var(--cyan) 8%,transparent); }
.cfg__verdict.is-warn{ border-color:color-mix(in srgb,var(--amber) 45%,transparent); background:color-mix(in srgb,var(--amber) 8%,transparent); }
.cfg__verdict.is-warn b{ color:var(--amber); }
.cfg__verdict.is-good b{ color:var(--cyan); }

.cfg__out{ padding-top:22px; border-top:1px dashed var(--line-2); }
.cfg__out-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; font-size:14px; color:var(--muted); }
.cfg__out-row b{ font-family:var(--font-display); font-size:clamp(20px,2.4vw,27px); color:var(--text); letter-spacing:-.03em; }
.cfg__out-row b span{ color:var(--cyan); }
.cfg__meter{ height:4px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin:14px 0 12px; }
.cfg__meter i{ display:block; height:100%; width:5%; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--amber)); transition:width .6s var(--spring); }
.cfg__note{ font-size:12.5px; color:var(--muted); line-height:1.55; }

.cform{ padding:clamp(24px,3vw,34px); border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); }
.cform__intro{
  font-size:13.8px; color:var(--text-2); line-height:1.6; margin-bottom:20px;
  padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); background:color-mix(in srgb,var(--cyan) 6%,transparent);
}

/* reply-preference radios, styled as soft pills */
.field--choice{ border:none; margin-bottom:16px; }
.field--choice legend{ font-size:12.5px; font-weight:700; color:var(--text-2); margin-bottom:9px; padding:0; }
.choices{ display:flex; flex-wrap:wrap; gap:8px; }
.choices label{ position:relative; cursor:pointer; }
.choices input{ position:absolute; opacity:0; width:0; height:0; }
.choices span{
  display:inline-block; padding:8px 15px; border-radius:99px;
  border:1px solid var(--line); font-size:13.5px; color:var(--text-2);
  transition:all .25s var(--ease);
}
.choices label:hover span{ border-color:var(--line-2); color:var(--text); }
.choices input:checked + span{
  background:var(--cyan); border-color:var(--cyan); color:var(--on-accent); font-weight:700;
}
.choices input:focus-visible + span{ box-shadow:var(--ring); }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .cform__row{ grid-template-columns:1fr; } }
.field{ display:block; margin-bottom:16px; }
.field > span{ display:block; font-size:12.5px; font-weight:700; color:var(--text-2); margin-bottom:7px; letter-spacing:.02em; }
.field > span i{ font-style:normal; font-weight:400; color:var(--muted); }
.field input,.field textarea{
  width:100%; padding:13px 15px; border-radius:12px; resize:vertical;
  border:1px solid var(--line); background:var(--bg); color:var(--text);
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input::placeholder,.field textarea::placeholder{ color:color-mix(in srgb,var(--muted) 70%,transparent); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 18%,transparent);
}
.field.is-bad input,.field.is-bad textarea{ border-color:var(--rose); }
.field__err{ display:block; font-size:12px; color:var(--rose); margin-top:6px; font-style:normal; min-height:0; }
.cform__foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.cform__msg{ font-size:13.5px; color:var(--muted); }
.cform__msg.is-ok{ color:var(--cyan); font-weight:600; }
.cform__msg.is-bad{ color:var(--rose); }
.cform__alt{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cform__alt .sep{ opacity:.5; }
#f-submit.is-busy{ pointer-events:none; opacity:.7; }
#f-submit.is-busy span::after{ content:'…'; }

/* ── ROBO PROBIN ────────────────────────────────────────── */
.bot-launcher{
  position:fixed; right:22px; bottom:22px; z-index:940;
  width:60px; height:60px; border-radius:20px;
  background:linear-gradient(145deg,var(--violet),var(--cyan));
  display:grid; place-items:center; box-shadow:0 16px 40px -12px rgba(144,128,255,.6);
  transition:transform .45s var(--spring), border-radius .45s var(--spring), box-shadow .4s;
}
.bot-launcher:hover{ transform:translateY(-4px) scale(1.05); border-radius:26px; }
.bot-launcher.is-hidden{ transform:scale(0) rotate(-40deg); pointer-events:none; }
.bot-launcher__face{ position:relative; width:30px; height:22px; display:block; }
.eye{
  position:absolute; top:3px; width:6px; height:6px; border-radius:50%; background:#06070B;
  animation:blink 4.2s infinite;
}
.eye--l{ left:3px; } .eye--r{ right:3px; }
@keyframes blink{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.12); } }
.mouth{
  position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:15px; height:7px; border-radius:0 0 12px 12px; background:#06070B;
  transition:height .3s var(--spring), width .3s;
}
.bot-launcher:hover .mouth{ height:10px; width:18px; }
.bot-launcher__ping{
  position:absolute; inset:0; border-radius:inherit; border:2px solid var(--cyan);
  animation:botPing 2.6s var(--ease) infinite; pointer-events:none;
}
@keyframes botPing{ 0%{transform:scale(1);opacity:.7} 70%{transform:scale(1.5);opacity:0} 100%{opacity:0} }
.bot-launcher__bubble{
  position:absolute; right:74px; top:50%; transform:translateY(-50%) scale(.8); transform-origin:right center;
  white-space:nowrap; background:var(--bg-3); border:1px solid var(--line-2); color:var(--text);
  padding:9px 15px; border-radius:99px; font-size:13px; font-weight:600; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .4s, transform .4s var(--spring);
}
.bot-launcher__bubble.is-on{ opacity:1; transform:translateY(-50%) scale(1); }
@media (max-width:520px){ .bot-launcher__bubble{ display:none; } }

.bot{
  position:fixed; right:22px; bottom:22px; z-index:945;
  width:min(390px,calc(100vw - 32px)); height:min(600px,calc(100svh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--bg-3);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:translateY(24px) scale(.94); opacity:0; visibility:hidden; transform-origin:bottom right;
  transition:transform .5s var(--spring), opacity .35s, visibility .35s;
}
.bot.is-open{ transform:none; opacity:1; visibility:visible; }
.bot__head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface); }
.bot__avatar{
  position:relative; width:38px; height:38px; border-radius:12px; flex:0 0 auto;
  background:linear-gradient(145deg,var(--violet),var(--cyan));
}
.bot__avatar .eye{ top:12px; width:5px; height:5px; }
.bot__avatar .eye--l{ left:9px; } .bot__avatar .eye--r{ right:9px; }
.bot__avatar .mouth{ bottom:9px; width:12px; height:5px; }
.bot.is-thinking .bot__avatar .mouth{ animation:talk .38s infinite alternate; }
@keyframes talk{ from{ height:3px; } to{ height:9px; } }
.bot__id b{ display:block; font-family:var(--font-display); font-size:15.5px; letter-spacing:-.02em; }
.bot__id small{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); font-family:var(--font-mono); }
.bot__id .pulse{ width:5px; height:5px; }
.bot__x{ margin-left:auto; width:30px; height:30px; border-radius:9px; color:var(--muted); font-size:13px; transition:color .25s, background .25s; }
.bot__x:hover{ color:var(--text); background:var(--surface-2); }

.bot__log{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; }
.bot__log::-webkit-scrollbar{ width:6px; }
.bot__log::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }

.msg{ max-width:86%; padding:11px 15px; border-radius:16px; font-size:14.2px; line-height:1.55; animation:msgIn .45s var(--ease-out) backwards; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } }
.msg--bot{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:5px; }
.msg--me{ align-self:flex-end; background:var(--cyan); color:var(--on-accent); font-weight:600; border-bottom-right-radius:5px; }
.msg b{ font-weight:700; }
.msg a{ color:var(--cyan); text-decoration:underline; text-underline-offset:2px; }
.msg--me a{ color:inherit; }
.msg ul{ margin:7px 0 0; display:flex; flex-direction:column; gap:5px; }
.msg li{ padding-left:15px; position:relative; font-size:13.6px; }
.msg li::before{ content:'▸'; position:absolute; left:0; color:var(--cyan); }
.msg--typing{ display:flex; gap:4px; align-items:center; padding:15px; }
.msg--typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:dotty 1.3s infinite; }
.msg--typing i:nth-child(2){ animation-delay:.18s; } .msg--typing i:nth-child(3){ animation-delay:.36s; }
@keyframes dotty{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }

.bot__chips{ display:flex; gap:7px; padding:0 16px 12px; flex-wrap:wrap; }
.bchip{
  font-size:12.5px; padding:7px 13px; border-radius:99px; border:1px solid var(--line);
  color:var(--text-2); transition:all .25s var(--ease); animation:msgIn .4s var(--ease-out) backwards;
}
.bchip:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.bot__input{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); background:var(--surface); }
.bot__input input{ flex:1; padding:11px 14px; border-radius:99px; border:1px solid var(--line); background:var(--bg); transition:border-color .3s; }
.bot__input input:focus{ outline:none; border-color:var(--cyan); }
.bot__input button{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--cyan); color:var(--on-accent); transition:transform .3s var(--spring);
}
.bot__input button:hover{ transform:scale(1.1) rotate(8deg); }

/* ── COMMAND PALETTE ────────────────────────────────────── */
.palette{
  position:fixed; inset:0; z-index:960; display:grid; place-items:start center;
  padding-top:14vh; background:color-mix(in srgb,var(--bg) 62%,transparent);
  backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.palette.is-open{ opacity:1; visibility:visible; }
.palette__box{
  width:min(560px,92vw); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-3); box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transform:translateY(-14px) scale(.97); transition:transform .4s var(--spring);
}
.palette.is-open .palette__box{ transform:none; }
.palette__field{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.palette__field > span{ color:var(--cyan); font-family:var(--font-mono); }
.palette__field input{ flex:1; font-size:16px; }
.palette__field input:focus{ outline:none; }
.palette__list{ max-height:min(360px,50vh); overflow-y:auto; padding:8px; }
.pitem{
  display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:10px;
  cursor:pointer; transition:background .18s;
}
.pitem.is-sel{ background:var(--surface-2); }
.pitem__ic{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--surface-2); font-size:13px; flex:0 0 auto; }
.pitem b{ font-weight:600; font-size:14.5px; }
.pitem small{ color:var(--muted); font-size:12.5px; margin-left:auto; font-family:var(--font-mono); }

/* ── PEEK MODAL ─────────────────────────────────────────── */
.peek{
  position:fixed; inset:0; z-index:970; display:grid; place-items:center; padding:clamp(10px,3vw,40px);
  background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.peek.is-open{ opacity:1; visibility:visible; }
.peek__box{
  width:min(1180px,100%); height:min(760px,88svh); display:flex; flex-direction:column;
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2);
  background:var(--bg-3); box-shadow:0 50px 120px -40px rgba(0,0,0,.85);
  transform:scale(.96) translateY(12px); transition:transform .45s var(--spring);
}
.peek.is-open .peek__box{ transform:none; }
.peek__chrome{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.peek__chrome .dot{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.peek__url{
  flex:1; margin-inline:10px; padding:6px 14px; border-radius:99px; background:var(--bg);
  border:1px solid var(--line); font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.peek__open{ font-size:12.5px; font-weight:700; color:var(--cyan); padding:6px 12px; border-radius:99px; border:1px solid var(--line); transition:background .25s; white-space:nowrap; }
.peek__open:hover{ background:var(--surface-2); }
.peek__x{ width:28px; height:28px; border-radius:8px; color:var(--muted); transition:color .25s, background .25s; }
.peek__x:hover{ color:var(--text); background:var(--surface-2); }
.peek__body{ flex:1; position:relative; background:#fff; }
.peek__body iframe{ width:100%; height:100%; border:0; }
.peek__loading,.peek__blocked{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:30px; background:var(--bg-3); z-index:2;
}
.peek__loading.is-on,.peek__blocked.is-on{ display:flex; }
.peek__loading i{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--cyan);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.peek__loading span{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); letter-spacing:.06em; }
.peek__blocked h4{ font-size:24px; }
.peek__blocked p{ color:var(--text-2); max-width:46ch; font-size:14.5px; }

/* ── Work grid responsive ───────────────────────────────── */
@media (max-width:1000px){
  .work__grid{ grid-template-columns:repeat(2,1fr); }
  .pcard,.pcard--third{ grid-column:span 1; }
  .pcard--wide{ grid-column:span 2; }
}
@media (max-width:660px){
  .work__grid{ grid-template-columns:1fr; }
  .pcard,.pcard--wide,.pcard--third{ grid-column:span 1; }
  .pcard--wide .pcard__stage{ aspect-ratio:16/10; }
  /* Stay at 16:9 — the pointer mapping assumes the bitmap fills its
     box, so letterboxing or stretching here would break aiming. */
  .screen__hud{ font-size:9.5px; gap:12px; padding:9px 12px; }
  .screen__overlay h3{ font-size:22px; }
  .screen__overlay p{ font-size:13px; }
  .gtab{ padding:12px 6px; }
  .gtab b{ font-size:13px; }
  .gtab span{ font-size:8.5px; letter-spacing:.12em; }
  .bot{ right:8px; bottom:8px; height:min(620px,calc(100svh - 74px)); }
  .bot-launcher{ right:14px; bottom:14px; width:54px; height:54px; }
}