/* ===== Website Wala — design tokens ===== */
:root{
  --navy: #0f0d28;
  --navy-2: #151233;
  --navy-3: #1e1a45;
  --ink: #16142e;
  --paper: #faf8f4;
  --paper-2: #f1ede4;
  --accent: #ff8a3d;          /* fills, dark backgrounds */
  --accent-ink: #ad4e08;      /* accent as TEXT on light bg (WCAG AA 4.6:1+) */
  --teal-ink: #0d7d6d;        /* teal as icon/text on light bg */
  --accent-2: #ffb454;
  --teal: #23c8b0;
  --text-soft: #6b6784;
  --white: #ffffff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-lg: 0 30px 60px -20px rgba(15,13,40,0.35);
  --shadow-sm: 0 10px 24px -12px rgba(15,13,40,0.25);
  --font-head: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-head); line-height:1.12; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color: var(--text-soft); line-height:1.65; }
ul,ol{ margin:0; padding:0; list-style:none; }

.container{ width:min(1180px, 92%); margin-inline:auto; }
.container-narrow{ width:min(760px, 92%); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:.75em 1.25em;
  z-index:999; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* Keyboard focus — visible on both the light page and the dark hero/footer */
:where(a, button, summary, input, textarea):focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible{ outline-color: #ffd7b0; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .95em 1.6em; border-radius: 999px; font-weight:700; font-size:.98rem;
  border: 2px solid transparent; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#1a1330; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 18px 30px -10px rgba(255,138,61,.55); }
.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-ghost{ background: transparent; color: var(--navy); border-color: rgba(21,18,51,.18); }
.btn-ghost:hover{ background: rgba(21,18,51,.06); }
.btn-outline{ background: transparent; color: var(--navy); border-color: var(--navy); width:100%; margin-top:1.2em; }
.btn-outline:hover{ background: var(--navy); color:#fff; }
.btn-block{ width:100%; }
.btn-small{ padding: .8em 1.3em; font-size:.88rem; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(250,248,244,.75);
  border-bottom: 1px solid rgba(21,18,51,.06);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: .9em 0; gap: 1.5em; }
.brand{ display:flex; align-items:center; gap:.6em; }
.brand-mark{ display:inline-flex; }
.brand-name{ font-family: var(--font-head); font-weight:700; font-size:1.3rem; color: var(--navy); }
.accent{ color: var(--accent-ink); }
.site-footer .accent, .hero .accent{ color: var(--accent); }  /* on dark, the bright orange is fine */
.main-nav{ display:flex; gap: 2em; }
.main-nav a{ font-weight:600; font-size:.95rem; color: var(--navy); position:relative; padding: .85em .2em; display:inline-flex; align-items:center; }
.main-nav a::after{ content:""; position:absolute; left:.2em; right:.2em; bottom:.55em; height:2px; width:0; background: var(--accent); transition: width .25s ease; }
.main-nav a:hover::after{ width:calc(100% - .4em); }
.header-actions{ display:flex; align-items:center; gap: 1em; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:none; border:none; cursor:pointer; min-width:44px; min-height:44px; }
.nav-toggle span{ width:22px; height:2px; background: var(--navy); border-radius:2px; }

/* ===== Hero ===== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center;
  overflow:hidden;
  background: radial-gradient(120% 120% at 15% 0%, #201c4a 0%, var(--navy-2) 45%, var(--navy) 100%);
  padding-top: 6em;
}
.hero-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }

.hero-grid{
  position:absolute; inset:-10% -10%;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%);
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift{
  0%{ transform: translate(0,0); }
  100%{ transform: translate(56px, 56px); }
}

.orb{
  position:absolute; border-radius:50%; filter: blur(60px); opacity:.55;
  animation: orbFloat 14s ease-in-out infinite;
}
.orb-1{ width:420px; height:420px; left:-8%; top:-10%; background: radial-gradient(circle, rgba(255,138,61,.55), transparent 70%); animation-duration: 16s; }
.orb-2{ width:380px; height:380px; right:-10%; top:10%; background: radial-gradient(circle, rgba(35,200,176,.5), transparent 70%); animation-duration: 19s; animation-delay: -4s; }
.orb-3{ width:320px; height:320px; left:35%; bottom:-18%; background: radial-gradient(circle, rgba(108,99,255,.45), transparent 70%); animation-duration: 22s; animation-delay: -9s; }

@keyframes orbFloat{
  0%, 100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(3%, 4%) scale(1.08); }
  66%{ transform: translate(-3%, -2%) scale(0.95); }
}

.hero-bridge{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:62%;
  opacity:.85;
}
.bridge-arc{
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: drawArc 2.4s cubic-bezier(.16,.84,.44,1) .3s forwards;
}
.bridge-arc-2{ animation-delay: .6s; }
@keyframes drawArc{ to{ stroke-dashoffset: 0; } }
.bridge-node{ opacity:0; animation: nodeIn .6s ease forwards 1.8s; }
.bridge-node-glow{
  animation: nodeIn .6s ease forwards 2s, nodePulse 2.4s ease-in-out 2.6s infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}
@keyframes nodeIn{ from{ opacity:0; transform: scale(.4); } to{ opacity:1; transform: scale(1); } }
@keyframes nodePulse{ 0%,100%{ r:8; opacity:1; } 50%{ r:11; opacity:.6; } }

@media (prefers-reduced-motion: reduce){
  .hero-grid, .orb, .bridge-arc, .bridge-node, .bridge-node-glow{ animation: none !important; }
  .bridge-arc{ stroke-dashoffset: 0; }
  .bridge-node{ opacity:1; }
}
.hero-inner{
  position:relative; z-index:2; color:#fff; padding-block: 4em;
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 2em; align-items:center;
}
.hero-copy{ min-width:0; }
.eyebrow{ display:inline-flex; align-items:center; gap:.5em; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:.5em 1em; border-radius:999px; font-size:.85rem; font-weight:600; color:#fff; }
.hero h1{ font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 15ch; color:#fff; margin-top:.6em; }
.accent-text{ background: linear-gradient(120deg, var(--accent), var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ max-width: 56ch; font-size: 1.1rem; color: rgba(255,255,255,.78); margin-top:1em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1em; margin-top: 1.8em; }
.hero .btn-ghost{ color:#fff; border-color: rgba(255,255,255,.35); }
.hero .btn-ghost:hover{ background: rgba(255,255,255,.1); }
.hero-stats{ display:flex; gap: 2.5em; margin-top: 3em; flex-wrap:wrap; }
.hero-stats li{ display:flex; flex-direction:column; }
.hero-stats strong{ font-family: var(--font-head); font-size:2rem; color:#fff; }
.hero-stats span{ font-size:.85rem; color: rgba(255,255,255,.6); }

/* ===== Hero mascot ===== */
:root{ --hero-progress: 0; }
.hero-mascot-wrap{
  position:relative; display:flex; align-items:center; justify-content:center;
  transform: scale(calc(1 - var(--hero-progress) * 0.28)) translateY(calc(var(--hero-progress) * -26px));
  opacity: calc(1 - var(--hero-progress) * 1.15);
  will-change: transform, opacity;
}
.mascot-stage{ position:relative; width: min(380px, 84vw); }
.mascot-img{
  position:relative; z-index:2; width:100%; height:auto; display:block;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.4));
}
.mascot-bob{ animation: mascotBob 3.4s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes mascotBob{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-12px) rotate(-1.5deg); }
}

.brand-mark img{ display:block; border-radius:50%; }
.brand-mark{
  display:inline-flex;
  transform: scale(calc(0.85 + var(--hero-progress) * 0.15));
  transition: transform .15s ease-out;
}

.footer-brand-row{ display:inline-flex; align-items:center; gap:.5em; }
.footer-brand-row img{ border-radius:50%; display:block; }

@media (prefers-reduced-motion: reduce){
  .hero-mascot-wrap{ transform:none !important; opacity:1 !important; }
  .mascot-bob{ animation: none !important; }
  .brand-mark{ transform:none !important; }
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-copy{ order:2; }
  .hero-mascot-wrap{ order:1; margin-bottom: -1em; }
  .hero h1{ max-width:none; }
  .hero-cta{ justify-content:center; }
  .hero-stats{ justify-content:center; }
}

.scroll-cue{
  position:absolute; bottom: 2em; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  color: rgba(255,255,255,.55); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue span{ width:1px; height: 34px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform: scaleY(0); transform-origin: top;} 50%{ transform: scaleY(1); transform-origin: top;} 51%{ transform-origin: bottom;} 100%{ transform: scaleY(0); transform-origin: bottom;} }

/* ===== Trust strip ===== */
.trust-strip{ background: var(--navy); padding: 1.1em 0; overflow:hidden; }
.trust-track{ display:flex; gap: 2.5em; flex-wrap:wrap; justify-content:center; color: rgba(255,255,255,.55); font-weight:600; font-size:.85rem; letter-spacing:.03em; }

/* ===== Sections ===== */
.section{ padding: 6.5em 0; }
.section-alt{ background: var(--paper-2); }
.kicker{ text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:800; color: var(--accent-ink); margin-bottom:.8em; }
.section h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 20ch; color: var(--navy); }
.section-sub{ max-width: 60ch; margin-top: -.4em; }

.grid{ display:grid; gap: 1.6em; margin-top: 2.5em; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }

.card{
  background:#fff; border-radius: var(--radius); padding: 1.8em; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(21,18,51,.05);
  transition: transform .35s ease, box-shadow .35s ease;
}
.card h3{ font-size:1.15rem; color: var(--navy); }
.card-icon{ font-size:1.8rem; margin-bottom:.5em; }
.tilt{ will-change: transform; }
.tilt:hover{ box-shadow: var(--shadow-lg); }

.placeholder-card{ border: 1.5px dashed rgba(21,18,51,.2); background: rgba(255,255,255,.6); }
.placeholder-tag{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--teal); background: rgba(35,200,176,.12); padding:.3em .7em; border-radius: 999px; margin-bottom:.8em; }

.service-card{
  background:#fff; border-radius: var(--radius); padding: 1.9em; border: 1px solid rgba(21,18,51,.06);
  position:relative; overflow:hidden;
}
.service-card::before{
  content:""; position:absolute; inset:0; opacity:0; background: linear-gradient(135deg, rgba(255,138,61,.08), rgba(35,200,176,.08));
  transition: opacity .3s ease;
}
.service-card:hover::before{ opacity:1; }
.service-card h3{ color: var(--navy); font-size:1.2rem; position:relative; }
.service-card p{ position:relative; }

/* Process */
.process-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.6em; margin-top: 2.5em; counter-reset: step; }
.process-steps li{
  background:#fff; border-radius: var(--radius); padding: 1.8em; box-shadow: var(--shadow-sm);
  position:relative;
}
.step-num{ font-family: var(--font-head); font-size: 2.2rem; font-weight:700; color: rgba(21,18,51,.12); display:block; margin-bottom:.2em; }
.process-steps h3{ font-size:1.05rem; color: var(--navy); }

/* Pricing */
.pricing-grid{ align-items: stretch; }
.price-card{
  background:#fff; border-radius: var(--radius); padding: 2.2em 1.8em; box-shadow: var(--shadow-sm);
  border: 1px solid rgba(21,18,51,.06); display:flex; flex-direction:column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.price-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card h3{ color: var(--navy); font-size:1.1rem; }
.price-card .price{ font-family: var(--font-head); font-size:2.4rem; color: var(--navy); margin:.2em 0 0; }
.price-note{ color: var(--text-soft); font-size:.88rem; margin-bottom:1.2em; }
.price-card ul{ display:flex; flex-direction:column; gap:.6em; margin-bottom: auto; }
.price-card ul li{ font-size:.92rem; color: var(--ink); padding-left: 1.4em; position:relative; }
.price-card ul li::before{ content:"✓"; position:absolute; left:0; color: var(--teal-ink); font-weight:800; }
.price-card-featured ul li::before{ color: var(--teal); }
.price-card-featured{ background: var(--navy); color:#fff; transform: scale(1.04); border:none; }
.price-card-featured h3, .price-card-featured .price{ color:#fff; }
.price-card-featured .price-note{ color: rgba(255,255,255,.65); }
.price-card-featured ul li{ color: rgba(255,255,255,.9); }
.badge{ position:absolute; top:-14px; left: 50%; transform: translateX(-50%); background: var(--accent); color:#1a1330; font-size:.72rem; font-weight:800; padding:.4em 1em; border-radius:999px; letter-spacing:.04em; }
.price-card-featured{ position:relative; }

/* FAQ */
.faq-list{ margin-top: 2em; display:flex; flex-direction:column; gap: .9em; }
.faq-item{ background:#fff; border-radius: var(--radius-sm); padding: 1.1em 1.4em; border: 1px solid rgba(21,18,51,.08); }
.faq-item summary{ cursor:pointer; font-weight:700; color: var(--navy); list-style: none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color: var(--accent-ink); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top: .8em; }

/* Contact */
.contact-section{ background: linear-gradient(180deg, var(--paper-2), var(--paper)); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:.2em; margin-top: 1.6em; }
.contact-info a{ font-weight:700; color: var(--navy); padding:.75em 0; display:inline-block; }
.contact-info em{ color: var(--text-soft); font-style:normal; font-size:.82rem; }
.contact-form{ background:#fff; border-radius: var(--radius); padding: 2em; box-shadow: var(--shadow-lg); display:flex; flex-direction:column; gap: .9em; border:1px solid rgba(21,18,51,.06); }
.contact-form label{ font-weight:700; font-size:.85rem; color: var(--navy); }
.contact-form input, .contact-form textarea{
  width:100%; padding: .85em 1em; border-radius: 10px; border: 1.5px solid rgba(21,18,51,.14);
  font-family: var(--font-body); font-size: .95rem; background: var(--paper);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,138,61,.15); }
.form-note{ font-size:.78rem; text-align:center; margin: .3em 0 0; color: var(--text-soft); }
.form-note-left{ text-align:left; margin-top:-.4em; }
.hidden-field{ position:absolute; left:-9999px; }
.label-optional{ font-weight:400; color: var(--text-soft); text-transform:none; }

/* File upload */
.file-drop{ position:relative; }
.file-drop input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:2;
}
.file-drop-target{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25em;
  padding: 1.4em 1em; border-radius: 10px; border: 1.5px dashed rgba(21,18,51,.22);
  background: var(--paper); transition: border-color .2s ease, background .2s ease;
  cursor:pointer;
}
.file-drop:hover .file-drop-target,
.file-drop.is-dragover .file-drop-target{ border-color: var(--accent); background: rgba(255,138,61,.06); }
.file-drop-icon{ font-size:1.4rem; }
.file-drop-text{ font-size:.92rem; color: var(--navy); }
.file-drop-text strong{ color: var(--accent-ink); }
.file-drop-hint{ font-size:.76rem; color: var(--text-soft); }
.file-drop-list{ list-style:none; margin: .6em 0 0; padding:0; display:flex; flex-direction:column; gap:.35em; }
.file-drop-list:empty{ margin:0; }
.file-drop-list li{
  display:flex; align-items:center; justify-content:space-between; gap:.6em;
  font-size:.82rem; background:#fff; border:1px solid rgba(21,18,51,.1); border-radius:8px;
  padding:.5em .7em; color: var(--navy);
}
.file-drop-list li span.file-size{ color: var(--text-soft); white-space:nowrap; }
.file-drop-list li.file-too-big{ border-color: rgba(220,38,38,.4); color:#b91c1c; }

/* Footer */
.site-footer{ background: var(--navy); color: rgba(255,255,255,.7); padding: 3.5em 0 2em; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2em; align-items:start; }
.footer-brand{ color:#fff; }
.site-footer p{ color: rgba(255,255,255,.55); }
.footer-inner nav{ display:flex; flex-direction:column; gap:.1em; }
.footer-inner nav a{ color: rgba(255,255,255,.75); font-weight:600; padding:.8em 0; display:inline-block; }
.footer-inner nav a:hover{ color: var(--accent); }
.footer-copy{ grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5em; font-size:.82rem; }

/* Scroll reveal — gated on .js so the page is fully readable if JS never runs */
.js .reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* Above-the-fold hero animates via CSS only: no JS dependency, no LCP delay */
.hero-in{ animation: heroIn .55s cubic-bezier(.2,.7,.3,1) both; }
.hero-copy .hero-in:nth-child(1){ animation-delay:.00s }
.hero-copy .hero-in:nth-child(2){ animation-delay:.06s }
.hero-copy .hero-in:nth-child(3){ animation-delay:.12s }
.hero-copy .hero-in:nth-child(4){ animation-delay:.18s }
.hero-copy .hero-in:nth-child(5){ animation-delay:.24s }
.hero-mascot-wrap.hero-in{ animation-delay:.10s }
@keyframes heroIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .hero-in{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .process-steps{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0; background: var(--paper);
    flex-direction:column; padding: 1.2em 5%; gap: 1em; border-bottom:1px solid rgba(21,18,51,.08);
    transform: translateY(-8px); opacity:0; pointer-events:none; transition: all .25s ease;
  }
  .main-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-small{ display:none; }
  .grid-4, .grid-3, .process-steps{ grid-template-columns: 1fr; }
  .price-card-featured{ transform:none; }
  .hero-stats{ gap: 1.6em; }
  .footer-inner{ grid-template-columns: 1fr; text-align:left; }
}

/* ===== Utility pages (404 / thank-you) ===== */
.utility-page{
  min-height: 78vh; display:flex; align-items:center;
  background: radial-gradient(120% 120% at 15% 0%, #201c4a 0%, var(--navy-2) 45%, var(--navy) 100%);
}
.utility-inner{ text-align:center; padding-block: 4em; color:#fff; }
.utility-mascot{ width:min(260px, 60vw); height:auto; margin: 0 auto 1.5em; filter: drop-shadow(0 24px 34px rgba(0,0,0,.4)); }
.utility-inner h1{ color:#fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.utility-inner p{ color: rgba(255,255,255,.78); max-width: 52ch; margin-inline:auto; }
.utility-inner a:not(.btn){ color: var(--accent); text-decoration: underline; }
.utility-inner .btn{ margin-top: 1em; }
.utility-page + .site-footer .footer-inner{ grid-template-columns: 1fr; text-align:center; }

/* ===== "What's not included" note under the pricing plans ===== */
.price-extras{
  margin-top: 2.5em;
  background: #fff;
  border: 1px solid rgba(21,18,51,.08);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.8em 2em;
  box-shadow: var(--shadow-sm);
}
.price-extras h3{ font-size: 1.05rem; color: var(--navy); margin-bottom: .9em; }
.price-extras ul{ display: grid; gap: .9em; grid-template-columns: repeat(3, 1fr); }
.price-extras li{ font-size: .92rem; line-height: 1.6; color: var(--text-soft); }
.price-extras li > strong:first-child{ color: var(--ink); display:block; margin-bottom:.15em; }
.price-extras li strong{ color: var(--ink); }
.price-extras code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: var(--paper-2); padding: .1em .35em; border-radius: 4px; color: var(--ink);
}
.extras-note{
  margin: 1.3em 0 0; padding-top: 1.1em; border-top: 1px solid rgba(21,18,51,.08);
  font-size: .9rem; color: var(--text-soft);
}
@media (max-width: 900px){
  .price-extras ul{ grid-template-columns: 1fr; }
  .price-extras{ padding: 1.5em 1.3em; }
}

/* ===== "From" prefix on open-ended pricing ===== */
.price-from{
  font-family: var(--font-body); font-size: .42em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft); vertical-align: middle; margin-right: .15em;
}
.price-card-featured .price-from{ color: rgba(255,255,255,.6); }

/* ===== Custom / complex project panel ===== */
.custom-quote{
  margin-top: 2.5em;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5em; align-items: center;
  background: radial-gradient(120% 140% at 12% 0%, #201c4a 0%, var(--navy-2) 55%, var(--navy) 100%);
  border-radius: var(--radius);
  padding: 2.4em 2.4em;
  box-shadow: var(--shadow-lg);
  color: #fff;
  position: relative; overflow: hidden;
}
.custom-quote::after{
  content:""; position:absolute; right:-120px; top:-120px; width:340px; height:340px;
  background: radial-gradient(circle, rgba(255,138,61,.32), transparent 70%);
  filter: blur(40px); pointer-events:none;
}
.custom-quote-copy, .custom-quote-cta{ position:relative; z-index:1; }
.custom-tag{
  text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 800;
  color: var(--accent); margin-bottom: .7em;
}
.custom-quote h3{ color:#fff; font-size: clamp(1.25rem, 2.2vw, 1.6rem); max-width: 24ch; }
.custom-quote p{ color: rgba(255,255,255,.78); }
.custom-examples{ display:grid; grid-template-columns: repeat(2, 1fr); gap: .5em 1.6em; margin-top: 1.2em; }
.custom-examples li{
  font-size: .9rem; color: rgba(255,255,255,.82); padding-left: 1.3em; position:relative; line-height:1.5;
}
.custom-examples li::before{
  content:"→"; position:absolute; left:0; color: var(--accent); font-weight:700;
}
.custom-quote-cta{
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm); padding: 1.6em; text-align:center;
}
.custom-price{
  font-family: var(--font-head); font-size: 1.9rem; color:#fff; margin: 0 0 .3em;
}
.custom-price .price-from{ color: rgba(255,255,255,.6); }
.custom-price-note{ font-size: .86rem; color: rgba(255,255,255,.7); margin-bottom: 1.2em; }
.custom-quote-cta .btn{ width: 100%; }

@media (max-width: 900px){
  .custom-quote{ grid-template-columns: 1fr; gap: 1.8em; padding: 1.9em 1.5em; }
  .custom-examples{ grid-template-columns: 1fr; }
  .custom-quote h3{ max-width: none; }
}