/* ===================================================================
   UI TOKENS (scoped to this sheet; safe fallbacks)
=================================================================== */
:root{
  --pr-radius: 18px;
  --pr-gap: 22px;
  --pr-pad: 22px;
  --pr-shadow: 0 16px 40px rgba(0,0,0,.38);
  --pr-shadow-lg: 0 24px 64px rgba(0,0,0,.55);
  --pr-bg: linear-gradient(180deg, rgba(12,18,30,.94), rgba(10,15,26,.90));
  --pr-border-anim: conic-gradient(from 140deg, var(--accent-1), var(--accent-2), var(--accent-1));
  --fg-strong: #f8fafc;
  --fg: #e8eef7;
  --fg-subtle: #cbd5e1;
  --fg-muted: #d6deea;
}

/* ===================================================================
   PRICING CARDS
=================================================================== */
.pricing-grid{
  display:grid;
  gap:var(--pr-gap);
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .pricing-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .pricing-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* 2-plan layout: balanced on tablet, larger balanced columns on desktop */
.pricing-grid--two{
  max-width:900px;
  margin-inline:auto;
}
@media (min-width:768px){
  .pricing-grid--two{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .pricing-grid--two{ grid-template-columns:repeat(2,1fr); }
}

.price-card{
  position:relative;
  border:1px solid transparent;
  border-radius:var(--pr-radius);
  padding:var(--pr-pad);
  color:var(--fg);
  background:
    var(--pr-bg) padding-box,
    var(--pr-border-anim) border-box;
  background-size:100% 100%, 200% 200%;
  box-shadow:var(--pr-shadow);
  transition:transform .22s var(--easing), box-shadow .22s var(--easing);
  will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  .price-card{ animation:prBorder 22s linear infinite; }
  @keyframes prBorder{ to{ background-position:0 0, 200% 0; } }
}
.price-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--pr-shadow-lg);
}
.price-card--featured{
  z-index:1;
  box-shadow:
    0 26px 90px color-mix(in oklab,var(--accent-1),black 80%),
    0 16px 48px rgba(0,0,0,.55);
}
/* Premium plan: more dominant — slightly taller feel, stronger glow */
.price-card--premium{
  z-index:2;
  transform:scale(1.01);
  border-color:color-mix(in oklab,var(--accent-1),transparent 55%);
  box-shadow:
    0 0 0 1px color-mix(in oklab,var(--accent-1),transparent 60%),
    0 30px 100px color-mix(in oklab,var(--accent-1),black 70%),
    0 16px 48px rgba(0,0,0,.60);
}
.price-card--premium:hover{
  transform:scale(1.01) translateY(-3px);
}

.price-badge{
  position:absolute; top:-12px; left:-12px;
  padding:.42rem .64rem;
  font:800 .72rem/1 var(--font-sans, inherit);
  color:#1b1207;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 10px 20px color-mix(in oklab,var(--accent-1),black 72%);
}
/* Premium badge: uppercase, wider, bolder glow */
.price-badge--premium{
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.4rem .8rem;
  box-shadow:
    0 12px 28px color-mix(in oklab,var(--accent-1),black 65%),
    0 0 0 1px color-mix(in oklab,var(--accent-1),transparent 40%);
}

.price-head h3{
  margin:0 0 .35rem;
  font-weight:900; font-size:1.18rem; line-height:1.2;
  color:var(--fg-strong);
  text-shadow:0 1px 0 rgba(0,0,0,.32);
}
.price-head .subtitle{
  margin:0 0 .7rem;
  color:var(--fg-subtle);
}

.price-amount{
  margin:.25rem 0 .5rem;
  font-weight:900; font-size:2.15rem; line-height:1.05;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.price-list{
  list-style:none; padding:0; margin:.5rem 0 1.05rem;
}
.price-list li{
  position:relative; padding-left:1.15rem; line-height:1.58; color:var(--fg-muted);
}
.price-list li::before{
  content:""; position:absolute; left:0; top:.58rem;
  width:.48rem; height:.48rem; border-radius:999px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 0 0 3px rgba(148,163,184,.12),
             0 0 12px color-mix(in oklab,var(--accent-1),transparent 60%);
}

.price-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.9rem 1rem; border-radius:14px;
  font-weight:800; color:#1a1208; text-decoration:none;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 12px 30px color-mix(in oklab,var(--accent-1),black 74%);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.price-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px color-mix(in oklab,var(--accent-1),black 70%);
  filter:saturate(1.02);
}
/* Premium CTA: full gradient glow ring on hover */
.price-cta--premium{
  letter-spacing:.02em;
  box-shadow:
    0 12px 36px color-mix(in oklab,var(--accent-1),black 68%),
    0 0 0 1px color-mix(in oklab,var(--accent-1),transparent 50%);
}
.price-cta--premium:hover{
  box-shadow:
    0 18px 52px color-mix(in oklab,var(--accent-1),black 60%),
    0 0 0 2px color-mix(in oklab,var(--accent-1),transparent 35%);
  filter:saturate(1.05) brightness(1.04);
}

/* Pricing — fee breakdown, examples, guide, hosting */
.price-fees{
  display:grid;
  gap:.75rem;
  margin:.5rem 0 .65rem;
}
.price-fee{
  padding:.65rem .75rem;
  border-radius:12px;
  border:1px solid color-mix(in oklab,currentColor,transparent 88%);
  background:rgba(15,19,24,.45);
}
.price-fee--monthly{
  border-color:color-mix(in oklab,var(--accent-1),transparent 75%);
  background:color-mix(in oklab,var(--accent-1),transparent 92%);
}
.price-fee__label{
  display:block;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-subtle);
  margin-bottom:.25rem;
}
.price-fee--monthly .price-fee__label{
  color:color-mix(in oklab,var(--accent-1),white 30%);
}
.price-monthly{
  font-weight:800;
  font-size:1.05rem;
  line-height:1.2;
  color:var(--fg-strong);
}
.price-examples{
  margin:.85rem 0 1rem;
  padding:.75rem .85rem;
  border-radius:12px;
  border:1px solid color-mix(in oklab,currentColor,transparent 88%);
  background:rgba(8,12,18,.35);
}
.price-examples__label{
  margin:0 0 .4rem;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--fg-subtle);
}
.price-examples__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.3rem;
}
.price-examples__list li{
  position:relative;
  padding-left:.85rem;
  font-size:.82rem;
  line-height:1.45;
  color:var(--fg-muted);
}
.price-examples__list li::before{
  content:"•";
  position:absolute;
  left:0;
  color:color-mix(in oklab,var(--accent-1),white 20%);
}
.pricing-guide{
  padding:1.35rem 1.25rem;
  border-radius:16px;
  border:1px solid color-mix(in oklab,currentColor,transparent 85%);
  background:rgba(15,23,42,.4);
  text-align:center;
}
.pricing-guide__title{
  margin:0;
  font-size:1.15rem;
  font-weight:800;
  color:var(--fg-strong);
}
.pricing-guide__list{
  margin:1rem 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.55rem;
  text-align:left;
  max-width:36rem;
  margin-inline:auto;
}
.pricing-guide__list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.35rem .5rem;
  font-size:.9rem;
  color:var(--fg-muted);
}
.pricing-guide__list strong{
  color:var(--fg-strong);
  font-weight:800;
}
.pricing-guide__cta{
  margin-top:1.15rem;
}
.pricing-hosting{
  padding:1.5rem 1.25rem;
  border-radius:16px;
  border:1px solid color-mix(in oklab,currentColor,transparent 85%);
  background:rgba(15,23,42,.45);
}
.pricing-hosting__title{
  margin:0;
  font-size:1.25rem;
  font-weight:800;
  color:var(--fg-strong);
}
.pricing-hosting__lead{
  margin:.65rem 0 0;
  max-width:40rem;
  font-size:.9rem;
  line-height:1.6;
  color:var(--fg-subtle);
}
.pricing-hosting__grid{
  display:grid;
  gap:.55rem .75rem;
  margin:1.15rem 0 0;
  padding:0;
  list-style:none;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){
  .pricing-hosting__grid{ grid-template-columns:repeat(4,1fr); }
}
.pricing-hosting__grid li{
  position:relative;
  padding-left:1.15rem;
  font-size:.85rem;
  line-height:1.45;
  color:var(--fg-muted);
}
.pricing-hosting__grid li::before{
  content:"✓";
  position:absolute;
  left:0;
  font-weight:800;
  color:color-mix(in oklab,var(--accent-2),white 15%);
}

/* ===================================================================
   COMPARE TABLE (mini-friendly)
=================================================================== */
.compare{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:.93rem;
  border-radius:14px;
  overflow:hidden;
}
.compare th,.compare td{
  padding:14px;
  text-align:center;
  border-bottom:1px solid color-mix(in oklab,currentColor,transparent 86%);
}
.compare thead th{
  font-weight:800;
  background:color-mix(in oklab,var(--panel,#0f1722),transparent 90%);
}
.compare :is(thead th:first-child, tbody th:first-child, tbody td:first-child){
  text-align:left; font-weight:600;
}
.compare tbody tr:nth-child(odd){
  background:color-mix(in oklab,var(--panel,#0f1722),transparent 92%);
}
.compare thead th.is-featured{
  color:#fff;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--accent-1),transparent 78%),
      color-mix(in oklab,var(--accent-2),transparent 86%)),
    linear-gradient(180deg, rgba(12,20,34,.96), rgba(10,16,28,.92));
}
.compare td:nth-child(3){
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--accent-1),transparent 94%),
    color-mix(in oklab,var(--accent-2),transparent 96%));
}

/* simple, readable indicators */
.compare td.yes::before,
.compare td.no::before,
.compare td.opt::before{
  display:inline-block; margin-right:.4rem; font-weight:800;
}
.compare td.yes::before{
  content:"✓"; color:#22c55e;
  border:1px solid rgba(34,197,94,.35);
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}
.compare td.no::before{
  content:"✕"; color:#ef4444;
  border:1px solid rgba(239,68,68,.35);
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
}
.compare td.opt::before{ content:"○"; color:#eab308; }

.compare-wrap{ overflow-x:auto; }
@media (max-width:900px){ .compare{ font-size:.78rem; } .compare th,.compare td{ padding:8px 6px; } }

/* ===================================================================
   REVEAL / SHINE / CODE-TICKER (motion-safe)
=================================================================== */
.reveal{ --reveal-delay:0ms; opacity:0; transform:translateY(14px) scale(.98); }
.reveal.is-inview{
  opacity:1; transform:translateY(0) scale(1);
  transition:transform .6s var(--easing), opacity .6s ease;
  transition-delay:var(--reveal-delay);
}
.reveal.d1{ --reveal-delay:.08s; }
.reveal.d2{ --reveal-delay:.16s; }
.reveal.d3{ --reveal-delay:.24s; }
.reveal.d4{ --reveal-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-inview{ transform:none; transition:none; opacity:1; }
}

.btn-shine{ position:relative; overflow:hidden; }
.btn-shine::after{
  content:""; position:absolute; inset:-120% -40% auto auto; width:120%; height:200%;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-120%) rotate(6deg);
  transition:transform .7s ease;
}
.btn-shine:hover::after{ transform:translateX(30%) rotate(6deg); }

.code-ticker{
  position:relative; overflow:hidden;
  font:600 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color:#e6edf7;
}
.code-ticker .code-lines{ margin:0; white-space:pre-wrap; min-height:54px; }
.code-ticker .code-lines::after{
  content:"▌"; margin-left:2px; color:var(--accent-1); opacity:.9;
  animation:caret-blink 1s steps(1,end) infinite;
}
@keyframes caret-blink{ 50%{ opacity:0 } }
.code-ticker::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to right,  rgba(255,255,255,.02)  0 1px, transparent 1px 22px);
  mask:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.2) 100%);
}

/* ===================================================================
   HEADER + 3D PANEL (unchanged behaviour, tidied)
=================================================================== */
#siteHeader svg{ display:block; }
#siteHeader .group{ align-items:center; }

.panel-3d{
  position:relative; border-radius:20px;
  background:color-mix(in oklab,var(--panel,#0e131b),transparent 8%);
  border:1px solid color-mix(in oklab,var(--ring,#233041),transparent 15%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 16px 40px rgba(0,0,0,.45);
}
.panel-3d::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 35%),
    linear-gradient(0deg,rgba(0,0,0,.22),rgba(0,0,0,0) 50%);
  mix-blend-mode:overlay;
}
.panel-3d::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(140% 110% at 0% 0%, rgba(255,165,90,.22), transparent 60%),
    radial-gradient(140% 110% at 100% 100%, rgba(34,197,94,.18), transparent 60%);
  opacity:.7;
}
.video-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); display:block; }
html.dark .video--forest{ display:none; }
html:not(.dark) .video--forge{ display:none; }
.video-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.18) 40%, rgba(0,0,0,.28)),
    radial-gradient(80% 80% at 50% 10%, rgba(0,0,0,.25), transparent 60%);
}
html:not(.dark) .video-overlay{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06) 40%, rgba(0,0,0,.08)),
    radial-gradient(80% 80% at 50% 10%, rgba(255,255,255,.12), transparent 60%);
}

/* ===================================================================
   CONTACT / FAQ / VALUE BAND / WORK (kept)
=================================================================== */
.form-card{
  border-radius:18px; padding:1rem; background:rgba(15,19,24,.55);
  border:1px solid color-mix(in oklab,currentColor,transparent 78%);
}
@media (min-width:768px){ .form-card{ padding:1.25rem; } }

.aside-card{
  border:1px solid color-mix(in oklab,currentColor,transparent 78%);
  border-radius:14px; background:rgba(15,19,24,.55); padding:.9rem 1rem;
}
.include-pill{
  border:1px solid color-mix(in oklab,currentColor,transparent 78%);
  background:rgba(15,19,24,.55); border-radius:14px; padding:.7rem .9rem;
}
.faq-card{
  border:1px solid color-mix(in oklab,currentColor,transparent 78%);
  border-radius:14px; background:rgba(15,19,24,.55); padding:.9rem 1rem;
}
.faq-card summary::marker{ display:none; }

.proj-skel{
  overflow:hidden; border-radius:20px;
  border:1px solid color-mix(in oklab,var(--ring,#233041),transparent 18%);
  background:linear-gradient(180deg,rgba(11,18,32,.92),rgba(10,15,26,.88));
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.skel-media{
  width:100%;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,176,98,.20), transparent 60%),
    radial-gradient(120% 90% at 100% 0%, rgba(100,181,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
  border-bottom:1px solid color-mix(in oklab,var(--ring,#233041),transparent 18%);
}
.skel-lines{ padding:16px; display:grid; gap:10px; }
.line{
  height:10px; border-radius:8px;
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.18), rgba(255,255,255,.10));
  background-size:200% 100%;
  animation:shimmer 1.6s linear infinite; opacity:.85;
}
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* mobile rounding parity for 3D panel */
.panel-3d{ border-radius:16px; }
@media (min-width:768px){ .panel-3d{ border-radius:20px; } }

/* ===================================================================
   PROCESS ICON HOT-FIX (scoped)
=================================================================== */
.process .picon{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
}
@media (min-width:768px){ .process .picon{ width:50px; height:50px; } }
.process .picon svg{
  width:24px !important; height:24px !important; display:block;
  max-width:none; max-height:none;
  stroke:#0b0f1a; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  fill:none; vector-effect:non-scaling-stroke;
}
.process svg{ width:auto; height:auto; }

/* track centering with icon size */
:root{ --pstep-pad:18px; --picon:50px; --picon-m:48px; }
.process-grid::before{
  left:calc(var(--pstep-pad) + var(--picon-m)/2);
  top:calc(var(--pstep-pad) + var(--picon-m)/2);
  bottom:calc(var(--pstep-pad) + var(--picon-m)/2);
  width:2px;
}
@media (min-width:768px){
  .process-grid::before{
    left:calc(var(--pstep-pad) + var(--picon)/2);
    right:calc(var(--pstep-pad) + var(--picon)/2);
    top:calc(var(--pstep-pad) + var(--picon)/2);
    height:2px; width:auto; bottom:auto;
  }
  .pstep::after{
    left:calc(var(--pstep-pad) + var(--picon)/2);
    top:calc(var(--pstep-pad) + var(--picon)/2);
  }
}

/* =========================
   MINI PROCESS (matches your HTML)
   – vertical on mobile, horizontal on md+
   – crisp 24px SVGs inside 48/50px tiles
   – subtle gradient track + hover lift
========================= */

:root{
  --proc-pad: 18px;
  --proc-gap: 18px;
  --proc-radius: 16px;
  --proc-icon-m: 48px;
  --proc-icon: 50px;
  --proc-track: linear-gradient(90deg,
                    color-mix(in oklab,var(--accent-1,#f59e0b),transparent 20%),
                    color-mix(in oklab,var(--accent-2,#22c55e),transparent 20%));
}

.process{ position:relative; isolation:isolate; }
.process-grid{
  display:grid; gap:var(--proc-gap); margin-top:1.25rem; list-style:none; padding:0;
  grid-template-columns:1fr;
  position:relative;
}

/* track (vertical on mobile) */
.process-grid::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left: calc(var(--proc-pad) + var(--proc-icon-m)/2);
  top:  calc(var(--proc-pad) + var(--proc-icon-m)/2);
  bottom: calc(var(--proc-pad) + var(--proc-icon-m)/2);
  width:2px; border-radius:2px; opacity:.35; background: var(--proc-track);
}

.pstep{
  position:relative; z-index:1;
  display:flex; gap:14px; align-items:flex-start;
  padding:var(--proc-pad);
  border-radius:var(--proc-radius);
  border:1px solid color-mix(in oklab,var(--ring,#233041),transparent 18%);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.06));
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  transition:transform .18s var(--easing), box-shadow .18s var(--easing);
}
.pstep:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.28); }

/* connector dot (centered to icon) */
.pstep::after{
  content:""; position:absolute; z-index:2; width:8px; height:8px; border-radius:999px;
  background:linear-gradient(135deg,var(--accent-1,#f59e0b),var(--accent-2,#22c55e));
  box-shadow:0 0 0 4px rgba(255,255,255,.04);
  left: calc(var(--proc-pad) + var(--proc-icon-m)/2);
  top:  calc(var(--proc-pad) + var(--proc-icon-m)/2);
  transform:translate(-50%,-50%);
}

/* icon tile */
.picon{
  width:var(--proc-icon-m); height:var(--proc-icon-m);
  border-radius:14px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent-1,#f59e0b),var(--accent-2,#22c55e));
  box-shadow:0 8px 22px color-mix(in oklab,var(--accent-1,#f59e0b),black 70%);
}
.picon svg{
  width:24px !important; height:24px !important; display:block;
  max-width:none; max-height:none;
  stroke:#0b0f1a; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  fill:none; vector-effect:non-scaling-stroke;
}

/* text */
.pnum{
  display:inline-block; margin-top:2px;
  font-weight:800; font-size:.75rem; letter-spacing:.06em; color:#94a3b8;
  padding:.18rem .55rem; border-radius:999px;
  border:1px solid color-mix(in oklab,currentColor,transparent 68%);
  background:rgba(255,255,255,.04);
}
.pbody h3{ margin:.25rem 0 .15rem; font-weight:800; }
.pbody p{ margin:0; color:#cbd5e1; }

/* -------------------------
   Desktop: 4 columns + horizontal track
------------------------- */
/* Remove middle dot for desktop timeline */
@media (min-width:768px){
  .pstep::after{ display:none; }
}

/* If you also don’t want dots at all (mobile included), just kill it globally: */
.pstep::after{ display:none; }


/* motion-safe */
@media (prefers-reduced-motion:reduce){
  .pstep{ transition:none; }
}

/* Optional: quick slide-down animation for the mobile sheet */
@keyframes sheetIn {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
#mobileMenu nav { animation: sheetIn .16s ease-out; }

/* Header height variable (JS keeps it updated) */
:root { --header-h: 64px; }

/* Mobile menu should always attach below the header */
#mobileMenu{
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 60; /* above page, below overlays if any */
}

/* When menu is open, force header visible (ignore headroom translate) */
html.menu-open #siteHeader{
  transform: translateY(0) !important;
}

/* (Optional) prevent body scroll when menu is open */
html.menu-open, html.menu-open body {
  overflow: hidden;
}

/* Frosted panel behind the compare table */
.compare-panel{
  border-radius:16px;
  padding:12px;
  background:rgba(10,15,26,.72);
  backdrop-filter:saturate(1.05) blur(8px);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
@media (max-width:720px){ .compare-panel{ padding:8px; } }

/* Stronger table contrast on video */
.compare th, .compare td{
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  border-bottom-color: rgba(255,255,255,.10);
}
.compare thead th{
  background: rgba(15,23,42,.88) !important; /* deep slate */
}
.compare tbody tr:nth-child(odd){
  background: rgba(15,23,42,.70) !important;
}
/* highlighted col for 2-plan table: col 2 = Business System */
.compare td:nth-child(3){
  background: linear-gradient(180deg,
    rgba(255,122,24,.10),
    rgba(255,179,71,.08)) !important; /* subtle featured col wash */
}

/* Make the ✓ / ✕ badges crisper on dark video */
.compare td.yes::before,
.compare td.no::before{
  display:inline-grid; place-items:center;
  width:1.1rem; height:1.1rem; border-radius:6px;
  margin-right:.5rem; font-weight:900; line-height:1;
  background: rgba(0,0,0,.35);
}

/* Stronger header overlay for legibility on video */
#siteHeader .backdrop-blur-sm{
  background:rgba(0,0,0,.55) !important;
}

/* Optional: calm hero background motion */
@media (prefers-reduced-motion:no-preference){
  .hero .gradient-mesh{ animation:none; }
}

/* Reusable frosted panel for text on busy backgrounds */
.panel-frost{
  border-radius:16px; padding:10px 14px;
  background:rgba(10,15,26,.65);
  backdrop-filter:saturate(1.05) blur(8px);
  border:1px solid rgba(148,163,184,.18);
}
.hero__lead{
  display:block;
  width:100%;
  max-width:100%;
  font-size:.875rem;
  font-weight:600;
  line-height:1.55;
}

/* === Contact loader animations === */
@keyframes wfc-spin { to { transform: rotate(360deg); } }
@keyframes wfc-spin-rev { to { transform: rotate(-360deg); } }
@keyframes wfc-dots {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
  100% { content: "."; }
}

.wfc-gear-outer { transform-origin: 60px 60px; animation: wfc-spin 2.2s linear infinite; }
.wfc-gear-inner { transform-origin: 60px 60px; animation: wfc-spin-rev 1.6s linear infinite; }

/* animated dots after the span text */
.wfc-dots::after { display: inline-block; width: 1.5ch; text-align: left; animation: wfc-dots 1.2s steps(3, end) infinite; content: "."; }

/* prevent scroll when overlay open (we toggle this on <body>) */
.body-lock { overflow: hidden; }

/* Language flag buttons */
.lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(15,23,42,.6); /* slate-900/60 */
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.lang-flag img { width: 100%; height: 100%; object-fit: cover; display:block; }
.lang-flag:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(251,146,60,.4); } /* orange-ish ring */
.lang-flag.is-active { box-shadow: 0 0 0 2px rgba(251,146,60,.8); }
.lang-flags { user-select: none; }


/* ===== Language dropdown ===== */
.lang-btn{
  display:inline-flex;align-items:center;gap:.125rem;
  padding:.375rem .5rem;border-radius:.75rem;
  background:rgba(15,23,42,.55); /* slate-900/55 */
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(140%) blur(6px);
  transition:box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.lang-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.lang-btn:focus-visible{ outline:2px solid rgba(251,146,60,.8); outline-offset:2px; }
.lang-btn img{ width:18px; height:18px; border-radius:9999px; object-fit:cover; display:block; }

.lang-menu{
  position:absolute; right:0; margin-top:.5rem; min-width:12rem;
  border-radius:1rem; padding:.4rem;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.02);
  transform-origin:top right;
  opacity:0; transform:scale(.96) translateY(-4px);
  pointer-events:none; transition:opacity .16s ease, transform .16s ease;
  z-index:60;
}
.lang-menu[data-open="true"]{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }

.lang-item{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.5rem .6rem; border-radius:.6rem;
  color:#e5e7eb; /* slate-200 */
  transition:background .12s ease, transform .06s ease;
}
.lang-item img{ width:18px; height:18px; border-radius:9999px; object-fit:cover; }
.lang-item span{ flex:1; text-align:left; font-weight:600; }
.lang-item kbd{
  font-size:.65rem; opacity:.7; padding:.1rem .35rem; border-radius:.35rem;
  background:rgba(148,163,184,.15); border:1px solid rgba(148,163,184,.25);
}
.lang-item:hover{ background:rgba(255,255,255,.06); }
.lang-item[aria-current="true"]{ background:rgba(251,146,60,.15); box-shadow:inset 0 0 0 1px rgba(251,146,60,.35); }

/* mobile width helper */
@media (max-width: 767px){ .lang-menu{ left:0; right:auto; } }

/* ===================================================================
   WORK — Portfolio showcase
=================================================================== */
.portfolio-intro{
  max-width:42rem;
  color:var(--fg-subtle);
  font-size:1.05rem;
  line-height:1.7;
}

.portfolio-stack{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  margin-top:2rem;
}

/* Work metrics strip */
.work-metrics{
  margin-top:2.5rem;
  padding:1.25rem 1rem;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.45);
}
.work-metrics__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.25rem 1rem;
}
@media (min-width:768px){
  .work-metrics__grid{ grid-template-columns:repeat(4,1fr); gap:1.5rem; }
}
.work-metric{
  text-align:center;
  padding:.25rem .5rem;
}
.work-metric__value{
  display:block;
  font-size:clamp(1.75rem,4vw,2.25rem);
  font-weight:900;
  line-height:1.1;
  color:#f1f5f9;
  letter-spacing:-.02em;
}
.work-metric__label{
  display:block;
  margin-top:.35rem;
  font-size:.78rem;
  font-weight:600;
  color:#94a3b8;
  line-height:1.35;
}

.portfolio-card{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  padding:1.5rem;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.14);
  background:
    linear-gradient(165deg, rgba(15,23,42,.88), rgba(10,15,26,.92)) padding-box,
    linear-gradient(135deg, var(--card-accent-a, rgba(99,102,241,.35)), var(--card-accent-b, rgba(59,130,246,.2))) border-box;
  box-shadow:
    0 20px 52px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.portfolio-card::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto auto;
  width:320px; height:320px;
  border-radius:999px;
  background:radial-gradient(circle, var(--card-glow, rgba(99,102,241,.13)), transparent 68%);
  pointer-events:none;
  opacity:.65;
}
@media (min-width:900px){
  .portfolio-card{
    grid-template-columns:0.88fr 1.18fr;
    align-items:center;
    padding:1.75rem 1.85rem;
    gap:2rem;
  }
}
@media (prefers-reduced-motion:no-preference){
  .portfolio-card:hover{
    transform:translateY(-2px);
    border-color:rgba(148,163,184,.24);
    box-shadow:
      0 24px 60px rgba(0,0,0,.44),
      0 0 0 1px var(--card-accent-a, rgba(99,102,241,.18)),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
}

.portfolio-card--teal{
  --card-accent-a:rgba(20,184,166,.55);
  --card-accent-b:rgba(16,185,129,.38);
  --card-glow:rgba(20,184,166,.17);
}
.portfolio-card--violet{
  --card-accent-a:rgba(167,139,250,.5);
  --card-accent-b:rgba(139,92,246,.35);
  --card-glow:rgba(167,139,250,.15);
}
.portfolio-card--slate{
  --card-accent-a:rgba(148,163,184,.45);
  --card-accent-b:rgba(96,165,250,.35);
  --card-glow:rgba(148,163,184,.13);
}
.portfolio-card--indigo{
  --card-accent-a:rgba(99,102,241,.5);
  --card-accent-b:rgba(79,70,229,.38);
  --card-glow:rgba(99,102,241,.15);
}
.portfolio-card--cyan{
  --card-accent-a:rgba(34,211,238,.55);
  --card-accent-b:rgba(59,130,246,.4);
  --card-glow:rgba(34,211,238,.15);
}

.portfolio-card__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.portfolio-card__year{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}
.portfolio-card__title{
  margin:0;
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:900;
  line-height:1.15;
  color:var(--fg-strong);
}
.portfolio-card__desc{
  margin:0;
  color:var(--fg-subtle);
  line-height:1.65;
  font-size:.98rem;
}
.portfolio-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.25rem;
}
.portfolio-tag{
  padding:.32rem .65rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#e2e8f0;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
}
.portfolio-card__result{
  margin:.15rem 0 0;
  padding:.75rem .9rem;
  border-radius:14px;
  font-size:.88rem;
  font-weight:600;
  color:#cbd5e1;
  border-left:3px solid var(--card-accent-a, rgba(99,102,241,.6));
  background:rgba(15,23,42,.45);
}
.portfolio-learn-btn{
  align-self:flex-start;
  margin-top:.35rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.72rem 1.05rem;
  border-radius:14px;
  font-weight:800;
  font-size:.88rem;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, var(--card-accent-a, rgba(99,102,241,.85)), var(--card-accent-b, rgba(59,130,246,.75)));
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  cursor:pointer;
  transition:filter .3s ease, box-shadow .3s ease;
}
.portfolio-learn-btn:hover{
  filter:brightness(1.06);
  box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.portfolio-learn-btn:focus-visible{
  outline:2px solid rgba(251,146,60,.85);
  outline-offset:2px;
}

.portfolio-card__preview{
  position:relative;
  z-index:1;
  min-height:0;
}

/* Premium product showcase frame */
.portfolio-showcase{
  position:relative;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(145deg, var(--card-accent-a, rgba(99,102,241,.28)), var(--card-accent-b, rgba(59,130,246,.18)));
  box-shadow:
    0 14px 36px rgba(0,0,0,.38),
    0 0 28px var(--card-glow, rgba(99,102,241,.08));
  transition:box-shadow .4s ease;
}
.portfolio-card:hover .portfolio-showcase{
  box-shadow:
    0 18px 44px rgba(0,0,0,.42),
    0 0 36px var(--card-glow, rgba(99,102,241,.12));
}
.portfolio-showcase__frame{
  position:relative;
  border-radius:15px;
  overflow:hidden;
  background:rgba(8,12,22,.95);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(10px) saturate(1.05);
  aspect-ratio:16/10;
  min-height:220px;
}
@media (min-width:900px){
  .portfolio-showcase__frame{ min-height:280px; aspect-ratio:16/10; }
}
.portfolio-showcase__glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, var(--card-glow, rgba(99,102,241,.1)), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 35%, rgba(0,0,0,.2) 100%);
  mix-blend-mode:soft-light;
}
.portfolio-showcase__badges{
  position:absolute;
  bottom:.65rem;
  left:.65rem;
  right:.65rem;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.portfolio-card:hover .portfolio-showcase__badges,
.portfolio-card:focus-within .portfolio-showcase__badges{
  opacity:1;
  transform:translateY(0);
}
.portfolio-showcase__badge{
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.01em;
  padding:.26rem .5rem;
  border-radius:999px;
  color:#e2e8f0;
  background:rgba(8,12,22,.78);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.09);
}
.portfolio-showcase__badge::before{
  content:"✓ ";
  color:var(--card-accent-a, rgba(148,163,184,.9));
}
.portfolio-showcase__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% center;
  transition:transform .6s ease;
}
.portfolio-showcase__img--operational{
  object-position:82% 42%;
  transform:scale(1.06);
}
.portfolio-card:hover .portfolio-showcase__img{
  transform:scale(1.01);
}
.portfolio-card:hover .portfolio-showcase__img--operational{
  transform:scale(1.07);
}
.portfolio-showcase--light .portfolio-showcase__frame{
  background:linear-gradient(180deg, rgba(248,250,252,.08), rgba(15,23,42,.92));
}
.portfolio-showcase--workforce .portfolio-showcase__frame{
  background:linear-gradient(160deg, rgba(34,211,238,.06), rgba(8,12,22,.96));
}
.portfolio-showcase__img--workforce{
  object-position:center 38%;
}
@media (prefers-reduced-motion:reduce){
  .portfolio-showcase__img,
  .portfolio-card:hover .portfolio-showcase__img,
  .portfolio-card:hover .portfolio-showcase__img--operational{
    transform:none;
  }
}

/* Mockup chrome (legacy — unused on work page) */
.mock-chrome{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .75rem;
  border-bottom:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.65);
}
.mock-dot{
  width:.55rem; height:.55rem;
  border-radius:999px;
  background:rgba(148,163,184,.35);
}
.mock-dot--r{ background:#ef4444; }
.mock-dot--y{ background:#eab308; }
.mock-dot--g{ background:#22c55e; }
.mock-title{
  margin-left:.35rem;
  font-size:.68rem;
  font-weight:700;
  color:#94a3b8;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.mock-body{
  padding:.85rem;
  display:grid;
  gap:.65rem;
}
.mock-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
}
.mock-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.45rem;
}
.mock-stat{
  padding:.55rem .65rem;
  border-radius:10px;
  background:rgba(15,23,42,.7);
  border:1px solid rgba(148,163,184,.12);
}
.mock-stat__label{
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#64748b;
  margin-bottom:.25rem;
}
.mock-stat__val{
  font-size:.82rem;
  font-weight:800;
  color:#f1f5f9;
}
.mock-stat__val--live{
  color:#4ade80;
}
.mock-stat__val--warn{
  color:#fbbf24;
}
.mock-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.5rem .65rem;
  border-radius:10px;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(148,163,184,.1);
  font-size:.72rem;
}
.mock-row__left{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  min-width:0;
}
.mock-row__title{
  font-weight:700;
  color:#e2e8f0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mock-row__sub{
  font-size:.62rem;
  color:#64748b;
}
.mock-badge{
  flex-shrink:0;
  padding:.18rem .45rem;
  border-radius:999px;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.03em;
}
.mock-badge--green{ background:rgba(34,197,94,.18); color:#4ade80; }
.mock-badge--amber{ background:rgba(245,158,11,.18); color:#fbbf24; }
.mock-badge--blue{ background:rgba(59,130,246,.18); color:#60a5fa; }
.mock-badge--purple{ background:rgba(139,92,246,.18); color:#a78bfa; }

.mock-progress{
  height:6px;
  border-radius:999px;
  background:rgba(148,163,184,.15);
  overflow:hidden;
}
.mock-progress__bar{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #3b82f6, #6366f1);
}
.mock-progress__bar--orange{
  background:linear-gradient(90deg, #f97316, #fbbf24);
}
.mock-progress__bar--green{
  background:linear-gradient(90deg, #22c55e, #34d399);
}

.mock-chart{
  display:flex;
  align-items:flex-end;
  gap:.35rem;
  height:56px;
  padding:.5rem .65rem;
  border-radius:10px;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(148,163,184,.1);
}
.mock-bar{
  flex:1;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--card-accent-a, rgba(99,102,241,.7)), transparent);
  min-height:12px;
}

/* Work modal — premium case study showcase */
.work-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:.75rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.work-modal[data-open="true"]{
  opacity:1;
  pointer-events:auto;
}
.work-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,14,.82);
  backdrop-filter:blur(12px);
}
.work-modal__dialog{
  position:relative;
  width:min(960px, 100%);
  max-height:min(92vh, 960px);
  overflow:hidden;
  border-radius:24px;
  padding:0;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(8,12,22,.97);
  box-shadow:0 40px 100px rgba(0,0,0,.7);
  transform:translateY(12px) scale(.98);
  transition:transform .32s var(--easing);
}
.work-modal[data-open="true"] .work-modal__dialog{
  transform:translateY(0) scale(1);
}
.work-modal__close{
  position:absolute;
  top:.85rem; right:.85rem;
  z-index:5;
  width:2.35rem; height:2.35rem;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(8,12,22,.75);
  backdrop-filter:blur(10px);
  color:#cbd5e1;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.work-modal__close:hover{
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.32);
  color:#fff;
}
.work-modal__close:focus-visible{
  outline:2px solid rgba(251,146,60,.85);
  outline-offset:2px;
}

.cs-modal__scroll{
  max-height:min(92vh, 960px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:1.25rem 1.25rem 1.5rem;
}
@media (min-width:640px){
  .cs-modal__scroll{ padding:1.5rem 1.65rem 1.75rem; }
}

/* Project accent themes */
.work-modal__panel--teal{ --cs-accent:rgba(20,184,166,.55); --cs-accent-soft:rgba(20,184,166,.14); --cs-glow:rgba(20,184,166,.2); }
.work-modal__panel--slate{ --cs-accent:rgba(96,165,250,.5); --cs-accent-soft:rgba(148,163,184,.14); --cs-glow:rgba(96,165,250,.18); }
.work-modal__panel--violet{ --cs-accent:rgba(167,139,250,.55); --cs-accent-soft:rgba(248,250,252,.06); --cs-glow:rgba(167,139,250,.18); }
.work-modal__panel--indigo{ --cs-accent:rgba(99,102,241,.55); --cs-accent-soft:rgba(99,102,241,.14); --cs-glow:rgba(99,102,241,.2); }
.work-modal__panel--cyan{ --cs-accent:rgba(34,211,238,.55); --cs-accent-soft:rgba(34,211,238,.14); --cs-glow:rgba(34,211,238,.2); }

.cs-block{
  opacity:0;
  transform:translateY(10px);
}
.cs-block.cs-animate-in,
.cs-hero.cs-animate-in{
  animation:csFadeUp .45s ease forwards;
  animation-delay:var(--cs-delay, 0s);
}
@keyframes csFadeUp{
  to{ opacity:1; transform:translateY(0); }
}

/* Hero */
.cs-hero{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  margin-bottom:0;
}
.cs-hero__visual--featured{
  order:-1;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(15,23,42,.6);
  box-shadow:0 20px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
}
.cs-hero__visual--featured .cs-hero__img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center;
}
.cs-hero__visual{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(15,23,42,.6);
  box-shadow:0 16px 40px rgba(0,0,0,.4), 0 0 48px var(--cs-glow, rgba(99,102,241,.12));
}
.cs-hero__img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
}
.cs-hero__img--operational{ object-position:82% 42%; transform:scale(1.04); }
.cs-hero__img--workforce{ object-position:center 38%; }
.cs-modal__scroll > .cs-block + .cs-block{
  margin-top:1.85rem;
  padding-top:.15rem;
}
.cs-modal__scroll > .cs-hero + .cs-block{
  margin-top:1.35rem;
}
.cs-hero__year{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom:.35rem;
}
.cs-hero__title{
  margin:0;
  font-size:clamp(1.65rem,4vw,2.15rem);
  font-weight:900;
  line-height:1.1;
  color:#f8fafc;
}
.cs-hero__tagline{
  margin:.55rem 0 0;
  font-size:.95rem;
  line-height:1.55;
  color:#94a3b8;
}
.cs-hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.85rem;
}
.cs-hero__badge{
  padding:.32rem .62rem;
  border-radius:999px;
  font-size:.68rem;
  font-weight:700;
  color:#e2e8f0;
  border:1px solid rgba(255,255,255,.1);
  background:var(--cs-accent-soft, rgba(99,102,241,.12));
}
.cs-hero__badge:empty{ display:none; }

/* Stats */
.cs-stats{ margin-bottom:0; }
.cs-stats__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.65rem;
}
@media (min-width:560px){
  .cs-stats__grid{ grid-template-columns:repeat(4,1fr); }
}
.cs-stat-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.45rem;
  padding:.85rem .8rem;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(8px);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.cs-stat-card:hover{
  border-color:var(--cs-accent, rgba(99,102,241,.3));
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.cs-stat-card__icon{ font-size:1.25rem; line-height:1; }
.cs-stat-card__label{
  font-size:.74rem;
  font-weight:700;
  line-height:1.35;
  color:#cbd5e1;
}

/* Challenge vs Solution */
.cs-vs{ margin-bottom:0; }
.cs-vs__grid{
  display:grid;
  gap:.75rem;
}
@media (min-width:640px){
  .cs-vs__grid{ grid-template-columns:1fr 1fr; }
}
.cs-vs-card{
  padding:1.2rem 1.1rem;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.5);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.cs-vs-card:hover{
  border-color:rgba(148,163,184,.2);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.cs-vs-card--challenge{
  border-left:3px solid rgba(251,146,60,.8);
  background:linear-gradient(155deg, rgba(251,146,60,.09), rgba(15,23,42,.58));
}
.cs-vs-card--challenge .cs-vs-card__label{ color:#fb923c; }
.cs-vs-card--solution{
  border-left:3px solid var(--cs-accent, rgba(52,211,153,.75));
  background:linear-gradient(155deg, var(--cs-accent-soft, rgba(52,211,153,.12)), rgba(15,23,42,.55));
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
}
.cs-vs-card--solution .cs-vs-card__label{ color:#6ee7b7; }
.cs-vs-card__label{
  display:block;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom:.5rem;
}
.cs-vs-card__glyph{
  display:block;
  font-size:1.35rem;
  margin-bottom:.45rem;
}
.cs-vs-card__text{
  margin:0;
  font-size:.88rem;
  line-height:1.55;
  color:#cbd5e1;
}

/* Section titles */
.cs-block__title{
  margin:0 0 1rem;
  font-size:clamp(1.05rem, 2.5vw, 1.2rem);
  font-weight:800;
  letter-spacing:-.02em;
  text-transform:none;
  color:#f1f5f9;
}
.cs-block__title::after{
  content:"";
  display:block;
  width:2rem;
  height:2px;
  margin-top:.5rem;
  border-radius:999px;
  background:var(--cs-accent, rgba(148,163,184,.45));
  opacity:.85;
}

/* Features */
.cs-features{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem;
  margin-bottom:0;
}
@media (min-width:520px){
  .cs-features{ grid-template-columns:repeat(2,1fr); }
}
.cs-feature-card{
  padding:1.1rem 1rem;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.1);
  background:rgba(15,23,42,.45);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.cs-feature-card:hover{
  border-color:var(--cs-accent, rgba(99,102,241,.28));
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.cs-feature-card__icon{
  display:inline-grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  margin-bottom:.55rem;
  border-radius:10px;
  font-size:1.15rem;
  line-height:1;
  background:var(--cs-accent-soft, rgba(99,102,241,.14));
  border:1px solid rgba(255,255,255,.06);
}
.cs-feature-card h4{
  margin:0 0 .35rem;
  font-size:.92rem;
  font-weight:800;
  color:#f1f5f9;
}
.cs-feature-card p{
  margin:0;
  font-size:.8rem;
  line-height:1.55;
  color:#94a3b8;
}

/* Gallery */
.cs-gallery{ margin-bottom:0; }
.cs-gallery__btn{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:none;
  border-radius:16px;
  overflow:hidden;
  cursor:zoom-in;
  background:rgba(15,23,42,.5);
  border:1px solid rgba(148,163,184,.12);
}
.cs-gallery__btn img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.cs-gallery__overlay{
  position:absolute;
  inset:auto .75rem .75rem auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.25rem; height:2.25rem;
  border-radius:10px;
  background:rgba(8,12,22,.75);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0;
  opacity:.85;
  transition:opacity .3s ease;
}
.cs-gallery__btn:hover .cs-gallery__overlay{ opacity:1; }

/* Impact */
.cs-impact{
  display:grid;
  gap:.75rem;
  margin-bottom:0;
}
@media (min-width:640px){
  .cs-impact{ grid-template-columns:repeat(3,1fr); }
}
.cs-impact-card{
  padding:1.15rem 1rem;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.12);
  background:linear-gradient(165deg, rgba(15,23,42,.65), rgba(10,15,26,.8));
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.cs-impact-card:hover{
  border-color:var(--cs-accent, rgba(99,102,241,.35));
  box-shadow:0 14px 36px rgba(0,0,0,.3), 0 0 32px var(--cs-glow, rgba(99,102,241,.1));
}
.cs-impact-card__icon{
  display:block;
  font-size:1.5rem;
  margin-bottom:.55rem;
}
.cs-impact-card h4{
  margin:0 0 .3rem;
  font-size:.92rem;
  font-weight:800;
  color:#f8fafc;
}
.cs-impact-card p{
  margin:0;
  font-size:.78rem;
  line-height:1.5;
  color:#94a3b8;
}

/* CTA */
.cs-cta{
  text-align:center;
  padding:1.35rem 1.15rem;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(165deg, var(--cs-accent-soft, rgba(99,102,241,.1)), rgba(15,23,42,.6));
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.cs-cta__title{
  margin:0;
  font-size:1.15rem;
  font-weight:900;
  color:#f8fafc;
}
.cs-cta__lead{
  margin:.55rem auto 0;
  max-width:28rem;
  font-size:.86rem;
  line-height:1.55;
  color:#94a3b8;
}
.cs-cta__btn{
  display:inline-flex;
  margin-top:1rem;
  padding:.72rem 1.2rem;
  border-radius:12px;
  font-size:.88rem;
  font-weight:800;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(135deg, var(--cs-accent, rgba(99,102,241,.85)), rgba(59,130,246,.75));
  border:1px solid rgba(255,255,255,.1);
  transition:filter .3s ease, box-shadow .3s ease;
}
.cs-cta__btn:hover{
  filter:brightness(1.06);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Lightbox */
.cs-lightbox{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:1.5rem;
  background:rgba(2,6,14,.92);
  backdrop-filter:blur(14px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.cs-lightbox[data-open="true"]{
  opacity:1;
  pointer-events:auto;
}
.cs-lightbox__img{
  max-width:min(1100px, 100%);
  max-height:88vh;
  border-radius:16px;
  box-shadow:0 32px 80px rgba(0,0,0,.65);
  animation:csLightboxIn .35s ease;
}
@keyframes csLightboxIn{
  from{ opacity:0; transform:scale(.96); }
  to{ opacity:1; transform:scale(1); }
}
.cs-lightbox__close{
  position:absolute;
  top:1rem; right:1rem;
  width:2.5rem; height:2.5rem;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.7);
  color:#fff;
  cursor:pointer;
}

.work-cta-band{
  border-radius:22px;
  padding:2.5rem 2rem;
  text-align:center;
  border:1px solid rgba(148,163,184,.14);
  background:
    linear-gradient(165deg, rgba(15,23,42,.85), rgba(10,15,26,.9)),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(251,146,60,.12), transparent);
  box-shadow:0 20px 56px rgba(0,0,0,.38);
}
.work-cta-band h2{
  margin:0;
  font-size:clamp(1.5rem,3.5vw,2rem);
}
.work-cta-band p{
  margin:.75rem auto 0;
  max-width:36rem;
  color:var(--fg-subtle);
}
.work-cta-band .forge-btn{
  margin-top:1.25rem;
}

/* Home — What We've Built */
.home-built__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1.75rem;
}
@media (min-width:640px){
  .home-built__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .home-built__grid{ grid-template-columns:repeat(3,1fr); gap:1.15rem; }
}
.home-built-card{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  padding:.85rem;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.5);
  transition:border-color .35s ease, background .35s ease, box-shadow .35s ease;
  text-decoration:none;
  color:inherit;
}
.home-built-card:hover{
  border-color:rgba(148,163,184,.22);
  background:rgba(15,23,42,.65);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.home-built-card__img{
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16/10;
  background:rgba(8,12,22,.9);
  border:1px solid rgba(255,255,255,.06);
}
.home-built-card__img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.home-built-card__title{
  margin:0;
  font-size:.95rem;
  font-weight:800;
  color:#f1f5f9;
}
.home-built-card__desc{
  margin:0;
  font-size:.8rem;
  line-height:1.5;
  color:#94a3b8;
}
.home-built__cta{
  margin-top:1.5rem;
  text-align:center;
}

/* Services — problem / solution cards */
.svc--solution h3{
  font-size:1.15rem;
  line-height:1.35;
}
.svc--solution > p:first-of-type{
  margin-top:.65rem;
  color:#cbd5e1;
  line-height:1.6;
}

@media (prefers-reduced-motion:reduce){
  .portfolio-card,.portfolio-learn-btn,.work-modal,.work-modal__dialog{
    transition:none;
  }
  .portfolio-card:hover{ transform:none; }
  .portfolio-showcase__badges{
    opacity:.82;
    transform:none;
  }
  .cs-block,.cs-hero{
    opacity:1;
    transform:none;
    animation:none;
  }
}

/* Homepage — results & who we help */
.home-results__grid{
  display:grid;
  gap:1rem;
}
@media (min-width:768px){
  .home-results__grid{ grid-template-columns:repeat(2,1fr); gap:1.25rem; }
}
.home-results__card{
  padding:1.5rem 1.35rem;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.45);
}
.home-results__headline{
  margin:0;
  font-size:clamp(1.5rem,3.5vw,2.15rem);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  color:#fb923c;
}
.home-results__title{
  margin:.75rem 0 0;
  font-size:1rem;
  font-weight:800;
  color:#f1f5f9;
}
.home-results__desc{
  margin:.5rem 0 0;
  font-size:.875rem;
  line-height:1.55;
  color:#94a3b8;
}
.home-who__grid{
  display:grid;
  gap:.85rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){
  .home-who__grid{ grid-template-columns:repeat(3,1fr); }
}
.home-who__grid .svc{
  padding:1.1rem 1rem;
  min-height:4.5rem;
  display:flex;
  align-items:center;
}
.home-who__grid .svc h3{
  margin:0;
  font-size:.95rem;
}

/* Portfolio — project status */
.portfolio-card__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .75rem;
  margin-bottom:.35rem;
}
.project-status{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.3;
}
.project-status__icon{
  font-size:.78rem;
  line-height:1;
  flex-shrink:0;
}
.project-status__label{
  color:inherit;
}
.project-status--live{ color:#6ee7b7; }
.project-status--private{ color:#94a3b8; }
.project-status--development{ color:#60a5fa; }
.project-status--internal{ color:#a78bfa; }
.project-status--multiple{ color:#818cf8; }

/* Modal — project availability */
.cs-availability{
  padding:1rem 1.1rem;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.35);
}
.cs-availability--live{
  border-color:rgba(52,211,153,.22);
  background:rgba(16,185,129,.06);
}
.cs-availability--private{
  border-color:rgba(148,163,184,.16);
  background:rgba(100,116,139,.08);
}
.cs-availability--development{
  border-color:rgba(96,165,250,.2);
  background:rgba(59,130,246,.06);
}
.cs-availability--internal{
  border-color:rgba(167,139,250,.2);
  background:rgba(139,92,246,.06);
}
.cs-availability--multiple{
  border-color:rgba(129,140,248,.2);
  background:rgba(99,102,241,.06);
}
.cs-availability__desc{
  margin:.65rem 0 0;
  font-size:.875rem;
  line-height:1.55;
  color:#94a3b8;
}
.cs-availability__cta{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.85rem;
  padding:.55rem 1rem;
  border-radius:10px;
  font-size:.875rem;
  font-weight:700;
  text-decoration:none;
  transition:opacity .2s ease, background .2s ease;
}
.cs-availability__cta--live{
  color:#042f2e;
  background:#2dd4bf;
}
.cs-availability__cta--live:hover{
  background:#14b8a6;
}
.cs-availability__cta svg{
  flex-shrink:0;
}

/* About — founder profile */
.founder-profile{
  display:grid;
  gap:2rem;
  align-items:start;
  padding:1.5rem;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(165deg, rgba(15,23,42,.55), rgba(10,15,26,.65));
}
@media (min-width:640px){
  .founder-profile{
    grid-template-columns:11rem 1fr;
    gap:2.25rem;
    padding:1.75rem 2rem;
  }
}
.founder-profile__photo{
  width:10.5rem;
  height:10.5rem;
  border-radius:1.15rem;
  overflow:hidden;
  border:1px solid rgba(251,146,60,.25);
  background:rgba(15,23,42,.6);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 12px 32px rgba(0,0,0,.35),
    0 0 40px rgba(251,146,60,.08);
}
@media (min-width:640px){
  .founder-profile__photo{
    width:11rem;
    height:11rem;
  }
}
.founder-profile__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.founder-profile__photo--fallback{
  background:linear-gradient(135deg,rgba(251,146,60,.15),rgba(15,23,42,.8));
}
.founder-profile__photo--fallback img{ display:none; }
.founder-profile__badge{
  display:inline-block;
  margin-bottom:.65rem;
  padding:.3rem .65rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#fdba74;
  border:1px solid rgba(251,146,60,.25);
  background:rgba(251,146,60,.08);
}
.founder-profile__name{
  margin:0;
  font-size:clamp(1.35rem, 3vw, 1.65rem);
  font-weight:900;
  color:#f8fafc;
  letter-spacing:-.02em;
}
.founder-profile__bio{
  margin:.85rem 0 0;
  font-size:1rem;
  line-height:1.65;
  color:#cbd5e1;
}
.founder-profile__mission{
  margin:1.15rem 0 0;
  padding:.85rem 1rem;
  border-left:3px solid #fb923c;
  border-radius:0 12px 12px 0;
  font-size:clamp(1.05rem, 2.5vw, 1.2rem);
  font-weight:800;
  font-style:normal;
  line-height:1.4;
  color:#f8fafc;
  background:rgba(251,146,60,.06);
}
.founder-profile__links{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.35rem;
}
.founder-profile__link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .9rem;
  border-radius:10px;
  font-size:.875rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.5);
  color:#e2e8f0;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.founder-profile__link:hover{
  border-color:rgba(148,163,184,.28);
  background:rgba(15,23,42,.75);
  color:#fff;
}
.founder-profile__link--linkedin:hover{
  border-color:rgba(10,102,194,.4);
  color:#93c5fd;
}
.founder-profile__link--email:hover{
  border-color:rgba(251,146,60,.35);
  color:#fdba74;
}

/* About — process & differentiators */
.about-steps{
  display:grid;
  gap:1rem;
}
@media (min-width:768px){
  .about-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .about-steps{ grid-template-columns:repeat(4,1fr); }
}
.about-step{
  padding:1.25rem 1.1rem;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.45);
}
.about-step__num{
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  color:#fb923c;
  margin-bottom:.65rem;
}
.about-step__title{
  margin:0;
  font-size:.95rem;
  font-weight:800;
  color:#f1f5f9;
  line-height:1.35;
}
.about-step__desc{
  margin:.5rem 0 0;
  font-size:.85rem;
  line-height:1.55;
  color:#94a3b8;
}
.about-diff-grid{
  display:grid;
  gap:1rem;
}
@media (min-width:768px){
  .about-diff-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .about-diff-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .about-diff-grid .about-diff-card:last-child{
    grid-column:span 1;
  }
}
.about-diff-card{
  padding:1.25rem 1.15rem;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.45);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.about-diff-card:hover{
  border-color:rgba(148,163,184,.2);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.about-diff-card__title{
  margin:0;
  font-size:.95rem;
  font-weight:800;
  color:#f1f5f9;
}
.about-diff-card__desc{
  margin:.55rem 0 0;
  font-size:.85rem;
  line-height:1.55;
  color:#94a3b8;
}

.cs-impact-card:hover{
  border-color:var(--cs-accent, rgba(99,102,241,.28));
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}

/* ===================================================================
   MOBILE — readability, spacing, overflow fixes
=================================================================== */
@media (max-width:767px){
  /* Header */
  #siteHeader .container{
    padding-left:.85rem;
    padding-right:.85rem;
  }
  #siteHeader a.text-lg{
    font-size:1rem;
    max-width:9.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Hero */
  #top.hero .container{
    padding-top:3rem;
    padding-bottom:2.5rem;
  }
  .hero .badge{
    font-size:.75rem;
  }

  /* Pricing */
  .pricing-grid{
    gap:1.15rem;
  }
  .price-card{
    padding:1.15rem;
  }
  .price-card--featured,
  .price-card--premium{
    transform:none;
    order:-1;
  }
  .price-card--premium{
    transform:none;
  }
  .price-badge{
    top:.65rem;
    left:.65rem;
    font-size:.65rem;
    padding:.35rem .55rem;
  }
  .price-card--featured,
  .price-card--premium{
    padding-top:2.35rem;
  }
  .price-amount{
    font-size:1.85rem;
  }
  .pricing-hosting,
  .pricing-guide,
  .founder-profile{
    padding:1.15rem;
  }
  .pricing-hosting__grid{
    grid-template-columns:1fr;
  }
  .pricing-guide__list li{
    flex-direction:column;
    align-items:flex-start;
    gap:.15rem;
  }
  .pricing-guide__list li span[aria-hidden="true"]{
    display:none;
  }

  /* Work — portfolio */
  .portfolio-card{
    padding:1.15rem;
    gap:1.15rem;
  }
  .portfolio-card__title{
    font-size:clamp(1.35rem, 6vw, 1.65rem);
  }
  .portfolio-card__head{
    flex-direction:column;
    align-items:flex-start;
    gap:.35rem;
  }
  .portfolio-showcase__frame{
    min-height:200px;
  }
  .work-metrics{
    padding:1rem .85rem;
  }
  .work-metric__value{
    font-size:1.5rem;
  }

  /* Work — modal (near full-screen on phones) */
  .work-modal{
    padding:0;
    align-items:stretch;
  }
  .work-modal__dialog{
    width:100%;
    max-width:100%;
    height:100%;
    max-height:100dvh;
    border-radius:0;
    border-left:none;
    border-right:none;
    transform:none;
  }
  .work-modal[data-open="true"] .work-modal__dialog{
    transform:none;
  }
  .cs-modal__scroll{
    max-height:100dvh;
    padding:3.25rem .95rem 1.25rem;
  }
  .work-modal__close{
    top:.65rem;
    right:.65rem;
  }
  .cs-hero__title{
    font-size:1.45rem;
    padding-right:2.5rem;
  }
  .cs-vs__grid,
  .cs-features,
  .cs-impact{
    grid-template-columns:1fr;
  }
  .cs-availability__cta{
    width:100%;
    justify-content:center;
  }

  /* About */
  .founder-profile{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .founder-profile__body{
    width:100%;
  }
  .founder-profile__links{
    justify-content:center;
  }

  /* Home sections */
  .home-who__grid{
    grid-template-columns:1fr;
  }
  .home-results__headline{
    font-size:clamp(1.35rem, 7vw, 1.75rem);
  }
  .home-built__grid{
    gap:.85rem;
  }

  /* Services cards — less hover lift on touch */
  .svc{
    padding:1.15rem 1.1rem;
  }
  .svc:hover{
    transform:none;
  }

  /* Compare table */
  .compare-wrap{
    -webkit-overflow-scrolling:touch;
    margin-inline:-.25rem;
    padding-bottom:.25rem;
  }
  .compare{
    min-width:540px;
  }

  /* Section headings */
  h1.text-4xl,
  h1.text-5xl,
  .text-3xl.font-black,
  .text-4xl.font-black{
    font-size:clamp(1.75rem, 7vw, 2.25rem);
    line-height:1.12;
  }

  /* Mobile nav — larger tap targets */
  #mobileMenu nav a{
    padding:.65rem .5rem;
    border-radius:8px;
  }
  #mobileMenuToggle{
    min-width:2.75rem;
    min-height:2.75rem;
  }

  /* Contact form */
  .form-card{
    padding:1.15rem;
  }

  /* Section rhythm */
  section.py-16,
  section.py-20{
    padding-top:3rem;
    padding-bottom:3rem;
  }

  /* Footer breathing room above floating CTA */
  footer{
    padding-bottom:1rem;
  }
}

@media (max-width:380px){
  .forge-cta{
    padding:.75rem .85rem;
    font-size:.875rem;
  }
  .hero__title{
    font-size:1.75rem !important;
  }
  .price-fee__label{
    font-size:.62rem;
  }
}