/* ============================================================
   FULL VISUAL REBUILD — staging preview only, not linked from
   production. Same HTML/IDs/classes as live site (so 3D canvas,
   scanner, Cal embed, FAQ JS, nav toggle all keep working) —
   this file only changes how things look.
   ============================================================ */

:root{
  --elev-1: 0 1px 0 #ffffff08 inset, 0 18px 40px -26px #000000b3;
  --elev-flare: 0 1px 0 #ffffff08 inset, 0 20px 44px -22px var(--flare-dim), 0 0 0 1px var(--flare-line);
  --section-counter: 0;
}

/* ---------- Nav: heavier glass, brand-line accent ---------- */
header#nav.stuck{
  background: #08080ad9;
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 1px 0 var(--flare-line);
}
.nav-links a:not(.hire){ position: relative; }
.nav-links a:not(.hire)::after{
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 1px;
  background: var(--flare-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-links a:not(.hire):hover::after{ transform: scaleX(1); }
.nav-links .hire{
  box-shadow: 0 10px 24px -12px var(--flare-dim);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
.nav-links .hire:hover{ transform: translateY(-1px); }

/* ---------- Section numbering: agency-portfolio marker ----------
   Pure CSS counter on every top-level <section> inside <main>,
   rendered as a small fixed-width tag beside the section heading.
   No HTML changes — uses the existing .sec-head wrapper. */
main{ counter-reset: section-count; }
main > section{ counter-increment: section-count; }
main > section .sec-head{ position: relative; padding-left: 46px; }
main > section .sec-head::before{
  content: counter(section-count, decimal-leading-zero);
  position: absolute;
  left: 0; top: 4px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--flare);
  border: 1px solid var(--flare-line);
  background: var(--flare-dim);
  border-radius: 2px;
  padding: 3px 6px;
}
@media (max-width: 640px){
  main > section .sec-head{ padding-left: 0; }
  main > section .sec-head::before{ position: static; display: inline-block; margin-bottom: 12px; }
}

/* ---------- Hero: more confident scale, tighter tracking ---------- */
.hero-name{
  font-size: clamp(52px, 8.4vw, 104px);
  letter-spacing: -.035em;
}
.avail{
  border-color: var(--flare-line);
  background: linear-gradient(135deg, var(--flare-dim), #11111399);
}
.chip{
  border-radius: 4px;
  transition: border-color .2s, color .2s, transform .2s cubic-bezier(.22,1,.36,1);
}
.chip:hover{ border-color: var(--flare-line); color: var(--flare-bright); transform: translateY(-1px); }
.appanel{
  box-shadow: var(--elev-flare), 0 50px 100px -46px #000000d9;
}

/* ---------- Buttons: slightly larger, more premium depth ---------- */
.btn-primary{
  box-shadow: 0 16px 32px -16px #ff4d1c66;
}
.btn-primary:hover{
  box-shadow: 0 20px 40px -16px #ff4d1c80;
}
.btn-ghost{ transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s, color .2s; }
.btn-ghost:hover{ transform: translateY(-1px); }

/* ---------- Alternating section tone for rhythm (subtle, not banding) ---------- */
#about, #process, #cv{ background: var(--bg-2); }

/* ---------- Cards: unify elevation language across the page ---------- */
.svc{
  transition: background .25s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
  border-radius: 6px;
}
.svc:hover{ transform: translateY(-4px); box-shadow: var(--elev-1); }
.svc.feat{ border-top: 1px solid var(--flare-line); }
.svc.feat:hover{ box-shadow: var(--elev-flare); }
.svc-grid .svc:last-child{ grid-column: span 2; }

.cert{
  transition: border-color .2s, background .2s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.cert:hover{ transform: translateY(-2px); box-shadow: var(--elev-1); }

.res:hover{ box-shadow: var(--elev-1); }

.proc .step{ transition: background .25s, box-shadow .3s cubic-bezier(.22,1,.36,1); }
.proc .step:hover{ background: var(--raised); box-shadow: var(--elev-1); position: relative; z-index: 1; }

.qa:not(.open):hover{ border-color: var(--line-soft); background: var(--raised); }

.svc .num, .res .rt, .op .k{ font-weight: 700; letter-spacing: .1em; }

/* ---------- Ambient glow behind key trust/conversion sections ---------- */
#services, #certs{ position: relative; isolation: isolate; }
#services::before, #certs::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(600px 320px at 15% 0%, var(--flare-dim), transparent 60%);
  opacity: .5;
  pointer-events: none;
}

/* ---------- Footer: give it a top edge of intent instead of a plain line ---------- */
footer{
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--flare-dim), transparent 140px), #ffffff03;
}

@media (prefers-reduced-motion: reduce){
  .svc, .cert, .res, .btn-ghost, .proc .step, .nav-links a::after, .chip{
    transition-duration: .01ms !important;
  }
}