/* Liquid Metal Theme — site-wide */
:root{
  --ink:#d9e6ef;--sub:#9fb2c3;--bg:#0b1521;--card:#0f1d2c;--primary:#0ea5e9;--accent:#22c55e;--warn:#f59e0b;--danger:#ef4444;--muted:#2b3a4a;--radius:18px;--shadow:0 18px 50px rgba(2,12,22,.35);--maxw:1100px;
}

/* Base */
html,body{background:radial-gradient(1200px 1200px at 10% 10%, #0d2134 0%, #0b1623 45%, #07101a 100%);color:var(--ink)}
a{color:#bfeaff}

/* Reader Mode (append ?reader=1) */
html.reader, html.reader body{background:#ffffff;color:#111827}
html.reader .liquid-bg, html.reader header.site-header, html.reader .sticky-bar, html.reader .cta-band, html.reader footer.site-footer{display:none!important}
html.reader .hero::before{display:none!important}
html.reader .container{max-width:760px}
html.reader .card, html.reader .hero-side{background:#ffffff!important;border:1px solid #e5e7eb!important;box-shadow:none!important}
html.reader a{color:#0b5cad}
html.reader section{padding:28px 0}
html.reader .pill, html.reader .badge{display:none}
html.reader h1,h2,h3{color:#0f172a}
html.reader p, html.reader li{font-size:18px;line-height:1.7}

/* Centering tuned for readability */
header, .hero, .cta-band { text-align: center; }
.header-inner, .footer-inner { justify-content: center; gap: 14px; }
.nav, .navlinks, .hero-cta, .ribbon .bar { justify-content: center; }
.hero .wrap { justify-items: start; }
/* Default lists remain outside for readability */
ul, ol { list-style-position: outside; padding-left: 1.2rem; }

/* Header */
header.site-header{
  position: sticky; top: 0; z-index: 20; overflow:visible;
  background:linear-gradient(180deg, rgba(8,22,36,.55), rgba(7,16,26,.35));
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(31,46,61,.6);
  box-shadow:0 10px 30px rgba(2,12,22,.2);
}
/* Ensure dark header when body has .light class from legacy CSS */
.light .site-header{
  background:linear-gradient(180deg, rgba(8,22,36,.55), rgba(7,16,26,.35));
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(31,46,61,.6);
}
header.site-header::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 100% at 0% -40%, rgba(191,234,255,.14), transparent 60%),
  radial-gradient(120% 100% at 110% 20%, rgba(111,212,255,.10), transparent 70%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);
}
header.site-header::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-40%;width:40%;pointer-events:none;opacity:.25;
  background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0) 60%);
  transform:rotate(15deg) translateX(-120%);
  animation: headerSheen 8s linear infinite;
}
@keyframes headerSheen{0%{transform:rotate(15deg) translateX(-120%)}50%{transform:rotate(15deg) translateX(20%)}100%{transform:rotate(15deg) translateX(140%)}}
header.site-header.scrolled{
  background:linear-gradient(180deg, rgba(14,33,52,.88), rgba(10,22,36,.72));
  border-bottom-color:#1f2e3d;
  box-shadow:0 14px 36px rgba(2,12,22,.35);
}
header.site-header.menu-open{overflow:visible}
.nav a,.navlinks a{color:#d8e9f6;position:relative}
.light .nav a, .light .navlinks a{color:#d8e9f6}
.light .nav a:hover, .light .navlinks a:hover{background:rgba(255,255,255,.06);color:#ffffff}
.nav a:hover,.navlinks a:hover{background:rgba(255,255,255,.06);color:#ffffff}
.nav a::after,.navlinks a::after{content:"";position:absolute;left:10%;right:10%;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,#7dd3fc,transparent);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease;opacity:.9}
.nav a:hover::after,.nav a:focus-visible::after,.navlinks a:hover::after,.navlinks a:focus-visible::after{transform:scaleX(1)}
.nav-toggle{display:none;align-items:center;gap:.5rem;border:1px solid #2a4a63;color:#bfeaff;background:transparent;border-radius:10px;padding:.5rem .7rem;font-weight:800}
.nav-toggle svg{width:22px;height:22px}
@media(max-width:900px){
  .brand-text{display:none}
  .nav-toggle{display:inline-flex}
  header.site-header .nav{position:absolute;left:0;right:0;top:100%;
    background:linear-gradient(180deg, rgba(15,31,48,.85), rgba(10,22,36,.8));
    border-bottom:1px solid rgba(31,46,61,.6);
    -webkit-backdrop-filter:blur(10px) saturate(150%);
    backdrop-filter:blur(10px) saturate(150%);
    flex-direction:column;gap:8px;z-index:999;align-items:flex-start;
    display:flex;overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);
    padding:0 16px;will-change:max-height,opacity,transform;
    transition:max-height .35s ease, opacity .25s ease, transform .35s ease, padding .2s ease;pointer-events:none}
  header.site-header.menu-open .nav{max-height:70vh;opacity:1;transform:translateY(0);padding:12px 16px;pointer-events:auto}
  header.site-header .nav a{display:block;padding:.7rem .9rem;border-radius:10px;width:100%}
}
.brand .logo{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;letter-spacing:.5px;color:#0b1b2b;position:relative;overflow:hidden}
.brand .logo::before{content:"";position:absolute;inset:0;background:
  linear-gradient(135deg, #bfeaff 0%, #ffffff 8%, #91dfff 18%, #0e2a42 52%, #173a57 60%, #5ecbff 78%, #bfeaff 92%);filter:saturate(120%)}
.brand .logo::after{content:"";position:absolute;inset:-30% -30% auto;height:70%;background:linear-gradient( to right, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);transform:rotate(20deg);opacity:.6}
.brand .logo span{position:relative;z-index:1;mix-blend-mode:multiply}
/* Image logo variant */
.brand .logo-img{height:30px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(125,211,252,.35))}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(280px,.9fr);align-items:center}
.hero::before{content:"";position:absolute;inset:-30% -30% -40% -30%;pointer-events:none;filter:blur(40px) saturate(140%);opacity:.55;background:
  radial-gradient(700px 700px at 12% 24%, #1b4e70 0%, transparent 60%),
  radial-gradient(800px 800px at 88% 18%, #0f2d45 0%, transparent 60%),
  radial-gradient(600px 600px at 55% 92%, #143a55 0%, transparent 60%),
  radial-gradient(500px 500px at 40% 40%, #0ea5e9 0%, transparent 55%);
  animation: drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(0,-3%,0) scale(1.04) rotate(.5deg)}}
.hero p.lede{color:#c6d9e6}
.hero .wrap > div, .hero-side { text-align: left; }
/* Prevent awkward word splits in headings */
h1, h2, h3{word-break: normal; overflow-wrap: normal; hyphens: manual}
.hero h1{text-wrap: balance;}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr!important}
  .hero-side{max-width:100%; width:100%; margin-top:12px}
}

/* Cards and tiles */
.card,.hero-side{background:linear-gradient(180deg, rgba(17,36,54,.92), rgba(14,29,45,.92));border:1px solid #1a2c3d;border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-side{max-width:380px}
.card::before,.hero-side::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%),linear-gradient( to right, rgba(255,255,255,.05), rgba(255,255,255,0) 60%);pointer-events:none}
.tile{background:linear-gradient(180deg, rgba(17,36,54,.92), rgba(14,29,45,.92));border:1px solid #1a2c3d;box-shadow:var(--shadow)}
.tile, .card { text-align: left; }
.tile .letter{color:#7dd3fc}
/* prepare for subtle tilts */
.card,.tile,.price-card,.cta-band{will-change:transform;transform-style:preserve-3d}

/* Pills, badges, buttons */
.pill{background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));border:1px solid #1f3142;color:#d9eefb;box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(2,12,22,.25)}
.pill::after{content:"";width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #ffffff, #7dd3fc 60%, transparent 61%);margin-left:.25rem;box-shadow:0 0 24px #7dd3fc88}
.badge{background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));border:1px solid #1f3142;color:#d9eefb}
.btn{border-radius:999px;border:2px solid transparent;transition:.25s ease;position:relative;isolation:isolate}
.btn.primary,.btn-primary{color:#04121d;background:radial-gradient(200% 180% at 50% -10%, #bfeaff 0%, #6fd4ff 18%, #0ea5e9 28%, #0d6ea0 60%, #0b3653 100%);box-shadow:0 12px 26px rgba(14,165,233,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary::after,.btn-primary::after{content:"";position:absolute;inset:-40% -20% auto;height:60%;background:linear-gradient(100deg, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);transform:translateX(-120%) rotate(8deg);opacity:.6;transition:transform .6s ease}
.btn.primary:hover::after,.btn-primary:hover::after{transform:translateX(40%) rotate(8deg)}
.btn.outline,.btn-secondary{background:transparent;border-color:#2a4a63;color:#bfeaff}
.btn.outline:hover,.btn-secondary:hover{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
/* nav link ripple host */
.nav a { overflow:hidden }

/* Forms */
fieldset{border:1px solid #1d3143;border-radius:16px;background:linear-gradient(180deg, rgba(10,26,40,.35), rgba(10,26,40,.18))}
label.option{border:1px solid #1d2f41;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));transition:background .2s,border-color .2s,transform .2s, box-shadow .2s}
label.option:hover{background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));border-color:#2a4358;transform:translateY(-1px)}
label.option:has(input:checked){border-color:#0ea5e9;background:linear-gradient(180deg, rgba(14,165,233,.18), rgba(14,165,233,.06));box-shadow:0 0 0 3px rgba(14,165,233,.15) inset}
input[type=radio],input[type=checkbox]{accent-color:#0ea5e9}

/* Meter */
.meter{height:14px;background:linear-gradient(180deg, #0c2134, #0a1a29);border:1px solid #1d2f41;border-radius:999px;overflow:hidden;position:relative}
.meter > div{height:100%;background:linear-gradient(90deg,#22c55e,#0ea5e9);width:0%;transition:width .35s ease}
.meter > div::after{content:"";position:absolute;inset:0;left:-50%;width:50%;background:linear-gradient(100deg, rgba(255,255,255,.45), rgba(255,255,255,0));mix-blend-mode:screen;animation:shine 2.6s linear infinite}
@keyframes shine{to{transform:translateX(300%)}}

/* CTA band */
.cta-band{background:linear-gradient(140deg, #071827, #0a2236 40%, #0b3150);color:#e6f6ff;border-radius:18px;position:relative;overflow:hidden;border:1px solid #1f3346}
.cta-band::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:120%;background:radial-gradient(60% 100% at 50% 100%, rgba(125,211,252,.4), rgba(125,211,252,0));filter:blur(20px)}

/* Misc */
.muted{color:var(--sub)}
footer.site-footer{background:linear-gradient(180deg,#0a1a2a,#0b1726);border-top:1px solid #1f2e3d;color:var(--sub)}
.footer-inner a{color:#cfe3f2}
.footer-inner a:hover{color:white}

/* Timeline overrides (index) */
.timeline::before{background:#1e3142}
.step .dot{background:#0ea5e9;border:2px solid #0a2030;box-shadow:0 0 0 3px #0c2c44}

/* Pricing overrides (index) */
.price-card{background:linear-gradient(180deg, rgba(17,36,54,.92), rgba(14,29,45,.92));border-color:#1a2c3d}
.price-card.highlight{border-color:#2a4a63;background:linear-gradient(180deg, rgba(17,36,54,.95), rgba(14,29,45,.95))}
.pm-note{color:#b8c8d6;background:#0c1f30;border:1px dashed #264257}
/* Centered pricing/retainers layout */
.pricing{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 320px));gap:14px;justify-content:center}
/* Scheduler embed improvements */
.scheduler-frame{margin-top:16px; position:relative; z-index:1; padding:14px; border-radius:18px; overflow:hidden;
  /* Frosted gray glass */
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border:1px solid rgba(205,215,228,.35);
  box-shadow:0 18px 50px rgba(2,12,22,.35), inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}
body .scheduler-frame iframe{width:100%; height:clamp(70vh, calc(100vh - 160px), 1100px); background:#0d2336; border:1px solid #1a2c3d; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); filter:contrast(1.28) brightness(1.15) saturate(1.05); -webkit-filter:contrast(1.28) brightness(1.15) saturate(1.05)}

/* Details (index FAQ) */
details{border:1px solid #1a2c3d;background:linear-gradient(180deg, rgba(17,36,54,.92), rgba(14,29,45,.92))}

/* Global liquid background */
.liquid-bg{position:fixed;inset:-10% -10% -20% -10%;pointer-events:none;z-index:0;opacity:.35}
.liquid-bg span{position:absolute;width:52vmax;height:52vmax;border-radius:50%;filter:blur(40px);mix-blend-mode:screen}
.liquid-bg .b1{left:-8%;top:-8%;background:radial-gradient(50% 50% at 50% 50%, #0ea5e9 0%, #0b2b42 55%, transparent 60%);animation:float1 24s ease-in-out infinite}
.liquid-bg .b2{right:-14%;top:10%;background:radial-gradient(50% 50% at 50% 50%, #1a4c6d 0%, #0a2236 50%, transparent 60%);animation:float2 28s ease-in-out infinite}
.liquid-bg .b3{left:20%;bottom:-18%;background:radial-gradient(50% 50% at 50% 50%, #76d2ff 0%, #0e2134 48%, transparent 60%);animation:float3 26s ease-in-out infinite}
@keyframes float1{50%{transform:translate(6%,6%) scale(1.04)}100%{transform:translate(3%,-4%) scale(1)}}
@keyframes float2{50%{transform:translate(-8%,2%) scale(1.03)}100%{transform:translate(4%,-4%) scale(1)}}
@keyframes float3{50%{transform:translate(-5%,-4%) scale(1.05)}100%{transform:translate(2%,6%) scale(1)}}

/* Character and ripple helpers for JS animations */
.char{display:inline-block}
.btn .ripple,.btn-primary .ripple,.btn-secondary .ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 70%);pointer-events:none;mix-blend-mode:screen;opacity:.0}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero::before,.btn.primary::after,.btn-primary::after,.meter > div::after,.liquid-bg span, header.site-header::after{animation:none}
  .btn.primary::after,.btn-primary::after{display:none}
}

/* Utilities (index overrides) */
.text-primary{color:var(--primary)}
hr.sep{border:none;border-top:1px solid var(--muted);margin:12px 0}
.eyebrow{font-weight:800;margin-bottom:6px}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.my-6{margin-top:6px;margin-bottom:6px}
.my-04{margin-top:.4rem;margin-bottom:.4rem}
.m-0{margin:0}
.row-wrap{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.row{display:flex;gap:.4rem}
.small-subtle{font-size:.78rem;opacity:.85}
.btn-sm{padding:.6rem .9rem}