/* ==========================================================================
   VERNEX — pages.css
   Section and page-specific layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  display:grid; align-items:center;
  padding-top:calc(var(--vx-nav-h) + clamp(2rem,5vw,3.5rem));
  padding-bottom:clamp(3rem,6vh,5rem);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* slow-drifting aurora mesh in the brand teal */
.hero__aurora{
  position:absolute; inset:-25%;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(1,193,163,.30), transparent 62%),
    radial-gradient(34% 38% at 78% 22%, rgba(104,250,230,.16), transparent 65%),
    radial-gradient(46% 46% at 62% 78%, rgba(1,131,105,.30), transparent 68%),
    radial-gradient(30% 30% at 12% 74%, rgba(0,229,192,.12), transparent 70%);
  filter:blur(38px);
  animation:aurora 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes aurora{
  0%{ transform:translate3d(-2%,-1%,0) scale(1); }
  50%{ transform:translate3d(3%,2%,0) scale(1.09); }
  100%{ transform:translate3d(-1%,3%,0) scale(1.04); }
}
.hero__particles{ position:absolute; inset:0; width:100%; height:100%; }
.hero__vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 40%, transparent 30%, var(--vx-black) 92%);
}
.hero .grain{ z-index:2; }
.hero__inner{ position:relative; z-index:3; display:grid; justify-items:center; text-align:center; gap:clamp(1rem,1.8vw,1.5rem); }

/* split layout — text column + framed photo column */
.hero__inner--split{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(2rem,5vw,4rem); text-align:left; justify-items:stretch;
}
.hero__col{ display:grid; gap:clamp(1rem,1.6vw,1.4rem); }

.hero__path{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vx-muted); }
.hero__path i{ font-style:normal; color:var(--vx-teal); }

.hero h1{ max-width:14ch; font-size:clamp(2.4rem, 4.4vw, 4.3rem); }
.hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; }
.hero h1 .word > span{ display:inline-block; }
.hero__sub{ max-width:52ch; color:var(--vx-muted); font-size:clamp(1rem,1.25vw,1.14rem); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:flex-start; }

.hero__badges{ display:flex; flex-wrap:wrap; gap:1.3rem 1.8rem; list-style:none; padding:0; margin:.3rem 0 0; }
.hero__badges li{ display:flex; align-items:center; gap:.55rem; font-size:.86rem; color:var(--vx-muted); }
.hero__badges svg{ width:20px; height:20px; flex:none; stroke:var(--vx-teal); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.hero__col--media{ position:relative; }
.hero__frame{ aspect-ratio:6/5; }
.hero__frame img{ width:100%; height:100%; object-fit:cover; }
.hero__chip{
  position:absolute; left:-1.1rem; bottom:-1.2rem; z-index:4;
  display:flex; align-items:center; gap:.7rem; padding:.8rem 1.1rem;
}
.hero__chip img{ width:32px; height:32px; border-radius:9px; }
.hero__chip strong{ display:block; font-family:var(--vx-font-display); font-size:.95rem; font-weight:600; }
.hero__chip span{ display:block; font-size:.74rem; color:var(--vx-muted); }

@media (max-width:900px){
  .hero__inner--split{ grid-template-columns:1fr; text-align:center; }
  .hero__col{ justify-items:center; }
  .hero__path,.hero__actions,.hero__badges{ justify-content:center; }
  .hero h1{ max-width:16ch; }
  .hero__chip{ left:1rem; bottom:-1rem; }
}

/* single bar of stats, divided into columns — replaces four separate tiles */
.stats-bar{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(2rem,4vw,3.2rem);
  padding:1.3rem .5rem;
}
@media (min-width:760px){ .stats-bar{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stats-bar .stat{ position:relative; padding:.6rem 1rem; text-align:center; }
.stats-bar .stat + .stat::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:1px; height:60%; background:rgba(255,255,255,.12);
}
@media (max-width:759px){ .stats-bar .stat:nth-child(2n+1)::before{ display:none; } }
.stat__num{
  font-weight:600;
  font-size:clamp(1.5rem,2.9vw,2.4rem); line-height:1;
  background:var(--vx-grad-teal); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.stat__label{ margin-top:.5rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vx-muted); }

.scroll-cue{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; z-index:4;
  display:grid; justify-items:center; gap:.55rem;
  font-family:var(--vx-font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vx-muted);
}
.scroll-cue i{
  display:block; width:1px; height:38px;
  background:linear-gradient(180deg, var(--vx-teal), transparent);
  animation:cue 2.2s var(--vx-ease-out) infinite;
  transform-origin:top;
}
/* on short screens the cue would sit on top of the stats row */
@media (max-height:760px){ .scroll-cue{ display:none; } }
@keyframes cue{ 0%{ transform:scaleY(0); opacity:0; } 40%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1) translateY(38px); opacity:0; } }

/* page hero (inner pages) */
.phero{
  position:relative; overflow:hidden;
  padding-top:calc(var(--vx-nav-h) + clamp(3.5rem,7vw,6rem));
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
.phero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(52% 60% at 18% 0%, rgba(1,193,163,.22), transparent 62%),
    radial-gradient(40% 50% at 88% 10%, rgba(1,131,105,.2), transparent 68%);
}
.phero__inner{ position:relative; z-index:2; display:grid; gap:1.2rem; max-width:64ch; }
.phero h1{ font-size:clamp(2.4rem,6vw,4.75rem); }
.breadcrumbs{ font-family:var(--vx-font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vx-muted); }
.breadcrumbs a:hover{ color:var(--vx-teal); }

/* --------------------------------------------------------------------------
   ABOUT / PILLARS
   -------------------------------------------------------------------------- */
.pillars{ display:grid; gap:var(--vx-gap); grid-template-columns:1fr; }
@media (min-width:720px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
.pillar__k{ font-family:var(--vx-font-mono); font-size:.7rem; letter-spacing:.18em; color:var(--vx-teal); }
.pillar h3{ margin:.55rem 0 .5rem; font-size:1.18rem; }
.pillar p{ color:var(--vx-muted); font-size:.93rem; line-height:1.6; }

/* --------------------------------------------------------------------------
   SERVICES — bento grid
   -------------------------------------------------------------------------- */
.bento{ display:grid; gap:var(--vx-gap); grid-template-columns:1fr; }
@media (min-width:640px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1080px){
  .bento{ grid-template-columns:repeat(12,minmax(0,1fr)); }
  .bento__item{ grid-column:span 4; }
  .bento__item--7{ grid-column:span 7; }
  .bento__item--5{ grid-column:span 5; }
}
.bento__item h3{ margin-top:.2rem; }
.bento__item p{ color:var(--vx-muted); font-size:.95rem; }
.bento__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }

/* --------------------------------------------------------------------------
   STORE BAND + PRODUCTS
   -------------------------------------------------------------------------- */
.store-band{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(1,131,105,.16), transparent 55%),
    var(--vx-bg-2);
  border-block:1px solid var(--vx-line);
}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 1fr);
  gap:var(--vx-gap);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  scrollbar-width:thin; scrollbar-color:var(--vx-teal-deep) transparent;
}
.rail > *{ scroll-snap-align:start; }
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:var(--vx-teal-deep); border-radius:99px; }
.rail::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:99px; }
@media (min-width:900px){ .rail{ grid-auto-columns:minmax(260px,1fr); } }

.products{ display:grid; gap:var(--vx-gap); grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.product{ padding:0; overflow:hidden; }
.product__media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--vx-surface); }
.product__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--vx-ease-out); }
.product:hover .product__media img{ transform:scale(1.07); }
.product__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(1,193,163,.12), rgba(4,9,10,.6));
}
.product__tag{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  font-family:var(--vx-font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:var(--vx-r-pill);
  background:rgba(4,9,10,.7); border:1px solid rgba(1,193,163,.3); color:var(--vx-teal);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.product__body{ display:grid; gap:.5rem; padding:1.15rem 1.2rem 1.3rem; }
.product__name{ font-family:var(--vx-font-display); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; }
.product__desc{ color:var(--vx-muted); font-size:.87rem; line-height:1.55; }
.product__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.35rem; }
.product__price{ font-family:var(--vx-font-mono); font-size:1rem; color:var(--vx-teal-bright); }
.product.is-hidden{ display:none; }

.steps-strip{ display:grid; gap:var(--vx-gap); grid-template-columns:1fr; counter-reset:step; }
@media (min-width:760px){ .steps-strip{ grid-template-columns:repeat(3,1fr); } }
.step-card{ position:relative; padding:1.6rem 1.5rem; }
.step-card__n{
  font-family:var(--vx-font-mono); font-size:.72rem; letter-spacing:.18em; color:var(--vx-teal);
  display:block; margin-bottom:.7rem;
}
.step-card h3{ margin-bottom:.4rem; font-size:clamp(1.05rem,1.3vw,1.2rem); font-weight:600; letter-spacing:-.01em; }
.step-card p{ color:var(--vx-muted); font-size:.92rem; }

/* --------------------------------------------------------------------------
   PROCESS — line that draws itself
   -------------------------------------------------------------------------- */
.process{ position:relative; display:grid; gap:2rem; }
@media (min-width:900px){ .process{ grid-template-columns:repeat(4,1fr); gap:1.6rem; } }
.process__line{
  position:absolute; left:11px; top:6px; bottom:6px; width:2px;
  background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden;
}
.process__line i{ display:block; width:100%; height:100%; transform:scaleY(0); transform-origin:top;
  background:linear-gradient(180deg, var(--vx-glow), var(--vx-teal) 40%, var(--vx-teal-deep));
  box-shadow:0 0 14px rgba(1,193,163,.6); }
@media (min-width:900px){
  .process__line{ left:6px; right:6px; top:11px; bottom:auto; width:auto; height:2px; }
  .process__line i{ transform:scaleX(0); transform-origin:left;
    background:linear-gradient(90deg, var(--vx-glow), var(--vx-teal) 40%, var(--vx-teal-deep)); }
}
.pstep{ position:relative; padding-left:3.2rem; }
@media (min-width:900px){ .pstep{ padding-left:0; padding-top:3.2rem; } }
.pstep__dot{
  position:absolute; left:0; top:0;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--vx-black); border:2px solid var(--vx-teal);
  box-shadow:0 0 0 5px rgba(1,193,163,.12), 0 0 18px rgba(1,193,163,.5);
}
.pstep__dot::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--vx-teal); }
.pstep__k{ font-family:var(--vx-font-mono); font-size:.7rem; letter-spacing:.18em; color:var(--vx-teal); }
.pstep h3{ margin:.5rem 0 .45rem; font-size:1.25rem; }
.pstep p{ color:var(--vx-muted); font-size:.93rem; line-height:1.6; max-width:34ch; }

/* --------------------------------------------------------------------------
   PORTFOLIO — masonry
   -------------------------------------------------------------------------- */
.masonry{ columns:1; column-gap:var(--vx-gap); }
@media (min-width:640px){ .masonry{ columns:2; } }
@media (min-width:1080px){ .masonry{ columns:3; } }
.work{
  position:relative; display:block; width:100%;
  break-inside:avoid; margin-bottom:var(--vx-gap);
  border-radius:var(--vx-r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:var(--vx-surface);
  box-shadow:0 14px 40px rgba(0,0,0,.4);
  transition:border-color .4s var(--vx-ease-out), transform .5s var(--vx-ease-out), box-shadow .4s;
  text-align:left;
}
.work:hover{ border-color:rgba(1,193,163,.4); transform:translateY(-5px); box-shadow:0 26px 60px rgba(0,0,0,.55), 0 0 40px rgba(1,193,163,.1); }
.work img{ width:100%; height:auto; transition:transform .9s var(--vx-ease-out), filter .5s; display:block; }
.work:hover img{ transform:scale(1.07); }
.work__ov{
  position:absolute; inset:0; display:grid; align-content:end; gap:.3rem;
  padding:1.3rem;
  background:linear-gradient(180deg, transparent 35%, rgba(1,131,105,.35) 72%, rgba(4,9,10,.92));
  opacity:0; transition:opacity .45s var(--vx-ease-out);
}
.work:hover .work__ov,.work:focus-visible .work__ov{ opacity:1; }
.work__cat{ font-family:var(--vx-font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vx-glow); }
.work__title{ font-family:var(--vx-font-display); font-weight:600; font-size:1.1rem; letter-spacing:-.01em; }
.work.is-hidden{ display:none; }

/* --------------------------------------------------------------------------
   WHY US
   -------------------------------------------------------------------------- */
.reasons{ display:grid; gap:var(--vx-gap); grid-template-columns:1fr; }
@media (min-width:700px){ .reasons{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .reasons{ grid-template-columns:repeat(3,1fr); } }
.reason{ display:flex; gap:1.05rem; align-items:flex-start; padding:1.35rem 1.4rem; }
.reason__ico{
  width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:13px;
  background:linear-gradient(150deg, rgba(1,193,163,.16), rgba(255,255,255,.02));
  border:1px solid rgba(1,193,163,.22);
}
.reason__ico svg{ width:21px; height:21px; stroke:var(--vx-teal); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.reason h3{ margin-bottom:.3rem; font-size:clamp(1.05rem,1.3vw,1.2rem); font-weight:600; letter-spacing:-.01em; }
.reason p{ color:var(--vx-muted); font-size:.9rem; line-height:1.6; }

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */
.tslider{ position:relative; overflow:hidden; }
.ttrack{ display:flex; gap:var(--vx-gap); cursor:grab; touch-action:pan-y; will-change:transform; }
.ttrack.is-dragging{ cursor:grabbing; }
.tcard{
  flex:0 0 min(420px, 84vw);
  padding:1.8rem 1.7rem;
  display:grid; gap:1.1rem; align-content:start;
}
.tcard__quote{ font-size:1rem; line-height:1.7; color:var(--vx-text); }
.tcard__stars{ display:flex; gap:.2rem; }
.tcard__stars svg{ width:15px; height:15px; fill:var(--vx-teal); }
.tcard__who{ display:flex; align-items:center; gap:.8rem; margin-top:.2rem; }
.tcard__av{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--vx-font-display); font-weight:700; font-size:.95rem; color:var(--vx-black);
  background:var(--vx-grad-teal);
}
.tcard__name{ font-weight:600; font-size:.95rem; }
.tcard__role{ font-size:.8rem; color:var(--vx-muted); }
.tdots{ display:flex; justify-content:center; margin-top:1.4rem; }
/* 44px hit area, small visual dot */
.tdot{ width:34px; height:44px; display:grid; place-items:center; }
.tdot::before{
  content:""; display:block; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.22);
  transition:background .3s var(--vx-ease-out), width .3s var(--vx-ease-out), box-shadow .3s;
}
.tdot:hover::before{ background:rgba(255,255,255,.4); }
.tdot[aria-current="true"]::before{ background:var(--vx-teal); width:24px; border-radius:99px; box-shadow:0 0 12px rgba(1,193,163,.7); }

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; text-align:center; }
.cta-band__glow{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(860px,110vw); aspect-ratio:2/1; border-radius:50%;
  background:radial-gradient(circle, rgba(1,193,163,.3), transparent 68%);
  filter:blur(60px); z-index:0;
}
/* the banner itself reads as one floating rounded card, not a full-bleed strip */
.cta-band .wrap{
  position:relative; z-index:1;
  padding:clamp(2.4rem,5vw,3.6rem) clamp(1.6rem,5vw,3.6rem);
  border-radius:var(--vx-r-xl);
  background:var(--vx-glass-bg);
  backdrop-filter:blur(var(--vx-glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--vx-glass-blur)) saturate(180%);
  border:1px solid var(--vx-glass-border);
  box-shadow:var(--vx-glass-shadow);
}
.cta-band h2{ max-width:16ch; margin-inline:auto; }

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-grid{ display:grid; gap:clamp(1.6rem,3vw,3rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:980px){ .contact-grid{ grid-template-columns:1.15fr .85fr; } }
.form{ display:grid; gap:1rem; padding:clamp(1.4rem,2.4vw,2.2rem); }
.form__row{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .form__row{ grid-template-columns:1fr 1fr; } }

.contact-list{ display:grid; gap:.8rem; }
.contact-item{ display:flex; gap:1rem; align-items:center; padding:1.05rem 1.2rem; }
.contact-item__ico{
  width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(1,193,163,.16), rgba(255,255,255,.02));
  border:1px solid rgba(1,193,163,.22);
}
.contact-item__ico svg{ width:19px; height:19px; stroke:var(--vx-teal); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.contact-item__k{ font-family:var(--vx-font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vx-muted); }
.contact-item__v{ font-size:.98rem; font-weight:500; }
.contact-item__v:hover{ color:var(--vx-teal); }

.map-embed{
  position:relative; aspect-ratio:16/10; border-radius:var(--vx-r-lg); overflow:hidden;
  border:1px solid var(--vx-line); background:var(--vx-surface);
  display:grid; place-items:center; text-align:center; gap:.6rem; padding:2rem;
}
.map-embed::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(1,193,163,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,193,163,.10) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000, transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%, #000, transparent 72%);
}
.map-embed__pin{
  position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(1,193,163,.16); border:1px solid rgba(1,193,163,.4);
  box-shadow:0 0 30px rgba(1,193,163,.35);
}
.map-embed__pin svg{ width:22px; height:22px; stroke:var(--vx-teal); fill:none; stroke-width:1.5; }
.map-embed p{ position:relative; color:var(--vx-muted); font-size:.88rem; max-width:40ch; }

/* --------------------------------------------------------------------------
   SERVICES PAGE — alternating blocks + sticky side nav
   -------------------------------------------------------------------------- */
.svc-layout{ display:grid; gap:clamp(2rem,4vw,4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:1100px){ .svc-layout{ grid-template-columns:210px minmax(0,1fr); gap:3.5rem; } }
.svc-nav{ display:none; }
@media (min-width:1100px){
  .svc-nav{ display:grid; gap:.2rem; position:sticky; top:calc(var(--vx-nav-h) + 1.5rem); }
}
.svc-nav a{
  display:flex; gap:.7rem; align-items:baseline;
  padding:.6rem .8rem; border-radius:var(--vx-r-sm);
  font-size:.86rem; color:var(--vx-muted);
  border-left:2px solid transparent;
  transition:color .3s, border-color .3s, background .3s;
}
.svc-nav a span{ font-family:var(--vx-font-mono); font-size:.68rem; color:var(--vx-teal); }
.svc-nav a:hover{ color:var(--vx-text); background:rgba(255,255,255,.04); }
.svc-nav a.is-active{ color:var(--vx-text); border-left-color:var(--vx-teal); background:rgba(1,193,163,.07); }

.svc-blocks{ display:grid; gap:clamp(3.5rem,7vw,7rem); }
.svc-block{ display:grid; gap:clamp(1.5rem,3vw,3rem); grid-template-columns:1fr; align-items:center; scroll-margin-top:calc(var(--vx-nav-h) + 2rem); }
@media (min-width:860px){
  .svc-block{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc-block:nth-child(even) .svc-block__media{ order:2; }
}
.svc-block__media{ position:relative; }
.svc-block__media .frame{ aspect-ratio:16/10; }
.svc-block__n{
  position:absolute; right:-.4rem; top:-1.6rem; z-index:3;
  font-family:var(--vx-font-mono); font-weight:500;
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:1;
  color:rgba(215,221,224,.07); letter-spacing:-.04em;
}
.svc-block h2{ font-size:clamp(1.7rem,3.2vw,2.6rem); }
.svc-block p{ color:var(--vx-muted); }
.checklist{ display:grid; gap:.6rem; margin:.3rem 0 .4rem; }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; }
.checklist svg{ width:19px; height:19px; flex:none; margin-top:.15rem; stroke:var(--vx-teal); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* --------------------------------------------------------------------------
   ABOUT PAGE
   -------------------------------------------------------------------------- */
.split{ display:grid; gap:clamp(1.6rem,3.5vw,3.5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mv{ display:grid; gap:var(--vx-gap); grid-template-columns:1fr; }
@media (min-width:760px){ .mv{ grid-template-columns:repeat(2,1fr); } }
.mv__card{ padding:clamp(1.5rem,2.6vw,2.2rem); display:grid; gap:.8rem; align-content:start; }
.mv__card h3{ font-size:1.35rem; }
.mv__card p{ color:var(--vx-muted); font-size:.96rem; }

.tools{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tool{
  padding:.55rem 1.05rem; border-radius:var(--vx-r-pill);
  font-size:.85rem; color:var(--vx-silver-dim);
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  transition:color .3s, border-color .3s, transform .3s var(--vx-spring);
}
.tool:hover{ color:var(--vx-text); border-color:rgba(1,193,163,.35); transform:translateY(-3px); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.nf{
  min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:calc(var(--vx-nav-h) + 3rem) 0 4rem; position:relative; overflow:hidden;
}
.nf__code{
  font-family:var(--vx-font-display); font-weight:700; line-height:.85;
  font-size:clamp(6rem,26vw,18rem); letter-spacing:-.05em;
  background:var(--vx-grad-metal); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 20px 60px rgba(1,193,163,.25));
}
.nf__inner{ position:relative; z-index:2; display:grid; justify-items:center; gap:1.4rem; }

/* --------------------------------------------------------------------------
   Mobile performance — lighter blur so scrolling stays smooth
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  :root{ --vx-glass-blur:12px; }
  .menu{ backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .card,.tile,.acc__item,.filter,.social{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .hero__aurora{ filter:blur(30px); }
  .footer__mark{ bottom:-1rem; }
}