/* =========================================================================
   ZyberBrands — design system v3
   ========================================================================= */

:root{
  /* Brand */
  --c-cyan:        #24A8E0;
  --c-cyan-bright: #5BC3F0;
  --c-cyan-deep:   #1A86B5;
  --c-cyan-glow:   rgba(36,168,224,.35);

  /* Neutrals */
  --c-ink:         #0B0E14;
  --c-charcoal:    #2C313D;
  --c-slate:       #5A5F6E;
  --c-mute:        #8C92A0;
  --c-line:        #E4E7EC;
  --c-line-soft:   #EEF0F3;
  --c-bg:          #FFFFFF;
  --c-bg-soft:     #F7F8FA;
  --c-bg-dark:     #0B0E14;
  --c-bg-dark-2:   #14181F;
  --c-bg-dark-3:   #1B2029;

  /* Type */
  --f-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --maxw:    1200px;
  --gutter:  clamp(20px, 4vw, 40px);
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    22px;
  --r-xl:    28px;

  /* Motion */
  --t-fast:    160ms cubic-bezier(.25,.46,.45,.94);
  --t-base:    280ms cubic-bezier(.25,.46,.45,.94);
  --t-slow:    560ms cubic-bezier(.16,.84,.44,1);
  --t-spring:  500ms cubic-bezier(.34,1.56,.64,1);

  /* Shadow */
  --sh-1: 0 1px 2px rgba(11,14,20,.04), 0 2px 6px rgba(11,14,20,.05);
  --sh-2: 0 8px 24px rgba(11,14,20,.06), 0 2px 6px rgba(11,14,20,.04);
  --sh-3: 0 18px 48px rgba(11,14,20,.10), 0 6px 16px rgba(11,14,20,.06);
  --sh-glow: 0 18px 48px rgba(36,168,224,.20), 0 0 0 1px rgba(36,168,224,.15);
}

/* -------------------- Reset / base -------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
html,body{ overflow-x: hidden; }
body{
  margin: 0;
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv02","cv11";
}
img,svg,video{ display: block; max-width: 100%; height: auto; }
a{ color: var(--c-cyan-deep); text-decoration: none; transition: color var(--t-fast); }
a:hover{ color: var(--c-cyan); }
button{ font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
::selection{ background: var(--c-cyan); color: #fff; }
:focus-visible{ outline: 2px solid var(--c-cyan); outline-offset: 3px; border-radius: 4px; }

/* -------------------- Type system -------------------- */
h1,h2,h3,h4,h5,h6{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.08;
  margin: 0 0 .55em;
  color: var(--c-ink);
}
h1{ font-size: clamp(2.4rem, 5.5vw + .5rem, 4.6rem); letter-spacing: -.035em; line-height: 1; }
h2{ font-size: clamp(1.85rem, 3.2vw + .5rem, 3rem); letter-spacing: -.028em; }
h3{ font-size: clamp(1.4rem, 1.8vw + .5rem, 2rem); letter-spacing: -.02em; }
h4{ font-size: 1.12rem; line-height: 1.3; }
h5{ font-size: .95rem; }
p{ margin: 0 0 1em; color: var(--c-charcoal); }
.lede{
  font-size: clamp(1.05rem, .6vw + .9rem, 1.28rem);
  line-height: 1.55;
  color: var(--c-slate);
  max-width: 60ch;
  margin: 0 0 1.4em;
}
.muted{ color: var(--c-mute); }
.text-center{ text-align: center; }

/* Eyebrow — tag with pulse dot */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-cyan-deep);
  background: rgba(36,168,224,.10);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content: "";
  width: 6px; height: 6px;
  background: var(--c-cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--c-cyan-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
.eyebrow.dark{
  color: var(--c-cyan-bright);
  background: rgba(36,168,224,.16);
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(36,168,224,.5); }
  50%   { box-shadow: 0 0 0 6px rgba(36,168,224,0); }
}

/* Gradient accent text inside h1 */
.accent{
  background: linear-gradient(95deg, var(--c-cyan) 0%, var(--c-cyan-bright) 60%, #9DDDF6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
}

/* -------------------- Layout primitives -------------------- */
.wrap{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.section{
  padding: clamp(70px, 9vw, 130px) 0;
  position: relative;
}
.section.soft{ background: var(--c-bg-soft); }
.section.dark{
  background: var(--c-bg-dark);
  color: #E8EAEF;
}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{ color: #fff; }
.section.dark p{ color: #B6BCC8; }
.section.dark a{ color: var(--c-cyan-bright); }
.section.dark .lede{ color: #B6BCC8; }
.section.dark .eyebrow{ color: var(--c-cyan-bright); background: rgba(36,168,224,.16); }

.section-head{
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head .lede{ margin-left: auto; margin-right: auto; }

/* -------------------- Buttons -------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font: 500 .96rem/1 var(--f-sans);
  letter-spacing: -.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-base),
    color var(--t-base),
    border-color var(--t-base),
    transform var(--t-spring),
    box-shadow var(--t-base);
  will-change: transform;
  position: relative;
  isolation: isolate;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}
.btn-primary:hover{
  background: var(--c-cyan);
  color: #fff;
  border-color: var(--c-cyan);
  box-shadow: var(--sh-glow);
}

.btn-ghost{
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn-ghost:hover{
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}
.section.dark .btn-ghost,
.hero .btn-ghost,
.page-hero .btn-ghost{
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
.section.dark .btn-ghost:hover,
.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover{
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}

.btn-wa{
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.btn-wa:hover{
  background: #1FBA57;
  border-color: #1FBA57;
  color: #fff;
  box-shadow: 0 18px 40px rgba(37,211,102,.35), 0 0 0 1px rgba(37,211,102,.25);
}
.btn-wa svg{ margin-right: 2px; }

.btn-arrow::after{
  content: "→";
  font-family: var(--f-mono);
  transition: transform var(--t-base);
}
.btn-arrow:hover::after{ transform: translateX(4px); }

/* -------------------- Header / nav -------------------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-line-soft);
}
.nav{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
  gap: 24px;
  position: relative;
}
.brand{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img{ height: 46px; width: auto; transition: transform var(--t-base); }
.brand:hover img{ transform: scale(1.04); }

.nav-links{
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a{
  display: inline-flex;
  color: var(--c-charcoal);
  font-weight: 500; font-size: .94rem;
  padding: 8px 14px;
  border-radius: 999px;
  position: relative;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-links a:hover{
  color: var(--c-ink);
  background: var(--c-bg-soft);
}
.nav-links a.active{
  color: var(--c-ink);
  background: rgba(36,168,224,.08);
}
.nav-links a.active::before{
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 2px;
  background: var(--c-cyan);
  border-radius: 2px;
}

.nav-cta{ display: flex; align-items: center; gap: 12px; }
.nav-toggle{
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--c-line);
  background: #fff; border-radius: 12px;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.nav-toggle:hover{ border-color: var(--c-ink); }
.nav-toggle span{ width: 18px; height: 2px; background: var(--c-ink); position: relative; display: block; }
.nav-toggle span::before,
.nav-toggle span::after{
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--c-ink);
  transition: transform var(--t-base);
}
.nav-toggle span::before{ top: -6px; }
.nav-toggle span::after{ top: 6px; }

/* -------------------- Hero (homepage) -------------------- */
.hero{
  position: relative; overflow: hidden;
  background: var(--c-bg-dark);
  color: #fff;
  padding: clamp(70px, 9vw, 140px) 0 clamp(60px, 8vw, 120px);
  isolation: isolate;
}
.hero::before{
  content: "";
  position: absolute; inset: -25%;
  background:
    radial-gradient(circle at 18% 30%, rgba(36,168,224,.55) 0%, transparent 38%),
    radial-gradient(circle at 78% 60%, rgba(91,195,240,.30) 0%, transparent 42%),
    radial-gradient(circle at 50% 90%, rgba(26,134,181,.42) 0%, transparent 45%);
  filter: blur(70px);
  z-index: -2;
  animation: mesh-shift 22s ease-in-out infinite;
}
.hero::after{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 35%, transparent 75%);
  z-index: -1;
  pointer-events: none;
}
@keyframes mesh-shift{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  33%    { transform: translate(-3%, 4%) rotate(2deg); }
  66%    { transform: translate(3%, -3%) rotate(-2deg); }
}

.hero-inner{
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.hero h1{ color: #fff; }
.hero .lede{ color: #C8CDD7; max-width: 52ch; }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-stats{
  display: flex; gap: clamp(20px, 4vw, 48px);
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.10);
  flex-wrap: wrap;
}
.hero-stats .stat strong{
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.55rem, 2vw + .5rem, 2.2rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff 0%, #C8CDD7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-stats .stat span{
  display: block;
  font-size: .82rem; color: #8C92A0; margin-top: 6px;
  font-family: var(--f-mono); letter-spacing: .04em;
}

.hero-art{
  position: relative;
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
}
.hero-art img{
  position: relative; z-index: 1;
  max-width: 100%; max-height: 100%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
}
.hero-art::before{
  content: "";
  position: absolute; inset: 8%;
  background: radial-gradient(circle, rgba(36,168,224,.35) 0%, transparent 60%);
  filter: blur(40px);
}

/* -------------------- Page hero (sub pages) -------------------- */
.page-hero{
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-bg-dark);
  color: #fff;
  padding: clamp(80px, 9vw, 130px) 0 clamp(60px, 7vw, 100px);
}
.page-hero::before{
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 25% 40%, rgba(36,168,224,.40) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(26,134,181,.30) 0%, transparent 50%);
  filter: blur(70px); z-index: -2;
  animation: mesh-shift 26s ease-in-out infinite;
}
.page-hero::after{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  z-index: -1; pointer-events: none;
}
.page-hero-inner{ position: relative; z-index: 1; max-width: 780px; }
.page-hero h1{ color: #fff; }
.page-hero .lede{ color: #C8CDD7; }

/* -------------------- Breadcrumbs -------------------- */
.breadcrumbs{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .04em;
  color: var(--c-mute);
  margin-bottom: 36px;
}
.breadcrumbs a{ color: var(--c-mute); }
.breadcrumbs a:hover{ color: var(--c-cyan-deep); }
.breadcrumbs .sep{ opacity: .5; }
.section.dark .breadcrumbs,
.section.dark .breadcrumbs a{ color: #8C92A0; }

/* -------------------- Split (image / copy 50:50) -------------------- */
.split{
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.split-art{
  position: relative;
  aspect-ratio: 5/4;
  background: linear-gradient(135deg, var(--c-bg-dark) 0%, var(--c-bg-dark-3) 100%);
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.split-art::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(36,168,224,.30) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(91,195,240,.18) 0%, transparent 55%);
  z-index: -1;
}
.split-art img{
  max-width: 70%; max-height: 70%;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.5));
}

/* -------------------- Bento feat-grid -------------------- */
.feat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feat{
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  overflow: hidden;
  isolation: isolate;
}
.feat::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,0%), rgba(36,168,224,.07), transparent 40%);
  opacity: 0; transition: opacity var(--t-base); z-index: -1;
}
.feat:hover{
  transform: translateY(-3px);
  border-color: rgba(36,168,224,.45);
  box-shadow: var(--sh-2);
}
.feat:hover::before{ opacity: 1; }
.feat-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(36,168,224,.16) 0%, rgba(36,168,224,.04) 100%);
  color: var(--c-cyan-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feat h4{ margin: 4px 0 4px; font-size: 1.08rem; }
.feat p{ color: var(--c-slate); margin: 0; font-size: .96rem; }

/* Soft-section feat cards */
.section.soft .feat{
  background: var(--c-bg);
  border-color: var(--c-line-soft);
}

/* -------------------- Service grid (.svc-grid) -------------------- */
.svc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.svc-card{
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 30px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.svc-card:hover{
  border-color: rgba(36,168,224,.45);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.svc-icon{
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(36,168,224,.18) 0%, rgba(36,168,224,.06) 100%);
  color: var(--c-cyan-deep);
  display: flex; align-items: center; justify-content: center;
}
.svc-card h3{ margin: 6px 0 0; font-size: 1.25rem; }
.svc-card p{ color: var(--c-slate); margin: 0; font-size: .98rem; }
.svc-link{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .06em;
  color: var(--c-cyan-deep);
  text-transform: uppercase; font-weight: 600;
}
.svc-link::after{
  content: "→"; transition: transform var(--t-base);
}
.svc-card:hover .svc-link::after{ transform: translateX(4px); }

/* -------------------- Portfolio -------------------- */
.portfolio{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.proj{
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  color: var(--c-ink);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  isolation: isolate;
}
.proj:hover{
  transform: translateY(-4px);
  border-color: rgba(36,168,224,.45);
  box-shadow: var(--sh-3);
  color: var(--c-ink);
}
.proj-img{
  position: relative; overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--c-bg-soft);
}
.proj-img img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.proj:hover .proj-img img{ transform: scale(1.04); }
.proj-img::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,14,20,.18) 0%, transparent 50%);
  pointer-events: none;
}
.proj-meta{ padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.proj-meta .tag{
  font-family: var(--f-mono); font-size: .7rem;
  color: var(--c-cyan-deep);
  letter-spacing: .14em; text-transform: uppercase;
}
.proj-meta h4{ margin: 0; font-size: 1.08rem; }
.proj-meta p{ color: var(--c-slate); margin: 0; font-size: .92rem; }

/* -------------------- Pricing / packages -------------------- */
.pkg-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.pkg{
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: 36px 28px 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.pkg:hover{ transform: translateY(-4px); box-shadow: var(--sh-2); }
.pkg h3{ margin: 0; font-size: 1.4rem; }
.pkg-tagline{ color: var(--c-slate); font-size: .96rem; margin: 0; }
.pkg ul{ list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.pkg li{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .96rem; color: var(--c-charcoal);
  line-height: 1.5;
}
.pkg li::before{
  content: "";
  width: 18px; height: 18px;
  flex-shrink: 0; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A86B5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.pkg .btn{ margin-top: auto; align-self: stretch; }
.pkg.featured{
  background: var(--c-bg-dark);
  color: #fff;
  border-color: var(--c-bg-dark);
  box-shadow: var(--sh-3);
}
.pkg.featured h3{ color: #fff; }
.pkg.featured .pkg-tagline{ color: #B6BCC8; }
.pkg.featured li{ color: #D8DCE4; }
.pkg.featured li::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324A8E0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.pkg.featured .btn-primary{
  background: var(--c-cyan); color: var(--c-ink); border-color: var(--c-cyan);
}
.pkg.featured .btn-primary:hover{
  background: #fff; color: var(--c-ink); border-color: #fff;
  box-shadow: var(--sh-glow);
}
.pkg-tag{
  position: absolute; top: -12px; left: 28px;
  background: var(--c-cyan); color: #fff;
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: var(--sh-1);
}

/* -------------------- FAQ -------------------- */
.faq{ max-width: 820px; margin: 0 auto; }
.faq details{
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin-bottom: 12px;
  background: var(--c-bg);
  transition: border-color var(--t-base), background var(--t-base);
}
.faq details[open]{ border-color: rgba(36,168,224,.4); background: var(--c-bg-soft); }
.faq summary{
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 600; font-size: 1.05rem;
  color: var(--c-ink);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  font-family: var(--f-mono);
  font-size: 1.4rem; font-weight: 400;
  color: var(--c-cyan-deep);
  transition: transform var(--t-base);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq details p{ margin: 14px 0 0; color: var(--c-slate); }

/* -------------------- CTA strip -------------------- */
.cta{
  position: relative;
  background: var(--c-bg-dark);
  border-radius: var(--r-xl);
  padding: clamp(50px, 7vw, 90px) clamp(28px, 5vw, 60px);
  color: #fff; text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta::before{
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(36,168,224,.35) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(91,195,240,.20) 0%, transparent 55%);
  filter: blur(60px);
  z-index: -1;
}
.cta::after{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
  z-index: -1;
}
.cta h2{ color: #fff; margin: 0 auto 14px; max-width: 22ch; }
.cta p{ color: #B6BCC8; max-width: 56ch; margin: 0 auto 28px; position: relative; }
.cta .hero-cta{ justify-content: center; }

/* -------------------- Steps (process) -------------------- */
.steps{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step{
  position: relative;
  padding: 26px 24px 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  counter-increment: step;
}
.step::before{
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .14em; color: var(--c-cyan-deep); font-weight: 600;
  display: block; margin-bottom: 10px;
}
.step h4{ margin: 0 0 6px; font-size: 1.05rem; }
.step p{ color: var(--c-slate); margin: 0; font-size: .94rem; }
.section.dark .step{ background: var(--c-bg-dark-2); border-color: rgba(255,255,255,.08); }

/* -------------------- Geo coverage cards -------------------- */
.geo-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.geo-card{
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 24px 16px; text-align: center;
  color: var(--c-charcoal); font-weight: 500; font-size: 1rem;
  transition: border-color var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.geo-card:hover{
  border-color: rgba(36,168,224,.5);
  color: var(--c-cyan-deep);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.geo-card .geo-pin{
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(36,168,224,.16), rgba(36,168,224,.04));
  color: var(--c-cyan-deep);
}

/* -------------------- Spoke (geo page sidebar) -------------------- */
.spoke{ display: grid; grid-template-columns: 1fr 320px; gap: clamp(30px, 5vw, 60px); }
.sidebar{ position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.side-card{
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 24px;
}
.side-card h4{ margin: 0 0 12px; font-size: 1rem; }
.side-card ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.side-card li a{
  display: block; padding: 8px 4px; color: var(--c-charcoal);
  border-bottom: 1px solid var(--c-line-soft);
  transition: color var(--t-fast), padding var(--t-fast);
}
.side-card li:last-child a{ border-bottom: none; }
.side-card li a:hover{ color: var(--c-cyan-deep); padding-left: 8px; }
.side-card.cta-card{ background: var(--c-bg-dark); color: #fff; border-color: transparent; }
.side-card.cta-card h4{ color: #fff; }
.side-card.cta-card p{ color: #B6BCC8; }

/* -------------------- Contact -------------------- */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); }
.contact-card{
  background: var(--c-bg); border: 1px solid var(--c-line);
  border-radius: var(--r-xl); padding: 36px;
  min-width: 0;
}
.contact-card h3{ margin-top: 0; }
.contact-list{ list-style: none; padding: 0; margin: 22px 0 0; }
.contact-list li{
  display: flex; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line-soft);
  align-items: flex-start;
}
.contact-list li:last-child{ border-bottom: none; }
.contact-list li > div:last-child{ min-width: 0; flex: 1; }
.contact-list .label{
  font-family: var(--f-mono); font-size: .7rem;
  color: var(--c-mute); text-transform: uppercase; letter-spacing: .14em;
  display: block; margin-bottom: 4px; font-weight: 500;
}
.contact-list .value{
  color: var(--c-ink); font-weight: 500;
  overflow-wrap: anywhere; word-break: break-word;
}
.contact-list a{ color: var(--c-ink); overflow-wrap: anywhere; word-break: break-word; }
.contact-list a:hover{ color: var(--c-cyan-deep); }
.contact-list .icon{
  width: 40px; height: 40px;
  border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(36,168,224,.16), rgba(36,168,224,.04));
  color: var(--c-cyan-deep);
  display: flex; align-items: center; justify-content: center;
}

/* -------------------- Forms -------------------- */
form.contact-form{ display: flex; flex-direction: column; gap: 16px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field label{
  font-size: .8rem; color: var(--c-slate); font-weight: 500;
  letter-spacing: .02em;
}
.field input,.field textarea{
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font: inherit; color: var(--c-ink); background: var(--c-bg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field input:hover,.field textarea:hover{ border-color: var(--c-charcoal); }
.field input:focus,.field textarea:focus{
  outline: none;
  border-color: var(--c-cyan);
  box-shadow: 0 0 0 4px rgba(36,168,224,.15);
}
.field textarea{ min-height: 130px; resize: vertical; font-family: var(--f-sans); }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* -------------------- Footer -------------------- */
.site-footer{
  background: var(--c-bg-dark);
  color: #B6BCC8;
  padding: clamp(60px, 7vw, 100px) 0 30px;
  position: relative; overflow: hidden;
  isolation: isolate;
}
.site-footer::before{
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(36,168,224,.18) 0%, transparent 60%);
  z-index: -1;
}
.footer-grid{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand img{
  height: 56px; width: auto; max-width: 100%;
  margin-bottom: 18px;
}
.footer-brand p{ color: #8C92A0; font-size: .92rem; max-width: 32ch; margin: 0; }
.footer-col h5{
  color: #fff; font-family: var(--f-display);
  font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 16px; font-weight: 600;
}
.footer-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ color: #B6BCC8; font-size: .94rem; }
.footer-col a:hover{ color: var(--c-cyan-bright); }
.footer-col li{ font-size: .94rem; color: #B6BCC8; }

.footer-bot{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px;
  flex-wrap: wrap; gap: 18px;
}
.footer-bot p{ margin: 0; font-size: .84rem; color: #8C92A0; }
.social{ display: flex; gap: 8px; }
.social a{
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  display: flex; align-items: center; justify-content: center;
  color: #C8CDD7;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.social a:hover{
  background: var(--c-cyan); color: #fff; border-color: var(--c-cyan);
  transform: translateY(-2px);
}

/* -------------------- Floating WhatsApp -------------------- */
.fab-wa{
  position: fixed; right: 20px; bottom: 20px;
  width: 58px; height: 58px;
  background: #25D366; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(37,211,102,.45);
  z-index: 40;
  transition: transform var(--t-spring), box-shadow var(--t-base);
}
.fab-wa:hover{
  transform: scale(1.08) rotate(-4deg);
  color: #fff;
  box-shadow: 0 16px 40px rgba(37,211,102,.55);
}
.fab-wa::after{
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  background: rgba(37,211,102,.35);
  z-index: -1;
  animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%   { transform: scale(.95); opacity: .8; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* -------------------- Scroll reveal -------------------- */
.reveal,
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}
.is-revealed{
  opacity: 1;
  transform: none;
}
/* Stagger via custom property */
.is-revealed[style*="--d"]{ transition-delay: var(--d); }

/* -------------------- Marquee (optional) -------------------- */
.marquee{
  overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee-track{
  display: flex; gap: 56px; animation: marquee 32s linear infinite;
  width: max-content;
}
@keyframes marquee{
  to{ transform: translateX(-50%); }
}

/* -------------------- Responsive -------------------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; text-align: left; }
  .hero-art{ display: none; }
  .svc-grid,.feat-grid,.portfolio,.pkg-grid{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .split{ grid-template-columns: 1fr; }
  .split-art{ aspect-ratio: 16/10; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .geo-grid{ grid-template-columns: repeat(3, 1fr); }
  .spoke{ grid-template-columns: 1fr; }
  .sidebar{ position: static; }
  .contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .wrap{ padding: 0 22px; }
  .brand img{ height: 36px; }
  .nav{ padding-top: 10px; padding-bottom: 10px; }
  .nav-toggle{ display: inline-flex; }
  .nav-cta{ gap: 0; }
  .nav-links,.nav-cta .btn{ display: none; }
  .nav.is-open .nav-cta .btn{ display: none; }
  .nav.is-open .nav-links{
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    padding: 8px;
    gap: 2px;
    z-index: 60;
  }
  .nav.is-open .nav-links a{
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 1rem;
  }
  .nav.is-open .nav-links a.active::before{ display: none; }
  .nav.is-open .nav-links a.active{ background: rgba(36,168,224,.10); }

  .svc-grid,.feat-grid,.portfolio,.pkg-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .geo-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 26px; }
  .field-row{ grid-template-columns: 1fr; }
  .hero-stats{ gap: 22px; }
  .hero-stats .stat{ flex: 1 1 calc(50% - 22px); }
  .feat,.svc-card,.pkg{ padding: 24px; }
  .contact-card{ padding: 24px 20px; }
  .section-head{ margin-bottom: 36px; }

  .feat-grid .feat{ align-items: flex-start; text-align: left; }
}
@media (max-width: 480px){
  :root{ --gutter: 18px; }
  .hero-stats{ flex-direction: column; gap: 16px; align-items: flex-start; }
  .hero-stats .stat{ flex: 1 1 100%; }
  .footer-grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition: none !important; animation: none !important; }
  .reveal,[data-reveal]{ opacity: 1; transform: none; }
  html{ scroll-behavior: auto; }
}

/* =========================================================================
   SHOWCASE-COMPONENTS-START  (v5)
   Appended block: browser frames, 4-up services, in-house grid, a11y fixes.
   Only NEW selectors + deliberate overrides. Base rules above are untouched.
   ========================================================================= */

/* -------------------- No-JS safety net --------------------
   Base style.css sets [data-reveal]{opacity:0} and relies on JS to reveal.
   If the script is blocked or fails, the whole page below the hero is blank.
   This makes content visible whenever JS has not marked the document. */
html:not(.js) [data-reveal],
html:not(.js) .reveal{ opacity: 1 !important; transform: none !important; }

/* -------------------- Accessible focus + skip link -------------------- */
:focus-visible{
  outline: 3px solid var(--c-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(36,168,224,.45);
  border-radius: 4px;
}
.hero :focus-visible,
.page-hero :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible{ outline-color: #fff; }

.skip-link{ position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus{
  left: 12px; top: 12px;
  padding: 10px 18px;
  background: #fff; color: var(--c-ink);
  border: 2px solid var(--c-cyan-deep);
  border-radius: 999px; font-weight: 600;
}

/* Deeper cyan for small text — #1A86B5 was 4.10:1 on white (fails AA) */
:root{ --c-cyan-deep: #17739B; }

/* -------------------- Primary button on dark surfaces --------------------
   --c-ink and --c-bg-dark are both #0B0E14, so .btn-primary was invisible
   on the hero / CTA panel. Invert it there. */
.hero .btn-primary,
.page-hero .btn-primary,
.cta .btn-primary{ background: #fff; color: var(--c-ink); border-color: #fff; }
.hero .btn-primary:hover,
.page-hero .btn-primary:hover,
.cta .btn-primary:hover{
  background: var(--c-cyan); color: #fff; border-color: var(--c-cyan);
  box-shadow: var(--sh-glow);
}
.hero .btn-ghost,
.page-hero .btn-ghost{ border-color: rgba(255,255,255,.38); }
.nav-cta .btn{ padding: 10px 18px; font-size: .9rem; }

/* -------------------- Browser window frame -------------------- */
.win{
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.win-bar{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: #F2F4F7;
  border-bottom: 1px solid #E2E6EB;
}
.win-dots{ display: flex; gap: 5px; flex: 0 0 auto; }
.win-dots i{ width: 9px; height: 9px; border-radius: 50%; display: block; background: #D3D8DF; }
.win-dots i:nth-child(1){ background: #FF5F57; }
.win-dots i:nth-child(2){ background: #FEBC2E; }
.win-dots i:nth-child(3){ background: #28C840; }
.win-url{
  flex: 1; min-width: 0;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .02em;
  color: #5A5F6E; background: #fff;
  border: 1px solid #E2E6EB; border-radius: 999px;
  padding: 4px 12px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-shot{
  display: block; width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover; object-position: top center;
  background: var(--c-bg-soft);
}

/* -------------------- Hero showcase cluster -------------------- */
.hero-show{ position: relative; padding: 34px 0 40px; }
.hero-show .win{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 14px 30px rgba(0,0,0,.35);
}
.hero-show .win-front{ position: relative; z-index: 2; }
.hero-show .win-back{
  position: absolute; z-index: 1;
  left: 26%; right: -9%; top: -9%;
  opacity: .6;
  filter: saturate(.65) brightness(.9);
}
.hero-chip{
  position: absolute; z-index: 3;
  left: -26px; bottom: 21px;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(11,14,20,.86);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em;
  color: #fff;
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
}
.hero-chip::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #28C840;
  animation: pulse-live 2.4s ease-out infinite;
}
@keyframes pulse-live{
  0%,100%{ box-shadow: 0 0 0 0 rgba(40,200,64,.55); }
  50%    { box-shadow: 0 0 0 7px rgba(40,200,64,0); }
}

/* Hero stats: 4 items always wrapped 3+1 in a ~600px column. Grid instead. */
.hero-stats{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
.hero-stats .stat span{ font-size: .78rem; }

/* Frame used inside a light .split */
.split-frame{ position: relative; }

/* -------------------- 4-up service grid -------------------- */
.svc-grid.four{ grid-template-columns: repeat(4, 1fr); }
.svc-grid.four .svc-card{ padding: 26px 24px; }
.svc-grid.four .svc-card h3{ font-size: 1.14rem; }
.svc-grid.four .svc-card p{ font-size: .93rem; }

/* Feature cards use h3 (was h4) to keep heading order h2 -> h3 */
.feat h3{ margin: 4px 0; font-size: 1.08rem; line-height: 1.3; letter-spacing: -.022em; }

/* Footer column headings use h3 (was h5) to keep heading order */
.footer-col h3{
  color: #fff; font-family: var(--f-display);
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 16px; font-weight: 600; line-height: 1.3;
}

/* -------------------- Work sub-headings -------------------- */
.sub-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
}
.sub-head > div{ min-width: 0; }
.sub-head h3{ margin: 0 0 6px; font-size: 1.7rem; }
.sub-head p{ margin: 0; color: var(--c-slate); font-size: .95rem; max-width: 62ch; }
.sub-head .count{
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-mute); white-space: nowrap;
}

/* Tile for a client site with no screenshot */
.proj-img.noshot{
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-bg-dark) 0%, var(--c-bg-dark-3) 100%);
}
.proj-img.noshot::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 28%, rgba(36,168,224,.38) 0%, transparent 58%);
}
.noshot-mark{
  position: relative; z-index: 1;
  font: 700 2rem/1 var(--f-display); color: #fff; letter-spacing: -.02em;
}
.noshot-dom{
  position: relative; z-index: 1;
  font-family: var(--f-mono); font-size: .7rem; color: rgba(255,255,255,.62);
}

/* -------------------- In-house product grid -------------------- */
.prod-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prod{
  --a: var(--c-cyan-deep);
  display: flex; flex-direction: column; gap: 9px;
  padding: 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-ink);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.prod:hover{
  transform: translateY(-3px);
  border-color: var(--a);
  box-shadow: var(--sh-2);
  color: var(--c-ink);
}
.prod-top{ display: flex; align-items: flex-start; gap: 11px; }
.prod-mark{
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background-color: var(--a);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: .9rem;
  letter-spacing: -.02em; color: #fff;
}
.prod-name{ min-width: 0; }
.prod-name h4{ margin: 0; font-size: 1rem; line-height: 1.2; }
.prod-name .dom{
  display: block; margin-top: 3px;
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .02em;
  color: var(--c-slate); overflow-wrap: anywhere;
}
.prod p{ margin: 0; font-size: .9rem; line-height: 1.45; color: var(--c-slate); flex: 1; }
.prod .tags{ display: flex; flex-wrap: wrap; gap: 6px; }
.prod .tags span{
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-slate);
  background: var(--c-bg-soft); border: 1px solid var(--c-line-soft);
  border-radius: 999px; padding: 3px 8px;
}
/* Closing CTA card in the product grid */
.prod.prod-cta{
  border-style: dashed; border-color: rgba(36,168,224,.55);
  background: rgba(36,168,224,.045);
  justify-content: center; gap: 8px;
}
.prod.prod-cta h4{ margin: 0; font-size: 1.05rem; }
.prod.prod-cta:hover{ background: rgba(36,168,224,.09); }
.prod-cta .go{
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; color: var(--c-cyan-deep);
}

/* -------------------- Work wall (one unified 5x5 collection) -------------------- */
.wrap.wide{ max-width: 1560px; }

.work-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.work{
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--c-ink);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.work:hover{
  transform: translateY(-4px);
  border-color: rgba(36,168,224,.45);
  box-shadow: var(--sh-3);
  color: var(--c-ink);
}
.work-shot{
  position: relative; overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--c-bg-soft);
}
.work-shot picture{ display: block; height: 100%; }
.work-shot img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform var(--t-slow);
}
.work:hover .work-shot img{ transform: scale(1.04); }
.work-shot::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(11,14,20,.16) 0%, transparent 55%);
}
/* Branded tile for sites without a screenshot — same 16:10 slot */
.work-tile{
  --a: var(--c-cyan-deep);
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background-color: var(--a);
  background-image: linear-gradient(140deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,.26) 100%);
}
.work-tile .m{
  font: 700 1.7rem/1 var(--f-display);
  letter-spacing: -.02em; color: #fff;
}
.work-tile .d{
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .02em;
  color: rgba(255,255,255,.74);
  max-width: 90%; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.work-meta{ padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 3px; }
.work-meta h3{ margin: 0; font-size: .98rem; line-height: 1.25; letter-spacing: -.018em; }
.work-meta p{ margin: 0; font-size: .84rem; line-height: 1.4; color: var(--c-slate); }

/* Coverage and CTA are both white sections — kill the doubled padding */
.cta-section{ padding-top: 0; }

/* -------------------- Responsive -------------------- */
@media (min-width: 981px){
  .hero-inner{ grid-template-columns: 1.05fr .95fr; }
}
@media (max-width: 1080px){
  .svc-grid.four{ grid-template-columns: repeat(2, 1fr); }
  .prod-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px){
  .hero-show{ max-width: 620px; }
  .hero-chip{ left: 0; }
}
@media (max-width: 820px){
  .prod-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .hero-show{ padding: 12px 0 0; }
  .hero-show .win-back,
  .hero-chip{ display: none; }
  .sub-head{ gap: 8px; }
  /* .svc-grid.four (0,2,0) outranks the base .svc-grid rule, so restate it here */
  .svc-grid.four{ grid-template-columns: 1fr; }
  .svc-grid.four .svc-card{ padding: 24px; }
  .svc-grid.four .svc-card h3{ font-size: 1.25rem; }
  .svc-grid.four .svc-card p{ font-size: .98rem; }
}
@media (max-width: 560px){
  .prod-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .hero-stats{ grid-template-columns: 1fr; gap: 16px; }
}

/* Work wall columns — declared last, widest first, so the narrowest match wins.
   25 items divide evenly only by 5, so 5-up is held as far down as it stays legible. */
@media (max-width: 1199px){ .work-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width:  999px){ .work-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  759px){ .work-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width:  519px){ .work-grid{ grid-template-columns: 1fr; } }
/* FLAGSHIP-START */
.work.work-flagship{
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(20px, 3vw, 44px);
  background: var(--c-bg-dark);
  border-color: var(--c-bg-dark);
  border-radius: var(--r-xl);
  color: #fff;
  position: relative; overflow: hidden; isolation: isolate;
}
.work.work-flagship::before{
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background:
    radial-gradient(circle at 18% 30%, rgba(36,168,224,.30) 0%, transparent 46%),
    radial-gradient(circle at 85% 80%, rgba(91,195,240,.16) 0%, transparent 50%);
  filter: blur(50px);
}
.work.work-flagship:hover{ transform: translateY(-4px); border-color: rgba(36,168,224,.55); color: #fff; }
.work.work-flagship:focus-visible{ outline-color: #fff; }
.work-flagship .win{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.3);
}
.fl-meta{ display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.work-flagship h3{
  color: #fff; margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.028em;
  text-wrap: balance;
}
.work-flagship .fl-meta p{ color: #B6BCC8; margin: 0 0 22px; font-size: 1.05rem; line-height: 1.6; max-width: 48ch; }
.fl-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.fl-tags span{
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: #C8CDD7; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 11px;
}
.fl-cta{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--c-cyan-bright);
}
.fl-cta svg{ transition: transform var(--t-base); }
.work-flagship:hover .fl-cta svg{ transform: translateX(4px); }
@media (max-width: 980px){
  .work.work-flagship{ grid-template-columns: 1fr; gap: 26px; }
}
/* FLAGSHIP-END */
#work .section-head h2{ text-wrap: balance; } /* BALANCE-WORK-H2 */
/* WORK-EXTRAS-START */
.work.work-private{ cursor: default; }
.work.work-private:hover{ transform: none; box-shadow: none; border-color: var(--c-line); }
.work.work-private:hover .work-shot img{ transform: none; }
.work-badge{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(11,14,20,.84);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 4px 10px;
}
.work.work-cta{
  grid-column: span 5;
  justify-content: center; align-items: flex-start; gap: 0;
  padding: clamp(22px, 2.4vw, 36px);
  background: rgba(36,168,224,.045);
  border: 1px dashed rgba(36,168,224,.55);
}
.work.work-cta:hover{ background: rgba(36,168,224,.09); border-color: var(--c-cyan-deep); }
.work-cta h3{ margin: 0 0 6px; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: -.022em; }
.work-cta p{ margin: 0 0 16px; color: var(--c-slate); font-size: .98rem; max-width: 52ch; }
.work-cta-go{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--c-cyan-deep);
}
.work-cta-go svg{ transition: transform var(--t-base); }
.work-cta:hover .work-cta-go svg{ transform: translateX(4px); }
/* CTA tile spans whatever is left so no row is short (25 cards): 5-up -> 5, 4-up -> 3, 3-up -> 2, 2-up -> 1 */
@media (max-width: 1199px){ .work.work-cta{ grid-column: span 3; } }
@media (max-width:  999px){ .work.work-cta{ grid-column: span 2; } }
@media (max-width:  759px){ .work.work-cta{ grid-column: span 1; } }
/* WORK-EXTRAS-END */
/* SHOWCASE-COMPONENTS-END */