/* ===================================================================
   IM TECHLANCE — Design Tokens
   Palette derived from the brand mark: a navy→cobalt circuit gradient,
   chrome-silver AI iconography, and a bold white wordmark.
=================================================================== */
:root{
  /* Navy family — sampled from the logo's own gradient corners */
  --navy-950: #080B26;
  --navy-900: #11103F;
  --navy-800: #161A5C;
  --navy-700: #1B2D8A;
  --navy-500: #1F4FCD;
  --navy-400: #3C6BE0;

  /* Chrome / silver — the robot-head + "IM" mark */
  --silver-300: #C7D1E2;
  --silver-100: #EDF1F8;

  /* Neutrals */
  --paper: #F5F7FC;
  --paper-dim: #EBEFF8;
  --white: #FFFFFF;
  --ink: #0E1230;
  --ink-soft: #4C5374;
  --ink-faint: #8088A8;
  --line: #DEE3F0;

  /* Action colors — per brand CTA rule: high-contrast green/orange only */
  --green: #239A56;
  --green-dark: #1A7A43;
  --green-ink: #0E3D22;
  --orange: #E07318;
  --orange-dark: #C05F12;

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --max-w: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 10px 30px -12px rgba(8,11,38,0.18);
  --shadow-pop: 0 18px 46px -14px rgba(8,11,38,0.32);
}

/* ===================================================================
   Reset & base
=================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; color: var(--navy-900); line-height:1.12; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; }

.section-wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width:640px){ .section-wrap{ padding: 0 20px; } }

:focus-visible{
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

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

/* ===================================================================
   Utility
=================================================================== */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.eyebrow.on-dark{ color: var(--silver-300); }
.eyebrow.on-light{ color: var(--navy-500); }
.eyebrow::before{
  content:"";
  display:inline-block;
  width:18px; height:2px;
  background: var(--orange);
  margin-right:10px;
  vertical-align: middle;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--green);
  color: var(--white);
  box-shadow: 0 10px 24px -8px rgba(35,154,86,0.55);
}
.btn-primary:hover{ background: var(--green-dark); box-shadow: 0 14px 28px -8px rgba(35,154,86,0.65); }
.btn-ghost-dark{
  border-color: rgba(237,241,248,0.35);
  color: var(--white);
}
.btn-ghost-dark:hover{ border-color: var(--silver-300); background: rgba(255,255,255,0.06); }
.btn-ghost-light{
  border-color: var(--navy-500);
  color: var(--navy-700);
}
.btn-ghost-light:hover{ background: var(--navy-500); color: var(--white); }
.btn-wa{
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 10px 24px -8px rgba(224,115,24,0.55);
}
.btn-wa:hover{ background: var(--orange-dark); }
.btn-block{ width:100%; }

.tag{
  display:inline-block;
  font-family: var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  font-weight:600;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(224,115,24,0.12);
  color: var(--orange-dark);
}

/* Signature element: the circuit-swoosh, echoing the wave beneath
   "IM" in the logo. Used as a recurring underline / divider motif. */
.swoosh{ display:block; }
.swoosh path{ stroke: url(#swooshGradient); }

/* ===================================================================
   Header / Nav
=================================================================== */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: linear-gradient(100deg, var(--navy-950), var(--navy-800) 60%, var(--navy-700));
  border-bottom: 1px solid rgba(199,209,226,0.12);
}
.nav{
  max-width: var(--max-w);
  margin:0 auto;
  padding: 12px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  height: 44px;
  width:auto;
  border-radius: 8px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{
  font-family: var(--font-display);
  color: var(--white);
  font-size: 17px;
  letter-spacing: 0.01em;
}
.brand-text span{
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--silver-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 28px;
}
.nav-links a{
  color: var(--silver-100);
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: var(--orange);
  transition: width .2s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color: var(--white); }
.nav-links a.active::after{ width:100%; background: var(--orange); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none;
  background:none; border:none;
  width: 40px; height: 40px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  position:absolute; left:9px; right:9px; height:2px;
  background: var(--white); top:19px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

@media (max-width: 980px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--navy-900);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding: 6px 28px 18px;
    border-bottom: 1px solid rgba(199,209,226,0.12);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; padding: 12px 0; }
  .nav-cta .btn-ghost-dark{ display:none; }
  .nav-toggle{ display:block; }
}

/* ===================================================================
   1. HERO
=================================================================== */
.hero{
  position: relative;
  overflow:hidden;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 45%, var(--navy-700) 78%, var(--navy-500) 130%);
  padding: 88px 0 110px;
}
.hero-circuits{
  position:absolute; inset:0;
  opacity:0.16;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr 0.85fr;
  gap: 48px;
  align-items:center;
}
.hero-copy h1{
  color: var(--white);
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 600;
  margin: 16px 0 0;
}
.hero-copy h1 em{
  font-style: normal;
  color: var(--silver-100);
  position: relative;
  display:inline-block;
}
.hero-underline{ display:block; margin: 6px 0 22px; width: min(420px, 80%); }
.hero-copy .lede{
  color: var(--silver-300);
  font-size: 17.5px;
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-card{
  position:relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(199,209,226,0.18);
  border-radius: var(--radius-lg);
  padding: 26px;
  backdrop-filter: blur(6px);
}
.hero-card-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(199,209,226,0.14);
}
.hero-card-row:last-child{ border-bottom:none; }
.hero-card-row .label{ color: var(--silver-300); font-size:13.5px; font-family: var(--font-mono); }
.hero-card-row .value{ color: var(--white); font-weight:600; font-family: var(--font-display); }
.hero-card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 6px;
}
.hero-card-head .tag{ background: rgba(35,154,86,0.18); color:#7FE3AC; }
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
}

/* ===================================================================
   2. SOCIAL PROOF BAR
=================================================================== */
.proof-bar{
  background: var(--navy-900);
  border-top: 1px solid rgba(199,209,226,0.1);
}
.proof-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  padding: 30px 0;
}
.proof-item{ text-align:center; }
.proof-item .num{
  font-family: var(--font-display);
  font-size: clamp(26px,3vw,34px);
  font-weight: 700;
  color: var(--white);
}
.proof-item .num span{ color: var(--orange); }
.proof-item .lbl{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--silver-300);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top:4px;
}
@media (max-width:760px){
  .proof-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ===================================================================
   Generic section heading
=================================================================== */
.section{ padding: 88px 0; }
.section.tight{ padding: 70px 0; }
.section-head{
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head h2{
  font-size: clamp(26px,3.4vw,38px);
  margin-top:14px;
}
.section-head p{
  color: var(--ink-soft);
  font-size: 16.5px;
  margin-top: 14px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ===================================================================
   3. SERVICES OVERVIEW
=================================================================== */
.services-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.service-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: var(--navy-400);
}
.service-icon{
  width:48px; height:48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.service-icon svg{ width:24px; height:24px; stroke: var(--white); }
.service-card h3{ font-size: 17.5px; margin-bottom:8px; }
.service-card p{ color: var(--ink-soft); font-size: 14.5px; margin-bottom: 16px; }
.service-card .link{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy-500);
  font-family: var(--font-mono);
  display:inline-flex; align-items:center; gap:6px;
}
.link{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy-500);
  font-family: var(--font-mono);
  display:inline-flex; align-items:center; gap:6px;
}
.link svg{ width:13px; height:13px; flex-shrink:0; transition: transform .2s ease; }
.link:hover svg{ transform: translateX(4px); }
.service-card .link svg{ width:13px; height:13px; transition: transform .2s ease; }
.service-card:hover .link svg{ transform: translateX(4px); }
@media (max-width:1040px){ .services-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:680px){ .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:460px){ .services-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   4. VALUE PROPOSITION
=================================================================== */
.value-section{ background: var(--navy-950); position:relative; overflow:hidden; }
.value-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}
.value-item{
  padding: 30px 26px;
  border: 1px solid rgba(199,209,226,0.14);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
}
.value-item .vnum{
  font-family: var(--font-mono);
  color: var(--orange);
  font-size: 12.5px;
  letter-spacing: 0.1em;
}
.value-item h3{ color: var(--white); font-size: 21px; margin: 12px 0 10px; }
.value-item p{ color: var(--silver-300); font-size: 14.5px; }
@media (max-width:780px){ .value-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   5. FEATURED PORTFOLIO
=================================================================== */
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.portfolio-card{
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid var(--line);
  background: var(--white);
}
.portfolio-thumb{
  height: 170px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.portfolio-thumb svg{ width:60%; height:60%; }
.portfolio-body{ padding: 20px 22px 24px; }
.portfolio-body .tag{ margin-bottom:10px; }
.portfolio-body h3{ font-size:17px; margin-bottom:8px; }
.portfolio-body p{ color: var(--ink-soft); font-size:14px; margin-bottom: 14px; }
.portfolio-stat{ display:flex; gap:18px; }
.portfolio-stat div{ font-family: var(--font-mono); font-size:12px; color: var(--navy-500); font-weight:700; }
.portfolio-stat span{ display:block; color: var(--ink-faint); font-weight:400; }
@media (max-width:900px){ .portfolio-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:600px){ .portfolio-grid{ grid-template-columns: 1fr; } }

.note-banner{
  margin-top: 26px;
  font-size: 13px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  border-left: 3px solid var(--orange);
  padding: 10px 14px;
  background: rgba(224,115,24,0.06);
  border-radius: 0 8px 8px 0;
}

/* ===================================================================
   6. TESTIMONIALS
=================================================================== */
.testimonials-section{ background: var(--paper-dim); }
.testi-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.testi-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  border: 1px solid var(--line);
  position: relative;
}
.testi-stars{ color: var(--orange); font-size: 14px; letter-spacing: 2px; margin-bottom:14px; }
.testi-card p{ color: var(--ink); font-size: 15px; margin-bottom: 22px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:42px; height:42px; border-radius:50%;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-400));
  color:var(--white); display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:15px;
}
.testi-person strong{ display:block; font-size:14.5px; }
.testi-person span{ display:block; font-size:12.5px; color: var(--ink-faint); }
@media (max-width:900px){ .testi-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   7. SUBSCRIPTION HIGHLIGHT
=================================================================== */
.sub-section{ background: var(--white); }
.sub-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}
.sub-card{
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  padding: 22px;
  text-align:center;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
}
.sub-card:hover{ box-shadow: var(--shadow-card); transform: translateY(-4px); }
.sub-card .save{
  position:absolute; top:14px; right:14px;
  background: var(--orange);
  color:var(--white);
  font-family: var(--font-mono);
  font-size:10.5px; font-weight:700;
  padding: 4px 8px; border-radius:999px;
}
.sub-logo{
  width:54px;height:54px;border-radius:14px;
  margin: 6px auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#fff; font-size:18px;
}
.sub-card h3{ font-size:16px; margin-bottom:10px; }
.sub-price .old{ color: var(--ink-faint); text-decoration: line-through; font-size:13px; margin-right:8px; }
.sub-price .new{ color: var(--green); font-family: var(--font-display); font-weight:700; font-size: 19px; }
.sub-price .per{ color: var(--ink-faint); font-size:12px; }
.sub-card .btn{ width:100%; margin-top:16px; padding: 11px 18px; font-size:14px; }
@media (max-width:900px){ .sub-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .sub-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   8. LEAD CAPTURE FORM
=================================================================== */
.lead-section{
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700) 70%, var(--navy-500) 140%);
  position: relative;
  overflow:hidden;
}
.lead-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:center;
}
.lead-copy h2{ color:var(--white); font-size: clamp(26px,3.2vw,36px); margin-top:14px; }
.lead-copy p{ color: var(--silver-300); margin-top:16px; font-size:16px; max-width:42ch; }
.lead-points{ margin-top: 26px; display:flex; flex-direction:column; gap:14px; }
.lead-points li{ display:flex; gap:12px; align-items:flex-start; color: var(--silver-100); font-size:14.5px; }
.lead-points svg{ flex-shrink:0; width:20px; height:20px; stroke: var(--orange); margin-top:1px; }

.lead-form{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-pop);
}
.lead-form h3{ font-size:19px; margin-bottom: 4px; }
.lead-form .sub{ color: var(--ink-faint); font-size:13.5px; margin-bottom:22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color: var(--ink-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--navy-500);
  outline:none;
  background: var(--white);
}
.field textarea{ resize:vertical; min-height:70px; }
.form-foot{ font-size:12px; color: var(--ink-faint); margin-top:14px; text-align:center; }
.form-status{ font-size: 13px; margin-top:10px; font-weight:600; min-height: 18px; }
.form-status.ok{ color: var(--green); }
@media (max-width:900px){ .lead-inner{ grid-template-columns: 1fr; } }

/* ===================================================================
   9. BLOG PREVIEW
=================================================================== */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.blog-card{
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow:hidden;
  background: var(--white);
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover{ box-shadow: var(--shadow-card); transform: translateY(-5px); }
.blog-thumb{
  height: 130px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-500));
  position: relative;
}
.blog-thumb .cat{
  position:absolute; bottom:12px; left:16px;
  font-family: var(--font-mono);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--silver-100);
  background: rgba(8,11,38,0.45);
  padding: 4px 9px; border-radius:6px;
}
.blog-body{ padding: 20px 20px 22px; }
.blog-body .date{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-faint); margin-bottom:8px; display:block; }
.blog-body h3{ font-size:16px; margin-bottom:10px; }
.blog-body .readmore{ font-size:13px; font-weight:700; color: var(--navy-500); font-family: var(--font-mono); }
@media (max-width:900px){ .blog-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   10. FOOTER
=================================================================== */
.site-footer{
  background: var(--navy-950);
  padding-top: 70px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(199,209,226,0.12);
}
.footer-brand img{ height:46px; margin-bottom:16px; border-radius:8px; }
.footer-brand p{ color: var(--silver-300); font-size:14px; max-width:32ch; margin-bottom:18px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(199,209,226,0.25);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, border-color .15s ease;
}
.footer-social a:hover{ background: var(--orange); border-color: var(--orange); }
.footer-social svg{ width:16px; height:16px; stroke: var(--silver-100); }
.footer-col h4{
  color: var(--white); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  font-family: var(--font-mono); margin-bottom:18px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a, .footer-col span{ color: var(--silver-300); font-size:14px; }
.footer-col a:hover{ color: var(--white); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ width:17px; height:17px; stroke: var(--orange); flex-shrink:0; margin-top:2px; }
.payment-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.payment-badges span{
  font-family: var(--font-mono); font-size:11px; font-weight:700;
  border:1px solid rgba(199,209,226,0.25); color: var(--silver-300);
  padding:5px 9px; border-radius:6px;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding: 22px 0 28px;
  flex-wrap:wrap; gap:10px;
}
.footer-bottom p{ color: var(--ink-faint); font-size:13px; }
.footer-bottom .legal-links{ display:flex; gap:18px; }
.footer-bottom .legal-links a{ color: var(--ink-faint); font-size:13px; }
.footer-bottom .legal-links a:hover{ color: var(--silver-300); }
@media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   Floating WhatsApp button
=================================================================== */
.wa-float{
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 200;
  width: 60px; height:60px;
  border-radius: 50%;
  background: var(--green);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px -8px rgba(35,154,86,0.6);
  animation: pulse-wa 2.6s ease-in-out infinite;
}
.wa-float svg{ width:28px; height:28px; fill: var(--white); }
@keyframes pulse-wa{
  0%,100%{ box-shadow: 0 12px 28px -8px rgba(35,154,86,0.6); }
  50%{ box-shadow: 0 12px 28px -4px rgba(35,154,86,0.85), 0 0 0 8px rgba(35,154,86,0.12); }
}
@media (max-width:560px){ .wa-float{ width:52px; height:52px; bottom:16px; right:16px; } }

/* ===================================================================
   Scroll reveal
=================================================================== */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ===================================================================
   INNER PAGES — shared components
   (services hub, service deep-dives, and future inner pages)
=================================================================== */

/* Breadcrumb */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--silver-300);
  margin-bottom: 18px;
}
.breadcrumb a{ color: var(--silver-300); }
.breadcrumb a:hover{ color: var(--white); }
.breadcrumb span{ opacity:.5; }
.breadcrumb .current{ color: var(--white); }

/* Page hero — smaller than the homepage hero, used on every inner page */
.page-hero{
  position: relative;
  overflow:hidden;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 50%, var(--navy-700) 100%);
  padding: 54px 0 60px;
}
.page-hero-inner{ position:relative; max-width: 760px; }
.page-hero h1{
  color: var(--white);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  margin: 14px 0 16px;
}
.page-hero .lede{
  color: var(--silver-300);
  font-size: 16.5px;
  max-width: 56ch;
  margin-bottom: 26px;
}
.page-hero .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.page-hero-icon{
  position:absolute; right:0; top:50%; transform: translateY(-50%);
  width:220px; height:220px;
  opacity:0.12;
}
@media (max-width:760px){ .page-hero-icon{ display:none; } }

/* Intro paragraph block under a page hero */
.intro-block{ max-width: 760px; }
.intro-block p{ color: var(--ink-soft); font-size: 17px; }

/* "What's included" feature checklist */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px 28px;
}
.feature-item{
  display:flex; gap:12px; align-items:flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.feature-item svg{
  flex-shrink:0; width:21px; height:21px;
  stroke: var(--green); margin-top:2px;
}
.feature-item strong{ display:block; font-size:15px; color:var(--ink); margin-bottom:3px; }
.feature-item span{ font-size:13.5px; color: var(--ink-soft); }
@media (max-width:680px){ .feature-grid{ grid-template-columns: 1fr; } }

/* 4-step process */
.process-rail{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  position: relative;
}
.process-step{
  position:relative;
  padding: 0 18px 0 0;
}
.process-step:not(:last-child)::after{
  content:"";
  position:absolute; top:23px; right:-2px; left:48px;
  height:2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.process-num{
  width:46px; height:46px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
  color: var(--white);
  font-family: var(--font-display); font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
  position: relative; z-index:1;
}
.process-step h3{ font-size:16.5px; margin-bottom:8px; }
.process-step p{ font-size:13.5px; color: var(--ink-soft); }
@media (max-width:900px){
  .process-rail{ grid-template-columns: 1fr 1fr; gap: 28px; }
  .process-step:not(:last-child)::after{ display:none; }
}
@media (max-width:560px){ .process-rail{ grid-template-columns: 1fr; } }

/* Technology grid */
.tech-grid{
  display:grid;
  grid-template-columns: repeat(6,1fr);
  gap: 14px;
}
.tech-tile{
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 10px;
  text-align:center;
  background: var(--white);
  transition: border-color .15s ease, transform .15s ease;
}
.tech-tile:hover{ border-color: var(--navy-400); transform: translateY(-3px); }
.tech-tile .chip{
  width:34px; height:34px;
  margin: 0 auto 10px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-400));
  display:flex; align-items:center; justify-content:center;
}
.tech-tile .chip svg{ width:18px; height:18px; stroke: var(--white); }
.tech-tile span{ font-family: var(--font-mono); font-size:12px; font-weight:600; color: var(--ink-soft); }
@media (max-width:900px){ .tech-grid{ grid-template-columns: repeat(4,1fr); } }
@media (max-width:560px){ .tech-grid{ grid-template-columns: repeat(3,1fr); } }

/* Pricing teaser strip */
.pricing-teaser{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  border-radius: var(--radius-lg);
  padding: 30px 34px;
}
.pricing-teaser .copy span{
  display:block; font-family: var(--font-mono); font-size:12px; color: var(--silver-300); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;
}
.pricing-teaser .copy strong{
  font-family: var(--font-display); color: var(--white); font-size: 24px; font-weight:700;
}
.pricing-teaser .copy strong em{ color:#7FE3AC; font-style:normal; }

/* FAQ accordion (native details/summary — accessible, no JS required) */
.faq-list{ max-width: 800px; }
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-item summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 20px 4px;
  cursor:pointer;
  font-family: var(--font-display);
  font-weight:600;
  font-size: 16px;
  color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .faq-icon{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  border: 1.5px solid var(--navy-400);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.faq-item .faq-icon::before, .faq-item .faq-icon::after{
  content:"";
  position:absolute;
  background: var(--navy-500);
  transition: transform .2s ease, opacity .2s ease;
}
.faq-item .faq-icon::before{ width:10px; height:2px; }
.faq-item .faq-icon::after{ width:2px; height:10px; }
.faq-item[open] .faq-icon::after{ transform: rotate(90deg); opacity:0; }
.faq-item p.faq-answer{
  color: var(--ink-soft);
  font-size: 14.5px;
  padding: 0 4px 22px;
  max-width: 68ch;
}

/* Final CTA band (used on every service page) */
.final-cta{
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700) 70%, var(--navy-500) 140%);
  border-radius: var(--radius-lg);
  padding: 54px 44px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta h2{ color: var(--white); font-size: clamp(24px,3vw,32px); }
.final-cta p{ color: var(--silver-300); font-size:15.5px; margin: 14px auto 28px; max-width:48ch; }
.final-cta .hero-actions{ justify-content:center; }

/* Services hub — overview cards (richer than the homepage mini-cards) */
.hub-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px;
}
.hub-card{
  display:flex; gap:22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  background: var(--white);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hub-card:hover{ box-shadow: var(--shadow-card); transform: translateY(-5px); border-color: var(--navy-400); }
.hub-card .service-icon{ flex-shrink:0; width:54px; height:54px; }
.hub-card .service-icon svg{ width:26px; height:26px; }
.hub-card h3{ font-size:19px; margin-bottom:8px; }
.hub-card p{ color: var(--ink-soft); font-size:14.5px; margin-bottom:14px; }
.hub-card .hub-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.hub-card .hub-list li{ font-size:13px; color: var(--ink-soft); display:flex; gap:8px; align-items:center; }
.hub-card .hub-list li::before{ content:"›"; color: var(--orange); font-weight:700; }
@media (max-width:760px){
  .hub-grid{ grid-template-columns: 1fr; }
  .hub-card{ flex-direction:column; }
}

/* Two-column layout used for "What's included" + side note, and similar */
.split-2{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items:start;
}
@media (max-width:900px){ .split-2{ grid-template-columns: 1fr; } }

.side-note{
  background: var(--paper-dim);
  border-radius: var(--radius-md);
  padding: 26px;
  border-left: 4px solid var(--orange);
}
.side-note h4{ font-size:15px; margin-bottom:10px; }
.side-note p{ font-size:13.5px; color: var(--ink-soft); }
.side-note p + p{ margin-top:10px; }

/* ===================================================================
   PRICING PAGE — tier cards
=================================================================== */
.tier-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 26px;
  align-items: stretch;
}
.tier-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  display:flex; flex-direction:column;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tier-card.popular{
  border-color: var(--navy-500);
  box-shadow: var(--shadow-pop);
}
.tier-badge{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background: var(--orange); color: var(--white);
  font-family: var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.05em;
  padding: 7px 16px; border-radius:999px; white-space:nowrap;
}
.tier-name{
  font-family: var(--font-mono); font-size:12.5px; text-transform:uppercase;
  letter-spacing:.08em; color: var(--navy-500); font-weight:700;
}
.tier-positioning{ font-size:13.5px; color: var(--ink-soft); margin: 8px 0 22px; min-height:36px; }
.tier-price{ font-family: var(--font-display); font-size:32px; font-weight:700; color: var(--navy-900); }
.tier-price span{ font-size:13px; font-weight:500; color: var(--ink-faint); font-family: var(--font-body); }
.tier-bestfor{
  font-size:12.5px; font-family: var(--font-mono); color: var(--ink-faint);
  margin: 10px 0 24px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.tier-features{ display:flex; flex-direction:column; gap:13px; margin-bottom:28px; flex:1; }
.tier-features li{ display:flex; gap:10px; font-size:13.5px; color: var(--ink-soft); }
.tier-features li svg{ flex-shrink:0; width:17px; height:17px; stroke: var(--green); margin-top:2px; }
.tier-card .btn{ width:100%; }
@media (max-width:980px){ .tier-grid{ grid-template-columns: 1fr; max-width:460px; margin:0 auto; } }

/* Trust strip (subscriptions page) */
.trust-strip{
  display:flex; justify-content:center; gap:46px; flex-wrap:wrap;
  padding: 8px 0 0;
}
.trust-item{ display:flex; align-items:center; gap:10px; }
.trust-item svg{ width:21px; height:21px; stroke: var(--green); flex-shrink:0; }
.trust-item span{ font-family: var(--font-mono); font-size:12.5px; font-weight:600; color: var(--ink-soft); }

/* Subscription card feature bullets */
.sub-features{
  list-style:none; padding:0; margin: 4px 0 14px;
  display:flex; flex-direction:column; gap:6px; text-align:left;
}
.sub-features li{
  font-size:11.5px; color: var(--ink-soft);
  display:flex; gap:6px; align-items:flex-start; line-height:1.4;
}
.sub-features li::before{ content:"✓"; color: var(--green); font-weight:700; flex-shrink:0; }

/* ===================================================================
   PRICING PAGE
=================================================================== */

/* Toggle: monthly / annual (future-proof, currently shows monthly only) */
.pricing-toggle{
  display:flex; align-items:center; gap:14px; justify-content:center;
  margin-bottom: 44px;
}
.pricing-toggle span{
  font-family: var(--font-mono); font-size:13px; font-weight:600; color: var(--ink-soft);
}
.pricing-toggle .toggle-btn{
  width:52px; height:28px; border-radius:999px;
  background: var(--navy-700); border:none; position:relative; cursor:pointer;
  transition: background .2s ease;
}
.pricing-toggle .toggle-btn::after{
  content:""; position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:50%; background:var(--white);
  transition: transform .2s ease;
}
.pricing-toggle .toggle-btn.on{ background: var(--green); }
.pricing-toggle .toggle-btn.on::after{ transform: translateX(24px); }

/* Pricing card grid */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.pricing-card{
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--line);
  background: var(--white);
  padding: 32px 28px;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
}
.pricing-card:hover{ box-shadow: var(--shadow-pop); transform: translateY(-6px); }
.pricing-card.featured{
  border-color: var(--navy-500);
  background: var(--navy-950);
  transform: translateY(-10px);
  box-shadow: var(--shadow-pop);
}
.pricing-card.featured:hover{ transform: translateY(-16px); }
.popular-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding: 5px 16px; border-radius:999px;
  white-space:nowrap;
}
.pricing-card .tier{
  font-family: var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-faint); margin-bottom: 8px;
}
.pricing-card.featured .tier{ color: var(--silver-300); }
.pricing-card .price-row{ display:flex; align-items:baseline; gap:6px; margin: 12px 0; }
.pricing-card .price-num{
  font-family: var(--font-display); font-weight:700; font-size:clamp(30px,4vw,40px);
  color: var(--navy-900);
}
.pricing-card.featured .price-num{ color: var(--white); }
.pricing-card .price-suffix{ font-size:14px; color: var(--ink-faint); }
.pricing-card.featured .price-suffix{ color: var(--silver-300); }
.pricing-card .best-for{
  font-size:13.5px; color: var(--ink-soft); margin-bottom:22px;
  padding-bottom:22px; border-bottom: 1px solid var(--line);
}
.pricing-card.featured .best-for{ color: var(--silver-300); border-color: rgba(199,209,226,0.18); }
.pricing-card h3{ font-size:20px; }
.pricing-card.featured h3{ color: var(--white); }
.pricing-feat-list{ display:flex; flex-direction:column; gap:11px; margin-bottom:26px; }
.pricing-feat-list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; color: var(--ink-soft);
}
.pricing-card.featured .pricing-feat-list li{ color: var(--silver-300); }
.pricing-feat-list li svg{
  flex-shrink:0; width:18px; height:18px; stroke: var(--green); margin-top:1px;
}
.pricing-feat-list li.na{ opacity:.45; }
.pricing-feat-list li.na svg{ stroke: var(--ink-faint); }

/* Subscription pricing table */
.sub-table{
  width:100%; border-collapse:separate; border-spacing:0;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow:hidden;
}
.sub-table th{
  background: var(--navy-900);
  color: var(--silver-100);
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  padding: 14px 20px; text-align:left;
}
.sub-table td{
  padding: 15px 20px; font-size:14.5px;
  border-bottom: 1px solid var(--line);
  vertical-align:middle;
}
.sub-table tr:last-child td{ border-bottom:none; }
.sub-table tr:nth-child(even) td{ background: var(--paper); }
.sub-table .name-cell{ font-weight:600; color: var(--navy-900); }
.sub-table .name-cell span{
  display:block; font-size:12px; font-weight:400; color:var(--ink-faint); margin-top:2px;
}
.sub-table .retail{ color: var(--ink-faint); text-decoration:line-through; font-size:13px; }
.sub-table .ours{ color: var(--green); font-family: var(--font-display); font-weight:700; font-size:16px; }
.sub-table .save-pill{
  display:inline-block; background: rgba(35,154,86,0.12); color: var(--green-dark);
  font-family: var(--font-mono); font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
}
@media (max-width:700px){ .sub-table thead th:nth-child(3){ display:none; } .sub-table td:nth-child(3){ display:none; } }
@media (max-width:500px){ .sub-table td, .sub-table th{ padding:12px 14px; } }

/* FAQ comparison note */
.pricing-note{
  background: var(--paper-dim);
  border-radius: var(--radius-md); border-left: 4px solid var(--navy-500);
  padding: 20px 24px; margin-top: 20px;
  font-size:14px; color: var(--ink-soft);
}
.pricing-note strong{ color: var(--navy-900); }

@media (max-width:860px){ .pricing-grid{ grid-template-columns: 1fr; } .pricing-card.featured{ transform:none; } }

/* ===================================================================
   SUBSCRIPTIONS PAGE
=================================================================== */
.sub-hero-banner{
  background: linear-gradient(120deg, var(--navy-950), var(--navy-700) 60%, var(--navy-500) 130%);
  border-radius: var(--radius-lg);
  padding: 44px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  margin-bottom: 50px;
}
.sub-hero-banner h2{ color:var(--white); font-size:clamp(22px,3vw,30px); margin-bottom:10px; }
.sub-hero-banner p{ color:var(--silver-300); font-size:15px; max-width:46ch; }
.sub-hero-stats{ display:flex; gap:28px; flex-wrap:wrap; }
.sub-stat .num{ font-family:var(--font-display); font-size:32px; font-weight:700; color:var(--white); }
.sub-stat .num em{ color:var(--orange); font-style:normal; }
.sub-stat .lbl{ font-family:var(--font-mono); font-size:11px; color:var(--silver-300); text-transform:uppercase; letter-spacing:.07em; }

/* Full catalog grid */
.catalog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.catalog-card{
  border:1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  padding: 26px;
  position:relative;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.catalog-card:hover{ box-shadow: var(--shadow-card); transform: translateY(-5px); border-color: var(--navy-400); }
.catalog-card.hot{ border-color: var(--orange); }
.hot-badge{
  position:absolute; top:-12px; right:20px;
  background: var(--orange); color:var(--white);
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px;
}
.catalog-logo{
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#fff; font-size:20px;
  margin-bottom:16px;
}
.catalog-card h3{ font-size:18px; margin-bottom:6px; }
.catalog-card .tagline{ font-size:13px; color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:14px; }
.catalog-features{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.catalog-features li{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:8px; align-items:center; }
.catalog-features li svg{ flex-shrink:0; width:15px; height:15px; stroke:var(--green); }
.catalog-price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.catalog-price-row .old-p{ color:var(--ink-faint); text-decoration:line-through; font-size:13px; }
.catalog-price-row .new-p{ color:var(--green); font-family:var(--font-display); font-weight:700; font-size:22px; }
.catalog-price-row .per-p{ color:var(--ink-faint); font-size:12px; }
.catalog-card .btn{ width:100%; }
@media (max-width:960px){ .catalog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .catalog-grid{ grid-template-columns: 1fr; } }

/* Trust badges bar */
.trust-bar{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:18px; margin-bottom:50px;
}
.trust-item{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:20px;
  text-align:center;
}
.trust-item svg{ width:32px; height:32px; stroke:var(--navy-500); margin-bottom:10px; }
.trust-item strong{ display:block; font-size:14px; margin-bottom:4px; }
.trust-item span{ font-size:12.5px; color:var(--ink-faint); }
@media (max-width:760px){ .trust-bar{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:440px){ .trust-bar{ grid-template-columns: 1fr; } }

/* How ordering works steps */
.how-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  counter-reset:step;
}
.how-step{
  position:relative; padding:0 24px 0 0;
  counter-increment:step;
}
.how-step:not(:last-child)::after{
  content:""; position:absolute; top:22px; left:46px; right:-2px; height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);
}
.how-step .step-num{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  color:var(--white); font-family:var(--font-display); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; position:relative; z-index:1;
}
.how-step h4{ font-size:15.5px; margin-bottom:6px; }
.how-step p{ font-size:13.5px; color:var(--ink-soft); }
@media (max-width:860px){ .how-steps{ grid-template-columns:1fr 1fr; gap:24px; } .how-step:not(:last-child)::after{display:none;} }
@media (max-width:500px){ .how-steps{ grid-template-columns:1fr; } }

/* ===================================================================
   PORTFOLIO PAGE
=================================================================== */
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;
}
.filter-btn{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  padding:8px 18px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white);
  color:var(--ink-soft); cursor:pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.filter-btn:hover, .filter-btn.active{
  border-color:var(--navy-500); background:var(--navy-500); color:var(--white);
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
.work-card{
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--white); overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.work-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-5px); }
.work-thumb{
  height:220px; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.work-thumb svg{ width:56px; height:56px; stroke:rgba(255,255,255,0.7); }
.work-thumb .work-cat{
  position:absolute; top:16px; left:18px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  background:rgba(8,11,38,0.45); color:var(--silver-100);
  padding:5px 10px; border-radius:6px; backdrop-filter:blur(4px);
}
.work-body{ padding:24px; }
.work-body h3{ font-size:19px; margin-bottom:8px; }
.work-body p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:18px; }
.work-stats{ display:flex; gap:24px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line); }
.work-stat .val{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--navy-900); }
.work-stat .val em{ color:var(--green); font-style:normal; }
.work-stat .key{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.work-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.work-tags span{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:999px;
  background:rgba(31,79,205,0.1); color:var(--navy-500);
}
@media (max-width:780px){ .work-grid{ grid-template-columns:1fr; } }

/* Results bar on portfolio hero */
.results-bar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px;
}
.result-item{ text-align:center; }
.result-item .r-num{
  font-family:var(--font-display); font-size:clamp(26px,3vw,34px); font-weight:700; color:var(--white);
}
.result-item .r-num em{ color:var(--orange); font-style:normal; }
.result-item .r-lbl{ font-family:var(--font-mono); font-size:11px; color:var(--silver-300); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
@media (max-width:680px){ .results-bar{ grid-template-columns:repeat(2,1fr); } }

/* Testimonial inline (portfolio page uses compact version) */
.testi-inline{
  background:var(--paper-dim); border-radius:var(--radius-md);
  padding:26px 28px; border-left:4px solid var(--orange);
  margin-top:28px;
}
.testi-inline p{ font-size:15.5px; color:var(--ink); margin-bottom:16px; font-style:italic; }
.testi-inline .person{ font-size:13.5px; font-weight:600; color:var(--navy-900); }
.testi-inline .role{ font-size:12px; color:var(--ink-faint); }

/* ===================================================================
   ABOUT PAGE
=================================================================== */
.about-split{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.about-split img{
  width:100%; border-radius:var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.about-split .about-copy h2{ font-size:clamp(24px,3vw,34px); margin:14px 0 18px; }
.about-split .about-copy p{ color:var(--ink-soft); font-size:16px; margin-bottom:14px; }
@media(max-width:820px){ .about-split{ grid-template-columns:1fr; } }

/* Values grid */
.values-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.value-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:26px 24px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.value-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-5px); border-color:var(--navy-400); }
.value-card .vc-icon{
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.value-card .vc-icon svg{ width:22px; height:22px; stroke:var(--white); }
.value-card h3{ font-size:17px; margin-bottom:8px; }
.value-card p{ font-size:13.5px; color:var(--ink-soft); }
@media(max-width:780px){ .values-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:500px){ .values-grid{ grid-template-columns:1fr; } }

/* Team grid */
.team-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.team-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:26px 20px; text-align:center;
}
.team-avatar{
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-400));
  color:var(--white); font-family:var(--font-display); font-weight:700; font-size:22px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.team-card h4{ font-size:16px; margin-bottom:4px; }
.team-card .role{ font-size:12.5px; color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:12px; }
.team-card p{ font-size:13px; color:var(--ink-soft); }
@media(max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .team-grid{ grid-template-columns:1fr; } }

/* Timeline / milestones */
.timeline{ max-width:680px; }
.tl-item{
  display:flex; gap:22px; padding-bottom:32px;
  position:relative;
}
.tl-item:not(:last-child)::before{
  content:""; position:absolute; left:18px; top:40px; bottom:0;
  width:2px; background:var(--line);
}
.tl-dot{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  color:var(--white); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.04em;
  position:relative; z-index:1;
}
.tl-body h4{ font-size:16px; margin-bottom:5px; }
.tl-body p{ font-size:13.5px; color:var(--ink-soft); }

/* ===================================================================
   CONTACT PAGE
=================================================================== */
.contact-grid{
  display:grid; grid-template-columns:1fr 1.3fr; gap:50px; align-items:start;
}
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-info{ display:flex; flex-direction:column; gap:20px; }
.contact-block{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:22px 24px;
  display:flex; gap:16px; align-items:flex-start;
}
.contact-block .cb-icon{
  width:42px; height:42px; flex-shrink:0; border-radius:10px;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  display:flex; align-items:center; justify-content:center;
}
.contact-block .cb-icon svg{ width:20px; height:20px; stroke:var(--white); }
.contact-block h4{ font-size:14px; font-weight:700; margin-bottom:4px; }
.contact-block p, .contact-block a{
  font-size:14.5px; color:var(--ink-soft);
}
.contact-block a:hover{ color:var(--navy-500); }
.contact-block .badge{
  display:inline-block; margin-top:6px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  padding:3px 9px; border-radius:999px;
  background:rgba(35,154,86,0.12); color:var(--green-dark);
}

.map-placeholder{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  border-radius:var(--radius-md); height:180px;
  display:flex; align-items:center; justify-content:center;
  margin-top:20px;
  border:1px solid rgba(199,209,226,0.15);
}
.map-placeholder p{
  font-family:var(--font-mono); font-size:12px; color:var(--silver-300); text-align:center;
}

.contact-form-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px;
  box-shadow:var(--shadow-card);
}
.contact-form-card h3{ font-size:21px; margin-bottom:4px; }
.contact-form-card .sub{ font-size:13.5px; color:var(--ink-faint); margin-bottom:24px; }

/* ===================================================================
   FAQ PAGE
=================================================================== */
.faq-page-grid{
  display:grid; grid-template-columns:1fr 3fr; gap:48px; align-items:start;
}
.faq-nav{
  position:sticky; top:80px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:20px;
}
.faq-nav h4{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;
}
.faq-nav ul{ display:flex; flex-direction:column; gap:4px; }
.faq-nav a{
  display:block; padding:9px 12px; border-radius:8px;
  font-size:14px; color:var(--ink-soft);
  transition: background .15s, color .15s;
}
.faq-nav a:hover{ background:var(--paper-dim); color:var(--navy-500); }
.faq-category{ margin-bottom:44px; }
.faq-category h3{
  font-size:18px; color:var(--navy-900); padding-bottom:12px;
  border-bottom:2px solid var(--orange); margin-bottom:4px;
  display:flex; align-items:center; gap:10px;
}
.faq-category h3 svg{ width:20px; height:20px; stroke:var(--orange); }
@media(max-width:760px){
  .faq-page-grid{ grid-template-columns:1fr; }
  .faq-nav{ position:static; }
}

/* ===================================================================
   BLOG PAGE
=================================================================== */
.blog-hero-inner{ max-width:680px; }

.blog-featured{
  display:grid; grid-template-columns:1.4fr 1fr; gap:28px; margin-bottom:50px;
}
.blog-featured-card{
  border-radius:var(--radius-md); border:1px solid var(--line);
  background:var(--white); overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.blog-featured-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.blog-featured-thumb{
  height:220px; background:linear-gradient(135deg,var(--navy-800),var(--navy-500));
  position:relative;
}
.blog-featured-thumb .cat-pill{
  position:absolute; bottom:14px; left:16px;
  background:var(--orange); color:var(--white);
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:6px;
}
.blog-featured-body{ padding:22px; }
.blog-featured-body .meta{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-bottom:10px;
}
.blog-featured-body h3{ font-size:19px; margin-bottom:8px; }
.blog-featured-body p{ font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
.blog-featured-body .readmore{
  font-size:13px; font-weight:700; color:var(--navy-500); font-family:var(--font-mono);
  display:inline-flex; align-items:center; gap:6px;
}
.blog-featured-body .readmore svg{ width:12px; height:12px; }
@media(max-width:760px){ .blog-featured{ grid-template-columns:1fr; } }

.blog-list-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.blog-list-card{
  border-radius:var(--radius-md); border:1px solid var(--line);
  background:var(--white); overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.blog-list-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.blog-list-thumb{
  height:130px; position:relative;
}
.blog-list-thumb .cat-pill{
  position:absolute; bottom:10px; left:14px;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  background:rgba(8,11,38,0.5); color:var(--silver-100);
  padding:3px 8px; border-radius:5px; backdrop-filter:blur(3px);
}
.blog-list-body{ padding:16px 18px 20px; }
.blog-list-body .meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); margin-bottom:8px; }
.blog-list-body h4{ font-size:15.5px; margin-bottom:6px; }
.blog-list-body p{ font-size:13px; color:var(--ink-soft); margin-bottom:10px; }
.blog-list-body .readmore{
  font-size:12.5px; font-weight:700; color:var(--navy-500); font-family:var(--font-mono);
}
@media(max-width:860px){ .blog-list-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .blog-list-grid{ grid-template-columns:1fr; } }

/* Category filter tabs (blog) */
.cat-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.cat-tab{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  padding:7px 16px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white);
  color:var(--ink-soft); cursor:pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.cat-tab:hover,.cat-tab.active{
  border-color:var(--navy-500); background:var(--navy-500); color:var(--white);
}

/* Newsletter subscribe strip */
.newsletter-strip{
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700) 70%,var(--navy-500) 140%);
  border-radius:var(--radius-lg); padding:40px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.newsletter-strip h3{ color:var(--white); font-size:clamp(18px,2.5vw,24px); margin-bottom:6px; }
.newsletter-strip p{ color:var(--silver-300); font-size:14px; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{
  flex:1; min-width:220px;
  padding:12px 16px; border:1.5px solid rgba(199,209,226,0.25);
  border-radius:999px; background:rgba(255,255,255,0.08);
  color:var(--white); font-size:14.5px; font-family:var(--font-body);
}
.newsletter-form input::placeholder{ color:var(--silver-300); }
.newsletter-form input:focus{ outline:none; border-color:rgba(199,209,226,0.6); }

/* ===================================================================
   ABOUT PAGE
=================================================================== */
.about-split{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.about-split img{ border-radius:var(--radius-lg); width:100%; }
.about-split .about-copy h2{ font-size:clamp(24px,3vw,34px); margin:14px 0 18px; }
.about-split .about-copy p{ color:var(--ink-soft); font-size:16px; margin-bottom:14px; }
@media(max-width:860px){ .about-split{ grid-template-columns:1fr; } }

.values-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.value-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:28px 24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.value-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-5px); }
.value-card .v-icon{
  width:46px; height:46px; border-radius:12px;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.value-card .v-icon svg{ width:22px; height:22px; stroke:var(--white); }
.value-card h3{ font-size:17px; margin-bottom:8px; }
.value-card p{ color:var(--ink-soft); font-size:14px; }
@media(max-width:780px){ .values-grid{ grid-template-columns:1fr; } }

.team-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.team-card{
  text-align:center; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px 20px;
}
.team-avatar{
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-400));
  color:var(--white); font-family:var(--font-display); font-weight:700; font-size:24px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.team-card h4{ font-size:16px; margin-bottom:4px; }
.team-card .role-tag{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.team-card .team-bio{ font-size:13.5px; color:var(--ink-soft); margin:10px 0 14px; }
.team-card .team-li a{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--navy-500);
}
.team-card .team-li svg{ width:14px; height:14px; }
@media(max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px){ .team-grid{ grid-template-columns:1fr; } }

.milestones{
  display:flex; flex-direction:column; gap:0;
  position:relative; padding-left:32px;
}
.milestones::before{
  content:""; position:absolute; left:8px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg,var(--navy-500),var(--orange));
}
.milestone{
  position:relative; padding:0 0 34px 24px;
}
.milestone::before{
  content:""; position:absolute; left:-8px; top:6px;
  width:16px; height:16px; border-radius:50%;
  background:var(--white); border:3px solid var(--navy-500);
  box-shadow:0 0 0 4px rgba(31,79,205,0.12);
}
.milestone .year{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:var(--orange); letter-spacing:.07em; margin-bottom:6px;
}
.milestone h4{ font-size:16px; margin-bottom:6px; }
.milestone p{ font-size:13.5px; color:var(--ink-soft); }

/* ===================================================================
   CONTACT PAGE
=================================================================== */
.contact-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:start;
}
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-cards{ display:flex; flex-direction:column; gap:16px; margin-bottom:32px; }
.contact-card{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:20px 22px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-card:hover{ border-color:var(--navy-400); box-shadow:var(--shadow-card); }
.contact-card .cc-icon{
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  display:flex; align-items:center; justify-content:center;
}
.contact-card .cc-icon svg{ width:20px; height:20px; stroke:var(--white); }
.contact-card .cc-label{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:5px;
}
.contact-card .cc-value{ font-size:15.5px; font-weight:600; color:var(--navy-900); }
.contact-card .cc-sub{ font-size:12.5px; color:var(--ink-faint); margin-top:3px; }
.contact-card a{ color:var(--navy-900); }
.contact-card a:hover{ color:var(--navy-500); }

.contact-hours{
  background:var(--paper-dim); border-radius:var(--radius-md); padding:22px 24px;
  border-left:4px solid var(--green);
}
.contact-hours h4{ font-size:14.5px; margin-bottom:12px; }
.contact-hours ul{ display:flex; flex-direction:column; gap:8px; }
.contact-hours li{
  display:flex; justify-content:space-between; gap:12px;
  font-size:13.5px; color:var(--ink-soft);
}
.contact-hours li strong{ color:var(--navy-900); }

/* ===================================================================
   FAQ PAGE
=================================================================== */
.faq-categories{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.faq-cat-btn{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  padding:8px 18px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white);
  color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.faq-cat-btn:hover, .faq-cat-btn.active{
  border-color:var(--navy-500); background:var(--navy-500); color:var(--white);
}

.faq-section-group{ margin-bottom:44px; }
.faq-section-group h3{
  font-size:14px; font-family:var(--font-mono); font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy-500); margin-bottom:18px;
  padding-bottom:10px; border-bottom:2px solid var(--line);
}

.contact-mini{
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700));
  border-radius:var(--radius-lg); padding:34px 36px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.contact-mini p{ color:var(--silver-300); font-size:15px; margin-top:8px; max-width:42ch; }
.contact-mini h3{ color:var(--white); font-size:20px; }

/* ===================================================================
   BLOG PAGE
=================================================================== */
.blog-page-grid{
  display:grid; grid-template-columns:2fr 1fr; gap:44px; align-items:start;
}
@media(max-width:900px){ .blog-page-grid{ grid-template-columns:1fr; } }

.blog-card-full{
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--white); overflow:hidden; margin-bottom:28px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card-full:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.blog-thumb-full{
  height:200px;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-500));
  position:relative; display:flex; align-items:center; justify-content:center;
}
.blog-thumb-full .cat-badge{
  position:absolute; top:14px; left:16px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background:rgba(8,11,38,0.55); color:var(--silver-100);
  padding:5px 11px; border-radius:6px; backdrop-filter:blur(4px);
}
.blog-thumb-full svg{ width:48px; height:48px; stroke:rgba(255,255,255,0.3); }
.blog-body-full{ padding:24px 26px 28px; }
.blog-meta{ display:flex; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.blog-meta span{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint);
  display:flex; align-items:center; gap:5px;
}
.blog-meta span svg{ width:13px; height:13px; stroke:var(--ink-faint); }
.blog-body-full h2{ font-size:20px; margin-bottom:10px; }
.blog-body-full p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:16px; }

/* Sidebar */
.blog-sidebar{}
.sidebar-widget{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:22px; margin-bottom:22px;
}
.sidebar-widget h4{
  font-size:13px; font-family:var(--font-mono); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--navy-900); margin-bottom:16px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.sidebar-cats{ display:flex; flex-direction:column; gap:10px; }
.sidebar-cats a{
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; color:var(--ink-soft); padding:8px 0;
  border-bottom:1px solid var(--line);
}
.sidebar-cats a:last-child{ border-bottom:none; }
.sidebar-cats a:hover{ color:var(--navy-500); }
.sidebar-cats .count{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  background:var(--paper-dim); color:var(--ink-faint);
  padding:2px 8px; border-radius:999px;
}
.sidebar-subscribe input{
  width:100%; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 13px; font-size:14px; margin-bottom:10px; font-family:inherit;
}
.sidebar-subscribe input:focus{ border-color:var(--navy-500); outline:none; }
.sidebar-subscribe .btn{ width:100%; }
.coming-soon-pill{
  display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700;
  background:rgba(224,115,24,0.12); color:var(--orange-dark);
  padding:3px 10px; border-radius:999px; margin-bottom:10px;
}

/* ===================================================================
   ABOUT PAGE
=================================================================== */
.about-split{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
@media(max-width:860px){ .about-split{ grid-template-columns:1fr; } }

.about-visual{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(135deg,var(--navy-950),var(--navy-700));
  min-height:380px;
  display:flex; align-items:center; justify-content:center;
}
.about-visual .av-icon{
  width:140px; height:140px; opacity:.15;
}
.about-visual .av-card{
  position:absolute; bottom:24px; left:24px; right:24px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(199,209,226,0.18);
  border-radius:var(--radius-sm); padding:16px 18px;
  backdrop-filter:blur(8px);
  display:flex; gap:18px; align-items:center;
}
.about-visual .av-card .stat{ text-align:center; }
.about-visual .av-card .stat .n{
  font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--white);
}
.about-visual .av-card .stat .n em{ color:var(--orange); font-style:normal; }
.about-visual .av-card .stat .l{
  font-family:var(--font-mono); font-size:10px; color:var(--silver-300);
  text-transform:uppercase; letter-spacing:.06em;
}
.about-visual .av-divider{
  width:1px; height:40px; background:rgba(199,209,226,0.25); flex-shrink:0;
}

.about-copy .lead-text{
  font-size:17px; color:var(--ink-soft); margin-bottom:20px;
}
.about-copy .lead-text + .lead-text{ margin-top:0; }
.about-values{ display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.about-value{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px; border-radius:var(--radius-sm);
  background:var(--paper-dim); border:1px solid var(--line);
}
.about-value .icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  display:flex; align-items:center; justify-content:center;
}
.about-value .icon svg{ width:18px; height:18px; stroke:var(--white); }
.about-value strong{ display:block; font-size:14.5px; margin-bottom:3px; }
.about-value span{ font-size:13px; color:var(--ink-soft); }

/* Team grid */
.team-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media(max-width:860px){ .team-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:540px){ .team-grid{ grid-template-columns:1fr; } }

.team-card{
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--white); overflow:hidden; text-align:center;
  transition:box-shadow .2s, transform .2s;
}
.team-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); }
.team-thumb{
  height:180px;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-500));
  display:flex; align-items:center; justify-content:center;
}
.team-thumb .initials{
  width:72px; height:72px; border-radius:50%;
  background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--white);
}
.team-info{ padding:18px 16px 22px; }
.team-info strong{ display:block; font-size:16px; margin-bottom:4px; }
.team-info .role{ font-family:var(--font-mono); font-size:11.5px; color:var(--navy-500); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; display:block; }
.team-info p{ font-size:13px; color:var(--ink-soft); margin-bottom:12px; }
.team-linkedin{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--navy-500);
}
.team-linkedin svg{ width:14px; height:14px; }

/* Timeline */
.timeline{ position:relative; padding-left:32px; }
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:0;
  width:2px; background:var(--line);
}
.tl-item{ position:relative; margin-bottom:32px; }
.tl-dot{
  position:absolute; left:-32px; top:4px;
  width:20px; height:20px; border-radius:50%;
  background:var(--navy-700); border:3px solid var(--white);
  box-shadow:0 0 0 2px var(--navy-500);
}
.tl-date{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  color:var(--orange); letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px;
}
.tl-item h4{ font-size:16px; margin-bottom:4px; }
.tl-item p{ font-size:13.5px; color:var(--ink-soft); }

/* ===================================================================
   CONTACT PAGE
=================================================================== */
.contact-split{
  display:grid; grid-template-columns:1fr 1.2fr; gap:50px; align-items:start;
}
@media(max-width:900px){ .contact-split{ grid-template-columns:1fr; } }

.contact-methods{ display:flex; flex-direction:column; gap:16px; margin-bottom:32px; }
.contact-method{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--white);
  transition:border-color .15s, box-shadow .15s;
}
.contact-method:hover{ border-color:var(--navy-400); box-shadow:var(--shadow-card); }
.contact-method .cm-icon{
  flex-shrink:0; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.contact-method .cm-icon svg{ width:22px; height:22px; }
.contact-method .cm-icon.wa{ background:rgba(35,154,86,0.12); }
.contact-method .cm-icon.wa svg{ stroke:var(--green); }
.contact-method .cm-icon.em{ background:rgba(31,79,205,0.1); }
.contact-method .cm-icon.em svg{ stroke:var(--navy-500); }
.contact-method .cm-icon.ph{ background:rgba(224,115,24,0.1); }
.contact-method .cm-icon.ph svg{ stroke:var(--orange); }
.contact-method strong{ display:block; font-size:14.5px; margin-bottom:2px; }
.contact-method span{ font-size:13px; color:var(--ink-faint); }
.contact-method a{ display:block; font-size:14px; color:var(--navy-500); font-weight:600; margin-top:4px; }

.hours-card{
  background:var(--navy-950); border-radius:var(--radius-md); padding:24px 26px;
}
.hours-card h4{ color:var(--white); font-size:15px; margin-bottom:16px; }
.hours-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid rgba(199,209,226,0.12);
  font-size:14px;
}
.hours-row:last-child{ border-bottom:none; }
.hours-row .day{ color:var(--silver-300); }
.hours-row .time{ color:var(--white); font-family:var(--font-mono); font-size:12.5px; }
.hours-row .time.open{ color:#7FE3AC; }

/* contact form card */
.contact-form-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px;
  box-shadow:var(--shadow-card);
}
.contact-form-card h3{ font-size:20px; margin-bottom:4px; }
.contact-form-card .sub{ color:var(--ink-faint); font-size:13.5px; margin-bottom:24px; }

/* Map placeholder */
.map-placeholder{
  height:260px; border-radius:var(--radius-md); overflow:hidden;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  border:1px solid var(--line);
}
.map-placeholder svg{ width:40px; height:40px; stroke:var(--silver-300); opacity:.5; }
.map-placeholder p{ color:var(--silver-300); font-size:13px; text-align:center; padding:0 20px; }

/* ===================================================================
   FAQ PAGE
=================================================================== */
.faq-cats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-bottom:48px;
}
.faq-cat-btn{
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--white); padding:16px 18px; cursor:pointer;
  text-align:left; transition:border-color .15s, background .15s;
}
.faq-cat-btn:hover, .faq-cat-btn.active{
  border-color:var(--navy-500); background:var(--navy-500);
}
.faq-cat-btn:hover .fca-title, .faq-cat-btn.active .fca-title{ color:var(--white); }
.faq-cat-btn:hover .fca-sub, .faq-cat-btn.active .fca-sub{ color:rgba(255,255,255,0.7); }
.fca-icon{ width:32px; height:32px; margin-bottom:10px; }
.fca-icon svg{ width:32px; height:32px; stroke:var(--navy-500); }
.faq-cat-btn:hover .fca-icon svg, .faq-cat-btn.active .fca-icon svg{ stroke:rgba(255,255,255,0.9); }
.fca-title{ font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--navy-900); }
.fca-sub{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
@media(max-width:760px){ .faq-cats{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .faq-cats{ grid-template-columns:1fr; } }

.faq-section-title{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:var(--navy-500); letter-spacing:.1em; text-transform:uppercase;
  padding:6px 0 4px; border-top:2px solid var(--navy-500);
  margin-bottom:4px;
}

/* ===================================================================
   BLOG PAGE
=================================================================== */
.blog-hero-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:24px;
  margin-bottom:56px;
}
.blog-featured{
  border-radius:var(--radius-md); border:1px solid var(--line);
  background:var(--white); overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.blog-featured:hover{ box-shadow:var(--shadow-pop); transform:translateY(-4px); }
.blog-feat-thumb{
  height:260px;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-500));
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.blog-feat-thumb .bf-cat{
  position:absolute; top:16px; left:18px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background:var(--orange); color:var(--white);
  padding:5px 10px; border-radius:6px;
}
.blog-feat-body{ padding:26px 26px 28px; }
.blog-feat-body .date{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); margin-bottom:8px; display:block; }
.blog-feat-body h2{ font-size:22px; margin-bottom:10px; }
.blog-feat-body p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:18px; }
.blog-feat-body .readmore{
  font-family:var(--font-mono); font-size:13px; font-weight:700;
  color:var(--navy-500); display:inline-flex; align-items:center; gap:6px;
}
.blog-feat-body .readmore svg{ width:13px; height:13px; transition:transform .2s; }
.blog-featured:hover .readmore svg{ transform:translateX(4px); }

.blog-side-stack{ display:flex; flex-direction:column; gap:16px; }
.blog-side-card{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--white); padding:16px; overflow:hidden;
  transition:box-shadow .15s, border-color .15s;
}
.blog-side-card:hover{ box-shadow:var(--shadow-card); border-color:var(--navy-400); }
.blog-side-thumb{
  flex-shrink:0; width:72px; height:72px; border-radius:10px;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  display:flex; align-items:center; justify-content:center;
}
.blog-side-thumb svg{ width:28px; height:28px; stroke:rgba(255,255,255,0.6); }
.blog-side-info .cat{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; display:block; }
.blog-side-info h3{ font-size:14.5px; margin-bottom:4px; }
.blog-side-info .date{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }

.blog-cat-strip{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;
}
.blog-cat-pill{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  padding:7px 16px; border-radius:999px;
  border:1.5px solid var(--line); background:var(--white); color:var(--ink-soft);
  cursor:pointer; transition:all .15s;
}
.blog-cat-pill:hover, .blog-cat-pill.active{
  border-color:var(--navy-500); background:var(--navy-500); color:var(--white);
}

.blog-main-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
@media(max-width:960px){ .blog-main-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .blog-main-grid{ grid-template-columns:1fr; } }
@media(max-width:1000px){ .blog-hero-grid{ grid-template-columns:1fr; } }

.coming-soon-badge{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  color:var(--ink-faint); border:1px solid var(--line); padding:3px 9px;
  border-radius:999px; letter-spacing:.06em; text-transform:uppercase;
  vertical-align:middle; margin-left:8px;
}

/* Newsletter subscribe strip */
.newsletter-strip{
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700));
  border-radius:var(--radius-lg); padding:40px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.newsletter-strip .copy h3{ color:var(--white); font-size:20px; margin-bottom:6px; }
.newsletter-strip .copy p{ color:var(--silver-300); font-size:14px; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input{
  padding:12px 16px; border-radius:999px; border:1.5px solid rgba(199,209,226,0.25);
  background:rgba(255,255,255,0.08); color:var(--white); font-size:14px; font-family:inherit;
  width:240px;
}
.newsletter-form input::placeholder{ color:var(--silver-300); }
.newsletter-form input:focus{ outline:none; border-color:var(--orange); }

/* ===================================================================
   ENHANCEMENT PASS — Part 5
   New components: announcement bar, gradient text, nav dropdown,
   button shimmer, scroll-to-top, mobile sticky CTA, WA tooltip,
   competitor comparison table, cities strip, hero orbs, 404, thank-you
=================================================================== */

/* --- Announcement bar -------------------------------------------- */
.announce-bar{
  background: linear-gradient(90deg,var(--navy-900) 0%,#1a2a6c 40%,var(--orange-dark) 100%);
  background-size:200% auto;
  animation: announcePulse 6s ease infinite;
  padding:10px 52px;
  text-align:center;
  position:relative;
}
@keyframes announcePulse{
  0%{background-position:0% center}
  50%{background-position:100% center}
  100%{background-position:0% center}
}
.announce-bar p{
  color:var(--white);font-size:13px;
  font-family:var(--font-mono);letter-spacing:.02em;
}
.announce-bar a{
  color:var(--orange);font-weight:700;text-decoration:underline;margin-left:6px;
}
.announce-bar .ab-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:rgba(255,255,255,0.6);
  font-size:18px;cursor:pointer;line-height:1;padding:4px 8px;
  transition:color .15s;
}
.announce-bar .ab-close:hover{color:var(--white);}
.announce-bar.hidden{display:none;}

/* --- Gradient text ----------------------------------------------- */
.gradient-text{
  background:linear-gradient(120deg,#7FE3AC 0%,#EDF1F8 50%,#C7D1E2 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* --- Button shimmer on primary CTA ------------------------------- */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{
  content:'';position:absolute;top:0;left:-110%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  transform:skewX(-20deg);
  transition:left 0.55s ease;
}
.btn-primary:hover::after{left:160%;}

/* --- Services nav dropdown --------------------------------------- */
.nav-dropdown{position:relative;}
.nav-dropdown>a{
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
}
.nav-dropdown>a .dd-caret{
  width:11px;height:11px;stroke:var(--silver-300);
  transition:transform .2s ease;flex-shrink:0;
}
.nav-dropdown:hover>a .dd-caret,
.nav-dropdown.open>a .dd-caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:-14px;
  background:var(--navy-900);border:1px solid rgba(199,209,226,0.14);
  border-radius:var(--radius-md);padding:8px;min-width:230px;
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease;
  box-shadow:var(--shadow-pop);z-index:300;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  opacity:1;pointer-events:all;transform:translateY(0);
}
.nav-dropdown-menu a{
  display:flex !important;align-items:center;gap:10px;
  padding:10px 12px;border-radius:8px;
  color:var(--silver-100) !important;font-size:13.5px;
  transition:background .12s;
}
.nav-dropdown-menu a::after{display:none !important;}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,0.07);}
.nav-dropdown-menu .dd-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,0.07);
  display:flex;align-items:center;justify-content:center;
}
.nav-dropdown-menu .dd-icon svg{width:14px;height:14px;stroke:var(--silver-300);}
.nav-dropdown-menu .dd-label strong{display:block;font-size:13.5px;color:var(--white);}
.nav-dropdown-menu .dd-label span{display:block;font-size:11.5px;color:var(--ink-faint);}
.dd-divider{height:1px;background:rgba(199,209,226,0.1);margin:6px 0;}
@media(max-width:980px){.nav-dropdown-menu{position:static;opacity:1;pointer-events:all;transform:none;box-shadow:none;border:none;background:transparent;padding:0 0 0 14px;}
.nav-dropdown-menu a{padding:8px 0;border-radius:0;}
.nav-dropdown-menu .dd-label span{display:none;}
}

/* --- Scroll-to-top button ---------------------------------------- */
.scroll-top{
  position:fixed;bottom:96px;right:24px;z-index:190;
  width:42px;height:42px;border-radius:50%;
  background:var(--navy-800);border:1px solid rgba(199,209,226,0.2);
  color:var(--white);display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transform:translateY(16px);
  transition:opacity .25s ease,transform .25s ease,background .15s ease;
  box-shadow:0 4px 14px rgba(8,11,38,0.3);
}
.scroll-top.visible{opacity:1;transform:translateY(0);}
.scroll-top:hover{background:var(--navy-600,#234AC8);}
.scroll-top svg{width:18px;height:18px;stroke:var(--white);}
@media(max-width:640px){.scroll-top{bottom:86px;right:16px;}}

/* --- Mobile sticky CTA bar -------------------------------------- */
.mobile-sticky{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:149;
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(8,11,38,0.1);
  padding:10px 16px;gap:10px;
}
@media(max-width:640px){
  .mobile-sticky{display:flex;}
  .mobile-sticky .btn{flex:1;padding:12px 10px;font-size:14px;}
  body.has-sticky{padding-bottom:72px;}
}

/* --- WA float tooltip ------------------------------------------- */
.wa-float::before{
  content:'Chat with us!';
  position:absolute;right:calc(100% + 10px);top:50%;
  transform:translateY(-50%) scale(0.9);
  background:var(--navy-900);color:var(--white);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  padding:6px 12px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:var(--shadow-card);
}
.wa-float::after{
  content:'';position:absolute;right:calc(100% + 4px);top:50%;
  transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--navy-900);
  opacity:0;transition:opacity .2s ease;
}
.wa-float:hover::before{opacity:1;transform:translateY(-50%) scale(1);}
.wa-float:hover::after{opacity:1;}

/* --- Cities trust strip in hero ---------------------------------- */
.cities-strip{
  margin-top:22px;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;
}
.cities-strip .cs-label{
  font-family:var(--font-mono);font-size:11.5px;color:var(--silver-300);
  letter-spacing:.05em;
}
.cities-strip .cs-cities{
  display:flex;gap:6px;flex-wrap:wrap;
}
.cities-strip .cs-cities span{
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  color:var(--white);background:rgba(255,255,255,0.08);
  border:1px solid rgba(199,209,226,0.2);
  padding:3px 10px;border-radius:999px;
}

/* --- Animated hero orbs ------------------------------------------ */
.hero-orbs{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(31,79,205,0.35) 0%,transparent 70%);
  animation:orbFloat 8s ease-in-out infinite;
}
.orb-1{width:420px;height:420px;top:-100px;right:-80px;animation-delay:0s;}
.orb-2{width:280px;height:280px;bottom:-60px;left:10%;animation-delay:-3s;background:radial-gradient(circle,rgba(35,154,86,0.18) 0%,transparent 70%);}
.orb-3{width:200px;height:200px;top:40%;left:40%;animation-delay:-5s;background:radial-gradient(circle,rgba(224,115,24,0.12) 0%,transparent 70%);}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(-20px,15px) scale(1.05);}
  66%{transform:translate(15px,-10px) scale(0.97);}
}

/* --- Competitor comparison table --------------------------------- */
.compare-table-wrap{overflow-x:auto;}
.compare-table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
}
.compare-table th{
  padding:16px 20px;text-align:center;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.compare-table th:first-child{text-align:left;background:var(--paper-dim);}
.compare-table th.us{background:var(--navy-950);color:var(--white);}
.compare-table th.us .th-badge{
  display:block;margin-top:4px;font-size:10px;
  color:var(--orange);letter-spacing:.04em;
}
.compare-table th.other{background:var(--paper);color:var(--ink-faint);}
.compare-table td{
  padding:13px 20px;font-size:14px;border-bottom:1px solid var(--line);
  text-align:center;vertical-align:middle;
}
.compare-table td:first-child{text-align:left;font-weight:500;color:var(--ink);}
.compare-table td.us{background:rgba(17,16,63,0.04);}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table .yes{color:var(--green);font-size:18px;font-weight:700;}
.compare-table .no{color:var(--ink-faint);font-size:18px;}
.compare-table .maybe{color:var(--orange);font-size:13px;font-weight:600;}
@media(max-width:600px){.compare-table td,.compare-table th{padding:10px 12px;font-size:13px;}}

/* --- Thank You page ---------------------------------------------- */
.ty-hero{
  min-height:60vh;display:flex;align-items:center;
  background:linear-gradient(135deg,var(--navy-950),var(--navy-800) 50%,var(--navy-700));
  position:relative;overflow:hidden;
}
.ty-badge{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;
  box-shadow:0 0 0 12px rgba(35,154,86,0.15);
  animation:tyPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes tyPop{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.ty-badge svg{width:40px;height:40px;stroke:var(--white);stroke-width:2.5;}
.ty-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:40px;
}
.ty-step{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:22px 20px;text-align:center;
}
.ty-step .step-num{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-500));
  color:var(--white);font-family:var(--font-display);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.ty-step h4{font-size:15px;margin-bottom:6px;}
.ty-step p{font-size:13.5px;color:var(--ink-soft);}
@media(max-width:680px){.ty-steps{grid-template-columns:1fr;}}

/* --- 404 page ---------------------------------------------------- */
.not-found{
  min-height:80vh;display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:linear-gradient(135deg,var(--navy-950),var(--navy-800));
}
.not-found-inner{max-width:560px;}
.not-found .big-num{
  font-family:var(--font-display);font-size:clamp(80px,14vw,140px);
  font-weight:700;color:transparent;line-height:1;
  background:linear-gradient(135deg,var(--navy-500),var(--silver-300) 50%,var(--orange));
  -webkit-background-clip:text;background-clip:text;
}
.not-found h2{color:var(--white);font-size:clamp(22px,3vw,28px);margin-bottom:14px;}
.not-found p{color:var(--silver-300);font-size:16px;margin-bottom:32px;}
.not-found-links{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;
}

/* --- Staggered reveal for grid children -------------------------- */
.stagger-children>*:nth-child(1){transition-delay:.05s}
.stagger-children>*:nth-child(2){transition-delay:.12s}
.stagger-children>*:nth-child(3){transition-delay:.19s}
.stagger-children>*:nth-child(4){transition-delay:.26s}
.stagger-children>*:nth-child(5){transition-delay:.33s}

/* --- Section divider with icon ----------------------------------- */
.section-divider{
  display:flex;align-items:center;gap:16px;margin:60px 0;
}
.section-divider::before,.section-divider::after{
  content:'';flex:1;height:1px;background:var(--line);
}
.section-divider span{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
}

/* ===================================================================
   REFINEMENT PASS — unique tech icons, scroll progress, compact header
=================================================================== */

/* Scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:9999;
  height:3px; width:0%;
  background:linear-gradient(90deg, var(--navy-500), var(--orange), var(--green));
  transition:width .1s linear;
  pointer-events:none;
}

/* Compact sticky header on scroll */
.site-header{
  transition: box-shadow .25s ease, padding .25s ease;
}
.site-header.compact .nav{
  padding-top:8px; padding-bottom:8px;
}
.site-header.compact .brand img{
  height:36px;
  transition:height .25s ease;
}
.site-header.compact{
  box-shadow: 0 4px 24px rgba(8,11,38,0.28);
}

/* Unique tech tile color chips */
.tech-tile .chip.nodejs   { background:linear-gradient(135deg,#215732,#3D7A4A); }
.tech-tile .chip.python   { background:linear-gradient(135deg,#3572A5,#FFD43B); }
.tech-tile .chip.dotnet   { background:linear-gradient(135deg,#512BD4,#7B3FE4); }
.tech-tile .chip.postgres { background:linear-gradient(135deg,#336791,#4A8FCC); }
.tech-tile .chip.docker   { background:linear-gradient(135deg,#0DB7ED,#0275AD); }
.tech-tile .chip.aws      { background:linear-gradient(135deg,#FF9900,#C97000); }
.tech-tile .chip.flutter  { background:linear-gradient(135deg,#02569B,#13B9FD); }
.tech-tile .chip.reactnative { background:linear-gradient(135deg,#282C34,#61DAFB); }
.tech-tile .chip.swift    { background:linear-gradient(135deg,#F05138,#C8402D); }
.tech-tile .chip.kotlin   { background:linear-gradient(135deg,#7F52FF,#E44857); }
.tech-tile .chip.firebase { background:linear-gradient(135deg,#FFCA28,#F57C00); }
.tech-tile .chip.restapi  { background:linear-gradient(135deg,#11998E,#38EF7D); }
.tech-tile .chip.react    { background:linear-gradient(135deg,#20232A,#61DAFB); }
.tech-tile .chip.nextjs   { background:linear-gradient(135deg,#000000,#383838); }
.tech-tile .chip.wordpress{ background:linear-gradient(135deg,#21759B,#464646); }
.tech-tile .chip.shopify  { background:linear-gradient(135deg,#96BF48,#5E8E3E); }
.tech-tile .chip.mysql    { background:linear-gradient(135deg,#00618A,#E48E00); }
.tech-tile .chip.openai   { background:linear-gradient(135deg,#10A37F,#1A7F64); }
.tech-tile .chip.langchain{ background:linear-gradient(135deg,#1C3553,#3A7BD5); }
.tech-tile .chip.make     { background:linear-gradient(135deg,#6D00CC,#A020F0); }
.tech-tile .chip.whatsapp { background:linear-gradient(135deg,#25D366,#128C7E); }
.tech-tile .chip.vectordb { background:linear-gradient(135deg,#FF6B6B,#C0392B); }

/* Tech tile name in brand color */
.tech-tile span{
  font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  color:var(--ink); letter-spacing:-.01em;
}