/* ================================
   HEADER + NAVIGATION + DROPDOWN
   ================================ */

/* ----- Base header ----- */
/* Header fixed to top */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #0d1117;
  color: var(--text, #e7eef5);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  transition: background .25s ease, box-shadow .25s ease;
}

/* make room for the fixed header (adjust if you change padding) */
:root { --header-h: 68px; }   /* approx: 14px top + 14px bottom + logo height */
body { padding-top: var(--header-h); }

/* ----- Header container ----- */
.header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo left, nav right */
  gap: 16px;
  transition: padding .25s ease;
}

/* ----- Brand ----- */
.header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}

.brand__logo {
  height: 40px;   /* adjust to your logo height */
  width: auto;
  display: block;
}

.brand__name {
  font-size: 1.05rem;
  transition: font-size .25s ease, opacity .25s ease;
}

/* ----- Nav container ----- */
.header__nav {
  margin-left: auto;
  max-height: none;
  overflow: visible;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list li { list-style: none; }

.nav__list a {
  text-decoration: none;
  color: var(--text, #e7eef5);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background .2s ease;
}

.nav__list a:hover {
  background: rgba(255,255,255,.06);
}

/* ----- Mobile layout (fix) ----- */
@media (max-width: 899.98px){
  .header__inner{
    display: flex;
    flex-wrap: wrap;            /* keep wrap so nav can drop below */
    align-items: center;
    justify-content: flex-start;/* first row uses order + margins */
    gap: 16px;
  }

  /* Order the three pieces: brand | burger  …..  nav below */
  .header__brand{ order: 1; }
  .header__toggle{
    order: 2;
    margin-left: auto;          /* pushes burger to the far right */
    display: grid;              /* keep your visual styles */
    place-items: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    cursor: pointer;

    /* kill grid-only alignment that doesn't work in flex */
    justify-self: auto;
    position: relative; left: auto; right: auto; transform: none;
  }
  .header__nav{
    order: 3;
    width: 100%;                /* nav spans full width on row 2 */
    margin-left: 0;
    max-height: 0;              /* your accordion behavior */
    overflow: hidden;
    transition: max-height .22s ease;
  }
  .header__nav[aria-hidden="false"]{ max-height: 420px; }

  /* Mobile list column layout */
  .nav__list{
    display: grid;
    gap: 8px;
    padding: 10px 0;
    margin: 8px 0 0;
    align-items: start;
    justify-items: start;
  }
}


/* ----- Mobile toggle ----- */
.header__toggle{
  justify-self: end;
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
}
.header__toggle .toggle__bar{
  width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; display: block;
  transition: transform .2s ease, opacity .2s ease;
}

/* ----- Nav container ----- */
.header__nav{
  grid-column: 1 / -1;
  max-height: 0; overflow: hidden;
  transition: max-height .22s ease;
}
.header__nav[aria-hidden="false"]{ max-height: 420px; }

/* ----- Links list (kill bullets everywhere) ----- */
.nav__list{ list-style: none; margin: 8px 0 0; padding: 8px 0; display: grid; gap: 6px; }
.nav__list > li{ list-style: none; }
.nav__list a{
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #e7eef5);
  font-weight: 700;
}
.nav__list a:hover{ background: rgba(255,255,255,.05); }

/* ----- Header CTA (match hero button style) ----- */
.nav__cta .cta{
  display: inline-block;
  background-color: var(--brand, #38e6c1);
  color: #000;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .3s, box-shadow .3s, transform .3s;
  box-shadow: 0 0 8px var(--brand, #38e6c1);
}
.nav__cta .cta:hover{
  background-color: var(--brand, #38e6c1);
  box-shadow: 0 0 15px var(--brand-200, #5cd0b8), 0 0 25px var(--brand-200, #5cd0b8);
  transform: scale(1.05);
}

/* =================
   Services Dropdown
   ================= */
.nav--has-sub{ position: relative; }

/* Works if you used a <button class="nav__services">… or an <a> inside the LI */
.nav__services,
.nav__list > .nav--has-sub > a{
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  color: var(--text, #e7eef5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.nav__services:hover,
.nav__list > .nav--has-sub > a:hover{
  background: rgba(255,255,255,.06);
}
.nav__services .chev,
.nav__list > .nav--has-sub > a .chev{
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  transition: transform .2s ease, opacity .2s ease;
}

/* Dropdown panel */
.subnav{
  list-style: none;
  position: absolute; left: 0; top: calc(100% + 8px);
  min-width: 220px;
  background: #111823;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px 0;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index: 100;
}

/* Hover bridge so it doesn’t disappear if you’re slow */
.nav--has-sub::after{
  content:""; position:absolute; left:0; right:0; top:100%; height: 12px;
  pointer-events:auto; background:transparent; z-index: 101;
}

/* Open states (hover/focus desktop, .nav--open for JS/mobile) */
.nav--has-sub:hover .subnav,
.nav--has-sub:focus-within .subnav,
.nav--has-sub.nav--open .subnav{
  opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
}
.nav--has-sub:hover .chev,
.nav--has-sub:focus-within .chev,
.nav--has-sub.nav--open .chev{ transform: rotate(180deg); opacity: 1; }

/* Submenu links */
.subnav a{
  display: block; padding: 10px 14px; color: #e7eef5; text-decoration: none; font-weight: 600; white-space: nowrap;
}
.subnav a:hover{ background: rgba(255,255,255,.08); color: #fff; }

/* Desktop hover behavior */
@media (min-width: 900px){
  .header__nav{ overflow: visible; }
}

/* Mobile dropdown = accordion */
@media (max-width: 899.98px){
  .nav--has-sub{ position: static; }
  .subnav{
    position: static; min-width: 0; border-radius: 0; border: 1px solid rgba(255,255,255,.06);
    background: transparent; box-shadow: none; opacity: 1; transform: none; pointer-events: auto;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav--has-sub::after{ display: none; }
  .nav--open > .subnav{ max-height: 500px; }
}

@media (min-width: 900px){
  .header__inner{
    display: flex;                   /* force flexbox */
    align-items: center;
    justify-content: space-between;  /* logo left, nav right */
  }

  .header__toggle{ display: none; }

  .header__nav{
    max-height: none;
    overflow: visible;
  }

  .nav__list{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 18px;                        /* spacing between links */
    justify-content: flex-end;
  }

  .nav__list a{ padding: 10px 12px; }
  .nav__cta .cta{ margin-left: 12px; }
}


/* Shadow when scrolled a touch */
.site-header[data-scrolled="true"]{
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* ========= Gradient underline cue on Services (desktop + open) ========= */
.nav__list > .nav--has-sub > a::after,
.nav__services::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg, var(--accent,#38e6c1), var(--accent2,#5a8bff) 55%, var(--accent3,#ff7a59));
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav__list > .nav--has-sub:hover > a::after,
.nav__list > .nav--has-sub:focus-within > a::after,
.nav__list > .nav--has-sub.nav--open > a::after,
.nav__services[aria-expanded="true"]::after{
  transform: scaleX(1);
}

/* ============= Shrink on scroll ============= */
.site-header.shrink{
  background: rgba(13,17,23,.88);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.site-header.shrink .header__inner{ padding: 8px 14px; }
.site-header.shrink .brand__logo{ transform: scale(.88); }
.site-header.shrink .brand__name{ font-size: .95rem; opacity: .9; }
.site-header.shrink .nav__list a{ padding: 8px 10px; opacity: .95; }
.site-header.shrink .nav__cta .cta{ padding: 8px 12px; box-shadow: 0 4px 14px rgba(56,230,193,.22); }

/* End Header */
:root{
  --bg: #0b0f14ff;
  --bg-2: #0f141b;
  --card: rgba(18,25,34,.78);
  --ring: rgba(231,238,245,.10);
  --text: #e7eef5;
  --muted: #9fb1c0;
  --accent: #38e6c1;
  --accent-2: #5a8bff;
  --accent-3: #ff7a59;
  --success: #36d399;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 20px;
  --radius-lg: 28px;
  --container: 1200px;

  /* Gradient heading tokens (like your screenshot) */
  --grad-1: #81ffd9ff;  /* mint */
  --grad-2: #65ccffff;  /* sky */
  --grad-3: #9a7effff;  /* lavender */
  --grad-4: #ff4f7eff;  /* peach/pink */
  --grad-glow-1: rgba(143,217,255,.45);
  --grad-glow-2: rgba(179,157,255,.35);
  --grad-glow-3: rgba(255,154,181,.25);
}


/* Global Reset */
*,*::before,*::after{ box-sizing: border-box; }
:where(html){ scroll-behavior: smooth; }
html,body{ height: 100%; }
body{
  margin: 0; font-family: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text); background: var(--bg);
  line-height: 1.6; font-size: 16px;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(90,139,255,.10), transparent),
    radial-gradient(1200px 800px at 90% 10%, rgba(56,230,193,.08), transparent);
}
img{ max-width: 100%; display: block; }

/* Layout */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); }
.section{ padding: clamp(56px, 8vw, 96px) 0; position: relative; }



/* Type */
h1,h2,h3{ line-height: 1.15; margin: 0 0 .6em; letter-spacing: -0.02em; }
h1{ font-size: clamp(34px, 6vw, 58px); font-weight: 800; }
h2{ font-size: clamp(26px, 4.5vw, 38px); font-weight: 800; }
h3{ font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; }
p.sub{ color: var(--muted); max-width: 72ch; }

/* Utilities */
.center{ text-align:center; }
.block-head{ margin-bottom: 22px; }
.muted{ color: var(--muted); }
.spacer{ height: 10px; }

/* Gradient Text Accent */
.grad{
  background: linear-gradient(90deg,
    var(--grad-1) 0%,
    var(--grad-2) 30%,
    var(--grad-3) 65%,
    var(--grad-4) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */

  /* soft neon glow */
  text-shadow:
    0 1px 0 rgba(255,255,255,),
    0 0 12px var(--grad-glow-1),
    0 0 26px var(--grad-glow-2),
    0 0 42px var(--grad-glow-3);
}


/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:14px 20px; border-radius: 999px; font-weight:700; border: 1px solid transparent; position: relative; box-shadow: var(--shadow); text-decoration:none; color: inherit; }
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071017;
}
.btn.primary::after{ content:""; position:absolute; inset:-2px; border-radius: 999px; padding:2px; background: linear-gradient(135deg, rgba(56,230,193,.45), rgba(90,139,255,.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.6; }
.btn.ghost{ border-color: var(--ring); background: rgba(255,255,255,.02); color: var(--text); }
.btn:focus-visible{ outline: 3px solid rgba(90,139,255,.6); outline-offset: 2px; }

/* Pill */
.pill{ display:inline-block; font-weight:700; color:#031316; background: rgba(56,230,193,.18); border:1px solid rgba(56,230,193,.4); padding:6px 10px; border-radius: 999px; font-size:.85rem; }

/* Card */
.card{ background: var(--card); border:1px solid var(--ring); border-radius: var(--radius-lg); padding: clamp(18px, 2.5vw, 28px); box-shadow: var(--shadow); }

/* Grid helpers */
.grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 980px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

/* Header / Hero */
header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(11,15,20,.85), rgba(11,15,20,.55)); border-bottom: 1px solid var(--ring); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.brand-dot{ width:10px; height:10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius:50%; box-shadow: 0 0 24px rgba(56,230,193,.6); }
.nav a.link{ color: var(--muted); font-weight:600; padding: 8px 12px; border-radius: 10px; text-decoration:none; }
.nav a.link:hover{ color: var(--text); background: rgba(255,255,255,.03); }

.hero{ padding-top: clamp(56px, 11vw, 150px); padding-bottom: clamp(36px,60vw, 272px); }
.hero h1{ margin-bottom: .3em; }
.hero p{ color: var(--muted); max-width: 70ch; }
.actions{ display:flex; gap:12px; flex-wrap: wrap; margin-top: 22px; }

/* Make hero a single column */
.hero .grid-2 { grid-template-columns: 1fr; }

/* Let the copy expand (remove the earlier width cap) */
.hero h1, .hero p { max-width: none; }


/* Trust Row */
.trust{ display:flex; flex-wrap:wrap; gap: 18px 26px; align-items:center; opacity:.85; margin-top: 28px; }
.trust img{ height: 26px; width:auto; filter: grayscale(1) contrast(1.1); opacity:.85; filter: none; }


/* Outcomes + What you get */
/* === Outcomes section spacing === */
/* Quick way (change the rem values) */
section.outcomes {
  margin-top: -10rem;
  margin-bottom: 4rem;
}

/* Or shorthand using logical properties (modern): */
/* .outcomes { margin-block: 4rem; } */

/* Optional: responsive tweak */
@media (max-width: 768px) {
  section.outcomes {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    /* or: margin-block: 2.5rem; */
  }
}

/* Prevent heading margins inside from collapsing the section edges */
section.outcomes > :first-child { margin-top: 0; }
section.outcomes > :last-child  { margin-bottom: 0; }

.checks{ display:grid; gap: 10px; margin-top: 12px; }
.check{ display:flex; gap:10px; align-items:flex-start; }
.check svg{ flex:0 0 22px; margin-top: 2px; }

/* ============================
   OTHER SECTIONS (unchanged)
   ============================ */

.features .card{ background: rgba(255,255,255,.02); }
.features .card h3{ margin-bottom: 6px; }

/* Process */
.steps{ counter-reset: step; display:grid; gap: 16px; }
.step{
  display:grid; grid-template-columns: auto 1fr; gap: 16px; align-items:start;
  background: rgba(255,255,255,.02); border:1px dashed var(--ring); border-radius: var(--radius); padding: 16px;
}
.step .num{
  width: 34px; height: 34px; border-radius: 50%; display:grid; place-items:center;
  font-weight:800; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#061017; box-shadow: 0 0 24px rgba(90,139,255,.45);
}

/* Pricing */
.pricing{ position: relative; }
.price-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.5vw,28px); align-items:stretch; }
.plan{
  background: var(--card); border-radius: 26px; border: 1px solid var(--ring);
  box-shadow: var(--shadow); display:flex; flex-direction: column; justify-content: space-between;
}
.plan .hdr{ padding: 28px; border-bottom: 1px solid var(--ring); }
.plan .body{ padding: 22px 28px 28px; display:grid; gap: 8px; }
.plan .tag{
  display:inline-block; font-size:.8rem; padding:6px 10px; border-radius: 999px;
  border:1px solid rgba(90,139,255,.45); background: rgba(90,139,255,.15); color:#dfe8ff; font-weight:800;
}
.plan h3{ margin: 8px 0 4px; }
.plan .price{ font-size: clamp(28px, 4vw, 42px); font-weight: 900; letter-spacing:-.02em; }
.plan .term{ font-weight:700; color: var(--muted); }
.plan ul{ list-style:none; margin: 12px 0 0; padding: 0; display:grid; gap: 10px; }
.plan li{ display:flex; gap: 10px; align-items:flex-start; }
.plan li svg{ flex:0 0 20px; margin-top:2px; }
.plan .cta{ padding: 20px 28px 28px; }
.plan .btn{ width:100%; justify-content:center; }
.plan.pop{ position: relative; }
.plan.pop::before{
  content:""; position:absolute; inset:-2px; border-radius: 30px; padding:2px;
  background: linear-gradient(135deg, rgba(56,230,193,.5), rgba(90,139,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 12px 24px rgba(56,230,193,.35)); opacity:.95;
}
@media (max-width: 980px){ .price-grid{ grid-template-columns: 1fr; } }

/* Tech stack Pills */
.stack{ display:flex; flex-wrap: wrap; gap: 10px; }
.stack .pill{ background: rgba(255,255,255,.05); color: var(--text); border:1px solid var(--ring); }

/* In-depth to services */
/* =========================================
   WEB DESIGN PACKAGE — SECTION STYLES
   (scoped, mobile-first)
   ========================================= */
.wd-package {
  background: transparent;
  color: #e8eef6;
  padding: clamp(40px, 6vw, 80px) 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.wdp-wrap { max-width: 1100px; margin: 0 auto; }

.wdp-head { margin-bottom: clamp(20px, 3vw, 32px); }
.wdp-head h2 {
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.2;
  margin: 0 0 8px;
}
.wdp-sub {
  color: #a9b7c7;
  margin: 0;
  font-size: clamp(14px, 2.2vw, 16px);
}

/* Cards grid */
.wdp-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px){
  .wdp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px){
  .wdp-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Cards */
.wdp-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.wdp-card__title {
  font-size: 18px;
  margin: 0 0 6px;
}
.wdp-card__lead {
  color: #b6c3d3;
  margin: 0 0 12px;
  font-size: 14.5px;
}

/* Lists */
.wdp-list {
  margin: 0; padding: 0;
  list-style: none;
  display: grid; gap: 8px;
}
.wdp-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.45;
}
.wdp-list li::before{
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: #76f2d3; font-weight: 800;
}

/* eCommerce add-on */
.wdp-addon {
  margin-top: clamp(28px, 5vw, 48px);
  border-top: 1px dashed rgba(255,255,255,.12);
  padding-top: clamp(20px, 3.5vw, 28px);
}
.wdp-addon > h3 {
  font-size: clamp(18px, 2.6vw, 24px);
  margin: 0 0 8px;
}
.wdp-note {
  color: #97a6bb;
  font-size: 13.5px;
  margin-top: 12px;
}

/* denser layout for the ecom grid on desktop */
.wdp-grid--ecom { margin-top: 10px; }
@media (min-width: 900px){
  .wdp-grid--ecom { grid-template-columns: repeat(4, 1fr); }
}

/* Subtle hover */
.wdp-card:hover{
  border-color: rgba(118,242,211,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
}

/* Links inside notes */
.wd-package a { color: #76f2d3; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================
   BIZ CLEAN — WEBSITE STORY / CASE STUDY
   ========================================= */
.casebiz {
  background: #0b1118;         /* fits dark palette */
  color: #e9eef6;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: clamp(42px, 6vw, 84px) 16px;
}
.cb-wrap { max-width: 1100px; margin: 0 auto; }

.cb-head { margin-bottom: clamp(22px, 3.2vw, 36px); }
.cb-head h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.2;
}
.cb-sub {
  margin: 0;
  color: #a7b6c8;
  font-size: clamp(14px, 2.2vw, 16px);
}

/* Timeline */
.cb-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.cb-step {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px 16px 16px 52px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.cb-badge {
  position: absolute;
  left: 14px; top: 16px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  color: #0b1118;
  background: linear-gradient(135deg, #76f2d3, #5a8bff);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.cb-block h3 {
  margin: 0 0 6px;
  font-size: 18px;
}
.cb-block p {
  margin: 0 0 10px;
  color: #b8c5d5;
  font-size: 14.8px;
  line-height: 1.55;
}
.cb-points {
  margin: 0; padding: 0;
  list-style: none;
  display: grid; gap: 8px;
}
.cb-points li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.45;
}
.cb-points li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: #76f2d3; font-weight: 800;
}

/* Snapshot grid */
.cb-grid {
  display: grid;
  gap: 14px;
  margin-top: clamp(22px, 3.2vw, 34px);
  grid-template-columns: 1fr;
}
@media (min-width: 820px){
  .cb-grid { grid-template-columns: 1fr 1fr; }
}
.cb-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px;
}
.cb-card h4 {
  margin: 0 0 8px;
  font-size: 16.5px;
}
.cb-list {
  margin: 0; padding: 0;
  list-style: none;
  display: grid; gap: 8px;
}
.cb-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.45;
}
.cb-list li::before {
  content: "•";
  position: absolute; left: 8px; top: 0;
  color: #5a8bff; font-weight: 800;
}

/* Subtle hover */
.cb-step:hover, .cb-card:hover {
  border-color: rgba(118,242,211,.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}

/* Links inside this section */
.casebiz a { color: #76f2d3; text-decoration: underline; text-underline-offset: 3px; }

/* FAQ & CTA */
.faq details{ background: rgba(255,255,255,.02); border:1px solid var(--ring); border-radius: var(--radius); padding: 16px 18px; }
.faq details + details{ margin-top: 10px; }
.faq summary{ cursor: pointer; font-weight: 700; }
.cta-hero{
  position: relative;
  background: radial-gradient(1100px 480px at 10% -10%, rgba(56,230,193,.14), transparent),
              radial-gradient(1200px 620px at 90% 10%, rgba(90,139,255,.12), transparent);
  border-top: 1px solid var(--ring);
}

/* Footer */
footer{
  padding: 36px 0 56px; color: var(--muted); text-align: center;
  border-top: 1px solid var(--ring); background: var(--bg-2);
}
/* base safety */
.cta-v3, .cta-v3 *{ box-sizing:border-box; }
.cta-v3 img, .cta-v3 svg{ display:block; max-width:100%; height:auto; }
html, body{ overflow-x:hidden; -webkit-text-size-adjust:100%; }

/* section shell */
.cta-v3{
  position:relative; isolation:isolate;
  background:
    radial-gradient(1000px 520px at 10% -10%, rgba(56,230,193,.14), transparent 55%),
    radial-gradient(1000px 520px at 110% 8%, rgba(90,139,255,.12), transparent 55%),
    var(--cta-bg);
  padding: var(--pad-y) var(--pad-x);
  color: var(--ink);
  overflow:hidden;
}

/* card */
.cta-v3__card{
  width:min(1100px, 100%);
  margin-inline:auto;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px var(--ring), 0 10px 42px rgba(0,0,0,.35);
  padding: clamp(22px, 4vw, 40px);
  overflow:hidden;
  position: relative;
}

/* decorative blobs (cheap & clipped) */
.cta-v3__card::before,
.cta-v3__card::after{
  content:""; position:absolute; inset:auto; z-index:0; border-radius:999px;
  filter: blur(36px); opacity:.28; pointer-events:none; transform:translateZ(0);
}
.cta-v3__card::before{ width:44vmin; height:44vmin; left:-18vmin; top:-14vmin; background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); }
.cta-v3__card::after{ width:40vmin; height:40vmin; right:-16vmin; bottom:-16vmin; background:radial-gradient(circle at 40% 50%, var(--accent2), transparent 60%); }

/* layout */
.cta-v3__grid{
  position:relative; z-index:1;
  display:grid; gap: clamp(18px, 3vw, 28px);
  grid-template-columns: 1fr;
  align-items:start;
  min-width:0;
}
@media (min-width: 980px){
  .cta-v3__grid{
    grid-template-columns: 1.1fr .9fr; /* copy / form */
    gap: clamp(22px, 3vw, 36px);
  }
}

/* copy */
.cta-v3__copy{ min-width:0; }
.cta-v3__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--ring);
  font:600 13px/1.1 var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial);
}
.cta-v3__badge svg{ width:16px; height:16px; fill:var(--accent); }

.cta-v3__title{
  margin: 10px 0 8px;
  font:800 clamp(1.9rem, 3.4vw + 1rem, 3.8rem)/1.06 var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial);
  letter-spacing:-.02em;
  text-wrap: balance;
}
.cta-v3__title .accent{
  background: linear-gradient(90deg, var(--accent), var(--accent2) 55%, var(--accent3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 20px rgba(56,230,193,.14);
}
.cta-v3__sub{
  margin: 0 0 6px;
  color: var(--muted);
  font-size: clamp(.98rem, .35vw + .98rem, 1.1rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.cta-v3__proof{ display:flex; align-items:center; gap:12px; color:var(--muted); flex-wrap:wrap; }
.cta-v3__avatars{ display:flex; }
.cta-v3__avatars img{
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.55); margin-left:-8px; background:#fff;
}
.cta-v3__avatars img:first-child{ margin-left:0; }

/* form */
.cta-v3__form{
  display:grid; gap:12px; min-width:0;
}
.field label, .field legend{
  display:block; font-weight:700; margin:0 0 6px;
}
.field small{ color:var(--muted); font-weight:600; margin-left:.25rem; }

.cta-v3__form input{
  width:100%; height:46px; padding:12px 14px;
  border-radius:12px; border:1px solid var(--ring);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font:500 16px/1.3 var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Arial);
  outline:none;
}
.cta-v3__form input::placeholder{ color:#c9d7e2a8; }

/* checks */
.field--checks{ margin-top:4px; }
.field--checks .checks{
  display:grid; gap:10px;
  grid-template-columns: 1fr;        /* phone */
}
@media (min-width: 520px){
  .field--checks .checks{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.check{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--ring);
  background: rgba(255,255,255,.04);
  cursor:pointer; user-select:none;
}
/* fully hide the native checkbox */
.check input{
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;           /* make sure it can't be seen */
  pointer-events: none; /* clicks go to the label */
  width: 0;
  height: 0;
  margin: 0;
}

/* keep your existing custom box rules */
.check .box{
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--ring); background:rgba(255,255,255,.06);
  display:inline-block; position:relative;
}
.check input:checked + .box{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(56,230,193,.18);
}
.check input:checked + .box::after{
  content:""; position:absolute; inset:3px; border-radius:3px; background:var(--accent);
}


/* submit */
.cta-v3__submit{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border:0; border-radius:12px; cursor:pointer;
  background: radial-gradient(120% 160% at 20% 20%, #fff, #effff9 40%, #caffef 100%);
  color:#093e31; font-weight:800;
  box-shadow: 0 0 0 8px rgba(56,230,193,.16), 0 10px 34px rgba(56,230,193,.22);
  transition: transform .18s ease, filter .18s ease;
  width: 100%;                 /* full-width on mobile */
}
.cta-v3__submit:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.cta-v3__submit svg{ width:20px; height:20px; }

.cta-v3__tiny{
  margin: 2px 0 0; color:var(--muted); font-size:.85rem;
}

/* mobile polish */
@media (max-width: 560px){
  .cta-v3__card{ padding-left:22px; padding-right:22px; }
  .cta-v3__card::before, .cta-v3__card::after{ display:none; } /* remove blobs to avoid overflow */
}

/* high-contrast users */
@media (prefers-contrast: more){
  .cta-v3__card{
    box-shadow: 0 8px 28px rgba(0,0,0,.34), inset 0 0 0 1.5px rgba(231,238,245,.24);
  }
}

/* End CTA Section */
/* Footer Section */
/* ===== Footer ===== */
.site-footer {
  background: #0d1117;
  color: #fff;
  padding: 60px 20px 30px;
  /* Removed rounded corners */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 -5px 30px rgba(0,0,0,0.4);
}


.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.footer__title {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(90deg, #ff7eb3, #ff758c, #ff7eb3, #7afcff, #feff9c);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: footerGradient 8s ease infinite;
}

@keyframes footerGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.footer__tagline {
  margin-top: 8px;
  font-size: 0.95rem;
  opacity: 0.8;
  line-height: 1.5;
}

.footer__nav h3,
.footer__contact h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.footer__nav ul,
.footer__contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__nav li,
.footer__contact li {
  margin-bottom: 8px;
}

.footer__nav a,
.footer__contact a {
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.1s ease;
}

.footer__nav a:hover,
.footer__contact a:hover {
  opacity: 1;
}

.footer-cta{
  display: inline-block;
  background-color: var(--brand, #38e6c1);
  color: #000;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .3s, box-shadow .3s, transform .3s;
  box-shadow: 0 0 8px var(--brand, #38e6c1);
}
.footer-cta .cta:hover{
  background-color: var(--brand, #38e6c1);
  box-shadow: 0 0 15px var(--brand-200, #5cd0b8), 0 0 25px var(--brand-200, #5cd0b8);
  transform: scale(1.05) !important;
}





.footer__bottom {
  text-align: center;
  margin-top: 40px;
  font-size: 0.85rem;
  opacity: 0.6;
}
:root{
  --cta-bg:#0d1117;
  --ink:#e7eef5;
  --muted:#9fb1c0;
  --ring:rgba(231,238,245,.14);
  --accent:#38e6c1;
  --accent2:#5a8bff;
  --accent3:#ff7a59;

  --r-lg:24px; --r-md:14px;
  --pad-x: clamp(16px, 3.5vw, 28px);
  --pad-y: clamp(52px, 7vw, 120px);
}
/* === Section shells unified === */

/* Remove individual dark fills, keep borders if you like */
.wd-package,
.casebiz,
.cta-hero,
.site-footer {
  background: transparent;          /* inherit body bg */
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--text);
}

/* Keep cards distinct */
.wdp-card,
.cb-step,
.cb-card,
.plan,
.step,
.card {
  background: rgba(255,255,255,.03);   /* subtle overlay */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}

/* Footer cleanup (inherits background too) */
.site-footer {
  padding: 60px 20px 30px;
  color: var(--muted);
  text-align: center;
  box-shadow: 0 -5px 30px rgba(0,0,0,0.4);
}
/* Remove any stray fills behind the heading row only */
.wd-package,
.wd-package .wdp-wrap,
.wd-package .wdp-head,
.wd-package .wdp-sub,
.wd-package .wdp-grid {
  background: transparent !important;
}

/* Kill decorative overlays if any were added elsewhere */
.wd-package::before,
.wd-package::after,
.wd-package .wdp-wrap::before,
.wd-package .wdp-wrap::after,
.wd-package .wdp-head::before,
.wd-package .wdp-head::after {
  content: none !important;
  display: none !important;
}

/* Keep the cards themselves visible */
.wd-package .wdp-card {
  background: rgba(255,255,255,.03);      /* your intended card look */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
/* Kill the unwanted line under the section heading */
.wd-package,
.wd-package .wdp-head,
.wd-package .wdp-sub {
  border-bottom: none !important;
}

/* If a <hr> is used inside this section */
.wd-package hr {
  display: none !important;
}
/* Remove section divider lines */
.wd-package,
.casebiz,
.cta-hero,
.site-footer {
  border-top: none !important;
  border-bottom: none !important;
}
/* —— CASE STUDY: clear heading background + line —— */
.casebiz,
.casebiz .cb-wrap,
.casebiz .cb-head,
.casebiz .cb-sub {
  background: transparent !important;   /* inherit global bg */
}

.casebiz,
.casebiz .cb-head,
.casebiz .cb-sub {
  border-top: none !important;
  border-bottom: none !important;       /* remove the underline */
  box-shadow: none !important;
}

/* Hide any <hr> that may be used as a divider */
.casebiz hr { display: none !important; }

/* Keep the content cards visible */
.casebiz .cb-step,
.casebiz .cb-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}

/* Nice spacing after the heading now that the line is gone */
.casebiz .cb-head { 
  margin-bottom: clamp(16px, 2.5vw, 28px);
  padding-bottom: 0;
}
/* 1) Make the CTA section inherit the global page background */
.cta-hero,
.cta-v3{
  background: transparent !important;       /* no separate fill */
  background-image: none !important;        /* remove radial layers */
  border-top: none !important;              /* remove section divider */
  border-bottom: none !important;
}

/* 2) If any decorative overlays were creating a band, remove them */
.cta-v3::before,
.cta-v3::after{
  content: none !important;
  display: none !important;
}

/* 3) Keep the card visible/polished (same look as other cards) */
.cta-v3__card{
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px var(--ring), 0 10px 42px rgba(0,0,0,.35);
}

/* 4) Ensure the decorative blobs don't “paint” outside the card */
.cta-v3__card::before,
.cta-v3__card::after{
  /* keep if you want the blobs; otherwise disable like above */
  filter: blur(36px);
  opacity: .28;
}

/* 5) In case a thin seam line persists (from sub-pixel rounding),
      hide it by overlapping 1px */
.cta-v3{ margin-top: -1px; padding-top: calc(var(--pad-y) + 1px); }
.cb-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 28px auto 36px;
}

.cb-logo img {
  max-width: 720px;        /* larger size */
  width: 100%;             /* responsive on smaller screens */
  height: auto;
  border-radius: 16px;     /* rounded edges */
  box-shadow: 0 12px 28px rgba(0,0,0,.35);  /* subtle depth */
  transition: transform .25s ease, filter .25s ease;
}

.cb-logo img:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}