@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #0a0d14;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --text: #e9edf7;
  --muted: #8791a8;
  --blue: #4f7cff;
  --violet: #b983ff;
  --amber: #ffb454;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; color-scheme:dark;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6vw;
  background:rgba(10,13,20,0.55);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .3s ease, padding .3s ease;
}
nav.scrolled{ background:rgba(10,13,20,0.85); padding:12px 6vw; }
.logo{ font-family:'Space Grotesk'; font-weight:700; font-size:18px; letter-spacing:.5px; }
.logo span{ color:var(--blue); }
.nav-links{ display:flex; gap:32px; font-size:14px; color:var(--muted); }
.nav-links a:hover{ color:var(--text); }
.nav-cta{
  padding:9px 18px; border-radius:100px; font-size:13px; font-weight:600;
  background:linear-gradient(135deg, var(--blue), var(--violet)); color:#fff;
}
@media(max-width:800px){ .nav-links{ display:none; } }

/* ---------- BUTTONS ---------- */
.btn-primary, .btn-ghost{
  padding:14px 26px; border-radius:10px; font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--blue), var(--violet)); color:#fff;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(79,124,255,.6); }
.btn-ghost{ border:1px solid var(--border); color:var(--text); background:var(--surface); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.25); }

/* ---------- HOME HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:120px 6vw 60px; overflow:hidden;
}
.hero-content{
  position:relative; z-index:2; width:100%; max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.hero-inner{ position:relative; z-index:1; max-width:640px; flex:1 1 520px; }

/* ---------- HERO RIGHT VISUAL ---------- */
.hero-visual{
  position:relative; z-index:2; flex:1 1 380px; max-width:400px;
  display:flex; flex-direction:column; align-items:center; gap:22px; perspective:1200px;
}
@media(max-width:980px){ .hero-visual{ display:none; } }
.hero-orb-wrap{ position:relative; width:100%; }
.hero-orb-glow{
  position:absolute; inset:-30px; z-index:0; border-radius:30px;
  background:
    radial-gradient(circle at 25% 20%, rgba(79,124,255,.4), transparent 60%),
    radial-gradient(circle at 80% 85%, rgba(139,92,246,.35), transparent 55%);
  filter:blur(38px); animation:bob 6s ease-in-out infinite;
}
.hero-orb-frame{
  position:relative; z-index:2; aspect-ratio:1/1; overflow:hidden;
  border-radius:22px; border:1px solid var(--border);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65);
  background:
    radial-gradient(circle at 25% 20%, rgba(79,124,255,.18), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(139,92,246,.16), transparent 50%),
    #0c0f18;
}
.hero-orb-frame::before{
  content:''; position:absolute; inset:20px; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:24px 24px; border-radius:8px; pointer-events:none;
}
.hero-orb-frame::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, var(--blue), var(--violet));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.8; pointer-events:none;
}
.hero-orb-frame canvas{ position:relative; z-index:1; width:100%; height:100%; display:block; }
.hero-panel{
  width:100%; background:rgba(15,19,30,.65); backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:18px; padding:26px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65);
  transform-style:preserve-3d; transition:transform .15s ease; will-change:transform;
}
.hp-head{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.hp-dot{ width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); }
.hp-title{ font-family:'Space Grotesk'; font-size:13.5px; font-weight:600; flex:1; }
.hp-live{ font-family:'JetBrains Mono'; font-size:10.5px; color:#4ade80; animation:blink 1.6s ease-in-out infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.hp-stage{ margin-bottom:16px; }
.hp-stage-label{ font-family:'JetBrains Mono'; font-size:11px; color:var(--muted); display:block; margin-bottom:6px; }
.hp-bar{ height:6px; border-radius:100px; background:rgba(255,255,255,.06); overflow:hidden; }
.hp-fill{ height:100%; border-radius:100px; background:linear-gradient(90deg, var(--blue), var(--violet)); }
.hp-foot{ display:flex; gap:26px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.hp-foot b{ display:block; font-family:'JetBrains Mono'; font-size:16px; }
.hp-foot span{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono'; font-size:12px; color:var(--blue);
  border:1px solid rgba(79,124,255,.35); background:rgba(79,124,255,.08);
  padding:6px 12px; border-radius:100px; margin-bottom:24px;
  animation:eyebrowGlow 2.4s ease-in-out infinite;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); }
@keyframes eyebrowGlow{
  0%,100%{ box-shadow:0 0 6px rgba(79,124,255,.25), inset 0 0 6px rgba(79,124,255,.06); border-color:rgba(79,124,255,.35); }
  50%{ box-shadow:0 0 22px rgba(79,124,255,.6), inset 0 0 14px rgba(79,124,255,.18); border-color:rgba(79,124,255,.7); }
}
h1{
  font-family:'Space Grotesk'; font-weight:700;
  font-size:clamp(36px,5.2vw,64px); line-height:1.06; letter-spacing:-1px; margin-bottom:22px;
}
.grad{
  background:linear-gradient(135deg, var(--blue), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ color:var(--muted); font-size:17px; line-height:1.6; max-width:520px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px; }
.stat-row{ display:flex; gap:40px; flex-wrap:wrap; }
.stat{ font-family:'JetBrains Mono'; }
.stat b{ display:block; font-size:26px; color:var(--text); }
.stat span{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* grid version of .stat-row -- used where stats need to line up in true
   columns/rows (e.g. a "Results" section) instead of flex-wrap, which
   centers each row independently and lets numbers drift out of alignment
   once there's more than one row. */
.results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 24px; max-width:760px; margin:0 auto; }
/* centers a trailing item that doesn't fill a full row (e.g. 7 stats in a
   3-column grid) under the middle column, without an inline grid-column
   that would fight the mobile override below. */
.results-grid .stat:last-child:nth-child(3n+1){ grid-column:2; }
@media(max-width:560px){
  .results-grid{ grid-template-columns:1fr; }
  .results-grid .stat:last-child:nth-child(3n+1){ grid-column:1; }
}

/* ---------- SECTION / PAGE HERO (sub-pages) ---------- */
section{ padding:80px 6vw; position:relative; }
.sec-head{ max-width:560px; margin:0 auto 44px; text-align:center; }
.sec-eyebrow{ font-family:'JetBrains Mono'; font-size:12px; color:var(--violet); letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
.sec-head h2{ font-family:'Space Grotesk'; font-size:clamp(26px,3.4vw,40px); font-weight:600; }
.sec-head p{ color:var(--muted); margin-top:14px; font-size:15px; }

/* ---------- ABOUT ---------- */
.about-grid{
  max-width:940px; margin:0 auto; display:grid;
  grid-template-columns:240px 1fr; gap:52px; align-items:center;
}
@media(max-width:700px){ .about-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.about-photo-wrap{ position:relative; width:100%; max-width:240px; aspect-ratio:3/4; margin:0 auto; }
.about-photo-glow{
  position:absolute; inset:-20px; z-index:0; border-radius:26px;
  background:
    radial-gradient(circle at 30% 25%, rgba(79,124,255,.4), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(139,92,246,.35), transparent 55%);
  filter:blur(30px); animation:bob 6s ease-in-out infinite;
}
.about-photo{
  position:relative; z-index:2; width:100%; height:100%; overflow:hidden;
  border-radius:22px; border:1px solid var(--border);
  box-shadow:0 25px 55px -18px rgba(0,0,0,.65);
}
.about-photo::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:linear-gradient(135deg, var(--blue), var(--violet));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.85; pointer-events:none;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-copy p{ color:var(--muted); font-size:15px; line-height:1.75; margin-bottom:18px; text-align:left; }
.about-copy p:last-child{ margin-bottom:0; }
@media(max-width:700px){ .about-copy p{ text-align:center; } }
.about-copy p.about-quickfact{ font-family:'JetBrains Mono'; font-size:12.5px; color:var(--muted); margin-top:-4px; margin-bottom:22px; }
.about-copy p.about-cta-line{ font-family:'Space Grotesk'; font-size:16.5px; font-weight:600; color:var(--text); margin-bottom:18px; }
.about-actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media(max-width:700px){ .about-actions{ justify-content:center; } }

.page-hero{
  position:relative; padding:130px 6vw 56px; overflow:hidden; border-bottom:1px solid var(--border);
}
#ambient-canvas{ position:absolute; inset:0; z-index:0; opacity:.7; }
.page-hero-inner{ position:relative; z-index:2; max-width:820px; }
.breadcrumb{ font-family:'JetBrains Mono'; font-size:12px; color:var(--muted); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--text); }
.page-hero h1{ font-size:clamp(30px,4.6vw,52px); margin-bottom:16px; }
.page-hero .tagline{ color:var(--muted); font-size:16.5px; max-width:640px; line-height:1.6; margin-bottom:26px; }
.meta-row{ display:flex; gap:28px; flex-wrap:wrap; margin-top:10px; }
.meta-item{ font-family:'JetBrains Mono'; font-size:12px; }
.meta-item b{ display:block; color:var(--text); font-size:14px; margin-bottom:2px; }
.meta-item span{ color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- GRIDS / CARDS ---------- */
#services{ overflow:hidden; }
.services-glow{
  position:absolute; inset:-40px; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(79,124,255,.18), transparent 55%),
    radial-gradient(circle at 82% 60%, rgba(185,131,255,.14), transparent 55%);
  filter:blur(60px);
  /* fades the glow in from the top instead of letting overflow:hidden
     clip the blur into a hard edge right at the section boundary */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 180px);
  mask-image:linear-gradient(to bottom, transparent, #000 180px);
}
/* .services-glow is position:absolute with z-index:0, which per CSS
   stacking rules sits ABOVE plain in-flow content -- .sec-head needs its
   own stacking context to stay above the glow, not under it. */
#services .sec-head{ position:relative; z-index:1; }
.grid{
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px;
}
.card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:28px 24px; transform-style:preserve-3d; transition:border-color .3s ease, background .3s ease, box-shadow .35s ease;
  will-change:transform; --mx:50%; --my:50%;
}
.card:hover{
  border-color:rgba(79,124,255,.45); background:rgba(255,255,255,.06);
  box-shadow:0 20px 50px -20px rgba(79,124,255,.45), 0 0 0 1px rgba(185,131,255,.12);
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my), rgba(79,124,255,.28), rgba(185,131,255,.14) 45%, transparent 72%);
  opacity:0; transition:opacity .35s ease;
}
.card:hover::before{ opacity:1; }
.card .icon{
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(79,124,255,.25), rgba(185,131,255,.25));
  font-size:20px; margin-bottom:18px; transform:translateZ(30px);
}
.card h3{ font-family:'Space Grotesk'; font-size:17px; margin-bottom:8px; transform:translateZ(20px); }
.card p{ font-size:13.5px; color:var(--muted); line-height:1.55; transform:translateZ(15px); }

/* project cards (used on home preview + projects.html grid) */
.proj-grid{
  max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;
}
.project-card{
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; transform-style:preserve-3d; transition:border-color .3s ease;
  will-change:transform; display:block;
}
.project-card::after{
  /* thin edge accent, not a solid neon bar -- fades at both ends and
     stays low-opacity at rest so it reads as a refined highlight rather
     than a lit-up strip. translateZ keeps it above the thumb/pc-body
     (20px/15px) in the card's own 3D tilt context. */
  content:''; position:absolute; top:0; right:0; bottom:0; width:2px; z-index:2;
  transform:translateZ(30px); pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(79,124,255,.85) 25%, rgba(185,131,255,.85) 75%, transparent);
  box-shadow:0 0 8px 1px rgba(120,110,255,.3);
  opacity:.4; transition:opacity .35s ease, box-shadow .35s ease;
}
.project-card:hover{ border-color:rgba(185,131,255,.4); }
.project-card:hover::after{
  opacity:.85;
  box-shadow:0 0 12px 2px rgba(120,110,255,.45);
}
/* Browser-chrome thumbnail mockup -- same visual language as .mockup on the
   home page (traffic-light bar + dot-grid "screen"), scaled down for the
   project grid so every card reads as a designed device frame instead of a
   raw cropped screenshot, whether or not a real image exists yet. */
.project-thumb{
  height:168px; position:relative; overflow:hidden;
  background:linear-gradient(155deg,#141a2b,#0c0f18);
  transform:translateZ(20px);
}
.pt-bar{ position:relative; z-index:2; display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; background:rgba(10,13,20,.55); border-bottom:1px solid var(--border); }
.pt-bar span{ width:6px; height:6px; border-radius:50%; background:#2b3350; }
.pt-bar small{ margin-left:6px; font-family:'JetBrains Mono'; font-size:9px; letter-spacing:.3px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-screen{ position:relative; height:calc(100% - 26px); overflow:hidden; background-color:#0e1220; }
.pt-screen::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:18px 18px;
}
.pt-screen.pt-blue{ background-image:radial-gradient(circle at 24% 18%, rgba(79,124,255,.35), transparent 55%), radial-gradient(circle at 82% 85%, rgba(79,124,255,.16), transparent 50%); }
.pt-screen.pt-violet{ background-image:radial-gradient(circle at 24% 18%, rgba(185,131,255,.32), transparent 55%), radial-gradient(circle at 82% 85%, rgba(185,131,255,.16), transparent 50%); }
.pt-screen.pt-amber{ background-image:radial-gradient(circle at 24% 18%, rgba(255,180,84,.3), transparent 55%), radial-gradient(circle at 82% 85%, rgba(255,180,84,.15), transparent 50%); }
.pt-screen img{
  position:absolute; inset:11px; width:calc(100% - 22px); height:calc(100% - 22px);
  object-fit:cover; object-position:top; border-radius:6px;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  transition:transform .35s ease;
}
.project-card:hover .pt-screen img{ transform:scale(1.045); }
.pt-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; opacity:.55; filter:grayscale(.15); }
.project-thumb .pt-tag{
  position:absolute; bottom:10px; left:14px; z-index:3; font-family:'JetBrains Mono'; font-size:10.5px;
  background:rgba(10,13,20,.75); padding:4px 10px; border-radius:100px; color:var(--text);
}
.project-card .pc-body{ padding:20px 22px; transform:translateZ(15px); }
.project-card h4{ font-family:'Space Grotesk'; font-size:16px; margin-bottom:6px; }
.project-card p{ font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.project-card .pc-link{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--blue); }

/* ---------- FEATURED (home projects preview) ---------- */
.featured{
  max-width:1100px; margin:0 auto 60px;
  display:grid; grid-template-columns:1.3fr 1fr; gap:50px; align-items:center;
}
@media(max-width:850px){ .featured{ grid-template-columns:1fr; } }
.mockup-wrap{ position:relative; perspective:1200px; }
.mockup{
  background:linear-gradient(155deg,#141a2b,#0c0f18);
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  transform-style:preserve-3d; transition:transform .15s ease;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.mockup-bar{ display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid var(--border); }
.mockup-bar span{ width:9px; height:9px; border-radius:50%; background:#2b3350; }
.mockup-screen{
  height:260px;
  background:
    radial-gradient(circle at 20% 20%, rgba(79,124,255,.25), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(185,131,255,.22), transparent 45%),
    #0e1220;
  position:relative;
}
.mockup-screen::before{
  content:''; position:absolute; inset:20px;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:24px 24px; border-radius:8px;
}
/* floats a real screenshot inside the mockup frame, same "framed device
   screen" language as .pt-screen img on the project grid cards, just
   scaled up for this larger hero mockup. Sits above ::before's dot-grid
   via z-index since it's a plain in-flow child otherwise stacked under
   any position:absolute sibling. */
.mockup-screen img{
  position:absolute; inset:16px; z-index:1;
  width:calc(100% - 32px); height:calc(100% - 32px);
  object-fit:cover; object-position:top; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 40px -16px rgba(0,0,0,.55);
}
.float-tag{
  position:absolute; z-index:3; font-family:'JetBrains Mono'; font-size:11px;
  background:rgba(10,13,20,.85); border:1px solid var(--border);
  padding:6px 12px; border-radius:100px; color:var(--text);
  animation:bob 4.5s ease-in-out infinite; backdrop-filter:blur(6px);
}
.float-tag.t1{ top:6px; left:20px; animation-delay:0s; color:var(--blue); }
.float-tag.t2{ top:34%; right:6px; animation-delay:1.2s; color:var(--violet); }
.float-tag.t3{ bottom:6px; left:16px; animation-delay:2.1s; color:var(--amber); }
.float-tag.t4{ top:6px; right:20px; animation-delay:0.7s; color:#4ade80; }
.float-tag.t5{ bottom:6px; right:16px; animation-delay:1.6s; color:var(--blue); }
.float-tag.t6{ top:62%; left:6px; animation-delay:2.8s; color:var(--violet); }
.float-tag.t7{ bottom:6px; left:42%; animation-delay:3.6s; color:var(--amber); }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.featured-copy h3{ font-family:'Space Grotesk'; font-size:24px; margin-bottom:12px; }
.featured-copy p{ color:var(--muted); font-size:14.5px; line-height:1.65; margin-bottom:20px; }
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  font-family:'JetBrains Mono'; font-size:11.5px; padding:5px 11px; border-radius:100px;
  border:1px solid var(--border); color:var(--muted);
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
/* only the case-study hero's tech pills get the hover glow -- pill-row is
   also used on the home page's Featured section and stays untouched there */
body:has(.cs-cols) .pill:hover{ border-color:rgba(79,124,255,.5); color:var(--text); background:rgba(79,124,255,.1); }

/* ---------- VOICE AI / ORB ---------- */
.voice-panel{
  position:relative; overflow:hidden;
  max-width:1100px; margin:0 auto;
  background:linear-gradient(160deg,#10142200,#0c0f18);
  border:1px solid var(--border); border-radius:20px;
  padding:50px 28px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
@media(max-width:850px){ .voice-panel{ grid-template-columns:1fr; padding:32px 18px; } }
.voice-glow{
  position:absolute; inset:-40px; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 22% 30%, rgba(79,124,255,.24), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(185,131,255,.18), transparent 55%);
  filter:blur(50px);
}
/* voice-panel is overflow:hidden, so the glow (position:absolute, inset:-40px)
   stays clipped inside the card's rounded border regardless of viewport width --
   this is what the earlier .contact-glow bug (bleeding past the layout on
   mobile) was missing. */
.voice-panel > div:not(.voice-glow){ position:relative; z-index:1; min-width:0; }
.orb-canvas-el{ width:100%; height:280px; display:block; }
.wave-row{ display:flex; align-items:flex-end; gap:4px; height:36px; margin-top:18px; width:100%; }
.wave-bar{
  flex:1 1 0; min-width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--blue), var(--violet));
  animation:wave 1.1s ease-in-out infinite;
}
@keyframes wave{ 0%,100%{ height:6px; } 50%{ height:32px; } }
.voice-copy h3{ font-family:'Space Grotesk'; font-size:24px; margin-bottom:12px; }
.voice-copy p{ color:var(--muted); font-size:14.5px; line-height:1.65; margin-bottom:26px; }
.flow{ display:flex; align-items:center; gap:0; margin-top:8px; }
.flow-node{
  font-family:'JetBrains Mono'; font-size:11.5px; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  padding:10px 12px; border-radius:10px; flex:1; color:var(--text);
}
.flow-line{ position:relative; flex:.6; height:2px; background:linear-gradient(90deg, var(--blue), var(--violet)); margin:0 6px; overflow:visible; }
.flow-dot{
  position:absolute; top:50%; width:7px; height:7px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 10px var(--amber);
  transform:translateY(-50%); animation:travel 1.8s linear infinite;
}
@keyframes travel{ 0%{ left:0%; } 100%{ left:100%; } }
@media(max-width:560px){
  .flow{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
  .flow-node{ flex:0 0 auto; min-width:110px; }
  .flow-line{ flex:0 0 28px; }
}

/* ---------- TIMELINE (experience) ---------- */
.timeline{ max-width:800px; margin:0 auto; border-left:1px solid var(--border); }
.tl-item{ position:relative; padding:0 0 44px 30px; }
.tl-item::before{
  content:''; position:absolute; left:-5.5px; top:4px; width:10px; height:10px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 4px rgba(79,124,255,.15);
}
.tl-item .tl-date{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--muted); margin-bottom:6px; }
.tl-item h4{ font-family:'Space Grotesk'; font-size:16.5px; margin-bottom:10px; }
.tl-item ul{ display:flex; flex-direction:column; gap:5px; }
.tl-item li{ font-size:13.5px; color:var(--muted); line-height:1.5; padding-left:14px; position:relative; }
.tl-item li::before{ content:'—'; position:absolute; left:0; color:var(--blue); }

/* ---------- SKILLS ---------- */
.marquee{
  position:relative; max-width:1100px; margin:0 auto; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; width:max-content; gap:16px; animation:marquee 52s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }
.logo-card{
  flex:none; width:150px; height:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--border); border-radius:14px; background:var(--surface);
  transition:border-color .3s ease, background .3s ease;
}
.logo-card:hover{ border-color:rgba(79,124,255,.4); background:rgba(255,255,255,.06); }
.logo-card img{ width:26px; height:26px; object-fit:contain; }
.logo-card .logo-emoji{ font-size:22px; line-height:1; }
.logo-card span:last-child{ font-family:'JetBrains Mono'; font-size:11px; color:var(--muted); }
.skill-groups{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
@media(max-width:1100px){ .skill-groups{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){ .skill-groups{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .skill-groups{ grid-template-columns:1fr; } }
.skill-group h4{ font-family:'Space Grotesk'; font-size:14.5px; color:var(--violet); margin-bottom:14px; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud span{
  font-family:'JetBrains Mono'; font-size:11.5px; padding:6px 12px; border-radius:100px;
  border:1px solid var(--border); color:var(--muted); background:var(--surface);
}

/* ---------- CASE STUDY (project pages) ---------- */
/* Ambient backdrop, scoped to case-study pages only (body:has(.cs-cols)).
   Earlier this was a separate masked glow per <section>, faded to transparent
   at each section's own top/bottom edge -- two independent fades meeting at
   a shared boundary always pinches down to flat --bg right at the seam,
   which read as a hard cut between sections. A single fixed backdrop behind
   the whole page has no seams to begin with: it's one continuous layer, so
   there's nothing for adjacent sections to visibly cut against. Fixed
   (not absolute) also means it doesn't need to match document height and
   stays put as content scrolls over it, like a soft vignette.
   Every element between body and its content (.page-hero, section) is
   already position:relative with z-index:auto from earlier rules, which
   is enough to paint above a z-index:0 fixed layer -- only <footer> has no
   position of its own, so it needs one explicitly to stay above the glow. */
body:has(.cs-cols)::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  /* wide ellipses with a 70% falloff (vs. a handful of tight small-radius
     circles) overlap enough to cover the full viewport height with no gap
     band -- a tighter/smaller radius left a visibly flatter, glow-less
     strip around the vertical middle since no single blob's falloff
     reached that far. */
  background:
    radial-gradient(ellipse 60% 50% at 10% 12%, rgba(79,124,255,.15), transparent 70%),
    radial-gradient(ellipse 55% 60% at 92% 50%, rgba(185,131,255,.13), transparent 70%),
    radial-gradient(ellipse 60% 55% at 12% 90%, rgba(79,124,255,.13), transparent 70%);
  filter:blur(90px);
}
body:has(.cs-cols) footer{ position:relative; }

.cs-cols{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:750px){ .cs-cols{ grid-template-columns:1fr; } }
.cs-col{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px;
  transition:border-color .3s ease, transform .3s ease, box-shadow .35s ease;
  --mx:50%; --my:50%;
}
/* cursor-tracked spotlight, same technique as .card::before on the home
   page's Services grid -- --mx/--my are set by the mousemove handler in
   main.js. */
.cs-col::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx) var(--my), rgba(79,124,255,.16), transparent 70%);
  opacity:0; transition:opacity .35s ease;
}
.cs-col:hover{ border-color:rgba(79,124,255,.4); transform:translateY(-3px); box-shadow:0 20px 45px -22px rgba(79,124,255,.35); }
.cs-col:hover::before{ opacity:1; }
.cs-col > *{ position:relative; z-index:1; }
.cs-col .cs-label{ display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:12px; }
.cs-col .cs-label::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; flex:none; }
.cs-col.problem .cs-label{ color:var(--amber); }
.cs-col.approach .cs-label{ color:var(--blue); }
.cs-col.result .cs-label{ color:var(--violet); }
.cs-col p{ font-size:14px; color:var(--text); line-height:1.65; }
.placeholder-note{ font-size:12px; color:var(--muted); font-style:italic; margin-top:10px; }

.feature-list{ max-width:800px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.feature-list li{
  font-size:13.5px; color:var(--muted); background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px; line-height:1.5;
}
.feature-list li b{ color:var(--text); display:block; margin-bottom:3px; font-family:'Space Grotesk'; font-size:13.5px;}

.gallery{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.gallery-item{
  border-radius:14px; overflow:hidden; border:1px solid var(--border);
  transform-style:preserve-3d; transition:transform .15s ease, border-color .3s ease, box-shadow .35s ease; will-change:transform;
}
.gallery-item:hover{ border-color:rgba(79,124,255,.45); box-shadow:0 20px 45px -22px rgba(79,124,255,.4); }
.gallery-item .gi-thumb{
  height:190px; overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(79,124,255,.3), transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(185,131,255,.25), transparent 50%),
    #10141f;
}
.gallery-item .gi-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:top;
  display:block; cursor:zoom-in; transition:transform .35s ease;
}
.gallery-item .gi-thumb{ position:relative; }
.gallery-item .gi-thumb::after{
  content:'⤢ Click to enlarge'; position:absolute; right:10px; bottom:10px; z-index:1;
  font-family:'JetBrains Mono'; font-size:10.5px; color:#fff;
  background:rgba(10,13,20,.75); padding:4px 9px; border-radius:100px;
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.gallery-item:has(img):hover .gi-thumb::after{ opacity:1; transform:translateY(0); }

/* ---------- GALLERY LIGHTBOX ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  background:rgba(5,7,12,.9); backdrop-filter:blur(6px); padding:40px 24px; cursor:zoom-out;
}
.lightbox-overlay.active{ display:flex; }
.lightbox-figure{ max-width:min(1100px, 92vw); max-height:88vh; display:flex; flex-direction:column; gap:12px; cursor:default; }
.lightbox-img-wrap{
  max-width:100%; max-height:78vh; overflow:hidden; border-radius:10px;
  display:flex; align-items:center; justify-content:center; touch-action:none;
}
.lightbox-figure img{
  max-width:100%; max-height:78vh; object-fit:contain; border-radius:10px;
  border:1px solid var(--border); box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
  animation:modalIn .25s ease; display:block; cursor:zoom-in;
  /* scale grows/shrinks from center in place -- no scroll-position jump.
     panning (translate) is driven directly by pointer events in JS, so its
     transition is switched off while dragging for 1:1 responsiveness. */
  transition:transform .3s ease; transform-origin:center center;
}
.lightbox-img-wrap.zoomed img{ cursor:grab; }
.lightbox-img-wrap.zoomed img.dragging{ cursor:grabbing; transition:none; }
.lightbox-caption{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:'JetBrains Mono'; font-size:12px; color:var(--muted);
}
.lightbox-counter:not(:empty)::before{ content:'·'; margin-right:8px; opacity:.6; }
.lightbox-close{
  position:fixed; top:20px; right:24px; z-index:401; background:none; border:none;
  color:#fff; font-size:32px; line-height:1; cursor:pointer; padding:6px 10px;
}
.lightbox-close:hover{ color:var(--blue); }
.lightbox-zoom{
  position:fixed; top:24px; right:76px; z-index:401; cursor:pointer;
  background:rgba(15,19,30,.65); border:1px solid var(--border); color:#fff;
  font-family:'JetBrains Mono'; font-size:12px; padding:8px 14px; border-radius:100px;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox-zoom:hover{ background:rgba(79,124,255,.3); border-color:rgba(79,124,255,.5); }
@media(max-width:640px){
  .lightbox-zoom{ top:auto; bottom:16px; left:50%; right:auto; transform:translateX(-50%); font-size:11px; padding:7px 12px; }
}
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%); z-index:401; cursor:pointer;
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(15,19,30,.65); border:1px solid var(--border); color:#fff; font-size:24px; line-height:1;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox-nav:hover{ background:rgba(79,124,255,.3); border-color:rgba(79,124,255,.5); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
@media(max-width:640px){
  .lightbox-nav{ width:40px; height:40px; font-size:19px; }
  .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; }
}
.gallery-item:hover .gi-thumb img{ transform:scale(1.04); }
.gallery-item .gi-label{ padding:12px 16px; font-family:'JetBrains Mono'; font-size:11.5px; color:var(--muted); border-top:1px solid var(--border); }

.cta-band{
  position:relative; overflow:hidden;
  max-width:1100px; margin:0 auto; text-align:center;
  background:linear-gradient(135deg, rgba(79,124,255,.14), rgba(185,131,255,.12));
  border:1px solid var(--border); border-radius:20px; padding:60px 30px;
}
.cta-band::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:2px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--blue), var(--violet), transparent);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h3{ font-family:'Space Grotesk'; font-size:26px; margin-bottom:12px; }
.cta-band p{ color:var(--muted); margin-bottom:24px; }

/* ---------- CAPABILITY ACCORDION ---------- */
.cap-list{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.cap-item{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  transition:border-color .25s ease, box-shadow .3s ease;
  --mx:50%; --my:50%;
}
.cap-item::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(185,131,255,.14), transparent 70%);
  opacity:0; transition:opacity .35s ease;
}
.cap-item:hover::before{ opacity:1; }
.cap-item summary, .cap-item .cap-body{ position:relative; z-index:1; }
.cap-item summary{
  cursor:pointer; list-style:none; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:'Space Grotesk'; font-weight:600; font-size:14.5px; color:var(--text);
}
.cap-item summary::-webkit-details-marker{ display:none; }
.cap-item summary::after{ content:'+'; flex:none; color:var(--blue); font-size:20px; font-weight:400; transition:transform .2s ease, text-shadow .2s ease; }
.cap-item[open] summary::after{ transform:rotate(45deg); }
.cap-item[open] summary{ border-bottom:1px solid var(--border); }
.cap-item:hover{ border-color:rgba(79,124,255,.35); box-shadow:0 16px 40px -24px rgba(79,124,255,.35); }
.cap-item:hover summary::after, .cap-item[open] summary::after{ text-shadow:0 0 10px rgba(79,124,255,.65); }
.cap-body{ padding:16px 22px 20px; }
.cap-body ul{ display:flex; flex-direction:column; gap:7px; }
.cap-body li{ font-size:13.5px; color:var(--muted); line-height:1.55; padding-left:16px; position:relative; }
.cap-body li::before{ content:'—'; position:absolute; left:0; color:var(--blue); }

/* ---------- VERTICAL WORKFLOW STEPS ---------- */
.workflow-steps{ max-width:560px; margin:0 auto; }
.wf-step{ position:relative; display:flex; gap:18px; padding-bottom:26px; }
.wf-step:last-child{ padding-bottom:0; }
.wf-step:not(:last-child)::before{ content:''; position:absolute; left:15px; top:34px; bottom:-2px; width:1px; background:var(--border); }
.wf-num{
  flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--blue), var(--violet)); color:#fff; font-family:'JetBrains Mono'; font-size:12.5px; font-weight:600;
}
.wf-text{ padding-top:6px; font-size:14px; color:var(--text); line-height:1.5; }

/* ---------- PULL QUOTE ---------- */
.pull-quote{
  max-width:760px; margin:0 auto; padding:26px 30px; border-left:3px solid var(--blue);
  background:var(--surface); border-radius:0 14px 14px 0;
  font-size:15.5px; line-height:1.7; color:var(--text); font-style:italic;
}

/* ---------- CONTACT ---------- */
#contact{ overflow:hidden; }
/* glow is now a direct child of #contact (not .contact-layout), sized to
   the whole section via inset -- covers everything from the "Contact"
   eyebrow down to just above the footer. */
.contact-glow{
  position:absolute; inset:-40px; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 15% 12%, rgba(79,124,255,.16), transparent 55%),
    radial-gradient(circle at 85% 45%, rgba(185,131,255,.13), transparent 55%),
    radial-gradient(circle at 20% 82%, rgba(79,124,255,.13), transparent 55%);
  filter:blur(50px);
  /* fade top and bottom instead of letting #contact's overflow:hidden
     clip the blur into a hard edge -- same fix as .services-glow */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 140px), transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 140px), transparent);
}
#contact .sec-head{ position:relative; z-index:1; }
.contact-layout{ position:relative; z-index:1; max-width:1000px; margin:0 auto; display:grid; grid-template-columns:260px 1fr; gap:50px; align-items:start; }
@media(max-width:800px){ .contact-layout{ grid-template-columns:1fr; } }
.contact-info{ position:relative; z-index:2; display:flex; flex-direction:column; gap:14px; }
.ci-item{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px;
  transition:border-color .25s ease, transform .25s ease;
}
.ci-item:hover{ border-color:rgba(79,124,255,.4); transform:translateY(-2px); }
.ci-icon{
  flex:none; width:38px; height:38px; border-radius:10px; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(79,124,255,.25), rgba(185,131,255,.25));
  box-shadow:0 0 18px -4px rgba(79,124,255,.5);
}
.ci-item .ci-label{ display:block; font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px; }
.ci-item b{ font-family:'Space Grotesk'; font-size:14px; font-weight:600; color:var(--text); }
.ci-note{
  display:flex; align-items:center; gap:8px; margin-top:4px; padding:0 4px;
  font-family:'JetBrains Mono'; font-size:11.5px; color:var(--muted);
}
.ci-note-dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:blink 1.6s ease-in-out infinite; flex:none; }
.contact-form{
  position:relative; z-index:2; overflow:hidden;
  background:rgba(15,19,30,.55); backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:20px; padding:34px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.6);
}
.contact-form::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--violet));
}
.form-trust{ text-align:center; margin-top:16px; font-size:12px; color:var(--muted); }
.form-status{ font-size:12.5px; margin-top:12px; min-height:16px; text-align:center; }
.form-status.success{ color:#4ade80; }
.form-status.error{ color:#ff8080; }

/* ---------- CONFIRMATION MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(5,7,12,.75); backdrop-filter:blur(6px); padding:24px;
}
.modal-overlay.active{ display:flex; }
.modal-box{
  position:relative; overflow:hidden; max-width:420px; width:100%; text-align:center;
  background:rgba(15,19,30,.97); border:1px solid var(--border); border-radius:20px; padding:38px 30px 32px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
  animation:modalIn .3s ease;
}
.modal-box::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--violet));
}
.modal-close{
  position:absolute; top:14px; right:14px; background:none; border:none;
  color:var(--muted); font-size:22px; line-height:1; cursor:pointer; padding:4px 8px;
  border-radius:8px; transition:color .2s ease, background .2s ease;
}
.modal-close:hover{ color:var(--text); background:rgba(255,255,255,.06); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.modal-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:linear-gradient(135deg, rgba(74,222,128,.25), rgba(79,124,255,.2));
  box-shadow:0 0 24px -4px rgba(74,222,128,.5);
}
.modal-box h3{ font-family:'Space Grotesk'; font-size:22px; margin-bottom:10px; }
.modal-box p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-bottom:26px; }
.modal-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:520px){ .form-grid{ grid-template-columns:1fr; } }
.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-row label{ font-family:'JetBrains Mono'; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.form-row input, .form-row select, .form-row textarea{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; color:var(--text); font-family:'Inter'; font-size:14px;
}
.form-row select, .form-row input[type="date"], .form-row input[type="time"]{ color-scheme:dark; }
.form-row select option{ background:#12151f; color:var(--text); }
.form-row textarea{ resize:vertical; min-height:110px; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--blue); }
.form-row-checkbox{ flex-direction:row; align-items:flex-start; gap:10px; }
.form-row-checkbox .plain-checkbox{
  width:16px; height:16px; margin-top:3px; flex:none; accent-color:var(--blue);
  background:none; border:none; padding:0;
}
.form-row-checkbox .checkbox-label{ font-family:'Inter'; font-size:13px; color:var(--muted); text-transform:none; letter-spacing:normal; line-height:1.6; }
.checkbox-label a{ color:var(--blue); text-decoration:underline; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip-input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.chip-label{
  display:inline-flex; align-items:center; cursor:pointer; user-select:none;
  font-family:'JetBrains Mono'; font-size:12px; padding:9px 15px; border-radius:100px;
  border:1px solid var(--border); color:var(--muted); background:var(--surface);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.chip-input:checked + .chip-label{
  border-color:rgba(79,124,255,.6); color:var(--text);
  background:linear-gradient(135deg, rgba(79,124,255,.22), rgba(185,131,255,.22));
}
.chip-input:focus-visible + .chip-label{ outline:2px solid var(--blue); outline-offset:2px; }

/* ---------- PROJECT COMMENTS ---------- */
.comments-wrap{ max-width:760px; margin:0 auto; }
.comment-form{
  position:relative; overflow:hidden;
  background:rgba(15,19,30,.55); backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:20px; padding:30px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.6);
}
.comment-form::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--violet));
}
.comment-status{ font-size:12.5px; margin-top:10px; min-height:16px; }
.comment-status.success{ color:#4ade80; }
.comment-status.error{ color:#ff8080; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.comment-list{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.comment-item{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px 18px 22px;
  transition:border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .35s ease;
  --mx:50%; --my:50%;
}
.comment-item::before{
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px; z-index:2;
  background:linear-gradient(180deg, var(--blue), var(--violet));
}
/* spotlight glow uses ::after since ::before is already the left accent bar */
.comment-item::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(79,124,255,.1), transparent 70%);
  opacity:0; transition:opacity .35s ease;
}
.comment-item:hover{ border-color:rgba(79,124,255,.4); background:rgba(255,255,255,.055); transform:translateY(-2px); box-shadow:0 14px 34px -22px rgba(79,124,255,.3); }
.comment-item:hover::after{ opacity:1; }
.comment-item-top, .comment-item-text{ position:relative; z-index:1; }
.comment-item-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.comment-avatar{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow:0 0 16px -3px rgba(79,124,255,.55);
}
.comment-item-meta{ display:flex; flex-direction:column; gap:1px; }
.comment-item-name{ font-family:'Space Grotesk'; font-weight:600; font-size:14.5px; color:var(--text); }
.comment-item-date{ font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted); }
.comment-item-text{ font-size:14px; color:var(--text); line-height:1.7; white-space:pre-wrap; padding-left:50px; }
.comment-empty{ text-align:center; color:var(--muted); font-size:13.5px; padding:24px 0; }

/* ---------- CHAT WIDGET ---------- */
.chat-widget-root{ position:fixed; z-index:300; right:22px; bottom:22px; }
.chat-widget-fab{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:linear-gradient(135deg, var(--blue), var(--violet)); color:#fff;
  box-shadow:0 10px 30px -8px rgba(79,124,255,.65);
  transition:transform .2s ease, box-shadow .2s ease;
}
.chat-widget-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(79,124,255,.8); }
.chat-widget-fab.pulse{ animation:chatPulse 1.8s ease-in-out 3; }
@keyframes chatPulse{
  0%,100%{ box-shadow:0 10px 30px -8px rgba(79,124,255,.65); }
  50%{ box-shadow:0 10px 30px -8px rgba(79,124,255,.65), 0 0 0 10px rgba(79,124,255,.18); }
}
.chat-widget-panel{
  position:absolute; right:0; bottom:72px; width:340px; max-width:calc(100vw - 44px);
  display:flex; flex-direction:column; max-height:min(70vh, 560px);
  background:rgba(15,19,30,.97); backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65);
  opacity:0; transform:translateY(14px) scale(.96); pointer-events:none;
  transform-origin:bottom right;
  transition:opacity .22s ease, transform .22s ease;
}
.chat-widget-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.chat-widget-header{
  position:relative; overflow:hidden; flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border);
}
.chat-widget-header::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--blue), var(--violet));
}
.chat-widget-title{ font-family:'Space Grotesk'; font-weight:600; font-size:14.5px; }
.chat-widget-status{
  display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:9px;
  background:var(--muted);
}
.chat-widget-status.online{ background:#4ade80; box-shadow:0 0 8px #4ade80; animation:blink 1.6s ease-in-out infinite; }
.chat-widget-status.offline{ background:#8791a8; }
.chat-widget-close{
  background:none; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; padding:4px 6px;
}
.chat-widget-close:hover{ color:var(--text); }
.chat-widget-thread{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
.chat-bubble{
  max-width:88%; padding:13px 16px; border-radius:14px; font-size:13.5px; line-height:1.65;
  animation:chatBubbleIn .25s ease both;
}
@keyframes chatBubbleIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.chat-bubble.bot{ align-self:flex-start; background:var(--surface); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px; }
.chat-bubble.user{ align-self:flex-end; background:linear-gradient(135deg, rgba(79,124,255,.28), rgba(185,131,255,.28)); border:1px solid rgba(79,124,255,.4); color:var(--text); border-bottom-right-radius:4px; }
.chat-bubble.error{ border-color:rgba(255,128,128,.4); color:#ff8080; }
.chat-bubble.form-bubble{ width:100%; max-width:100%; background:var(--surface); border:1px solid var(--border); padding:14px; }
.chat-bubble-text{ white-space:pre-wrap; word-break:break-word; }
.chat-bubble-time{ font-size:10px; color:var(--muted); margin-top:4px; }
.chat-bubble.bot .chat-bubble-time{ text-align:left; }
.chat-bubble.user .chat-bubble-time{ text-align:right; color:rgba(255,255,255,.55); }
.chat-widget-composer{
  display:none; gap:8px; flex:none; padding:12px 14px;
  border-top:1px solid var(--border);
}
.chat-widget-composer.visible{ display:flex; }
.chat-widget-composer input{
  flex:1; min-width:0; padding:9px 12px; font-size:13px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
}
.chat-widget-composer input:focus{ outline:none; border-color:rgba(79,124,255,.5); }
.chat-widget-composer button{
  flex:none; border:none; cursor:pointer; padding:0 16px; font-size:13px; font-weight:600;
  border-radius:10px; color:#fff; background:linear-gradient(135deg, var(--blue), var(--violet));
  transition:opacity .2s ease;
}
.chat-widget-composer button:disabled{ opacity:.5; cursor:default; }
.chat-intake-form .form-row{ margin-bottom:10px; gap:3px; }
.chat-intake-form .form-row label{ font-size:9.5px; margin-bottom:0; }
.chat-intake-form input, .chat-intake-form textarea, .chat-intake-form select{ padding:8px 10px; font-size:13px; }
.chat-intake-form textarea{ min-height:48px; }
.chat-send-btn{ width:100%; border:none; cursor:pointer; padding:9px; font-size:13px; margin-top:2px; }
.chat-form-error{ color:#ff8080; font-size:11px; margin-top:6px; min-height:0; }
.chat-bubble.typing{ display:flex; gap:4px; align-items:center; padding:12px 14px; }
.chat-bubble.typing span{
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:chatTyping 1s ease-in-out infinite;
}
.chat-bubble.typing span:nth-child(2){ animation-delay:.15s; }
.chat-bubble.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chatTyping{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
@media(max-width:480px){
  .chat-widget-root{ right:14px; bottom:14px; }
  .chat-widget-panel{ width:calc(100vw - 28px); max-height:min(75vh, 520px); }
}

footer{ text-align:center; padding:20px; color:var(--muted); font-size:13px; border-top:1px solid var(--border); }
footer a{ color:var(--muted); }
footer a:hover{ color:var(--text); }
@media(max-width:480px){ footer{ padding-bottom:110px; } }