/*
Love it. I tuned your CSS to the SmashData palette—bright brand green (#00C853), deep green shadows (#0AA24F),
and brand cream (#F9F5EE)—while keeping the dark ink background for contrast and readability.
Gradients, glows, badges, icons, focus rings, and primary buttons now pull from the green pair;
headings/wordmarks get a tasteful cream highlight so the UI feels strong yet friendly.
Accessibility stays high (green on dark meets WCAG), and the layout remains unchanged.
*/
/* --------- Vercai: styles.css --------- */
:root{
  --bg:#0a0f1f;
  --surface:rgba(255,255,255,.06);
  --elev:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.12);
  --text:#e7ecf5;
  --muted:#9aa4b2;
  --accent:#67e8f9; /* cyan */
  --accent2:#a78bfa; /* purple */
  --ok:#34d399;
  --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #1b1f3a55, transparent 60%),
              radial-gradient(900px 500px at 90% 0%, #1a224455, transparent 60%),
              linear-gradient(180deg, #060a14, var(--bg));
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing:.2px;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.section-head{max-width:900px; margin:0 auto 2.2rem; text-align:center}
.section-head h2{
  margin:.2rem 0 .3rem;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.2rem);
}
.section-head p{color:var(--muted); margin:0 auto; max-width:700px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem 1rem;
  background: linear-gradient(180deg, rgba(6,10,20,.8), rgba(6,10,20,.4) 36%, transparent);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:700; letter-spacing:.3px}
.brand span{background:linear-gradient(90deg,var(--accent2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{color:var(--muted)}
.nav .btn{color:#0b1020}
.menu{display:none; position:relative; width:38px; height:32px; border:0; background:transparent; cursor:pointer}
.menu span{position:absolute; left:6px; right:6px; height:2px; background:#c9d2e3; transition:.25s}
.menu span:nth-child(1){top:9px}
.menu span:nth-child(2){top:15px}
.menu span:nth-child(3){top:21px}
@media (max-width: 880px){
  .nav{position:fixed; inset:56px 12px auto; display:grid; gap:.6rem; padding:12px; border:1px solid var(--border); background:#0b1020e6; border-radius:14px; transform:scale(.98); opacity:0; pointer-events:none; transition:.2s; box-shadow:var(--shadow)}
  body.menu-open .nav{opacity:1; transform:scale(1); pointer-events:auto}
  .menu{display:block}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:12px; font-weight:600; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color:#071018; border:0;
}
.btn--ghost{background:transparent; color:var(--text)}

/* Splash (video intro) */
.splash{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:#000;
  opacity:1; visibility:visible;
  transition: opacity .5s ease, visibility .5s ease;
}
.splash.is-hidden{opacity:0; visibility:hidden}
.splash__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05) brightness(.9);
}
.splash__layer{
  position:relative; z-index:2;
  display:grid; place-items:center; gap:1.2rem;
  /* Move content down, avoid covering focal area */
  align-self:end;            /* bottom-align within grid */
  justify-self:center;       /* center horizontally */
  margin-bottom: clamp(24px, 12vh, 180px);
  padding: 1rem 2rem calc(1rem + env(safe-area-inset-bottom));
  text-align:center;
}
.splash::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(10,15,31,.1), rgba(10,15,31,.7)),
              linear-gradient(180deg, rgba(10,15,31,.2), rgba(10,15,31,.55));
  z-index:1;
}
.splash__brand{display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .8rem; border-radius:999px; background:rgba(6,10,20,.6); border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow)}
.splash__wordmark{
  font-weight:800; letter-spacing:.3px;
  background:linear-gradient(90deg,#fff,#cbd5e1); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.splash__skip{min-width:140px}
.splash__hint{color:#cbd5e1; opacity:.8; font-size:.9rem}
@media (prefers-reduced-motion: reduce){
  .splash__video{display:none}
}

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:2rem; align-items:center;
  padding: clamp(1.2rem, 4vw, 4rem) 1rem 2rem; max-width:1200px; margin:0 auto;
}
.hero__copy p{color:var(--muted); margin:.6rem 0 1.2rem}
.grad-text{font-size: clamp(2rem, 2rem + 2.8vw, 4rem); line-height:1.1; margin:0;
  background:linear-gradient(90deg, #fff, #c8d0e5); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.spark{background:linear-gradient(90deg,var(--accent2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__stats{display:flex; gap:1.2rem; padding:0; margin:1.2rem 0 0; list-style:none; color:#cdd5e9}
.hero__stats span{font-weight:800; font-size:1.2rem; color:#fff}
.hero__viz{position:relative}
.console{
  border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#0b1222; box-shadow:var(--shadow)
}
.console__chrome{display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}
.console__chrome i{width:10px; height:10px; border-radius:50%; display:inline-block}
.console__chrome i:nth-child(1){background:#ff5f56}
.console__chrome i:nth-child(2){background:#ffbd2e}
.console__chrome i:nth-child(3){background:#27c93f}
.console__chrome span{color:#aab3c3; margin-left:.3rem; font-size:.9rem}
.console__body{margin:0; padding:1rem .9rem 1.2rem; color:#cfe7ff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
.console__body .ok{color:var(--ok)}
.orb{position:absolute; filter:blur(30px); opacity:.8; pointer-events:none}
.orb--one{width:240px; height:240px; right:-4%; top:-6%; background: radial-gradient(circle at 30% 30%, #6ee7f9, transparent), radial-gradient(circle at 70% 70%, #a78bfa, transparent)}
.orb--two{width:200px; height:200px; left:-10%; bottom:-8%; background: radial-gradient(circle at 30% 70%, #a78bfa, transparent), radial-gradient(circle at 70% 30%, #67e8f9, transparent)}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; gap:1.6rem}
}

/* Logos marquee */
.logos{padding: .6rem 0 1.6rem}
.marquee{overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.marquee__track{display:flex; gap:2.6rem; align-items:center; padding: .6rem 0; will-change:transform; animation: marquee 24s linear infinite}
.logo{opacity:.7; letter-spacing:.3rem; font-weight:700; border:1px solid var(--border); padding:.5rem 1rem; border-radius:999px; background:rgba(255,255,255,.02)}
@keyframes marquee{to{transform: translateX(-50%)}}

/* Features */
.features{max-width:1200px; margin: 0 auto; padding: 2rem 1rem}
.grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem}
@media (max-width: 1100px){ .grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr} }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:16px; padding:1rem; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.card h3{margin:.4rem 0 .3rem}
.card p{color:var(--muted); margin:0 0 .6rem}
.card .icon{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent2),var(--accent)); box-shadow:0 8px 18px rgba(103,232,249,.2)}
.card .icon svg{width:24px; height:24px; stroke:#0b1020; stroke-width:2; fill:none}

/* Showcase */
.showcase{max-width:1200px; margin:0 auto; padding: 2rem 1rem}
.work-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
@media (max-width: 1100px){ .work-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 700px){ .work-grid{grid-template-columns: 1fr} }
.work-card{border:1px solid var(--border); border-radius:16px; background: radial-gradient(120% 120% at 0 0, rgba(167,139,250,.18), transparent), radial-gradient(120% 120% at 100% 100%, rgba(103,232,249,.18), transparent); padding:1rem; box-shadow:var(--shadow)}
.work-card figcaption{color:#d8def0; margin:0 0 .8rem}
.work-sim{display:flex; flex-wrap:wrap; gap:.6rem}
.chip{font-size:.85rem; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.04)}

/* Pricing */
.pricing{max-width:1200px; margin:0 auto; padding:2rem 1rem}
.tiers{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
@media (max-width: 900px){ .tiers{grid-template-columns: 1fr} }
.tier{
  border:1px solid var(--border); border-radius:16px; padding:1rem; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow:var(--shadow); position:relative
}
.tier .badge{position:absolute; top:10px; right:10px; font-size:.75rem; padding:.2rem .45rem; border-radius:6px; background:linear-gradient(135deg, var(--accent2), var(--accent)); color:#0b1020; font-weight:700}
.tier h3{margin:.2rem 0}
.tier .price{font-size:1.8rem; margin:.2rem 0 .8rem}
.tier .price span{font-size:.9rem; color:var(--muted)}

/* Contact / Lead form */
.contact{max-width:1200px; margin:0 auto; padding:2rem 1rem 3rem}
.lead-card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(120% 120% at 0 0, rgba(167,139,250,.18), transparent),
    radial-gradient(120% 120% at 100% 100%, rgba(103,232,249,.18), transparent),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
.lead-card__chrome{display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02))}
.lead-card__chrome .title{color:#cbd5e1; font-weight:600}
.dots{display:flex; gap:.35rem}
.dots i{width:10px; height:10px; border-radius:50%; display:inline-block}
.dots i:nth-child(1){background:#ff5f56}
.dots i:nth-child(2){background:#ffbd2e}
.dots i:nth-child(3){background:#27c93f}
.iframe-wrap{
  position:relative;
  padding:0;
}
.iframe-wrap::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 60px rgba(167,139,250,.08), inset 0 0 60px rgba(103,232,249,.08);
}
iframe{
  width:100%; border:0; display:block;
  height: min(80vh, 920px);
  min-height: 540px;
  background:#0b1222;
}
.form-note{color:var(--muted); padding:.7rem .9rem 1rem; margin:0}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:1rem; display:grid; grid-template-columns: auto 1fr auto; gap:1rem; align-items:center; color:#cbd5e1}
.site-footer nav{display:flex; gap:1rem; justify-content:center}
.site-footer small{justify-self:end; color:#8f98ab}
.brandline{display:flex; gap:.6rem; align-items:center}
@media (max-width: 820px){
  .site-footer{grid-template-columns: 1fr; text-align:center}
  .site-footer small{justify-self:center}
}

/* Interactions */
[data-reveal]{opacity:0; transform: translateY(8px); transition: .5s ease}
[data-reveal].is-visible{opacity:1; transform:none}
.tilt{transform-style: preserve-3d; perspective:800px}
.tilt:hover{transform: translateY(-2px)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Utilities */
.br{display:none}
@media (max-width:640px){ .br{display:initial} }

/* Logo sizing with aspect preserved */
.brand .logo-img{height:28px; width:auto}
.site-footer .logo-img{height:24px; width:auto}
.splash__brand .logo-img{height:40px; width:auto}


/* Services content fine-tuning (no dollar amounts) */
.tier .desc{color:var(--muted); margin:.2rem 0 .6rem}
.pricing .section-head + .tiers {margin-top:.4rem}


/* Make the lead services card span the full container width */
.tiers.tiers--single{grid-template-columns: 1fr}
.tiers.tiers--single .tier{grid-column: 1 / -1}

@media (max-height: 600px){
  .splash__layer{ margin-bottom: clamp(12px, 8vh, 80px); }
}


/* About / Founder */
.about{max-width:1200px; margin:0 auto; padding:2rem 1rem}
.profile{background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}
.profile__grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:1rem; align-items:stretch}
@media (max-width: 980px){ .profile__grid{grid-template-columns:1fr; } }
.profile__meta h3{margin:.2rem 0 .4rem}
.profile__meta p{color:var(--muted); margin:.45rem 0}
.profile__cta{display:flex; gap:.6rem; margin-top:.8rem}

.profile__card{
  border:1px solid var(--border); border-radius:12px; padding:1rem;
  background: radial-gradient(120% 120% at 100% 0, rgba(167,139,250,.14), transparent),
              radial-gradient(120% 120% at 0 100%, rgba(103,232,249,.12), transparent);
}
.quote{font-weight:600; font-size:1.05rem; color:#e6ecff; margin:0 0 .6rem}
.quote p{margin:0}
.bullets{margin:.2rem 0 0; padding-left:1rem; color:#cbd5e1}
.bullets li{margin:.25rem 0}


/* --- Fix right-side clipping on mobile --- */
.console__body code{ white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* Let flex items shrink properly without overflow */
.cta .btn{ min-width: 0; }

@media (max-width: 540px){
  .cta{ flex-direction: column; align-items: stretch; }
  .cta .btn{ width:100%; }
  .hero__copy .cta .btn{ padding:.9rem 1rem; }
}


/* --- Fix white gap at top (iOS safe-area alignment) --- */
html, body {
  background-color: #060a14;
  margin: 0;
  padding-top: env(safe-area-inset-top);
  height: 100%;
}

/* Ensure header fully covers safe area */
.site-header {
  padding-top: calc(0.5rem + env(safe-area-inset-top));
  background-color: #060a14;
}


.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.8rem;
  background: linear-gradient(
    180deg,
    rgba(10, 15, 31, 0.95) 0%,
    rgba(10, 15, 31, 0.8) 40%,
    rgba(10, 15, 31, 0.6) 80%,
    transparent 100%
  );
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}





/* =============================================================
   SmashData brand palette — high-priority overrides
   Bright Green #00C853, Deep Green #0AA24F, Cream #F9F5EE
   Ensures gradients, icons, CTAs, badges, focus rings, and
   decorative glows use the SmashData colors consistently.
   (Appended at end so it wins over earlier theme rules.)
   ============================================================= */
:root{
  --accent: #00C853 !important;
  --accent2:#0AA24F !important;
  --cream:  #F9F5EE !important;
  --ok:     #00C853 !important;
}

/* Headings / wordmarks pick up cream highlight */
.grad-text,
.splash__wordmark,
.brand span{
  background: linear-gradient(90deg, var(--cream), #ffffff) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* Primary & ghost buttons */
.btn--primary{
  background: linear-gradient(135deg, var(--accent2), var(--accent)) !important;
  color:#071018 !important;
  border:0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 30px rgba(0,200,83,.24) !important;
}
.btn--ghost:focus-visible,
.btn--primary:focus-visible,
:focus-visible{
  outline:2px solid var(--accent) !important;
  outline-offset:2px !important;
}

/* Icon pills in feature cards */
.features .card .icon,
.card .icon{
  background: linear-gradient(135deg, var(--accent2), var(--accent)) !important;
  box-shadow: 0 8px 18px rgba(0,200,83,.22) !important;
}
.card .icon svg{ stroke:#0b1020 !important; }

/* Badges and highlights */
.tier .badge{
  background: linear-gradient(135deg, var(--accent2), var(--accent)) !important;
  color:#0b1020 !important;
}

/* Decorative orbs / washes */
.orb--one{
  background:
    radial-gradient(circle at 30% 30%, rgba(0,200,83,.85), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(249,245,238,.6), transparent 60%) !important;
}
.orb--two{
  background:
    radial-gradient(circle at 30% 70%, rgba(249,245,238,.5), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(10,162,79,.8), transparent 60%) !important;
}

/* Showcase and contact card washes */
.work-card{
  background:
    radial-gradient(120% 120% at 0 0, rgba(10,162,79,.18), transparent),
    radial-gradient(120% 120% at 100% 100%, rgba(249,245,238,.14), transparent) !important;
}
.lead-card{
  background:
    radial-gradient(120% 120% at 0 0, rgba(10,162,79,.16), transparent),
    radial-gradient(120% 120% at 100% 100%, rgba(249,245,238,.12), transparent),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
}

/* Chips and subtle accents keep neutral backgrounds; no color clash */
.chip{ border-color: rgba(255,255,255,.12) !important; }

/* Console READY state and inline ok accents */
.console__body .ok{ color: var(--ok) !important; }


/* --- Primary button legibility upgrade --- */
.btn--primary{
  /* keep brand greens, add dark overlay to ensure WCAG contrast for light text */
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.16)),
    linear-gradient(135deg, var(--accent2), var(--accent)) !important;
  color:#ffffff !important;
  border:1px solid rgba(0,0,0,.35) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.btn--primary:hover{
  filter: brightness(1.02) saturate(1.02);
  transform: translateY(-1px);
}
.btn--primary:active{ filter: brightness(.96); transform: translateY(0) }

/* =============================================================
   CTA placement standardization: bottom-right in cards/sections
   Scope-limited to service tiers and About profile only.
   No other layout changes.
   ============================================================= */

/* Service tier cards: push CTA to bottom-right */
.tier{
  display:flex;
  flex-direction:column;
}
.tier > a.btn{
  margin-top:auto;
  align-self:flex-end;
}

/* Ensure lists/paragraphs leave space above the CTA */
.tier .desc, .tier p, .tier ul{ margin-bottom:.8rem; }

/* About section: make left column a vertical stack with CTA at bottom-right */
.profile__meta{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.profile__cta{
  margin-top:auto;
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  align-items:flex-end;
}


/* =============================================================
   Butter contact form — polished to match site UI
   Targets #butter-form and its thank-you state.
   ============================================================= */
.butter-form{
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
  background:
    radial-gradient(120% 120% at 0 0, rgba(10,162,79,.16), transparent),
    radial-gradient(120% 120% at 100% 100%, rgba(249,245,238,.12), transparent),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
/* Grid utilities local to the form */
.butter-form .grid{ 
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.butter-form .col-span-2{ grid-column: 1 / -1; }
@media (max-width: 720px){
  .butter-form .grid{ grid-template-columns: 1fr; }
}

/* Labels & fields */
.butter-form label{
  display:grid;
  gap:.4rem;
  font-weight:600;
}
.butter-form .field > label{ font-weight:600; margin-bottom:.2rem; }
.butter-form input[type="email"],
.butter-form input[type="text"],
.butter-form textarea{
  width:100%;
  appearance:none;
  border:1px solid var(--border);
  background:#0b1222;
  color:var(--text);
  border-radius:12px;
  padding:.72rem .85rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.butter-form textarea{ resize: vertical; min-height: 140px; }
.butter-form input::placeholder,
.butter-form textarea::placeholder{ color: var(--muted); opacity:.9; }
.butter-form input:focus,
.butter-form textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Choices: chip-style checkboxes */
.butter-form .choices{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem;
}
.butter-form .opt{
  display:inline-flex; align-items:center; gap:.4rem;
  background: transparent; border:0; padding:0;
}
/* Hide native checkbox but preserve accessibility */
.butter-form .opt > input[type="checkbox"]{
  position:absolute; inset:auto;
  opacity:0; pointer-events:none;
}
/* The visible chip */
.butter-form .opt > input[type="checkbox"] + span{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color:#cbd5e1;
  font-weight:600;
  transition: transform .15s ease, background .2s, border-color .2s, color .2s;
}
/* Focus ring when tabbing to the hidden checkbox */
.butter-form .opt > input[type="checkbox"]:focus-visible + span{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Selected state */
.butter-form .opt > input[type="checkbox"]:checked + span{
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12)),
    linear-gradient(135deg, var(--accent2), var(--accent));
  color:#fff;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 8px 18px rgba(0,200,83,.22);
  transform: translateY(-1px);
}

/* 'Other' text fields inside chips */
.butter-form .opt .other-providers-input,
.butter-form .opt .other-services-input{
  min-width: 180px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.4rem .6rem;
  background:#0b1222;
  color:var(--text);
}
.butter-form .opt .other-providers-input::placeholder,
.butter-form .opt .other-services-input::placeholder{ color:var(--muted); }

/* Button (this form uses .btn.primary vs .btn--primary) */
.btn.primary{
  background:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.16)),
    linear-gradient(135deg, var(--accent2), var(--accent));
  color:#fff;
  border:1px solid rgba(0,0,0,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 30px rgba(0,200,83,.24);
  font-weight:700;
}
.btn.primary:hover{ transform: translateY(-1px); filter: brightness(1.02) saturate(1.02); }
.btn.primary:active{ transform: translateY(0); filter: brightness(.96); }

/* Hint text under form */
.butter-form .form-note{ display:block; color:var(--muted); margin-top:.4rem; padding:0; text-align:center; }

/* Hide honeypot */
.butter-form .hp{ display:none !important; }

/* Thank-you state card */
.butter-form-thanks{
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem;
  background:
    radial-gradient(120% 120% at 0 0, rgba(10,162,79,.16), transparent),
    radial-gradient(120% 120% at 100% 100%, rgba(249,245,238,.12), transparent),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
.butter-form-thanks .thanks-sub{ color:var(--muted); }
.butter-form-thanks .btn.primary{ margin-right:.4rem; }
.butter-form-thanks .check .ring{ stroke:#2a3346; }
.butter-form-thanks .check .tick{ stroke: var(--accent); }

/* Accessible invalid hint (optional ARIA) */
.butter-form [aria-invalid="true"]{
  border-color: color-mix(in srgb, var(--accent) 65%, red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}


/* --- Contact section layout fixes (stack hero text above form on laptops) --- */
.container{max-width:1200px; margin:0 auto; padding: 0 1rem;}
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1400px){
  .container.grid.cols-2{ grid-template-columns: 1fr; }
}
/* Ensure the form itself remains two columns on desktop and centers nicely */
#butter-form{ width:100%; max-width: 760px; margin-inline:auto; }
#butter-form .grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 720px){
  #butter-form .grid.cols-2{ grid-template-columns: 1fr; }
}


/* =============================================================
   Apple-like Typography + Modern Form Polish
   (Subtle font-weight tuning and refined font smoothing)
   ============================================================= */

/* Apply refined font rendering and smart weighting */
.field label,
.choices span,
.other-providers-input {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 500; /* lighter, modern feel */
  letter-spacing: 0.1px;
  color: var(--text);
}

/* Labels – a touch lighter to match Apple Human Interface */
.field > label {
  font-weight: 550;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--text) 90%, white 10%);
  margin-bottom: 0.3rem;
}

/* Choice chips – sleek, crisp text */
.choices .opt span {
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
}

/* Checkbox selected state – slightly smoother gradient */
.choices .opt input[type="checkbox"]:checked + span {
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Input field text – Apple minimalism */
.other-providers-input {
  font-weight: 400;
  font-size: 0.9rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  padding: 0.45rem 0.65rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.other-providers-input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}

/* Responsive type scaling for mobile */
@media (max-width: 640px) {
  .field > label {
    font-size: 0.9rem;
  }
  .choices .opt span {
    font-size: 0.88rem;
  }
  .other-providers-input {
    font-size: 0.88rem;
  }
}

/* Full-width form to match confirmation card */
#butter-form {
  max-width: none !important;  /* remove 760px cap */
  width: 100% !important;
}

/* Make the inner card respect full width too */
.butter-form {
  width: 100%;
}

/* Optional: if your form sits in a .container with a max width
   and you truly want edge-to-edge (full viewport), add a helper.
   Otherwise, omit this. */
.container.full-bleed {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* =============================================================
   Align contact form width with service cards
   ============================================================= */
#butter-form,
.butter-form,
.butter-form-thanks {
  max-width: 1200px;         /* match the cards’ container */
  margin-inline: auto;       /* center it */
  width: 100%;
  padding-left: 1rem;        /* same horizontal rhythm */
  padding-right: 1rem;
  box-sizing: border-box;    /* ensure padding stays inside width */
}

/* Constrain Contact form + confirmation to site content width */
.contact #butter-form,
.contact .butter-form,
.contact .butter-form-thanks {
  max-width: 1200px !important;   /* match cards container */
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 1rem !important; /* same left/right padding rhythm */
  box-sizing: border-box;
}

/* If your form sits inside a decorative wrapper, cap that too */
.contact .lead-card,
.contact .iframe-wrap {
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: 1rem !important;
  box-sizing: border-box;
}



/* =============================================================
   DROP-IN FIX: Align the Contact form & confirmation with site width
   Root cause: the HTML uses id="contact" (class="section"), while
   the CSS container rule targeted .contact — so the section was
   never constrained and expanded full-bleed.
   This block scopes a 1200px container to #contact and ensures
   both the form (#butter-form) and the thank-you card match it.
   ============================================================= */
#contact{
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1rem 3rem;
  box-sizing:border-box;
}
/* Form + Thank-you card fill the contact container but not beyond it */
#contact #butter-form{
  max-width:none !important;   /* kill the earlier 760px cap */
  width:100% !important;
  margin-inline:0 !important;
}
#contact .butter-form,
#contact #butter-form-thanks,
#contact .butter-form-thanks{
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
  box-sizing:border-box;
}
/* If any decorative wrappers exist inside #contact, cap them too */
#contact .lead-card,
#contact .iframe-wrap{
  max-width:none !important;
  margin-inline:0 !important;
  width:100% !important;
  box-sizing:border-box;
}

/* Flatten page background and remove the vertical tone shift */
body{
  /* keep soft glows, but use a single, flat base color */
  background:
    radial-gradient(1600px 900px at -10% -20%, rgba(27,31,58,.33) 0%, transparent 80%),
    radial-gradient(1300px 800px at 110% -20%, rgba(26,34,68,.30) 0%, transparent 80%),
    #060a14 !important; /* flat base — same to the bottom */
}

/* If you prefer ZERO glows (perfectly uniform), use this instead: */
/* body{ background: #060a14 !important; } */

/* iOS: prevent zoom-on-focus by ensuring 16px minimum */
@supports (-webkit-touch-callout: none) {
  #contact input,
  #contact textarea,
  #contact select {
    font-size: 16px !important;      /* key: >=16px */
    -webkit-text-size-adjust: 100%;
  }

  /* Your "Other" chip input is 0.9rem right now — force 16px */
  #contact .other-providers-input {
    font-size: 16px !important;
  }
}

/* Constrain Contact form + confirmation to site content width */
.contact #butter-form,
.contact .butter-form,
.contact .butter-form-thanks {
  max-width: 1200px !important;   /* match cards container */
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 1rem !important; /* same left/right padding rhythm */
  box-sizing: border-box;
}

/* If your form sits inside a decorative wrapper, cap that too */
.contact .lead-card,
.contact .iframe-wrap {
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: 1rem !important;
  box-sizing: border-box;
}

/* === Patch: make Contact form background match "Discovery & Readiness" tier ===
   The "tier" cards use a clear surface:
     background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
   Remove the green radial washes from the contact form and its thank-you card.
   (Scoped overrides only; no other visual changes.)
*/
.butter-form,
.butter-form-thanks{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
}

/* === Thank-you screen polish (centered, calm, Apple-clean) === */
#contact .butter-form-thanks {
  display: grid !important;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding: 28px 28px 32px !important;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-radius: 20px;
}

#contact .butter-form-thanks .thanks-row,
#contact .butter-form-thanks .thanks-content {
  display: grid !important;
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
  width: 100%;
  gap: 12px;
}

#contact .butter-form-thanks .thanks-headline,
#contact .butter-form-thanks h3,
#contact .butter-form-thanks h2 {
  margin: 0 auto !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  line-height: 1.25;
  color: #e8eef5;
  /* scale gracefully at different widths */
  font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.75rem) !important;
}

#contact .butter-form-thanks p,
#contact .butter-form-thanks .thanks-subtext {
  margin: 2px auto 0 !important;
  color: #a7b3c3 !important;
  line-height: 1.6 !important;
  font-size: clamp(.98rem, .9rem + .25vw, 1.05rem) !important;
  max-width: 820px;
}

/* Icon + headline: align and add a gentle glow */
#contact .butter-form-thanks .thanks-icon,
#contact .butter-form-thanks .icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  margin: 0 auto 4px !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
  background: radial-gradient(circle at 50% 50%, rgba(34,197,94,.20), rgba(34,197,94,.06));
}

/* Button: center it and keep the brand look, with keyboard ring */
#contact .butter-form-thanks .btn,
#contact .butter-form-thanks .btn.primary {
  margin: 12px auto 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 30px rgba(0,200,83,.24) !important;
}
#contact .butter-form-thanks .btn.primary:focus,
#contact .butter-form-thanks .btn.primary:focus-visible {
  outline: 2px solid var(--accent, #22c55e) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #22c55e) 28%, transparent) !important;
}

/* Spacing tweaks for compact screens */
@media (max-width: 640px) {
  #contact .butter-form-thanks { padding: 22px 18px 26px !important; }
}

/* Subtle entrance animation so it feels intentional */
@keyframes thanksFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#contact .butter-form-thanks { animation: thanksFadeUp .28s ease-out; }



/* === Thank-you visibility control === */
/* 1) Default: keep the thank-you hidden */
#contact .butter-form-thanks {
  display: none !important;          /* don’t force it visible */
}

/* 2) Show it only when the form is logically “gone” or success-flagged.
   These cover common success toggles used by form libs.
   Keep any you need; they’re ordered from most specific to most general. */

/* a) If your script adds a success class to the wrapper */
#contact.success .butter-form-thanks,
#contact .butter-form-thanks.is-visible,
#contact .butter-form-thanks[data-state="success"],
#contact .butter-form-thanks[aria-hidden="false"] {
  display: grid !important;
}

/* b) If the actual form is hidden after submit (hidden attr or display:none),
      reveal the thank-you via :has() without touching JS. */
#contact:has(.butter-form[hidden]) .butter-form-thanks,
#contact:has(.butter-form[style*="display:none"]) .butter-form-thanks,
#contact:has(form[hidden]) .butter-form-thanks,
#contact:has(form[style*="display:none"]) .butter-form-thanks {
  display: grid !important;
}

#bf-email {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

/* One true base + pinned glows (no seams) */
html, body {
  background: #060a14 !important;   /* unify base */
}

/* Decorative glows pinned to the viewport, not the content flow */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1600px 900px at -10% -20%, rgba(27,31,58,.33) 0%, transparent 80%),
    radial-gradient(1300px 800px at 110% -20%, rgba(26,34,68,.30) 0%, transparent 80%);
}



/* === Trust section parity fixes (match "How it works" cards) === */
.features#trust .grid { /* inherit .features grid; no flex */
  /* no additional rules needed; uses global .features .grid */
}
.features#trust .card {
  width: auto; /* ensure any legacy widths are neutralized */
  text-align: left;
}
@media (max-width: 640px){
  .features#trust .grid{ grid-template-columns: 1fr; } /* explicit single column on small screens */
}

/* Center 3-card grids like "Security & permissions" on larger screens */
#trust .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: center; /* centers the entire grid block */
  gap: 1.25rem;
}

/* On wider screens, keep cards centered if fewer than 4 */
@media (min-width: 900px) {
  #trust .grid {
    justify-content: center;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
  }
}