/* ═══════════════════════════════════════════════════════════════════
   DOUBLE DOWN AI — PREMIUM LAYER (2026, v2 — fast, smooth, mobile)
   Sits on top of dd-upgrade + dd-ultra + dd-mobile.
   PURE ADDITIVE — never overrides brand identity.
   Goal: clean, bold, premium feel. Refined typography rhythm,
   smoother animations, mobile-first polish, NO custom cursor.
   ═══════════════════════════════════════════════════════════════════ */

/* Instrument Serif italic — fancy accent font (loaded once, used site-wide) */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* ── Tokens (additive, namespaced 'p-') ───────────────────────────── */
:root{
  --p-ease:cubic-bezier(.22,1,.36,1);
  --p-ease-snap:cubic-bezier(.16,1,.3,1);
  --p-ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --p-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --p-shadow-2:0 8px 24px -8px rgba(0,0,0,.6);
  --p-shadow-3:0 24px 60px -16px rgba(0,0,0,.7);
  --p-shadow-glow-g:0 0 0 1px rgba(16,185,129,.18),0 24px 64px -16px rgba(16,185,129,.32);
  --p-shadow-glow-au:0 0 0 1px rgba(212,175,55,.22),0 24px 64px -16px rgba(212,175,55,.32);
  --p-line:rgba(255,255,255,.06);
  --p-line-hot:rgba(16,185,129,.22);
  --p-line-au:rgba(212,175,55,.22);
}

/* ── Typography rhythm refinement ─────────────────────────────────── */
/* Tighten heading letter-spacing on large displays; loosen body */
.hero-h1, .sec-h, .ctab-h, .ddtl-h,
h1.text-4xl, h1.text-5xl, h1.text-6xl, h1.text-7xl,
h2.text-3xl, h2.text-4xl, h2.text-5xl{
  font-feature-settings:"ss01" on, "ss02" on, "kern" on, "liga" on;
  text-wrap:balance;
}

@media (min-width:881px){
  .hero-h1{letter-spacing:-1.4px}
  .sec-h{letter-spacing:-1.6px}
  .ctab-h{letter-spacing:-2px}
  .ddtl-h{letter-spacing:-1.5px}
}

/* Body copy — improve readability */
.hero-sub, .sec-p, .ctab-p, .ddtl-sub{
  text-wrap:pretty;
  hanging-punctuation:first last;
}

/* ── Section rhythm — tighter, more confident spacing ─────────────── */
@media (min-width:881px){
  #hero{padding-top:80px}
  section + section{position:relative}
}

/* ── Premium reveal — replaces the basic .reveal with smoother stagger
     Falls through to existing .reveal animation if .p-reveal not present ── */
.p-reveal{opacity:0;transform:translateY(40px) scale(.985);transition:opacity .9s var(--p-ease),transform .9s var(--p-ease);will-change:transform,opacity}
.p-reveal.in{opacity:1;transform:none}
.p-reveal[data-delay="1"]{transition-delay:.06s}
.p-reveal[data-delay="2"]{transition-delay:.12s}
.p-reveal[data-delay="3"]{transition-delay:.18s}
.p-reveal[data-delay="4"]{transition-delay:.24s}
.p-reveal[data-delay="5"]{transition-delay:.3s}
.p-reveal[data-delay="6"]{transition-delay:.36s}

/* Apply smoother easing to existing .reveal too */
.reveal{transition:opacity .9s var(--p-ease),transform .9s var(--p-ease)!important}

@media (prefers-reduced-motion:reduce){
  .p-reveal,.reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── Magnetic button — pure CSS hover scaling (JS adds tracking) ─── */
.btn-p, .btn-s, .btn-glow, .btn-xl, .nav-btn,
button[class*="btn"], a[class*="btn"]{
  transition:transform .35s var(--p-ease), box-shadow .35s var(--p-ease), background .35s var(--p-ease), color .35s var(--p-ease), border-color .35s var(--p-ease);
  will-change:transform;
}

.btn-p:active, .btn-s:active, .btn-glow:active, .btn-xl:active, .nav-btn:active{transform:scale(.97)}

.p-magnetic{transition:transform .25s var(--p-ease)}

/* Refined nav CTA hover */
.nav-btn{
  position:relative;
  overflow:hidden;
}
.nav-btn::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,#d4af37,#b8860b);
  opacity:0;
  transition:opacity .35s var(--p-ease);
}
.nav-btn span,.nav-btn>*{position:relative;z-index:1}
.nav-btn:hover::before{opacity:1}

/* ── Premium card hover — adds subtle 3D depth to existing cards ── */
.scard, .pcard, .tcard, .cw-card, .vt-card, .it-card, .prc-card{
  transition:transform .5s var(--p-ease), border-color .5s var(--p-ease), box-shadow .5s var(--p-ease), background .5s var(--p-ease);
  transform-style:preserve-3d;
}

/* Multi-layer shadow refinement on hover */
.scard:hover, .pcard:hover, .tcard:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 60px -16px rgba(0,0,0,.6),
    0 0 0 1px rgba(16,185,129,.18),
    0 0 32px rgba(16,185,129,.08) !important;
}
.sgold:hover, .scard.sgold:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 60px -16px rgba(0,0,0,.6),
    0 0 0 1px rgba(212,175,55,.22),
    0 0 32px rgba(212,175,55,.08) !important;
}

/* ── Premium gradient text — sharper edge, smoother shimmer ────── */
.hero-h1 .l2, .gradient-text, .ctab-h span, .ddtl-h em{
  background:linear-gradient(120deg,#10b981 0%,#34d399 25%,#d4af37 55%,#f6d77a 75%,#10b981 100%)!important;
  background-size:200% auto!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  animation:pShimmer 6s linear infinite!important;
}
@keyframes pShimmer{
  0%{background-position:0% center}
  100%{background-position:200% center}
}

/* ── Instrument Serif italic accent (smaller headings & inline spans) ─── */
/* Big H1 headings stay in Syne (DD AI official font) — bold, sans, dramatic */
h1, .hero-h1{
  font-family:'Syne',sans-serif !important;
  font-style:normal !important;
}
h1 .gradient-text,h1 > .gradient-text,h1 span.gradient-text,
.hero-h1 .gradient-text,.hero-h1 .l2{
  font-family:'Syne',sans-serif !important;
  font-style:normal !important;
  font-weight:800 !important;
  letter-spacing:-1.5px !important;
}

/* Smaller H2/H3 headings get the fancy Instrument Serif italic accent */
.dd-fancy,
:is(h2,h3).gradient-text,
:is(h2,h3) .gradient-text,
:is(h2,h3) > span.gradient-text,
.sec-h .gradient-text,
.ctab-h span.gradient-text,
.ddtl-h em,
.ph .a{
  font-family:'Instrument Serif','Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;
  font-weight:500 !important;
  letter-spacing:-.5px !important;
  font-size:1.5em !important;
  line-height:1.0 !important;
}

/* When the entire H2 is .gradient-text, soften but keep impact */
:is(h2,h3).gradient-text{
  font-weight:500 !important;
  letter-spacing:-1px !important;
}

/* Restore weight balance for big H2s if they have font-black + gradient-text */
:is(h2,h3).font-black.gradient-text,
:is(h2,h3).gradient-text.font-black{
  font-weight:500 !important; /* italic Serif looks too heavy at 900 */
}

/* Helper class for any custom fancy accent inline */
.dd-fancy{display:inline-block}

/* ── Eyebrow / mono accent — Webbon-style refinement ──────────── */
.sec-tag, .hero-badge, .eyebrow, [class*="badge"]{
  font-feature-settings:"tnum" on, "kern" on;
  font-variant-numeric:tabular-nums;
}

.sec-tag{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:8px 16px 8px 14px;
  font-size:10.5px;
  letter-spacing:2.5px;
  position:relative;
}
.sec-tag::before{
  content:'';
  width:18px;height:1px;
  background:currentColor;
  opacity:.6;
}

/* ── Section divider — premium hairline ──────────────────────── */
.p-divider{
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--p-line-hot),var(--p-line-au),transparent);
  position:relative;
  overflow:hidden;
}
.p-divider::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:30%;height:100%;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  opacity:.6;
  animation:pDividerSweep 6s var(--p-ease) infinite;
}
@keyframes pDividerSweep{
  0%{left:-30%}
  100%{left:100%}
}

/* ── Scroll-anchored "kicker" — small Webbon-style label above headings ── */
.p-kicker{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:'Space Mono',monospace;
  font-size:10.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--g);
  margin-bottom:18px;
}
.p-kicker::before{
  content:'';
  width:24px;height:1px;
  background:currentColor;
  opacity:.6;
}
.p-kicker.au{color:var(--gold)}

/* ── Premium form field — applies to contact + book-call ────── */
.p-field{position:relative;margin-bottom:24px}
.p-field input,.p-field textarea,.p-field select{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:18px 4px 14px;
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:15.5px;
  outline:none;
  transition:border-color .35s var(--p-ease);
  border-radius:0;
}
.p-field input:focus,.p-field textarea:focus,.p-field select:focus{
  border-bottom-color:var(--g);
}
.p-field label{
  position:absolute;
  left:4px;top:18px;
  font-family:'Space Mono',monospace;
  font-size:10.5px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  pointer-events:none;
  transition:all .35s var(--p-ease);
}
.p-field input:focus~label,
.p-field input:not(:placeholder-shown)~label,
.p-field textarea:focus~label,
.p-field textarea:not(:placeholder-shown)~label,
.p-field select:focus~label,
.p-field select:not([value=""])~label{
  top:0;font-size:9.5px;color:var(--g);
}
.p-field select option{background:#0a0a0a;color:#fff}

/* ── Premium time-slot grid (book-call) ────────────────────── */
.p-slot{
  position:relative;
  padding:14px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
  cursor:pointer;
  transition:all .3s var(--p-ease);
  font-family:'Outfit',sans-serif;
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,.78);
}
.p-slot:hover{
  background:rgba(16,185,129,.06);
  border-color:rgba(16,185,129,.32);
  transform:translateY(-2px);
  color:var(--g);
}
.p-slot.selected{
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(212,175,55,.08));
  border-color:var(--g);
  color:var(--g);
  box-shadow:0 0 0 2px rgba(16,185,129,.2);
}
.p-slot.taken{
  opacity:.32;
  cursor:not-allowed;
  text-decoration:line-through;
  pointer-events:none;
}
.p-slot.loading{
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.3);
  cursor:wait;
}

/* ── Premium hero label / pulse-dot ────────────────────────── */
.p-pulse-dot{
  position:relative;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--g);
  flex-shrink:0;
}
.p-pulse-dot::before{
  content:'';
  position:absolute;inset:-4px;
  border-radius:50%;
  background:var(--g);
  opacity:.4;
  animation:pPulse 2s var(--p-ease) infinite;
}
@keyframes pPulse{
  0%{transform:scale(.6);opacity:.6}
  100%{transform:scale(1.8);opacity:0}
}

/* ── Glass panel — refined Webbon-style depth ──────────────── */
.p-panel{
  position:relative;
  background:linear-gradient(180deg,rgba(14,14,18,.72) 0%,rgba(8,8,10,.82) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  overflow:hidden;
  box-shadow:var(--p-shadow-3);
}
.p-panel::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  pointer-events:none;
}
.p-panel.gold{border-color:rgba(212,175,55,.28);box-shadow:var(--p-shadow-3),0 0 32px rgba(212,175,55,.06)}
.p-panel.green{border-color:rgba(16,185,129,.28);box-shadow:var(--p-shadow-3),0 0 32px rgba(16,185,129,.06)}

/* ── Marquee — premium edge-fade ───────────────────────────── */
.tkw{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}

/* ── Cursor following blob/spotlight — DISABLED globally (user request) ─── */
.p-cursor-dot,.p-cursor-ring,.dd-blob-cursor{display:none!important;visibility:hidden!important;opacity:0!important}
body.dd-spotlight::after,html.dd-spotlight::after{display:none!important;background:none!important;opacity:0!important}
/* Native cursors only */
html,body{cursor:auto}

/* ── Mobile polish — bigger tap targets, premium spacing ───── */
@media (max-width:720px){
  .hero-h1{letter-spacing:-.4px;text-wrap:balance}
  .sec-h{letter-spacing:-.7px;font-size:clamp(26px,7vw,42px)!important;line-height:1.08!important}
  .sec-p{font-size:15px!important;line-height:1.7!important}
  .hero-sub{font-size:15px!important;line-height:1.7!important}

  /* Bigger tap targets */
  .btn-p, .btn-s, .btn-glow, .btn-xl, .nav-btn{
    min-height:48px;
    padding:14px 24px!important;
    font-size:14.5px!important;
  }

  /* Cleaner mobile cards */
  .scard, .pcard, .p-panel{
    border-radius:18px;
  }

  /* Reduce hero perspective on mobile (was inline) */
  .hcw{transform:none!important}

  /* Section padding tightened */
  section{padding-left:18px;padding-right:18px}

  /* Form spacing */
  .p-field{margin-bottom:20px}
  .p-field input,.p-field textarea,.p-field select{
    font-size:16px; /* iOS prevents zoom at 16px+ */
    padding:16px 4px 12px;
  }
}

/* ── Footer polish — hairline depth ────────────────────────── */
footer{position:relative}
footer::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(16,185,129,.22),rgba(212,175,55,.22),transparent);
}

/* ── FAQ — refined accordion ────────────────────────────────── */
.p-faq summary, .faq-item summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding:24px 56px 24px 0;
  font-family:'Syne',sans-serif;
  font-weight:700;
  font-size:clamp(16px,2vw,20px);
  color:#fff;
  transition:color .3s var(--p-ease);
  border-top:1px solid var(--p-line);
}
.p-faq summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker{display:none}
.p-faq summary::after, .faq-item summary::after{
  content:'+';
  position:absolute;
  right:8px;top:50%;
  transform:translateY(-50%);
  width:32px;height:32px;
  border:1px solid var(--g);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--g);
  font-weight:300;
  font-size:18px;
  transition:all .35s var(--p-ease);
}
.p-faq[open] summary::after, .faq-item[open] summary::after{
  transform:translateY(-50%) rotate(45deg);
  background:var(--g);color:#000;
}
.p-faq summary:hover, .faq-item summary:hover{color:var(--g)}
.p-faq[open] summary{border-bottom:1px solid var(--p-line-hot)}

/* ── Number counter premium feel ─────────────────────────────── */
[data-count]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" on}

/* ── Premium contact / book-call hero ───────────────────────── */
.p-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:120px 24px 80px;
  overflow:hidden;
  background:#030303;
}
@media (max-width:720px){
  .p-hero{min-height:auto;padding:120px 18px 60px}
}
.p-hero::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 25% 25%,rgba(16,185,129,.12) 0%,transparent 45%),
    radial-gradient(ellipse at 75% 75%,rgba(212,175,55,.08) 0%,transparent 45%),
    radial-gradient(ellipse at 50% 100%,rgba(34,211,238,.06) 0%,transparent 50%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}
.p-hero::after{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(16,185,129,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,185,129,.022) 1px,transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}
.p-hero-inner{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

/* Decorative orbits in hero corners */
.p-orbit{
  position:absolute;
  border:1px solid rgba(212,175,55,.08);
  border-radius:50%;
  pointer-events:none;
  animation:pOrbit 60s linear infinite;
}
.p-orbit::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  width:6px;height:6px;
  background:var(--gold);
  border-radius:50%;
  transform:translateX(-50%);
  box-shadow:0 0 16px var(--gold);
}
@keyframes pOrbit{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* ── Selection ─────────────────────────────────────────────── */
::selection{background:var(--g);color:#000}
::-moz-selection{background:var(--g);color:#000}

/* ── Premium link underline animation ──────────────────────── */
.p-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--g);
  font-weight:600;
  letter-spacing:.04em;
  padding:6px 0;
  transition:gap .35s var(--p-ease);
}
.p-link::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(.3);
  transform-origin:left;
  transition:transform .35s var(--p-ease);
}
.p-link:hover{gap:.85rem}
.p-link:hover::after{transform:scaleX(1)}

/* ── Footer mega-text Webbon style (optional opt-in via class) ── */
.p-mega{
  font-family:'Syne',sans-serif;
  font-weight:800;
  font-size:clamp(80px,16vw,240px);
  line-height:.85;
  letter-spacing:-.04em;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1px rgba(212,175,55,.18);
  user-select:none;
  pointer-events:none;
  margin:24px 0;
}

/* ── Premium scroll-progress refinement ─────────────────────── */
.dd-prog{
  height:2px!important;
  background:linear-gradient(90deg,#10b981 0%,#34d399 35%,#d4af37 70%,#f6d77a 100%)!important;
}

/* ── Refined nav logo on hover ─────────────────────────────── */
.nav-logo{
  transition:transform .4s var(--p-ease);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav-logo:hover{transform:translateY(-1px)}
.nav-logo::after{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:var(--g);
  box-shadow:0 0 8px var(--g);
  margin-left:2px;
  opacity:0;
  transition:opacity .4s var(--p-ease);
}
.nav-logo:hover::after{opacity:1}

/* ── Premium button shine sweep ─────────────────────────────── */
.btn-glow, .btn-p{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-glow::after, .btn-p::after{
  content:'';
  position:absolute;
  top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.32),transparent);
  transition:left .8s var(--p-ease);
  pointer-events:none;
  z-index:1;
}
.btn-glow:hover::after, .btn-p:hover::after{left:120%}

/* ── Reduce motion globally ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
  .p-cursor-dot,.p-cursor-ring{display:none!important}
}

/* ── Premium form upgrade for contact + book-call ─────────────── */
/* Targets the existing Tailwind-based forms — additive only */
#contactForm input,
#contactForm select,
#contactForm textarea,
#bookCallForm input:not([type=hidden]):not([type=date]),
#bookCallForm select,
#bookCallForm textarea,
.form-field input:not([type=hidden]):not([type=date]),
.form-field select,
.form-field textarea{
  background:rgba(8,8,10,.55) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  font-family:'Outfit',sans-serif !important;
  font-size:15px !important;
  color:#fff !important;
  transition:border-color .35s var(--p-ease), background .35s var(--p-ease), box-shadow .35s var(--p-ease) !important;
  outline:none !important;
}
#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus,
#bookCallForm input:focus,
#bookCallForm select:focus,
#bookCallForm textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:rgba(16,185,129,.5) !important;
  background:rgba(12,12,14,.7) !important;
  box-shadow:0 0 0 3px rgba(16,185,129,.08) !important;
}
#contactForm label,
#bookCallForm label,
.form-field label{
  font-family:'Space Mono',monospace !important;
  font-size:10.5px !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.55) !important;
  font-weight:500 !important;
  margin-bottom:10px !important;
  display:block !important;
}
#contactForm textarea,
#bookCallForm textarea,
.form-field textarea{
  min-height:110px;
  resize:vertical;
}
#contactForm select option,
#bookCallForm select option{
  background:#0a0a0a;
  color:#fff;
}
#contactForm input::placeholder,
#bookCallForm input::placeholder,
.form-field input::placeholder,
#contactForm textarea::placeholder,
#bookCallForm textarea::placeholder,
.form-field textarea::placeholder{
  color:rgba(255,255,255,.28) !important;
}

/* Premium time-slot grid in book-call */
#bookCallForm .time-grid, .time-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:10px !important;
  margin-top:12px;
}
@media (max-width:560px){
  #bookCallForm .time-grid, .time-grid{grid-template-columns:repeat(2,1fr) !important}
}
#bookCallForm .time-slot, .time-slot{
  position:relative;
  padding:12px 10px;
  border-radius:12px;
  background:rgba(8,8,10,.55);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
  cursor:pointer;
  transition:all .3s var(--p-ease);
  font-family:'Outfit',sans-serif;
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,.78);
  user-select:none;
}
#bookCallForm .time-slot:hover, .time-slot:hover{
  background:rgba(16,185,129,.08);
  border-color:rgba(16,185,129,.32);
  transform:translateY(-2px);
  color:#10b981;
}
#bookCallForm .time-slot.selected, .time-slot.selected{
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(212,175,55,.08));
  border-color:#10b981;
  color:#10b981;
  box-shadow:0 0 0 2px rgba(16,185,129,.2);
}
#bookCallForm .time-slot.taken, .time-slot.taken{
  opacity:.32;
  cursor:not-allowed;
  text-decoration:line-through;
  pointer-events:none;
}
#bookCallForm .time-slot.loading, .time-slot.loading{
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.3);
  cursor:wait;
}

#bookCallForm .quick-date-btn, .quick-date-btn{
  padding:8px 16px !important;
  border-radius:100px !important;
  background:rgba(212,175,55,.06) !important;
  border:1px solid rgba(212,175,55,.22) !important;
  color:#d4af37 !important;
  font-family:'Outfit',sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  cursor:pointer !important;
  transition:all .3s var(--p-ease) !important;
}
#bookCallForm .quick-date-btn:hover, .quick-date-btn:hover{
  background:rgba(212,175,55,.14) !important;
  border-color:rgba(212,175,55,.5) !important;
  transform:translateY(-1px) !important;
}

#slotLoadingMsg{
  font-family:'Space Mono',monospace !important;
  font-size:11px !important;
  letter-spacing:.15em !important;
  color:#10b981 !important;
  margin-top:10px !important;
  text-align:center !important;
}

/* Refined benefit-badge */
.benefit-badge{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:rgba(212,175,55,.04);
  border:1px solid rgba(212,175,55,.14);
  border-radius:14px;
  transition:all .3s var(--p-ease);
}
.benefit-badge:hover{
  background:rgba(212,175,55,.08);
  border-color:rgba(212,175,55,.28);
  transform:translateX(2px);
}

/* Refined Send button on contact form */
#contactForm button[type=submit]{
  margin-top:8px;
  padding:18px 28px !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  border-radius:100px !important;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%) !important;
  color:#000 !important;
  border:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(16,185,129,.32) !important;
  transition:all .35s var(--p-ease) !important;
}
#contactForm button[type=submit]:hover{
  background:linear-gradient(135deg,#d4af37 0%,#b8860b 100%) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 32px rgba(212,175,55,.4) !important;
  color:#000 !important;
}

/* Refined Confirm button on book-call form */
#bookCallForm button[type=submit]{
  margin-top:8px;
  padding:18px 28px !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  border-radius:100px !important;
  background:linear-gradient(135deg,#10b981 0%,#d4af37 100%) !important;
  color:#000 !important;
  border:none !important;
  cursor:pointer !important;
  position:relative !important;
  overflow:hidden !important;
  box-shadow:0 8px 32px rgba(16,185,129,.4) !important;
  transition:all .35s var(--p-ease) !important;
}
#bookCallForm button[type=submit]:hover{
  transform:translateY(-2px) scale(1.01) !important;
  box-shadow:0 16px 48px rgba(16,185,129,.55), 0 0 64px rgba(212,175,55,.18) !important;
}

/* Date input styling */
#callDate, input[type=date]{
  background:rgba(8,8,10,.55) !important;
  border:1px solid rgba(16,185,129,.22) !important;
  border-radius:12px !important;
  padding:14px 16px !important;
  color:#fff !important;
  font-size:15px !important;
  width:100% !important;
  outline:none !important;
  font-family:'Outfit',sans-serif !important;
  color-scheme:dark;
}

/* Premium "What Happens / Every Client" badge polish on book-call */

/* Premium section spacing on contact + book-call hero */
@media (min-width:881px){
  body[class*=""] section.relative.pt-32{padding-top:120px}
}

/* ═══════════════════════════════════════════════════════════════════
   PERFORMANCE LAYER — fast first paint, smooth scroll, no jank
   ═══════════════════════════════════════════════════════════════════ */

/* Fade-in body so first paint feels intentional, not flashy */
html{background:#030303}
body{opacity:1;transition:opacity .35s ease}

/* ── Loader: smooth fade in/out, no reverse-glitch ─────────────── */
#loader{
  background:#030303 !important;
  transition:opacity .55s var(--p-ease), visibility 0s linear .55s !important;
  animation:pLoaderIn .35s var(--p-ease) both;
  will-change:opacity;
}
@keyframes pLoaderIn{from{opacity:0}to{opacity:1}}
#loader.exit{
  opacity:0 !important;
  transform:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
/* Center column safer rendering */
#loader .l-logo{will-change:transform,opacity;contain:layout style}
#loader .l-name{
  animation:pLoaderName .9s var(--p-ease) .15s both !important;
  transform:none !important;
  font-feature-settings:"kern" on, "liga" on;
}
@keyframes pLoaderName{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
#loader .l-sub{animation:pLoaderUp .55s var(--p-ease) .55s both !important}
#loader .l-bar{animation:pLoaderUp .45s var(--p-ease) .65s both !important}
@keyframes pLoaderUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#loader .l-fill{
  animation:pLoaderFill 1.4s cubic-bezier(.16,1,.3,1) .65s forwards !important;
  background:linear-gradient(90deg,var(--g),var(--gold),var(--g)) !important;
  background-size:200% 100% !important;
  animation-name:pLoaderFill, pLoaderShimmer !important;
  animation-duration:1.4s, 1.6s !important;
  animation-timing-function:cubic-bezier(.16,1,.3,1), linear !important;
  animation-delay:.65s, .65s !important;
  animation-iteration-count:1, infinite !important;
  animation-fill-mode:forwards, none !important;
}
@keyframes pLoaderFill{from{width:0}to{width:100%}}
@keyframes pLoaderShimmer{from{background-position:0% 50%}to{background-position:200% 50%}}

/* Hide the loader particle canvas on mobile — pure overhead */
@media (max-width:760px){
  #lc{display:none !important}
}

/* ── Repaint reduction: contain off-screen sections ─────────── */
section{contain:layout style}
.scard,.pcard,.tcard,.p-panel,.work-card,.faq-item{contain:layout style}

/* Use content-visibility to skip rendering far-offscreen sections */
@supports (content-visibility:auto){
  section:not(.hero):not(:first-of-type){
    content-visibility:auto;
    contain-intrinsic-size:auto 800px;
  }
}

/* Will-change carefully scoped (only on hover or focus, not always) */
.scard,.pcard,.p-panel,.tcard{will-change:auto}
.scard:hover,.pcard:hover,.p-panel:hover,.tcard:hover{will-change:transform}

/* Disable heavy, decorative GPU effects on low-end / mobile */
@media (max-width:900px){
  .dd-aurora-bg{filter:blur(40px) saturate(1.1) !important; opacity:.5 !important}
  .dd-blob,.dd-blob-2{display:none !important}
  /* Reduce shimmer animation FPS load */
  .hero-h1 .l2,.gradient-text{animation-duration:8s !important}
  /* Background canvas — too expensive to paint on phones */
  #bg-canvas{display:none !important}
  /* Reduce backdrop-filter cost on common glass surfaces */
  nav,.scard,.pcard,.tcard,.p-panel,.sec-glass,.sec-glass2,#mob-nav,.mega-menu-content{
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }
}
@media (prefers-reduced-data:reduce){
  #bg-canvas,#lc,.dd-aurora-bg,.dd-blob,.dd-blob-2,.dd-stage-3d{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .tki,.marquee-track{animation:none !important}
  #loader,#loader .l-fill{animation:none !important}
}

/* ── Image loading hint ────────────────────────────────────── */
img,video{
  background:#0a0a0a;
}

/* ── Smooth section anchor scrolling ───────────────────────── */
html{scroll-padding-top:80px}

/* ── EXTRA MOBILE POLISH ───────────────────────────────────── */
@media (max-width:720px){
  /* Force consistent vertical rhythm */
  section{padding-top:48px;padding-bottom:48px}
  /* Bigger comfortable line-height for body */
  p,li{line-height:1.7}
  /* Touchable links */
  a{padding:2px 0}
  /* Hero: no horizontal padding overflow */
  .hero-in,.p-hero-inner{padding-left:18px;padding-right:18px}
  /* Cards: full-width, breathable */
  .scard,.pcard,.p-panel{margin-left:0;margin-right:0}
  /* Forms: no transform on focus that causes scroll-jump */
  input:focus,textarea:focus,select:focus{transform:none !important}
  /* Stop heavy 3D stage on mobile */
  .dd-stage-3d{display:none !important}
  /* Reduce loader font size on phones */
  #loader .l-name{font-size:clamp(34px,9vw,72px) !important;letter-spacing:-1px !important}
  #loader .l-bar{width:140px !important}
  /* Reduce hero card transforms on mobile (3D illusions are choppy) */
  .hcard{animation:none !important;transform:none !important;position:relative !important;width:100% !important;margin-bottom:14px !important}
  .hcw{height:auto !important;perspective:none !important}
  .hc1,.hc2,.hc3{position:relative !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;width:100% !important}
}

/* Even smaller phones */
@media (max-width:380px){
  h1,.hero-h1{letter-spacing:-.3px}
  section{padding-top:36px;padding-bottom:36px}
}

/* Tap targets — every interactive element ≥44px on mobile */
@media (max-width:720px){
  .btn-p,.btn-s,.btn-glow,.btn-xl,.nav-btn,button,[role=button]{
    min-height:44px;
  }
}

/* ── Smooth-er marquee on mobile (slower for less GPU) ────── */
@media (max-width:720px){
  .tki{animation-duration:48s !important}
}

/* ── Reduce shadows on mobile (cheaper paint) ─────────────── */
@media (max-width:720px){
  .scard,.pcard,.p-panel,.tcard{box-shadow:0 8px 24px rgba(0,0,0,.4) !important}
  .scard:hover,.pcard:hover,.p-panel:hover{box-shadow:0 12px 32px rgba(0,0,0,.5) !important}
}

/* ── Demo builder: premium color tile (replaces swatch grid) ─── */
.ap-color-tile{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:rgba(255,255,255,0.02);
  border:1.5px solid rgba(255,255,255,0.08);
  border-radius:14px;
  cursor:pointer;
  transition:transform .35s var(--p-ease), border-color .35s var(--p-ease), background .35s var(--p-ease), box-shadow .35s var(--p-ease);
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.ap-color-tile::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06), transparent 60%);
  opacity:0;
  transition:opacity .35s var(--p-ease);
  pointer-events:none;
}
.ap-color-tile:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.18);
  transform:translateY(-2px);
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
}
.ap-color-tile:hover::before{opacity:1}
.ap-color-tile[data-which="primary"]:hover{border-color:rgba(16,185,129,.5);box-shadow:0 16px 40px -12px rgba(16,185,129,.35)}
.ap-color-tile[data-which="secondary"]:hover{border-color:rgba(212,175,55,.5);box-shadow:0 16px 40px -12px rgba(212,175,55,.35)}
.ap-color-tile:active{transform:translateY(0) scale(.98)}
.ap-color-tile input[type="color"]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;padding:0;margin:0;
  appearance:none;-webkit-appearance:none;
}
.ap-color-tile input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.ap-color-tile input[type="color"]::-webkit-color-swatch{border:none}

/* ── Website chatbot hero: mobile-friendly ─────────────────── */
@media (max-width:760px){
  /* Hero specifically for website chatbot page */
  #website-chatbot-page section:first-of-type{
    min-height:auto !important;
    padding:84px 18px 28px !important;
  }
  #website-chatbot-page section:first-of-type h1{
    font-size:clamp(28px,8.5vw,38px) !important;
    letter-spacing:-1px !important;
    line-height:1.06 !important;
    margin-bottom:14px !important;
    text-wrap:balance;
    word-break:normal !important;
    hyphens:none !important;
  }
  #website-chatbot-page section:first-of-type p{
    font-size:14.5px !important;
    line-height:1.65 !important;
    margin-bottom:20px !important;
  }
  #website-chatbot-page section:first-of-type .hero-stats-row,
  #website-chatbot-page section:first-of-type .hero-cta-row,
  #website-chatbot-page section:first-of-type [class*="grid"]{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }
  /* Trim heavy hero chat preview on mobile to keep first-paint fast */
  #website-chatbot-page .hero-chat-box{
    max-width:100% !important;
    border-radius:18px !important;
    margin-top:14px;
  }
  #website-chatbot-page .hero-chat-msgs{
    max-height:240px !important;
    overflow:hidden !important;
    padding:14px !important;
  }
  #website-chatbot-page .hero-chat-msgs > *:nth-child(n+5){display:none !important}
  #website-chatbot-page .hero-stats-row{
    gap:10px 16px !important;
    margin-top:18px !important;
    justify-content:center !important;
  }
  #website-chatbot-page .hero-stat-num{font-size:1.4rem !important}
  #website-chatbot-page .hero-stat-label{font-size:10.5px !important;letter-spacing:.5px !important}
  /* Demo builder side-by-side becomes stacked on mobile for full width tiles */
  #widget-preview .ap-color-tile{padding:14px !important}
  #widget-preview .ap-color-tile span[id$="hex_label"]{font-size:11px !important}
}

/* ── Premium mobile shortcut bar (solutions pages) ─────────── */
.dd-shortbar{
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:14px 18px 16px;
  margin:0 -18px 8px;
  scrollbar-width:none;
  background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 100%);
}
.dd-shortbar::-webkit-scrollbar{display:none}
.dd-shortbar::after{
  content:'';
  position:absolute;
  right:0;top:0;bottom:0;
  width:48px;
  background:linear-gradient(90deg,transparent,#030303);
  pointer-events:none;
}
.dd-shortbar a,.dd-shortbar button{
  flex-shrink:0;
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  color:rgba(255,255,255,.85);
  background:linear-gradient(180deg,rgba(20,20,22,.85),rgba(8,8,10,.92));
  border:1px solid rgba(255,255,255,.08);
  border-radius:100px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s var(--p-ease), border-color .25s var(--p-ease), color .25s var(--p-ease), box-shadow .25s var(--p-ease);
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.dd-shortbar a::before,.dd-shortbar button::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(212,175,55,.08));
  opacity:0;
  transition:opacity .3s var(--p-ease);
}
.dd-shortbar a > *,.dd-shortbar button > *{position:relative;z-index:1}
.dd-shortbar a:hover,.dd-shortbar button:hover{
  border-color:rgba(16,185,129,.42);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 22px -8px rgba(16,185,129,.4);
}
.dd-shortbar a:hover::before,.dd-shortbar button:hover::before{opacity:1}
.dd-shortbar a:active,.dd-shortbar button:active{transform:translateY(0) scale(.97)}
.dd-shortbar .ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(212,175,55,.12));
  border:1px solid rgba(16,185,129,.32);
  font-size:11px;
  flex-shrink:0;
}
.dd-shortbar .gold .ico{
  background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(16,185,129,.12));
  border-color:rgba(212,175,55,.42);
}
.dd-shortbar .gold{border-color:rgba(212,175,55,.32)}
.dd-shortbar .gold:hover{border-color:rgba(212,175,55,.55);box-shadow:0 8px 22px -8px rgba(212,175,55,.4)}
.dd-shortbar .featured{
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#000;
  border-color:transparent;
  font-weight:800;
}
.dd-shortbar .featured .ico{
  background:rgba(0,0,0,.18);
  border-color:rgba(0,0,0,.18);
  color:#000;
}
.dd-shortbar .featured:hover{
  background:linear-gradient(135deg,#d4af37 0%,#b8860b 100%);
  color:#000;
  box-shadow:0 12px 28px -8px rgba(212,175,55,.55);
}
/* Show only on small screens — desktops have the regular nav */
@media (min-width:961px){
  .dd-shortbar{display:none}
}
@media (max-width:960px){
  .dd-shortbar{display:flex}
}

/* ═══════════════════════════════════════════════════════════════════
   GET-STARTED PAGE — header / steps fix
   Steps were overlapping the fixed nav and the nav's links weren't
   clickable. Push main content down + force nav above content.
   ═══════════════════════════════════════════════════════════════════ */

/* Lift the main page nav above ALL page content + restore clickability */
body > nav.fixed,
body > nav.fixed *,
body > nav.fixed a,
body > nav.fixed button{
  pointer-events:auto !important;
}
body > nav.fixed{
  z-index:9500 !important;
  isolation:isolate;
}
body > nav.fixed .mega-menu-content{z-index:9510 !important}

/* Get-started: shift main content below the fixed header so the step
   indicators clear the nav with breathing room. */
body main.pt-20{
  padding-top:7rem !important;   /* was 5rem (Tailwind pt-20) */
}
@media (max-width:960px){
  body main.pt-20{padding-top:5.5rem !important}
}
@media (max-width:560px){
  body main.pt-20{padding-top:5rem !important}
}

/* Page header inside main: tighten margins so it doesn't fight the nav */
body main.pt-20 > .max-w-4xl > .text-center.reveal{
  padding-top:0 !important;
  margin-top:8px;
}

/* Step indicator row — give it real space + ensure it's below the nav */
body main.pt-20 nav[aria-label="Signup progress"]{
  position:relative;
  z-index:1;                        /* well below nav (9500) */
  margin-top:6px;
  padding-top:8px;
  isolation:isolate;
  /* Backdrop-filter from premium layer would make this look weird here */
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:transparent !important;
}

/* Make sure the inner scroll background canvas never traps clicks meant for nav */
#bg-canvas{z-index:0 !important;pointer-events:none !important}

/* Resume banner — keep below nav so nav stays clickable */
#resumeBanner{z-index:200 !important}

/* Loader — make sure clicks work as soon as it fades out */
#gs-loader[style*="opacity: 0"],
#gs-loader.exit{pointer-events:none !important;visibility:hidden !important}

/* If nav has scrolled state, keep it bold and clearly above everything */
nav.scrolled{
  background:rgba(3,3,3,.96) !important;
  backdrop-filter:blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(24px) saturate(140%) !important;
  z-index:9500 !important;
}

/* Force step row to wrap nicely on small screens (no horizontal overflow) */
@media (max-width:560px){
  #stepIndicators{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    padding:6px 4px 10px !important;
    margin:0 -8px !important;
    scrollbar-width:none;
  }
  #stepIndicators::-webkit-scrollbar{display:none}
  #stepIndicators .step-line{min-width:18px}
  #stepIndicators .step-wrap{min-width:36px}
}

/* ── Pause heavy animations when tab hidden (saves battery) ─── */
body.p-paused *,body.p-paused *::before,body.p-paused *::after{
  animation-play-state:paused !important;
}

/* ── Mobile chatbot widget — always reachable ─────────────── */
@media (max-width:720px){
  #ddW,#ddBtn{bottom:env(safe-area-inset-bottom,16px) !important}
}

/* ── Print ──────────────────────────────────────────────────── */
@media print{
  .p-cursor-dot,.p-cursor-ring,.dd-prog,.dd-grain::before,.dd-blob-cursor{display:none!important}
  body{background:#fff!important;color:#000!important}
  *{box-shadow:none!important;text-shadow:none!important}
}