*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ── Surfaces ── */
  --bg:         #0D1117;
  --bg2:        #111820;
  --card:       #151D28;
  --card2:      #1B2535;

  /* ── Text ── */
  --white:      #F2F6FF;
  --white2:     #C4CED8;
  --muted:      #7A8EA8;
  --muted2:     #4E6070;

  /* ── Borders ── */
  --border:     rgba(90,130,180,0.12);
  --border2:    rgba(90,130,180,0.22);

  /* ── Cyan accent ── */
  --cyan:       #0DF5FF;
  --cyan-dim:   rgba(13,245,255,0.06);
  --cyan-glow:  rgba(13,245,255,0.14);

  /* ── Violet accent ── */
  --violet:     #9B6EFF;
  --violet-dim: rgba(155,110,255,0.06);

  /* ── Green (availability) ── */
  --green:      #1EE8A0;

  /* ── Gradients ── */
  --grad:       linear-gradient(135deg,#0DF5FF 0%,#9B6EFF 100%);
  --grad-text:  linear-gradient(135deg,#0DF5FF 0%,#B48EFF 100%);
  --grad-glow:  linear-gradient(135deg,rgba(13,245,255,0.1) 0%,rgba(155,110,255,0.1) 100%);

  /* ── Easing ── */
  --spring:     cubic-bezier(0.16,1,0.3,1);
  --ease-out:   cubic-bezier(0,0,0.2,1);
  --shadow-soft: 0 20px 70px rgba(0,0,0,0.34);
  --shadow-glow: 0 18px 60px rgba(13,245,255,0.18);

  /* Glass surfaces */
  --glass:       rgba(21,29,40,0.66);
  --glass-strong:rgba(21,29,40,0.78);
  --glass-soft:  rgba(255,255,255,0.045);
  --glass-border:rgba(174,208,255,0.2);
  --glass-shadow:0 20px 56px rgba(0,0,0,0.32);
}

html { scroll-behavior:auto }
body {
  background:
    radial-gradient(circle at 18% 12%, rgba(13,245,255,0.08), transparent 28rem),
    radial-gradient(circle at 88% 20%, rgba(155,110,255,0.09), transparent 30rem),
    linear-gradient(180deg, #0d1117 0%, #0f151d 42%, #0d1117 100%);
  color:var(--white);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

section[id] { scroll-margin-top:76px }

::selection { background:rgba(13,245,255,0.25); color:var(--white) }
a, button { -webkit-tap-highlight-color:transparent }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:2px solid rgba(13,245,255,0.72);
  outline-offset:3px;
}
.skip-link {
  position:fixed; top:10px; left:10px; z-index:1000;
  padding:10px 14px; background:var(--white); color:var(--bg);
  border-radius:6px; text-decoration:none; font-weight:700;
  transform:translateY(-160%);
}
.skip-link:focus { transform:translateY(0) }

::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--grad); border-radius:2px }

/* ═══════════════════════════════════
   GLOBAL ANIMATION KEYFRAMES
═══════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px) }
  to   { opacity:1; transform:none }
}
@keyframes fadeInScale {
  from { opacity:0; transform:scale(0.93) translateY(18px) }
  to   { opacity:1; transform:none }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(28px) }
  to   { opacity:1; transform:none }
}
@keyframes glowPulse {
  0%,100% { opacity:0.55 }
  50%     { opacity:1 }
}
@keyframes ping {
  0%   { transform:scale(0.5); opacity:1 }
  100% { transform:scale(2.8); opacity:0 }
}
@keyframes blink {
  0%,100% { opacity:1 }
  50%     { opacity:0 }
}
@keyframes bounce {
  0%,100% { transform:translateY(0);   opacity:0.4 }
  50%     { transform:translateY(7px); opacity:0.9 }
}
@keyframes mLeft  { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes mRight { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
@keyframes avatarGlow {
  0%,100% { box-shadow:0 0 0 3px rgba(13,245,255,0.15), 0 6px 20px rgba(13,245,255,0.25) }
  50%     { box-shadow:0 0 0 5px rgba(13,245,255,0.3),  0 8px 28px rgba(13,245,255,0.45) }
}
@keyframes spin {
  to { transform:rotate(360deg) }
}

/* ═══════════════════════════════════
   SCROLL PROGRESS BAR
═══════════════════════════════════ */
#prog {
  position:fixed; top:0; left:0; height:2px; width:0; z-index:999;
  background:var(--grad);
  box-shadow:0 0 10px rgba(13,245,255,0.7);
  transition:width 0.08s linear;
}

/* ═══════════════════════════════════
   NAV
═══════════════════════════════════ */
nav {
  position:fixed; top:2px; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; height:66px;
  background:rgba(13,17,23,0.82);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
  transition:height .25s var(--spring), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
nav.scrolled {
  height:60px;
  background:rgba(13,17,23,0.93);
  box-shadow:0 10px 35px rgba(0,0,0,0.26);
}
.nav-logo {
  font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800;
  text-decoration:none; letter-spacing:-0.01em;
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-links { display:flex; list-style:none; gap:2px }
.nav-links a {
  font-size:0.875rem; font-weight:500; color:var(--muted);
  text-decoration:none; padding:0.45rem 0.95rem; border-radius:7px;
  transition:color .2s var(--ease-out), background .2s var(--ease-out), transform .2s var(--spring);
}
.nav-links a:hover, .nav-links a.active { color:var(--white); background:rgba(255,255,255,0.06) }
.nav-links a:hover { transform:translateY(-1px) }
.nav-cta {
  background:var(--grad); color:#fff; border:none; cursor:pointer;
  padding:0.55rem 1.4rem; border-radius:12px;
  font-size:0.875rem; font-weight:600; text-decoration:none;
  box-shadow:0 4px 18px rgba(13,245,255,0.22);
  transition:opacity .2s, transform .2s var(--spring), box-shadow .2s;
}
.nav-cta:hover { opacity:0.85; transform:translateY(-2px); box-shadow:0 8px 26px rgba(13,245,255,0.38) }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px }
.hamburger span { width:22px; height:2px; background:var(--white); display:block; border-radius:2px; transition:all .3s }

/* ═══════════════════════════════════
   FLOATING HIRE BUTTON
═══════════════════════════════════ */
.float-hire {
  position:fixed; bottom:28px; right:28px; z-index:150;
  background:var(--grad); color:#fff;
  padding:0.75rem 1.4rem; border-radius:50px;
  font-family:'DM Mono',monospace; font-size:0.72rem; font-weight:500;
  letter-spacing:0.06em; text-decoration:none;
  box-shadow:var(--shadow-glow);
  display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateY(16px);
  transition:opacity .4s var(--spring), transform .4s var(--spring), box-shadow .2s;
  pointer-events:none;
}
.float-hire.show { opacity:1; transform:translateY(0); pointer-events:all }
.float-hire:hover { box-shadow:0 12px 36px rgba(13,245,255,0.45); transform:translateY(-3px) }
.fh-dot {
  width:7px; height:7px; background:var(--green); border-radius:50%;
  box-shadow:0 0 6px var(--green);
  position:relative;
}
.fh-dot::after {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:rgba(30,232,160,0.4);
  animation:ping 2s ease-out infinite;
}

/* ═══════════════════════════════════
   HERO  ← complete rewrite
═══════════════════════════════════ */
#home {
  min-height:100vh; display:flex; flex-direction:column;
  padding-top:68px; position:relative; z-index:1; overflow:hidden;
}

/* Very subtle grid — doesn't compete with text */
#home::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(13,245,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,245,255,0.028) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 100%);
}

/* Bottom fade into next section */
#home::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:120px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg));
  z-index:2;
}

/* ── Main hero body ── */
.hero-main {
  flex:1; display:flex; align-items:center;
  padding:56px 5% 42px; gap:5rem;
  max-width:1320px; margin:0 auto; width:100%;
}
.hero-left  { flex:1.18; position:relative; z-index:1 }
.hero-right { flex:0.92; display:flex; justify-content:flex-end; position:relative; z-index:1 }
.hero-right::before {
  content:''; position:absolute; width:82%; aspect-ratio:1;
  top:50%; left:52%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(13,245,255,0.16),rgba(155,110,255,0.08) 42%,transparent 70%);
  filter:blur(28px); pointer-events:none;
}

/* ── Badge ── */
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  position:relative; isolation:isolate; overflow:hidden;
  padding:8px 16px; margin-bottom:1.6rem;
  background:rgba(18,27,37,0.68);
  border:1px solid rgba(30,232,160,0.3);
  border-radius:100px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.28),
    0 0 24px rgba(30,232,160,0.07);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
}
.hero-badge::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,rgba(30,232,160,0.1),transparent 48%);
  pointer-events:none;
}
.hero-badge::after {
  content:none;
}
.badge-dot {
  width:8px; height:8px; background:var(--green); border-radius:50%;
  box-shadow:0 0 0 3px rgba(30,232,160,0.1),0 0 8px var(--green);
  flex-shrink:0;
}
.badge-text {
  font-family:'DM Mono',monospace; font-size:0.68rem;
  color:#baf7df; letter-spacing:0.045em;
}

/* ── Heading ── */
.hero-h1 {
  font-family:'Syne',sans-serif;
  font-weight:800; letter-spacing:-0.04em; line-height:0.95;
  margin-bottom:1.25rem;
  animation:fadeUp 0.85s var(--spring) 0.1s both;
}
.h1-pre {
  display:block;
  font-size:clamp(1.05rem,2vw,1.3rem);
  color:var(--white2); font-weight:500; letter-spacing:0.01em; line-height:1;
  margin-bottom:0.45rem;
}
.h1-name {
  display:block;
  font-size:clamp(3.7rem,7.8vw,7rem);
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 10px 34px rgba(13,245,255,0.12));
}
.h1-role {
  display:block;
  max-width:680px;
  margin-top:1rem;
  color:var(--white);
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1.05rem,2vw,1.4rem);
  font-weight:600;
  line-height:1.35;
  letter-spacing:0;
}

/* ── Typewriter ── */
.tw-wrap {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono',monospace;
  font-size:clamp(0.78rem,1.3vw,0.9rem);
  margin-bottom:1.35rem;
  min-height:22px;
  animation:fadeUp 0.8s var(--spring) 0.25s both;
}
.tw-prefix {
  color:var(--muted); font-size:0.82em; text-transform:uppercase;
  letter-spacing:0.08em;
}
.tw-prefix::after { content:' /'; color:var(--muted2) }
#tw-text   { color:var(--cyan); font-weight:500 }
.tw-cur {
  display:inline-block; width:2px; height:1.05em;
  background:var(--cyan); margin-left:1px; vertical-align:middle;
  box-shadow:0 0 8px var(--cyan);
  animation:blink 0.75s step-end infinite;
}

/* ── Description ── */
.hero-desc {
  font-size:1.05rem; color:var(--white2); line-height:1.8;
  max-width:570px; margin-bottom:1.9rem;
  animation:fadeUp 0.8s var(--spring) 0.38s both;
}
.hero-desc strong { color:var(--white); font-weight:600 }

/* ── CTA ── */
.hero-actions {
  display:flex; gap:0.9rem; flex-wrap:wrap;
  animation:fadeUp 0.8s var(--spring) 0.5s both;
}
.hero-proof {
  display:flex; align-items:center; gap:0;
  margin-top:2rem; padding-top:1.35rem;
  border-top:1px solid var(--border);
  max-width:560px;
  animation:fadeUp 0.8s var(--spring) 0.62s both;
}
.proof-item {
  min-width:0; padding:0 22px; border-right:1px solid var(--border);
}
.proof-item:first-child { padding-left:0 }
.proof-item:last-child { border-right:0 }
.proof-item strong {
  display:block; color:var(--white); font-family:'Syne',sans-serif;
  font-size:0.78rem; font-weight:700; margin-bottom:3px;
}
.proof-item span {
  display:block; color:var(--muted); font-family:'DM Mono',monospace;
  font-size:0.57rem; white-space:nowrap;
}
.btn-primary {
  background:var(--grad); color:#fff; border:none; cursor:pointer;
  padding:0.85rem 2rem; border-radius:12px;
  font-size:0.95rem; font-weight:600; text-decoration:none;
  box-shadow:0 6px 22px rgba(13,245,255,0.24);
  transition:transform .25s var(--spring), box-shadow .25s;
  display:inline-flex; align-items:center; gap:6px;
  position:relative; overflow:hidden;
}
.btn-primary::before, .btn-sub::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,0.22) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .65s var(--ease-out);
}
.btn-primary:hover::before, .btn-sub:hover::before { transform:translateX(120%) }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 34px rgba(13,245,255,0.4) }
.btn-full { width:100%; justify-content:center }
.btn-outline {
  background:transparent; color:var(--white);
  border:1px solid var(--border2); padding:0.85rem 1.8rem; border-radius:12px;
  font-size:0.95rem; font-weight:500; text-decoration:none;
  transition:all .25s var(--ease-out);
  display:inline-flex; align-items:center; gap:6px;
}
.btn-outline:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); transform:translateY(-2px) }

/* ── Hero card wrapper — creates gradient border reliably ── */
.card-wrap {
  width:100%; max-width:490px;
  background:var(--grad);
  border-radius:20px; padding:1px;
  box-shadow:0 32px 90px rgba(0,0,0,0.55), 0 0 80px rgba(13,245,255,0.08);
  animation:fadeInScale 0.95s var(--spring) 0.2s both, glowPulse 3.5s ease-in-out 1.2s infinite;
  transition:transform .35s var(--spring), box-shadow .35s var(--ease-out);
}
.card-wrap:hover { transform:translateY(-6px); box-shadow:0 38px 100px rgba(0,0,0,0.58), var(--shadow-glow) }
.hero-card {
  background:rgba(15,22,33,0.92);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-radius:19px; padding:28px; position:relative; overflow:hidden;
}
/* Inner glow accent */
.hero-card::before {
  content:''; position:absolute; top:-50px; right:-50px;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle,rgba(13,245,255,0.1) 0%,transparent 70%);
  pointer-events:none;
}
.hero-card::after {
  content:''; position:absolute; bottom:-30px; left:-30px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(155,110,255,0.08) 0%,transparent 70%);
  pointer-events:none;
}

/* ── Card internals ── */
.card-kicker {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--border);
  position:relative; z-index:1;
  color:var(--muted2); font-family:'DM Mono',monospace;
  font-size:0.57rem; letter-spacing:0.09em; text-transform:uppercase;
}
.card-kicker-status { display:flex; align-items:center; gap:6px; color:var(--green) }
.card-kicker-status i {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 7px var(--green);
}
.card-top { display:flex; align-items:center; gap:15px; margin-bottom:22px; position:relative; z-index:1 }
.card-av {
  width:60px; height:60px; border-radius:14px; flex-shrink:0;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:800; color:#fff;
  animation:avatarGlow 2.5s ease-in-out infinite;
  padding:2px; overflow:hidden;
}
.card-av img {
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 34%;
  border-radius:12px;
}
.card-name  { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800; color:var(--white); letter-spacing:-0.01em }
.card-role  { font-family:'DM Mono',monospace; font-size:0.68rem; color:var(--cyan); margin-top:5px; letter-spacing:0.03em }
.card-loc   { font-size:0.78rem; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:4px }
.top-rated-panel {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px;
  margin:-2px 0 18px; padding:12px 13px;
  border:1px solid rgba(247,213,107,0.3);
  border-radius:8px; text-decoration:none;
  background:
    linear-gradient(110deg,rgba(247,213,107,0.12),rgba(247,213,107,0.035) 58%,transparent),
    rgba(13,17,23,0.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.2);
  position:relative; z-index:1; overflow:hidden;
  transition:border-color .25s, transform .25s var(--spring), box-shadow .25s;
}
.top-rated-panel::after {
  content:''; position:absolute; top:0; bottom:0; left:-40%;
  width:30%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
  transition:left .65s var(--ease-out);
}
.top-rated-panel:hover {
  border-color:rgba(247,213,107,0.58);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 12px 30px rgba(0,0,0,0.28);
}
.top-rated-panel:hover::after { left:115% }
.top-rated-icon {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#1a1608; background:linear-gradient(145deg,#fff0a6,#e8b83f);
  box-shadow:0 5px 16px rgba(232,184,63,0.28);
  font-size:1rem;
}
.top-rated-copy small {
  display:block; margin-bottom:3px; color:#f1dda0;
  font-family:'DM Sans',sans-serif; font-size:0.68rem;
  font-weight:600; letter-spacing:0;
}
.top-rated-copy strong {
  display:block; color:#fff0b6; font-family:'Syne',sans-serif;
  font-size:0.82rem; letter-spacing:0;
}
.top-rated-link {
  color:#d9c77f; font-family:'DM Mono',monospace;
  font-size:0.52rem; white-space:nowrap;
}

.card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:20px; position:relative; z-index:1 }
.cs {
  background:rgba(13,17,23,0.65); border:1px solid var(--border);
  border-radius:8px; padding:14px 8px; text-align:center;
  transition:border-color .2s, transform .2s var(--spring);
}
.cs:hover { border-color:rgba(13,245,255,0.3); transform:translateY(-2px) }
.cs-n {
  font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800; line-height:1;
  display:inline-block; min-width:2.5ch; white-space:nowrap; text-align:center;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.cs-l { font-family:'DM Mono',monospace; font-size:0.58rem; color:var(--muted); margin-top:5px; letter-spacing:0.05em; text-transform:uppercase }

.card-divider { height:1px; background:var(--border); margin-bottom:18px; position:relative; z-index:1 }

/* Chip group label */
.chip-label { font-family:'DM Mono',monospace; font-size:0.58rem; color:var(--muted2); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:8px; display:block; position:relative; z-index:1 }
.card-chips { display:flex; flex-wrap:wrap; gap:7px; position:relative; z-index:1; margin-bottom:6px }
.chip {
  font-family:'DM Mono',monospace; font-size:0.67rem;
  padding:5px 10px; border-radius:6px;
  transition:transform .2s var(--spring), box-shadow .2s; cursor:default;
}
.chip.c { background:rgba(13,245,255,0.08); border:1px solid rgba(13,245,255,0.22); color:var(--cyan) }
.chip.v { background:rgba(155,110,255,0.08); border:1px solid rgba(155,110,255,0.22); color:var(--violet) }
.chip.g { background:rgba(30,232,160,0.08); border:1px solid rgba(30,232,160,0.22); color:var(--green) }
.chip:hover { transform:translateY(-2px) }
.chip.c:hover { box-shadow:0 4px 14px rgba(13,245,255,0.22) }
.chip.v:hover { box-shadow:0 4px 14px rgba(155,110,255,0.22) }
.chip.g:hover { box-shadow:0 4px 14px rgba(30,232,160,0.18) }

/* Card footer status bar */
.card-status {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
  position:relative; z-index:1;
}
.card-status-left { display:flex; align-items:center; gap:7px }
.card-status-dot { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 6px var(--green); flex-shrink:0 }
.card-status-text { font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--green); letter-spacing:0.04em }
.card-status-upwork { font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--muted); background:rgba(255,255,255,0.04); border:1px solid var(--border); padding:3px 9px; border-radius:5px; text-decoration:none }
.card-status-upwork:hover { color:var(--cyan); border-color:rgba(13,245,255,0.3) }

/* ── Scroll hint ── */
.scroll-hint {
  text-align:center; padding:10px 0; position:relative; z-index:3;
  animation:fadeUp 0.7s var(--spring) 0.9s both;
}
.scroll-hint span {
  font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--muted2);
  letter-spacing:0.08em; display:inline-flex; align-items:center; gap:6px;
  animation:bounce 2s ease-in-out 1.5s infinite;
}

/* ── Stats strip ── */
.hero-strip {
  display:flex; align-items:stretch;
  border-top:1px solid var(--border);
  position:relative; z-index:3;
}
.hs { flex:1; padding:26px 5%; border-right:1px solid var(--border) }
.hs:last-of-type { border-right:none }
.hs-n {
  font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800; line-height:1; margin-bottom:4px;
  min-width:2.5ch; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hs-l { font-size:0.8rem; color:var(--muted) }
.hs-avail { flex:0 0 auto; padding:26px 5%; display:flex; align-items:center; gap:10px }
.avail-dot {
  width:9px; height:9px; background:var(--green); border-radius:50%;
  box-shadow:0 0 8px var(--green); position:relative;
}
.avail-dot::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:rgba(30,232,160,0.2); animation:ping 2.5s ease-out infinite;
}
.avail-txt { font-family:'DM Mono',monospace; font-size:0.72rem; color:var(--green); letter-spacing:0.05em }

/* Strip entrance — CSS, not JS */
.hero-strip .hs:nth-child(1) { animation:fadeUp 0.7s var(--spring) 0.62s both }
.hero-strip .hs:nth-child(2) { animation:fadeUp 0.7s var(--spring) 0.70s both }
.hero-strip .hs:nth-child(3) { animation:fadeUp 0.7s var(--spring) 0.78s both }
.hero-strip .hs-avail        { animation:fadeUp 0.7s var(--spring) 0.86s both }

/* ═══════════════════════════════════
   MARQUEE
═══════════════════════════════════ */
.marquee-section {
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(17,24,32,0.82); overflow:hidden; position:relative; z-index:1;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.marquee-row { padding:12px 0; overflow:hidden }
.marquee-row + .marquee-row { border-top:1px solid var(--border) }
.m-track { display:flex; width:max-content }
.m-track.ltr  { animation:mLeft  28s linear infinite }
.m-track.rtl  { animation:mRight 34s linear infinite }
.m-item {
  display:flex; align-items:center; white-space:nowrap;
  font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.04em;
}
.m-item span   { padding:0 16px; color:var(--muted) }
.m-item .dot   { color:rgba(13,245,255,0.35); padding:0 2px }
.m-item .hi    { color:var(--cyan) }
.m-item .sep   { color:rgba(155,110,255,0.35); padding:0 6px }

/* ═══════════════════════════════════
   SECTION BASE
═══════════════════════════════════ */
.section { padding:96px 5%; position:relative; z-index:1 }
.si { max-width:1200px; margin:0 auto }
.stag {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'DM Mono',monospace; font-size:0.67rem;
  color:var(--cyan); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px;
}
.stag::before { content:''; width:18px; height:1px; background:var(--cyan) }
h2 {
  font-family:'Syne',sans-serif;
  font-size:clamp(2rem,4vw,3.1rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.1;
  color:var(--white); margin-bottom:12px;
}
.grad {
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.sub { font-size:1rem; color:var(--muted); line-height:1.75; max-width:560px; margin-bottom:52px }
.text-link {
  display:inline-flex; margin-top:30px; color:var(--cyan);
  font-family:'DM Mono',monospace; font-size:0.75rem;
  text-decoration:none; border-bottom:1px solid rgba(13,245,255,0.35);
  padding-bottom:4px;
}
.text-link:hover { color:var(--white); border-color:var(--white) }

/* ═══════════════════════════════════
   GLASS SURFACE SYSTEM
═══════════════════════════════════ */
.hero-card,
.svc,
.hl-card,
.meta-tbl,
.proc-card,
.proj,
.testi,
.faq-item,
.ci-card,
.form-card,
.deliverable,
.service-proof span,
.legal-summary,
.legal-contact {
  background:var(--glass);
  border-color:var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.075), var(--glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
}

.hero-card {
  background:
    linear-gradient(145deg,rgba(255,255,255,0.08),transparent 45%),
    var(--glass-strong);
}

.svc,
.proc-card,
.proj,
.testi,
.faq-item,
.deliverable {
  background:
    linear-gradient(145deg,rgba(255,255,255,0.055),transparent 42%),
    var(--glass);
}

.svc:hover,
.proc-card:hover,
.proj:hover,
.testi:hover,
.faq-item[open] {
  background:
    linear-gradient(145deg,rgba(13,245,255,0.09),rgba(155,110,255,0.045) 48%,transparent),
    var(--glass-strong);
  border-color:rgba(13,245,255,0.3);
}

.form-card,
.ci-card,
.meta-tbl,
.legal-summary,
.legal-contact {
  background:var(--glass-strong);
}

.meta-tbl td:first-child,
.meta-tbl td:last-child {
  background:var(--glass-soft);
}

.fg:focus-within {
  background:rgba(13,245,255,0.045);
  box-shadow:inset 0 0 0 1px rgba(13,245,255,0.08);
}

/* ═══════════════════════════════════
   SCROLL REVEAL  — smooth spring, no JS stagger
═══════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity 0.8s var(--spring), transform 0.8s var(--spring);
  will-change:transform, opacity;
}
.reveal.in { opacity:1; transform:none }
.reveal.d1 { transition-delay:0.07s }
.reveal.d2 { transition-delay:0.14s }
.reveal.d3 { transition-delay:0.21s }

/* ═══════════════════════════════════
   SERVICES
═══════════════════════════════════ */
#services { background:rgba(17,24,32,0.76); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.svc-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; padding:1px;
  border-radius:18px; overflow:hidden;
  background:var(--glass-border);
  box-shadow:0 20px 54px rgba(0,0,0,0.24);
}
.svc {
  display:flex; flex-direction:column; min-width:0;
  padding:28px; border:0; border-radius:0;
  background:
    linear-gradient(145deg,rgba(255,255,255,0.055),transparent 42%),
    rgba(21,29,40,0.84);
  transition:background .3s var(--ease-out), border-color .3s, box-shadow .3s var(--ease-out);
  position:relative; overflow:hidden;
}
.svc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); opacity:0; transition:opacity .3s;
}
.svc::after {
  content:''; position:absolute; inset:0;
  background:var(--grad-glow); opacity:0; transition:opacity .3s;
}
.svc:hover {
  background:
    linear-gradient(145deg,rgba(13,245,255,0.09),rgba(155,110,255,0.045) 48%,transparent),
    var(--glass-strong);
  box-shadow:inset 0 0 0 1px rgba(13,245,255,0.2);
}
.svc:hover::before, .svc:hover::after { opacity:1 }
.svc-num { font-family:'DM Mono',monospace; font-size:0.58rem; color:var(--muted2); margin-bottom:16px; display:block; position:relative; z-index:1 }
.svc-icon {
  width:46px; height:46px; border-radius:12px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-bottom:18px;
  box-shadow:0 6px 18px rgba(13,245,255,0.2); position:relative; z-index:1;
  transition:transform .3s var(--spring), box-shadow .3s;
}
.svc:hover .svc-icon { transform:scale(1.1); box-shadow:0 10px 26px rgba(13,245,255,0.38) }
.svc-name { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--white); margin-bottom:10px; position:relative; z-index:1 }
.svc-desc { font-size:0.855rem; color:var(--muted); line-height:1.65; position:relative; z-index:1; flex:1 }
.svc-tag {
  align-self:flex-start; display:inline-block; margin-top:18px; font-family:'DM Mono',monospace; font-size:0.6rem;
  background:var(--cyan-dim); border:1px solid rgba(13,245,255,0.18);
  color:var(--cyan); padding:3px 9px; border-radius:5px; position:relative; z-index:1;
}

/* ═══════════════════════════════════
   ABOUT
═══════════════════════════════════ */
#about { border-bottom:1px solid var(--border) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start }
.about-bio { font-size:1rem; color:var(--white2); line-height:1.9; margin-bottom:24px }
.about-bio strong { color:var(--white); font-weight:600 }
.hl-card {
  background:var(--card); border-left:3px solid var(--cyan);
  border-radius:0 12px 12px 0; padding:20px 24px; margin-bottom:28px;
  position:relative; overflow:hidden;
}
.hl-card::before { content:''; position:absolute; inset:0; background:var(--grad-glow); opacity:0.6 }
.hl-card p { font-size:0.9rem; color:var(--white2); line-height:1.7; position:relative; z-index:1 }
.hl-card strong { color:var(--white) }
.meta-tbl { width:100%; border-collapse:collapse; margin-bottom:28px; border:1px solid var(--border); border-radius:12px; overflow:hidden }
.meta-tbl tr { border-bottom:1px solid var(--border) }
.meta-tbl tr:last-child { border-bottom:none }
.meta-tbl td { padding:12px 18px; font-size:0.875rem }
.meta-tbl td:first-child {
  font-family:'DM Mono',monospace; font-size:0.63rem; color:var(--muted);
  letter-spacing:0.06em; text-transform:uppercase;
  background:var(--card); border-right:1px solid var(--border); width:110px;
}
.meta-tbl td:last-child { color:var(--white2); background:var(--bg2) }
.td-avail { color:var(--green) !important; font-weight:500 }
.td-link  { color:var(--cyan)  !important; text-decoration:none }
.td-link:hover { text-decoration:underline }
/* Skills grouped by category */
.sk-groups { display:flex; flex-direction:column; gap:18px }
.sk-group-label {
  font-family:'DM Mono',monospace; font-size:0.6rem; color:var(--muted2);
  letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:9px; display:flex; align-items:center; gap:8px;
}
.sk-group-label::after { content:''; flex:1; height:1px; background:var(--border) }
.sk-wrap { display:flex; flex-wrap:wrap; gap:7px }
.sk {
  font-family:'DM Mono',monospace; font-size:0.7rem;
  padding:6px 13px; border-radius:8px;
  border:1px solid var(--border2); color:var(--white2); background:var(--card);
  transition:all .22s var(--spring); cursor:default;
}
.sk:hover { transform:translateY(-2px) }
/* colour variants per category */
.sk.flutter { border-color:rgba(13,245,255,0.2); color:var(--cyan); background:rgba(13,245,255,0.06) }
.sk.flutter:hover { border-color:rgba(13,245,255,0.45); box-shadow:0 4px 14px rgba(13,245,255,0.15) }
.sk.state   { border-color:rgba(155,110,255,0.22); color:var(--violet); background:rgba(155,110,255,0.06) }
.sk.state:hover   { border-color:rgba(155,110,255,0.45); box-shadow:0 4px 14px rgba(155,110,255,0.15) }
.sk.backend { border-color:rgba(30,232,160,0.2); color:var(--green); background:rgba(30,232,160,0.06) }
.sk.backend:hover { border-color:rgba(30,232,160,0.45); box-shadow:0 4px 14px rgba(30,232,160,0.13) }
.sk.tools   { border-color:rgba(251,191,36,0.2); color:#FBB824; background:rgba(251,191,36,0.06) }
.sk.tools:hover   { border-color:rgba(251,191,36,0.45); box-shadow:0 4px 14px rgba(251,191,36,0.12) }
.sk.devops  { border-color:rgba(248,113,113,0.2); color:#F87171; background:rgba(248,113,113,0.06) }
.sk.devops:hover  { border-color:rgba(248,113,113,0.45); box-shadow:0 4px 14px rgba(248,113,113,0.12) }

/* Timeline */
.tl-title {
  font-family:'DM Mono',monospace; font-size:0.63rem; color:var(--muted);
  letter-spacing:0.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:12px; margin-bottom:24px;
}
.tl-title::after { content:''; flex:1; height:1px; background:var(--border) }
.tl { padding-left:20px; border-left:1px solid var(--border); margin-bottom:36px }
.tl-item { padding:0 0 30px 24px; position:relative }
.tl-item:last-child { padding-bottom:0 }
.tl-item::before {
  content:''; position:absolute; left:-5.5px; top:4px;
  width:10px; height:10px; border-radius:50%;
  background:var(--grad); box-shadow:0 0 10px rgba(13,245,255,0.5);
}
.tl-date { font-family:'DM Mono',monospace; font-size:0.63rem; color:var(--cyan); margin-bottom:5px }
.tl-badge {
  display:inline-block; font-family:'DM Mono',monospace; font-size:0.57rem;
  background:rgba(155,110,255,0.1); border:1px solid rgba(155,110,255,0.25);
  color:var(--violet); padding:2px 8px; border-radius:4px; margin-bottom:6px; letter-spacing:0.05em;
}
.tl-role { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--white); margin-bottom:3px }
.tl-org  { font-size:0.82rem; color:var(--muted); margin-bottom:8px }
.tl-desc { font-size:0.845rem; color:var(--muted); line-height:1.65 }

/* ═══════════════════════════════════
   PROCESS
═══════════════════════════════════ */
#process { background:rgba(17,24,32,0.76); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.proc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.proc-card {
  background:var(--card); border:1px solid var(--border); border-radius:18px; padding:36px 28px;
  position:relative; overflow:hidden;
  transition:transform .3s var(--spring), border-color .3s, box-shadow .3s;
}
.proc-card::before { content:''; position:absolute; inset:0; background:var(--grad-glow); opacity:0; transition:opacity .3s }
.proc-card:hover { transform:translateY(-6px); border-color:rgba(13,245,255,0.28); box-shadow:0 18px 50px rgba(0,0,0,0.35) }
.proc-card:hover::before { opacity:1 }
.proc-num {
  font-family:'Syne',sans-serif; font-size:3rem; font-weight:800; line-height:1;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  opacity:0.2; margin-bottom:16px; display:block; position:relative; z-index:1;
}
.proc-icon { font-size:1.8rem; margin-bottom:16px; display:block; position:relative; z-index:1; filter:drop-shadow(0 0 10px rgba(13,245,255,0.35)) }
.proc-name { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; color:var(--white); margin-bottom:12px; position:relative; z-index:1 }
.proc-desc { font-size:0.875rem; color:var(--muted); line-height:1.7; position:relative; z-index:1 }

/* ═══════════════════════════════════
   PORTFOLIO
═══════════════════════════════════ */
#portfolio { border-bottom:1px solid var(--border) }
.portfolio-heading {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; margin-bottom:34px;
}
.portfolio-copy { max-width:650px }
.portfolio-copy .sub { margin-bottom:0 }
.portfolio-view-all { flex-shrink:0 }
.proj-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.proj-grid-featured {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.proj-grid-featured .proj-thumb { aspect-ratio:16/6.5 }
.proj-grid-featured .proj-body { padding:20px 22px 22px }
.proj-grid-featured .proj-name { font-size:1.08rem }
.proj-grid-featured .proj-desc { font-size:0.86rem; line-height:1.65 }
.proj-grid-featured .ptag { font-size:0.59rem; padding:3px 8px }
.proj {
  background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .3s, box-shadow .3s, transform .3s var(--spring);
  transform-style:preserve-3d;
}
.proj:hover { transform:translateY(-6px) scale(1.02); border-color:rgba(13,245,255,0.25); box-shadow:0 22px 60px rgba(0,0,0,0.4) }
.proj.c7, .proj.c5, .proj.c6 { grid-column:auto }
.proj-thumb {
  aspect-ratio:16/7; display:flex; align-items:center; justify-content:center;
  font-size:3.15rem; position:relative; overflow:hidden;
}
.pt1 { background:linear-gradient(135deg,#0c1525 0%,#1a0c38 55%,#0c1428 100%) }
.pt2 { background:linear-gradient(135deg,#0a1c12 0%,#0c2e18 100%) }
.pt3 { background:linear-gradient(135deg,#1a0e2a 0%,#280e3c 100%) }
.pt4 { background:linear-gradient(135deg,#0c1828 0%,#0e2238 100%) }
.proj-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 45%,var(--card)) }

/* Shimmer sweep */
.proj-thumb::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg,transparent 40%,rgba(13,245,255,0.06) 50%,transparent 60%);
  transform:translateX(-100%); transition:transform 0.65s var(--ease-out);
}
.proj:hover .proj-thumb::before { transform:translateX(100%) }

.proj-emoji {
  position:relative; z-index:1;
  filter:drop-shadow(0 0 22px rgba(13,245,255,0.3));
  transition:transform .4s var(--spring);
}
.proj:hover .proj-emoji { transform:scale(1.1) translateY(-4px) }

.proj-body { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column }
.proj-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px }
.ptag { font-family:'DM Mono',monospace; font-size:0.6rem; padding:3px 8px; border-radius:5px; background:rgba(13,245,255,0.07); border:1px solid rgba(13,245,255,0.16); color:var(--cyan) }
.proj-name { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:8px }
.proj-desc { font-size:0.845rem; color:var(--muted); line-height:1.62; flex:1 }
.proj-link {
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-family:'DM Mono',monospace; font-size:0.68rem; color:var(--cyan);
  text-decoration:none; letter-spacing:0.04em;
  transition:gap .2s var(--ease-out), opacity .2s;
}
.proj-link:hover { gap:10px }

/* ═══════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════ */
#testimonials { background:rgba(17,24,32,0.76); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.testi {
  background:var(--card); border:1px solid var(--border); border-radius:18px; padding:28px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:transform .3s var(--spring), border-color .3s, box-shadow .3s;
}
.testi::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); opacity:0; transition:opacity .3s }
.testi:hover { transform:translateY(-5px); border-color:rgba(13,245,255,0.22); box-shadow:0 14px 44px rgba(0,0,0,0.3) }
.testi:hover::before { opacity:1 }
.testi-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px }
.testi-stars { color:var(--cyan); font-size:0.85rem; letter-spacing:2px }
.testi-qmark { font-family:'Syne',sans-serif; font-size:3.2rem; font-weight:800; line-height:0.7; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:0.2 }
.testi-text { font-size:0.9rem; color:var(--white2); line-height:1.78; flex:1; margin-bottom:20px; font-style:italic }
.testi-author { display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--border) }
.testi-av { width:38px; height:38px; border-radius:10px; flex-shrink:0; background:var(--grad); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-size:0.78rem; font-weight:800; color:#fff; box-shadow:0 4px 12px rgba(13,245,255,0.2) }
.testi-name { font-family:'Syne',sans-serif; font-size:0.875rem; font-weight:700; color:var(--white) }
.testi-role { font-family:'DM Mono',monospace; font-size:0.6rem; color:var(--muted); margin-top:2px }

/* ═══════════════════════════════════
   FAQ
═══════════════════════════════════ */
#faq { border-bottom:1px solid var(--border) }
.faq-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px; align-items:start;
}
.faq-column { display:flex; flex-direction:column; gap:14px; min-width:0 }
.faq-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:0 22px; overflow:hidden;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.faq-item[open] {
  border-color:rgba(13,245,255,0.32); background:var(--card2);
  box-shadow:0 12px 32px rgba(0,0,0,0.22);
}
.faq-item summary {
  cursor:pointer; list-style:none; color:var(--white);
  font-family:'Syne',sans-serif; font-weight:700;
  line-height:1.45; padding:20px 38px 20px 0; position:relative;
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after {
  content:'+'; position:absolute; top:50%; right:0;
  width:24px; height:24px; margin-top:-12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan); background:rgba(13,245,255,0.07);
  border:1px solid rgba(13,245,255,0.15);
  font-family:'DM Mono',monospace; font-size:1rem;
  transition:transform .25s var(--spring), background .25s;
}
.faq-item[open] summary::after {
  content:'−'; transform:rotate(180deg);
  background:rgba(13,245,255,0.12);
}
.faq-answer { border-top:1px solid var(--border) }
.faq-item p { color:var(--muted); font-size:0.9rem; line-height:1.75; padding:17px 0 20px }

/* ═══════════════════════════════════
   CTA BAND
═══════════════════════════════════ */
#cta {
  padding:88px 5%; text-align:center; position:relative; z-index:1; overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(13,245,255,0.05) 0%,rgba(155,110,255,0.04) 40%,transparent 70%);
  border-bottom:1px solid var(--border);
}
.cta-h { font-family:'Syne',sans-serif; font-size:clamp(2.6rem,5.5vw,5rem); font-weight:800; letter-spacing:-0.04em; line-height:1.05; margin-bottom:16px }
.cta-sub { font-size:1rem; color:var(--muted); max-width:460px; margin:0 auto 32px; line-height:1.75 }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* ═══════════════════════════════════
   CONTACT
═══════════════════════════════════ */
#contact { background:rgba(17,24,32,0.76); border-bottom:1px solid var(--border) }
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:60px; align-items:start }
.ci-card { background:var(--card); border:1px solid var(--border2); border-radius:18px; overflow:hidden; margin-bottom:18px }
.ci-row { display:flex; align-items:center; gap:14px; padding:17px 22px; border-bottom:1px solid var(--border); transition:background .2s }
.ci-row:last-child { border-bottom:none }
.ci-row:hover { background:var(--card2) }
.ci-icon { width:34px; height:34px; border-radius:9px; flex-shrink:0; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:0.9rem; box-shadow:0 4px 12px rgba(13,245,255,0.18) }
.ci-lbl { font-family:'DM Mono',monospace; font-size:0.6rem; color:var(--muted2); letter-spacing:0.06em; text-transform:uppercase; min-width:68px }
.ci-val { font-size:0.875rem; color:var(--white) }
.ci-val a { color:var(--white); text-decoration:none; transition:color .2s }
.ci-val a:hover { color:var(--cyan) }

.form-card { background:var(--card); border:1px solid var(--border2); border-radius:18px; overflow:hidden }
.form-rows { display:grid; grid-template-columns:1fr 1fr }
.fg { display:flex; flex-direction:column; border-bottom:1px solid var(--border); border-right:1px solid var(--border) }
.fg.full { grid-column:span 2; border-right:none }
.fg:nth-child(even) { border-right:none }
.fg label { font-family:'DM Mono',monospace; font-size:0.6rem; color:var(--cyan); letter-spacing:0.08em; text-transform:uppercase; padding:14px 20px 5px }
.fg input, .fg textarea { background:transparent; border:none; outline:none; color:var(--white); font-family:'DM Sans',sans-serif; font-size:0.9rem; padding:3px 20px 14px }
.fg:focus-within { background:rgba(13,245,255,0.022) }
.fg input::placeholder, .fg textarea::placeholder { color:var(--muted2); opacity:0.7 }
.fg textarea { min-height:130px; resize:vertical }
.form-foot { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--border) }
.btn-sub { background:var(--grad); color:#fff; border:none; cursor:pointer; padding:0.75rem 1.8rem; border-radius:12px; font-family:'DM Mono',monospace; font-size:0.75rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; box-shadow:0 6px 18px rgba(13,245,255,0.22); transition:opacity .2s, transform .25s var(--spring); position:relative; overflow:hidden }
.btn-sub:hover { opacity:0.86; transform:translateY(-2px) }
.btn-sub:disabled { cursor:not-allowed; opacity:0.62; transform:none }
.btn-sub.loading { display:inline-flex; align-items:center; justify-content:center; gap:10px }
.btn-sub.loading::after {
  content:'';
  width:13px; height:13px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.38);
  border-top-color:#fff;
  animation:spin 0.75s linear infinite;
}
#fmsg { font-family:'DM Mono',monospace; font-size:0.7rem }
#fmsg.ok  { color:var(--green) }
#fmsg.err { color:#F87171 }

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
footer { padding:26px 5%; background:var(--bg); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; position:relative; z-index:1 }
.f-logo { font-family:'Syne',sans-serif; font-size:1rem; font-weight:800; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-decoration:none }
.f-copy { font-family:'DM Mono',monospace; font-size:0.63rem; color:var(--muted) }
.f-links { display:flex; gap:1.5rem }
.f-links a, .footer-link-button { font-family:'DM Mono',monospace; font-size:0.65rem; color:var(--muted); text-decoration:none; letter-spacing:0.04em; transition:color .2s }
.f-links a:hover, .footer-link-button:hover { color:var(--cyan) }
.footer-link-button {
  padding:0; border:0; background:none; cursor:pointer;
}

.site-footer {
  display:block; padding:0 5%; background:rgba(13,17,23,0.94);
  border-top:1px solid var(--glass-border);
}
.footer-main {
  display:grid; grid-template-columns:minmax(280px,1.05fr) minmax(460px,1.35fr);
  gap:80px; width:100%; max-width:1200px; margin:0 auto;
  padding:68px 0 54px;
}
.footer-brand { max-width:430px }
.site-footer .f-logo {
  display:inline-block; font-size:1.55rem; margin-bottom:18px;
}
.footer-brand p {
  color:var(--white2); font-size:0.92rem; line-height:1.75;
  margin-bottom:20px;
}
.footer-availability {
  display:flex; align-items:center; gap:8px;
  color:var(--green); font-family:'DM Mono',monospace;
  font-size:0.63rem; margin-bottom:24px;
}
.footer-availability > span {
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green);
}
.footer-email {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:0.95rem; font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(13,245,255,0.34); padding-bottom:5px;
  transition:color .2s, border-color .2s;
}
.footer-email:hover { color:var(--cyan); border-color:var(--cyan) }
.footer-nav {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:42px;
}
.footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:12px }
.footer-heading {
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:0.78rem; font-weight:700; margin-bottom:7px;
}
.footer-column a {
  color:var(--muted); font-size:0.78rem; line-height:1.4;
  text-decoration:none; transition:color .2s, transform .2s var(--spring);
}
.footer-column a:hover { color:var(--cyan); transform:translateX(3px) }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; width:100%; max-width:1200px; margin:0 auto;
  padding:22px 0 26px; border-top:1px solid var(--border);
}
.footer-legal { display:flex; align-items:center; flex-wrap:wrap; gap:20px }
.footer-legal a,
.footer-legal .footer-link-button {
  color:var(--muted); font-family:'DM Mono',monospace;
  font-size:0.6rem; text-decoration:none;
}
.footer-legal a:hover,
.footer-legal .footer-link-button:hover { color:var(--cyan) }

/* ═══════════════════════════════════
   ANALYTICS CONSENT
═══════════════════════════════════ */
.consent-banner {
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  position:fixed; z-index:500; left:20px; right:20px; bottom:20px;
  max-width:980px; margin:0 auto; padding:20px 22px;
  background:rgba(21,29,40,0.98); border:1px solid var(--border2);
  border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,0.55);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity .25s var(--ease-out), transform .25s var(--spring), visibility .25s;
}
.consent-banner.show { opacity:1; visibility:visible; transform:translateY(0) }
.consent-banner strong {
  display:block; color:var(--white); font-family:'Syne',sans-serif;
  font-size:0.95rem; margin-bottom:5px;
}
.consent-banner p {
  max-width:680px; color:var(--muted); font-size:0.78rem; line-height:1.55;
}
.consent-banner p a { color:var(--cyan) }
.consent-actions { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.consent-actions button {
  min-height:40px; padding:0 15px; border-radius:7px;
  font-family:'DM Sans',sans-serif; font-size:0.78rem; font-weight:600;
  cursor:pointer;
}
.consent-decline {
  color:var(--white2); background:transparent; border:1px solid var(--border2);
}
.consent-decline:hover { border-color:var(--white2) }
.consent-accept {
  color:#071014; background:var(--cyan); border:1px solid var(--cyan);
}
.consent-accept:hover { background:var(--white); border-color:var(--white) }

/* ═══════════════════════════════════
   MOBILE MENU
═══════════════════════════════════ */
.mob { display:none; position:fixed; inset:0; z-index:300; background:rgba(13,17,23,0.97); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); flex-direction:column; align-items:center; justify-content:center; gap:1.8rem }
.mob.open { display:flex }
.mob a { font-family:'Syne',sans-serif; font-size:2.2rem; font-weight:800; color:var(--white); text-decoration:none; transition:all .2s }
.mob a:hover { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.mob-x { position:absolute; top:24px; right:5%; background:none; border:none; color:var(--muted); font-family:'DM Mono',monospace; font-size:0.8rem; cursor:pointer; letter-spacing:0.06em }

/* ═══════════════════════════════════
   SERVICE PAGE
═══════════════════════════════════ */
.service-page { background:var(--bg) }
.inner-nav-links { display:flex; align-items:center; gap:1.2rem }
.inner-nav-links > a:not(.nav-cta) {
  color:var(--muted); text-decoration:none; font-size:0.875rem;
}
.inner-nav-links > a:not(.nav-cta):hover { color:var(--white) }
.service-hero {
  min-height:740px; display:flex; align-items:center;
  padding:132px 5% 92px; border-bottom:1px solid var(--border);
  background:
    linear-gradient(rgba(13,245,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(13,245,255,0.025) 1px, transparent 1px),
    radial-gradient(circle at 75% 30%,rgba(13,245,255,0.09),transparent 30rem);
  background-size:64px 64px,64px 64px,auto;
}
.service-hero-inner { width:100%; max-width:1100px; margin:0 auto }
.service-hero h1 {
  max-width:900px; font-family:'Syne',sans-serif; color:var(--white);
  font-size:clamp(3rem,7vw,6.5rem); line-height:0.98; font-weight:800;
  letter-spacing:-0.04em; margin-bottom:28px;
}
.service-hero p {
  max-width:700px; color:var(--white2); font-size:1.15rem;
  line-height:1.8; margin-bottom:30px;
}
.service-proof {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:48px;
}
.service-proof span {
  border:1px solid var(--border2); background:rgba(21,29,40,0.75);
  border-radius:7px; padding:9px 13px; color:var(--white2);
  font-family:'DM Mono',monospace; font-size:0.67rem;
}
.service-content { background:rgba(17,24,32,0.76) }
.service-copy-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:end; margin-bottom:48px;
}
.service-lead { color:var(--white2); line-height:1.8; font-size:1rem }
.deliverables-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  border:1px solid var(--border); background:var(--border); gap:1px;
}
.deliverable { background:var(--card); padding:34px }
.deliverable > span {
  color:var(--cyan); font-family:'DM Mono',monospace;
  font-size:0.65rem;
}
.deliverable h3 {
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:1.15rem; margin:18px 0 10px;
}
.deliverable p { color:var(--muted); font-size:0.9rem; line-height:1.7 }
.service-band { border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.service-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px }
.service-steps article { border-top:2px solid var(--cyan); padding:24px 0 }
.service-steps strong { font-family:'Syne',sans-serif; font-size:1.1rem; color:var(--white) }
.service-steps p { color:var(--muted); font-size:0.9rem; line-height:1.7; margin-top:10px }
.service-cta { background:rgba(17,24,32,0.76) }
.service-cta .si { display:flex; justify-content:space-between; align-items:center; gap:48px }
.service-cta p { color:var(--muted); line-height:1.75; max-width:660px }
.service-cta .btn-primary { flex-shrink:0 }

/* Revamped services experience */
.service-hero-layout {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,0.65fr);
  align-items:center; gap:clamp(56px,6vw,84px);
  width:100%; max-width:1200px; margin:0 auto;
}
.service-hero-copy { min-width:0 }
.service-hero-copy h1 {
  max-width:700px; margin-bottom:24px;
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:clamp(3.2rem,5.3vw,5.3rem); line-height:1;
  font-weight:800; letter-spacing:-0.035em;
}
.service-hero-copy h1 > span {
  display:block;
  font-size:1.08em;
}
.service-hero-copy > p {
  max-width:620px; margin-bottom:28px;
  color:var(--white2); font-size:1.05rem; line-height:1.72;
}
.service-hero-copy .service-proof { margin-top:30px }
.service-brief-card {
  align-self:start; min-width:0; margin-top:166px;
  padding:26px; border:1px solid var(--glass-border); border-radius:12px;
  background:
    linear-gradient(145deg,rgba(255,255,255,0.065),transparent 45%),
    var(--glass-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 26px 70px rgba(0,0,0,0.38);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
}
.service-brief-top {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--border);
}
.service-brief-top > span {
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:0.9rem; font-weight:700;
}
.service-brief-top i {
  color:var(--green); font-family:'DM Mono',monospace;
  font-size:0.58rem; font-style:normal; text-transform:uppercase;
  letter-spacing:0.08em;
}
.service-brief-card ul { list-style:none; margin:7px 0 20px }
.service-brief-card li {
  display:grid; grid-template-columns:26px 1fr; gap:10px;
  padding:14px 0; border-bottom:1px solid var(--border);
  color:var(--white2); font-size:0.83rem; line-height:1.45;
}
.service-brief-card li span {
  color:var(--cyan); font-family:'DM Mono',monospace; font-size:0.58rem;
}
.service-brief-card > a {
  color:var(--cyan); font-family:'DM Mono',monospace;
  font-size:0.67rem; text-decoration:none;
}
.service-jump-links {
  display:flex; align-items:center; justify-content:center; gap:8px;
  position:relative; z-index:4; width:100%;
  padding:14px 5%; border-bottom:1px solid var(--border);
  background:rgba(13,17,23,0.88);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.service-jump-links a {
  padding:8px 13px; border:1px solid var(--border);
  border-radius:7px; color:var(--muted);
  font-family:'DM Mono',monospace; font-size:0.62rem;
  text-decoration:none; transition:color .2s,border-color .2s,background .2s;
}
.service-jump-links a:hover {
  color:var(--cyan); border-color:rgba(13,245,255,0.3);
  background:rgba(13,245,255,0.05);
}
.service-offer-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; padding:1px; border-radius:14px; overflow:hidden;
  background:var(--glass-border);
}
.service-offer {
  display:flex; flex-direction:column; min-width:0; padding:28px;
  background:
    linear-gradient(145deg,rgba(255,255,255,0.045),transparent 42%),
    rgba(21,29,40,0.84);
  scroll-margin-top:82px;
}
.service-offer-num {
  color:var(--muted2); font-family:'DM Mono',monospace;
  font-size:0.58rem; margin-bottom:18px;
}
.service-offer-icon {
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:18px; border-radius:8px;
  color:var(--white); background:var(--grad);
  box-shadow:0 8px 22px rgba(13,245,255,0.18);
}
.service-offer h3 {
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:1rem; margin-bottom:10px;
}
.service-offer p {
  color:var(--muted); font-size:0.84rem; line-height:1.68; flex:1;
}
.service-offer strong {
  display:block; margin-top:18px; color:var(--cyan);
  font-family:'DM Mono',monospace; font-size:0.56rem; font-weight:500;
}
.engagement-section {
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.engagement-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.engagement-grid article {
  padding:28px; border:1px solid var(--border); border-radius:10px;
  background:rgba(21,29,40,0.58);
}
.engagement-grid article > span {
  display:inline-block; margin-bottom:24px; color:var(--cyan);
  font-family:'DM Mono',monospace; font-size:0.58rem;
  letter-spacing:0.08em; text-transform:uppercase;
}
.engagement-grid h3 {
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:1.05rem; margin-bottom:11px;
}
.engagement-grid p { color:var(--muted); font-size:0.86rem; line-height:1.7 }
.service-process { background:rgba(17,24,32,0.76) }
.service-process h2 { max-width:700px }
.service-process .service-steps {
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  margin-top:48px; border-top:1px solid var(--border);
}
.service-process .service-steps article {
  padding:26px 24px; border-top:2px solid transparent;
  border-right:1px solid var(--border);
}
.service-process .service-steps article:first-child { padding-left:0 }
.service-process .service-steps article:last-child { border-right:0; padding-right:0 }
.service-process .service-steps article:hover { border-top-color:var(--cyan) }
.service-process .service-steps article > span {
  display:block; margin-bottom:20px; color:var(--cyan);
  font-family:'DM Mono',monospace; font-size:0.6rem;
}
.service-cta-actions { display:flex; align-items:center; gap:10px; flex-shrink:0 }

/* Compact footer for inner pages */
.inner-footer {
  display:block; padding:0 5%; background:rgba(13,17,23,0.96);
  border-top:1px solid var(--glass-border);
}
.inner-footer-main {
  display:grid; grid-template-columns:minmax(260px,1fr) minmax(360px,0.8fr);
  gap:80px; width:100%; max-width:1200px; margin:0 auto;
  padding:54px 0 42px;
}
.inner-footer-brand { max-width:470px }
.inner-footer-brand .f-logo { display:inline-block; font-size:1.25rem; margin-bottom:16px }
.inner-footer-brand p {
  margin-bottom:18px; color:var(--white2); font-size:0.86rem; line-height:1.7;
}
.inner-footer-email {
  color:var(--cyan); font-family:'DM Mono',monospace;
  font-size:0.68rem; text-decoration:none;
}
.inner-footer-links {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px;
}
.inner-footer-links > div { display:flex; flex-direction:column; align-items:flex-start; gap:11px }
.inner-footer-links span {
  margin-bottom:6px; color:var(--white); font-family:'Syne',sans-serif;
  font-size:0.78rem; font-weight:700;
}
.inner-footer-links a {
  color:var(--muted); font-size:0.76rem; text-decoration:none;
}
.inner-footer-links a:hover { color:var(--cyan) }
.inner-footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; width:100%; max-width:1200px; margin:0 auto;
  padding:20px 0 24px; border-top:1px solid var(--border);
}
.inner-footer-bottom > div { display:flex; align-items:center; flex-wrap:wrap; gap:18px }
.inner-footer-bottom a,
.inner-footer-bottom .footer-link-button {
  color:var(--muted); font-family:'DM Mono',monospace;
  font-size:0.59rem; text-decoration:none;
}
.inner-footer-bottom a:hover,
.inner-footer-bottom .footer-link-button:hover { color:var(--cyan) }

/* ═══════════════════════════════════
   PROJECTS PAGE
═══════════════════════════════════ */
.projects-hero {
  padding:150px 5% 86px; border-bottom:1px solid var(--border);
  background:
    radial-gradient(circle at 76% 28%,rgba(13,245,255,0.09),transparent 28rem),
    linear-gradient(180deg,rgba(17,24,32,0.55),rgba(13,17,23,0.92));
}
.projects-hero h1 {
  max-width:900px; margin-bottom:24px;
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:clamp(3rem,7vw,6rem); line-height:1;
  font-weight:800; letter-spacing:-0.04em;
}
.projects-hero p {
  max-width:700px; margin-bottom:30px;
  color:var(--white2); font-size:1.08rem; line-height:1.8;
}
.projects-collection { background:rgba(17,24,32,0.64) }
.projects-grid { gap:22px }
.projects-grid .proj { scroll-margin-top:88px }
.projects-grid .proj-thumb { aspect-ratio:16/7 }
.projects-grid .proj-body { padding:22px 24px 24px }
.projects-grid .proj-name { font-size:1.2rem }
.project-focus {
  display:flex; align-items:flex-start; gap:12px;
  margin-top:18px; padding-top:15px; border-top:1px solid var(--border);
}
.project-focus span {
  color:var(--muted2); font-family:'DM Mono',monospace;
  font-size:0.56rem; letter-spacing:0.08em; text-transform:uppercase;
}
.project-focus strong {
  color:var(--white2); font-size:0.72rem; font-weight:500;
}

/* ═══════════════════════════════════
   LEGAL PAGES
═══════════════════════════════════ */
.legal-page { background:var(--bg) }
.legal-hero {
  padding:150px 5% 76px; border-bottom:1px solid var(--border);
  background:
    linear-gradient(rgba(13,245,255,0.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,245,255,0.024) 1px,transparent 1px);
  background-size:64px 64px;
}
.legal-inner { width:100%; max-width:820px; margin:0 auto }
.legal-hero h1 {
  color:var(--white); font-family:'Syne',sans-serif;
  font-size:clamp(3rem,7vw,5.5rem); line-height:1;
  letter-spacing:-0.04em; margin-bottom:18px;
}
.legal-hero p {
  max-width:680px; color:var(--white2); font-size:1.05rem;
  line-height:1.75; margin-bottom:18px;
}
.legal-updated {
  color:var(--muted); font-family:'DM Mono',monospace;
  font-size:0.67rem;
}
.legal-content { padding:72px 5% 100px; background:rgba(17,24,32,0.78) }
.legal-summary {
  margin-bottom:54px; padding:22px 24px;
  background:var(--card); border-left:3px solid var(--cyan);
}
.legal-summary strong {
  display:block; color:var(--white); font-family:'Syne',sans-serif;
  margin-bottom:8px;
}
.legal-summary p { margin:0 }
.legal-content h2 {
  margin:46px 0 14px; font-size:1.35rem; letter-spacing:0;
}
.legal-content p {
  color:var(--white2); font-size:0.95rem; line-height:1.85;
  margin-bottom:16px;
}
.legal-content a { color:var(--cyan) }
.legal-contact {
  margin-top:58px; padding:26px;
  background:var(--card); border:1px solid var(--border2); border-radius:8px;
}
.legal-contact h2 { margin-top:0 }
.legal-contact p { margin-bottom:0 }

/* Keep component-specific rules from replacing the glass surfaces. */
.svc,
.proc-card,
.proj,
.testi,
.faq-item,
.deliverable {
  background:
    linear-gradient(145deg,rgba(255,255,255,0.055),transparent 42%),
    var(--glass);
}

.hl-card,
.meta-tbl,
.ci-card,
.form-card,
.legal-summary,
.legal-contact {
  background:
    linear-gradient(145deg,rgba(255,255,255,0.045),transparent 48%),
    var(--glass-strong);
}

.svc:hover,
.proc-card:hover,
.proj:hover,
.testi:hover,
.faq-item[open] {
  background:
    linear-gradient(145deg,rgba(13,245,255,0.09),rgba(155,110,255,0.045) 48%,transparent),
    var(--glass-strong);
}

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (max-width:1024px) {
  .hero-main { gap:3rem }
  .services-page .service-hero {
    min-height:auto; padding:104px 5% 68px;
  }
  .service-hero-layout { grid-template-columns:1fr; gap:42px }
  .service-brief-card { max-width:620px; margin-top:0 }
  .service-offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .service-process .service-steps { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .service-process .service-steps article:nth-child(2) { border-right:0 }
  .service-process .service-steps article:nth-child(n+3) { border-top:1px solid var(--border) }
  .inner-footer-main { grid-template-columns:1fr; gap:38px }
  .inner-footer-brand { max-width:620px }
  .footer-main {
    grid-template-columns:1fr; gap:48px;
    padding-top:56px;
  }
  .footer-brand { max-width:600px }
  .svc-grid   { grid-template-columns:repeat(2,1fr) }
  .proc-grid  { grid-template-columns:1fr }
  .about-grid, .contact-grid { grid-template-columns:1fr; gap:48px }
  .proj.c7, .proj.c5, .proj.c6 { grid-column:auto }
  .testi-grid { grid-template-columns:1fr 1fr }
  .service-copy-grid { grid-template-columns:1fr; gap:20px }
}
@media (max-width:768px) {
  nav { padding:0 5% }
  .nav-links, .nav-cta { display:none }
  .inner-nav .nav-cta {
    display:inline-flex; padding:0.48rem 0.9rem;
    font-size:0.72rem; border-radius:7px;
  }
  .inner-nav { height:60px }
  .inner-nav .nav-logo { font-size:1rem }
  .hamburger { display:flex }
  .section { padding:64px 5% }
  .svc-grid { grid-template-columns:1fr }
  #home { padding-left:5%; padding-right:5% }
  .hero-main { flex-direction:column; align-items:stretch; gap:2.75rem; padding:42px 0 28px }
  .hero-left { text-align:left }
  .hero-right { justify-content:center; width:100% }
  .hero-right::before { width:92%; filter:blur(36px) }
  .card-wrap  { max-width:100%; max-width:460px }
  .hero-card  { padding:26px }
  .card-av    { width:52px; height:52px; font-size:1.05rem }
  .cs-n       { font-size:1.3rem }
  .h1-name    { font-size:clamp(3rem,14vw,5rem) }
  .hero-proof { max-width:100%; justify-content:space-between }
  .proof-item { flex:1; padding:0 12px }
  .proof-item:first-child { padding-left:0 }
  .proof-item:last-child { padding-right:0 }
  .hero-strip { display:grid; grid-template-columns:repeat(3,1fr) }
  .hs         { min-width:0; border-right:1px solid var(--border); padding:22px 14px }
  .hs-avail   { grid-column:1 / -1; justify-content:center; border-top:1px solid var(--border); padding:18px 5% }
  .portfolio-heading { align-items:flex-start; flex-direction:column; gap:22px }
  .portfolio-view-all { align-self:flex-start }
  .proj-grid { grid-template-columns:1fr }
  .proj-feature-extra { display:none }
  .proj.c7, .proj.c5, .proj.c6 { grid-column:auto }
  .testi-grid, .faq-grid { grid-template-columns:1fr }
  .form-rows  { grid-template-columns:1fr }
  .fg, .fg.full { grid-column:span 1; border-right:none }
  .float-hire { bottom:20px; right:16px; padding:0.7rem 1.1rem }
  footer      { flex-direction:column; align-items:flex-start }
  .f-links    { flex-wrap:wrap }
  .site-footer { display:block; padding-left:5%; padding-right:5% }
  .footer-nav { gap:28px }
  .footer-bottom { align-items:flex-start; flex-direction:column }
  .inner-nav-links { gap:0 }
  .inner-nav-links > a:not(.nav-cta) { display:none }
  .service-hero { min-height:auto; padding:104px 5% 60px }
  .service-hero h1 { font-size:clamp(2.8rem,13vw,4.5rem) }
  .service-hero-layout { gap:30px }
  .service-hero-copy h1 {
    font-size:clamp(2.55rem,12vw,4.2rem);
    line-height:1.02; margin-bottom:20px;
  }
  .service-hero-copy > p { font-size:0.98rem; line-height:1.72; margin-bottom:24px }
  .service-hero-copy .service-proof { margin-top:26px }
  .service-brief-card { max-width:none; padding:20px }
  .service-brief-card li { padding:12px 0; font-size:0.79rem }
  .service-jump-links {
    justify-content:flex-start; overflow-x:auto; padding:11px 5%;
    scrollbar-width:none; position:sticky; top:60px;
  }
  .service-jump-links::-webkit-scrollbar { display:none }
  .service-jump-links a { white-space:nowrap; flex-shrink:0; min-height:36px }
  .service-copy-grid { margin-bottom:32px }
  .service-copy-grid h2 { font-size:clamp(1.8rem,9vw,2.5rem) }
  .service-lead { font-size:0.92rem; line-height:1.72 }
  .service-offer-grid, .engagement-grid { grid-template-columns:1fr }
  .service-offer-grid { border-radius:10px }
  .service-offer { scroll-margin-top:120px }
  .service-process .service-steps {
    grid-template-columns:1fr; border-top:0; gap:0;
  }
  .service-process .service-steps article,
  .service-process .service-steps article:first-child,
  .service-process .service-steps article:last-child {
    padding:22px 0; border-right:0; border-top:1px solid var(--border);
  }
  .service-cta .si { gap:28px }
  .service-cta-actions { width:100%; flex-wrap:wrap }
  .inner-footer { display:block; padding-left:5%; padding-right:5% }
  .inner-footer-main { padding:42px 0 32px; gap:30px }
  .inner-footer-links { gap:24px }
  .inner-footer-bottom { align-items:flex-start; flex-direction:column }
  .projects-hero { padding:130px 5% 70px }
  .projects-hero h1 { font-size:clamp(2.8rem,13vw,4.5rem) }
  .deliverables-grid, .service-steps { grid-template-columns:1fr }
  .service-cta .si { align-items:flex-start; flex-direction:column }
  .consent-banner {
    align-items:stretch; flex-direction:column; gap:16px;
    left:12px; right:12px; bottom:12px; padding:18px;
  }
  .consent-actions { justify-content:flex-end }
  .legal-hero { padding:130px 5% 60px }
  .legal-content { padding:56px 5% 80px }
}
@media (max-width:480px) {
  .hero-actions { flex-direction:column }
  .hero-actions .btn-primary, .hero-actions .btn-outline { justify-content:center; width:100% }
  .cta-btns   { flex-direction:column; align-items:center }
  .form-foot  { flex-direction:column; align-items:stretch }
  .btn-sub    { width:100% }
  .card-status { align-items:flex-start; flex-direction:column; gap:10px }
  .hero-proof { align-items:flex-start; gap:14px; flex-wrap:wrap }
  .proof-item {
    flex:0 0 calc(50% - 7px); padding:0; border-right:0;
  }
  .proof-item:last-child { flex-basis:100% }
  .card-kicker { margin-bottom:18px }
  .top-rated-panel { grid-template-columns:auto 1fr; }
  .top-rated-link { display:none }
  .card-stats { gap:7px }
  .cs { padding:13px 5px }
  .footer-main { padding:48px 0 38px }
  .footer-nav { grid-template-columns:1fr 1fr; gap:36px 20px }
  .footer-column:last-child { grid-column:1 / -1 }
  .footer-legal { gap:14px }
  .service-hero-copy .hero-actions,
  .service-cta-actions { flex-direction:column; align-items:stretch }
  .service-hero-copy .hero-actions .btn-primary,
  .service-hero-copy .hero-actions .btn-outline,
  .service-cta-actions .btn-primary,
  .service-cta-actions .btn-outline { width:100%; justify-content:center }
  .service-proof { gap:7px; display:grid; grid-template-columns:1fr }
  .service-proof span { padding:8px 10px; font-size:0.59rem; text-align:center }
  .service-brief-top { gap:12px }
  .service-brief-card > a {
    display:block; overflow-wrap:anywhere; line-height:1.5;
  }
  .service-offer { padding:24px 22px }
  .service-offer h3 { font-size:1.05rem }
  .service-offer p { font-size:0.86rem }
  .engagement-grid article { padding:24px 22px }
  .inner-footer-main { padding:38px 0 30px }
  .inner-footer-links {
    grid-template-columns:1fr 1fr; gap:22px;
    padding-top:4px;
  }
  .inner-footer-links > div { gap:4px }
  .inner-footer-links span { margin-bottom:8px }
  .inner-footer-links a {
    display:flex; align-items:center; min-height:40px;
    width:100%; border-bottom:1px solid var(--border);
  }
  .inner-footer-bottom { gap:15px; padding:18px 0 22px }
  .inner-footer-bottom > div { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:0 }
  .inner-footer-bottom a,
  .inner-footer-bottom .footer-link-button {
    display:flex; align-items:center; min-height:38px;
  }
  .inner-footer-bottom .footer-link-button { grid-column:1 / -1 }
  .inner-footer-brand p { font-size:0.82rem }
  .inner-footer-email { overflow-wrap:anywhere; line-height:1.5 }
  .meta-tbl td { display:block; width:100% }
  .meta-tbl td:first-child { width:100%; border-right:none; border-bottom:1px solid var(--border) }
  .consent-actions { display:grid; grid-template-columns:1fr 1fr }
  .consent-actions button { width:100%; padding:0 10px }
}

/* Services page: compact phone layout */
@media (max-width:600px) {
  html, body.services-page {
    width:100%; max-width:100%; overflow-x:hidden;
  }
  .services-page *,
  .services-page *::before,
  .services-page *::after {
    max-width:100%;
  }
  .services-page main,
  .services-page .service-hero,
  .services-page .service-hero-layout,
  .services-page .service-hero-copy,
  .services-page .service-content,
  .services-page .engagement-section,
  .services-page .service-process,
  .services-page .service-cta,
  .services-page .si {
    width:100%; min-width:0;
  }
  .services-page .inner-nav {
    width:100%; height:58px; padding:0 16px;
    display:flex; align-items:center;
  }
  .services-page .inner-nav .nav-logo {
    max-width:none; overflow:visible; white-space:nowrap;
  }
  .services-page .inner-nav .nav-cta {
    display:inline-flex; align-items:center; justify-content:center;
    height:36px; min-height:36px; margin:0;
    padding:0 13px; white-space:nowrap;
    font-size:0.7rem; line-height:1;
  }
  .services-page .inner-nav-links {
    display:flex; align-items:center; height:100%;
  }

  .services-page .service-hero {
    padding:82px 18px 38px;
    background:
      radial-gradient(circle at 85% 18%,rgba(13,245,255,0.08),transparent 18rem),
      linear-gradient(180deg,#0d1117,#101720);
  }
  .services-page .service-hero-layout {
    display:block; width:100%;
  }
  .services-page .service-hero-copy .stag { margin-bottom:12px }
  .services-page .service-hero-copy h1 {
    max-width:330px; margin-bottom:16px;
    font-size:clamp(2.2rem,10.5vw,3rem);
    line-height:1.04; letter-spacing:-0.02em;
    overflow-wrap:normal; word-break:normal; hyphens:none;
  }
  .services-page .service-hero-copy > p {
    max-width:35rem; margin-bottom:20px;
    font-size:0.91rem; line-height:1.62;
  }
  .services-page .hero-actions { gap:9px }
  .services-page .hero-actions .btn-primary,
  .services-page .hero-actions .btn-outline {
    min-height:46px; padding:0 18px; border-radius:9px;
    font-size:0.88rem;
  }
  .services-page .service-proof {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%; margin-top:18px; gap:5px;
  }
  .services-page .service-proof span {
    display:flex; align-items:center; justify-content:center;
    width:100%; min-width:0; min-height:32px;
    padding:5px 2px; text-align:center;
    font-size:clamp(0.42rem,1.85vw,0.53rem);
    letter-spacing:0;
    white-space:nowrap;
  }

  .services-page .service-brief-card {
    width:100%; margin-top:22px; padding:17px; border-radius:10px;
    box-shadow:0 16px 42px rgba(0,0,0,0.3);
  }
  .services-page .service-brief-top { padding-bottom:13px }
  .services-page .service-brief-card ul { margin-bottom:16px }
  .services-page .service-brief-card li {
    grid-template-columns:22px minmax(0,1fr);
    gap:8px; padding:10px 0; font-size:0.75rem;
  }

  .services-page .service-jump-links {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px; top:58px; padding:8px 12px; overflow:visible;
  }
  .services-page .service-jump-links a {
    display:flex; align-items:center; justify-content:center;
    width:100%; min-width:0; min-height:36px; padding:6px 4px;
    font-size:0.54rem; white-space:normal; text-align:center;
  }

  .services-page .section { width:100%; padding:50px 18px }
  .services-page .service-copy-grid {
    display:block; width:100%; margin-bottom:26px;
  }
  .services-page .service-copy-grid .stag { margin-bottom:10px }
  .services-page .service-copy-grid h2,
  .services-page .service-process h2,
  .services-page .service-cta h2 {
    max-width:100%; font-size:clamp(1.55rem,7.4vw,2.2rem);
    line-height:1.16; letter-spacing:0;
    overflow-wrap:normal; word-break:normal; hyphens:none;
  }
  .services-page .service-lead {
    margin-top:15px; font-size:0.88rem; line-height:1.68;
  }

  .services-page .service-offer-grid {
    display:block; width:100%; padding:0;
    background:transparent; border-radius:0; overflow:visible;
  }
  .services-page .service-offer {
    display:block; width:100%; min-width:0; min-height:0;
    margin-bottom:12px; padding:22px 19px;
    border:1px solid var(--glass-border); border-radius:10px;
  }
  .services-page .service-offer:last-child { margin-bottom:0 }
  .services-page .service-offer-num { margin-bottom:13px }
  .services-page .service-offer-icon {
    width:38px; height:38px; margin-bottom:15px;
  }
  .services-page .service-offer h3 {
    margin-bottom:8px; font-size:1rem; line-height:1.35;
  }
  .services-page .service-offer p {
    font-size:0.82rem; line-height:1.65;
  }
  .services-page .service-offer strong {
    margin-top:14px; font-size:0.53rem; line-height:1.55;
  }

  .services-page .engagement-grid { display:block; width:100% }
  .services-page .engagement-grid article {
    width:100%; margin-bottom:12px; padding:21px 19px; border-radius:9px;
  }
  .services-page .engagement-grid article:last-child { margin-bottom:0 }
  .services-page .engagement-grid article > span { margin-bottom:14px }
  .services-page .engagement-grid h3 { font-size:1rem }
  .services-page .engagement-grid p { font-size:0.82rem; line-height:1.65 }

  .services-page .service-process .service-steps {
    display:block; width:100%; margin-top:28px;
  }
  .services-page .service-process .service-steps article,
  .services-page .service-process .service-steps article:first-child,
  .services-page .service-process .service-steps article:last-child {
    padding:19px 0;
  }
  .services-page .service-process .service-steps article > span { margin-bottom:10px }
  .services-page .service-steps strong { font-size:1rem }
  .services-page .service-steps p { margin-top:7px; font-size:0.82rem; line-height:1.62 }

  .services-page .service-cta .si { gap:22px }
  .services-page .service-cta p { font-size:0.86rem; line-height:1.66 }
  .services-page .service-cta-actions { gap:9px }

  .services-page .inner-footer {
    display:block; width:100%; padding:0 18px;
  }
  .services-page .inner-footer-main {
    display:block; width:100%; padding:36px 0 26px;
  }
  .services-page .inner-footer-brand { margin-bottom:28px }
  .services-page .inner-footer-brand .f-logo { margin-bottom:12px }
  .services-page .inner-footer-brand p {
    margin-bottom:14px; font-size:0.8rem; line-height:1.65;
  }
  .services-page .inner-footer-links {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px; width:100%;
  }
  .services-page .inner-footer-links > div {
    display:block; width:100%; min-width:0; margin-top:0;
  }
  .services-page .inner-footer-links span { margin-bottom:5px }
  .services-page .inner-footer-links a {
    display:flex; align-items:center; width:100%;
    min-height:42px; border-bottom:1px solid var(--border);
  }
  .services-page .inner-footer-bottom {
    display:block; width:100%; padding:17px 0 20px;
  }
  .services-page .inner-footer-bottom > div {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0; width:100%; margin-top:12px;
  }
  .services-page .inner-footer-bottom a,
  .services-page .inner-footer-bottom .footer-link-button {
    display:flex; align-items:center; justify-content:flex-start;
    width:100%; min-width:0;
    min-height:40px; border-bottom:1px solid var(--border);
    font-size:0.55rem; white-space:nowrap;
  }
  .services-page .inner-footer-bottom .footer-link-button {
    grid-column:auto; text-align:left;
  }
}

/* Projects page: compact phone layout */
@media (max-width:600px) {
  html, body.projects-page {
    width:100%; max-width:100%; overflow-x:hidden;
  }
  .projects-page *,
  .projects-page *::before,
  .projects-page *::after {
    max-width:100%;
  }
  .projects-page main,
  .projects-page .projects-hero,
  .projects-page .service-hero-inner,
  .projects-page .projects-collection,
  .projects-page .service-cta,
  .projects-page .si {
    width:100%; min-width:0;
  }

  .projects-page .inner-nav {
    display:flex; align-items:center;
    width:100%; height:58px; padding:0 16px;
  }
  .projects-page .inner-nav .nav-logo {
    max-width:none; overflow:visible; white-space:nowrap;
  }
  .projects-page .inner-nav-links {
    display:flex; align-items:center; height:100%; gap:0;
  }
  .projects-page .inner-nav .nav-cta {
    display:inline-flex; align-items:center; justify-content:center;
    height:36px; min-height:36px; margin:0;
    padding:0 12px; font-size:0.68rem; line-height:1;
    white-space:nowrap;
  }

  .projects-page .projects-hero {
    padding:94px 18px 52px;
    background:
      radial-gradient(circle at 84% 18%,rgba(13,245,255,0.08),transparent 18rem),
      linear-gradient(180deg,#0d1117,#101720);
  }
  .projects-page .projects-hero .stag { margin-bottom:12px }
  .projects-page .projects-hero h1 {
    max-width:100%; margin-bottom:18px;
    font-size:clamp(2.05rem,9.7vw,3.15rem);
    line-height:1.07; letter-spacing:0;
    overflow-wrap:normal; word-break:normal; hyphens:none;
  }
  .projects-page .projects-hero p {
    max-width:100%; margin-bottom:24px;
    font-size:0.92rem; line-height:1.68;
  }
  .projects-page .projects-hero .btn-primary {
    display:flex; align-items:center; justify-content:center;
    width:100%; min-height:46px; padding:0 18px;
    border-radius:9px; font-size:0.88rem;
  }

  .projects-page .section { width:100%; padding:50px 18px }
  .projects-page .projects-grid {
    display:block; width:100%;
  }
  .projects-page .projects-grid .proj {
    display:block; width:100%; min-width:0;
    margin-bottom:14px; border-radius:11px;
    transform:none !important;
  }
  .projects-page .projects-grid .proj:last-child { margin-bottom:0 }
  .projects-page .projects-grid .proj-thumb {
    width:100%; aspect-ratio:16/8.5; font-size:2.8rem;
  }
  .projects-page .projects-grid .proj-body {
    width:100%; padding:20px 18px 21px;
  }
  .projects-page .projects-grid .proj-tags { gap:5px; margin-bottom:10px }
  .projects-page .projects-grid .ptag { padding:3px 7px; font-size:0.56rem }
  .projects-page .projects-grid .proj-name {
    margin-bottom:8px; font-size:1.08rem; line-height:1.35;
  }
  .projects-page .projects-grid .proj-desc {
    font-size:0.83rem; line-height:1.65;
  }
  .projects-page .project-focus {
    display:block; margin-top:16px; padding-top:14px;
  }
  .projects-page .project-focus span {
    display:block; margin-bottom:6px;
  }
  .projects-page .project-focus strong {
    display:block; font-size:0.7rem; line-height:1.55;
  }
  .projects-page .proj-link {
    margin-top:15px; min-height:38px; font-size:0.64rem;
  }

  .projects-page .service-cta .si {
    display:block; width:100%;
  }
  .projects-page .service-cta h2 {
    max-width:100%; font-size:clamp(1.7rem,8vw,2.3rem);
    line-height:1.14; letter-spacing:0;
  }
  .projects-page .service-cta p {
    margin-bottom:22px; font-size:0.86rem; line-height:1.66;
  }
  .projects-page .service-cta .btn-primary {
    display:flex; align-items:center; justify-content:center;
    width:100%; min-height:46px;
  }

  .projects-page .inner-footer {
    display:block; width:100%; padding:0 18px;
  }
  .projects-page .inner-footer-main {
    display:block; width:100%; padding:36px 0 26px;
  }
  .projects-page .inner-footer-brand { margin-bottom:28px }
  .projects-page .inner-footer-brand .f-logo { margin-bottom:12px }
  .projects-page .inner-footer-brand p {
    margin-bottom:14px; font-size:0.8rem; line-height:1.65;
  }
  .projects-page .inner-footer-email {
    overflow-wrap:anywhere; line-height:1.5;
  }
  .projects-page .inner-footer-links {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px; width:100%;
  }
  .projects-page .inner-footer-links > div {
    display:block; width:100%; min-width:0;
  }
  .projects-page .inner-footer-links span { margin-bottom:5px }
  .projects-page .inner-footer-links a {
    display:flex; align-items:center; width:100%;
    min-height:42px; border-bottom:1px solid var(--border);
  }
  .projects-page .inner-footer-bottom {
    display:block; width:100%; padding:17px 0 20px;
  }
  .projects-page .inner-footer-bottom > div {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0; width:100%; margin-top:12px;
  }
  .projects-page .inner-footer-bottom a,
  .projects-page .inner-footer-bottom .footer-link-button {
    display:flex; align-items:center; justify-content:flex-start;
    width:100%; min-width:0; min-height:40px;
    border-bottom:1px solid var(--border);
    font-size:0.55rem; white-space:nowrap;
  }
  .projects-page .inner-footer-bottom .footer-link-button {
    grid-column:auto; text-align:left;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:0.001ms !important;
  }
}