/* ===========================================================
   Iskakan Marketing — MYTHOS design layer
   Obsidian & antique gold. Carved-serif display type,
   starfield depth, gilded ornaments. Loads AFTER style.css
   and reskins every page without touching markup.
   =========================================================== */
/* fonts are loaded via <link> in each page head (preconnect + stylesheet)
   instead of @import, so text paints sooner with less flicker */

:root{
  --font-display:'Sora',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-serif:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ink:#241A06;
  --gold-hi:#F4DFA4;
  --gold:#C99A3C;
  --gold-deep:#8C6420;
  --ember:#D95B2B;
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 20px 60px rgba(0,0,0,.45);
  --shadow-lg:0 30px 80px rgba(0,0,0,.55);
}

/* ============ TYPOGRAPHY — carved in stone ============ */
/* body transparent so the fixed starfield (z-index:-1) shows above the html background */
body{font-family:var(--font-body);background:transparent}
/* Sora for display headings & brand, Inter for everything else */
h1,h2,.logo{font-family:var(--font-display)}
h1{font-weight:800;letter-spacing:-1.2px;line-height:1.08;
  font-size:clamp(33px,5vw,58px);text-wrap:balance}
h2{font-weight:700;letter-spacing:-.6px;line-height:1.14;
  font-size:clamp(25px,3.2vw,40px);text-wrap:balance}
h3,h4,h5{font-family:var(--font-body);font-weight:700;letter-spacing:-.2px}
h3{font-size:clamp(16.5px,1.8vw,20px);line-height:1.35}
.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6}
.quote p{font-size:15.5px;line-height:1.65}
.eyebrow{font-weight:700;font-size:11px;
  letter-spacing:1.6px;border-radius:6px;
  background:linear-gradient(180deg,rgba(201,154,60,.16),rgba(201,154,60,.06));
  border:1px solid rgba(201,154,60,.4);color:var(--gold-hi)}
.logo{font-weight:700;letter-spacing:.2px;font-size:17px}
.stat .num,.stats-strip .stat-num{font-family:var(--font-display);font-weight:800;letter-spacing:-1px}
.form-card h2{font-size:21px;letter-spacing:-.3px}

/* gold-engraved highlight text */
.gradient-text{
  background:linear-gradient(110deg,#F4DFA4 0%,#E5BE6A 30%,#C99A3C 50%,#D95B2B 72%,#F4DFA4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shimmer 7s linear infinite}

/* ============ STARFIELD + CANDLELIGHT DEPTH ============ */
body{position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,rgba(244,223,164,.5),transparent 100%),
    radial-gradient(1px 1px at 28% 64%,rgba(244,223,164,.35),transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 32%,rgba(244,223,164,.4),transparent 100%),
    radial-gradient(1px 1px at 61% 76%,rgba(244,223,164,.3),transparent 100%),
    radial-gradient(2px 2px at 73% 12%,rgba(244,223,164,.45),transparent 100%),
    radial-gradient(1px 1px at 86% 49%,rgba(244,223,164,.35),transparent 100%),
    radial-gradient(1.5px 1.5px at 94% 84%,rgba(244,223,164,.3),transparent 100%),
    radial-gradient(1px 1px at 6% 88%,rgba(244,223,164,.3),transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 94%,rgba(244,223,164,.25),transparent 100%),
    radial-gradient(1px 1px at 37% 8%,rgba(244,223,164,.4),transparent 100%);
  background-size:1100px 760px;
  opacity:.55;
  animation:mythosTwinkle 9s ease-in-out infinite}
[data-theme="light"] body::before{display:none}
@keyframes mythosTwinkle{0%,100%{opacity:.55}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* hero — temple glow from above */
.hero{background:
  radial-gradient(1100px 480px at 50% -180px,rgba(201,154,60,.16),transparent 65%),
  radial-gradient(700px 380px at 85% 110%,rgba(217,91,43,.07),transparent 60%)}
.hero h1{text-shadow:0 2px 30px rgba(201,154,60,.25)}
.orb{filter:blur(90px)}
.orb-1{opacity:.32}.orb-2{opacity:.2}.orb-3{opacity:.14}
.grid-bg::before{
  background-image:linear-gradient(rgba(244,223,164,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(244,223,164,.03) 1px,transparent 1px)}

/* ============ GILDED ORNAMENTS ============ */
/* centered section heads get a gold filigree underline */
.section-head h2::after,
.reviews-head h2::after{
  content:"";display:block;width:160px;height:9px;margin:18px auto 0;
  background:
    radial-gradient(circle at 50% 50%,var(--gold-hi) 0 1.5px,transparent 2px),
    linear-gradient(90deg,transparent 0%,var(--gold) 18%,var(--gold-hi) 50%,var(--gold) 82%,transparent 100%);
  background-size:9px 9px,100% 1px;
  background-position:center center,center center;
  background-repeat:no-repeat}

/* nav — obsidian bar with a gold hairline */
.nav{background:rgba(7,6,4,.82);
  border-bottom:1px solid rgba(201,154,60,.22);
  box-shadow:0 1px 0 rgba(0,0,0,.6)}
.nav-links > a,.nav-links > .nav-dropdown > a{
  font-size:13.5px!important;font-weight:600!important;letter-spacing:.1px!important}
.nav-links a.active::after{background:linear-gradient(90deg,transparent,var(--gold-hi),transparent)}

/* footer — sealed with gold */
footer{border-top:1px solid rgba(201,154,60,.25);
  background:linear-gradient(180deg,var(--bg-2),#050402)}
.foot-grid h5{letter-spacing:1px;color:var(--gold-hi)}

section.block{border-bottom-color:rgba(201,154,60,.12)}
.reviews-block{border-bottom-color:rgba(201,154,60,.12)}

/* ============ BUTTONS — molten gold, ink lettering ============ */
.btn-primary,.btn-glow,.form-card .submit,.nav-dropdown-menu .dd-cta{
  background:linear-gradient(120deg,#8C6420 0%,#C99A3C 30%,#F4DFA4 50%,#C99A3C 70%,#8C6420 100%)!important;
  background-size:220% auto!important;
  color:var(--ink)!important;
  text-shadow:0 1px 0 rgba(255,245,215,.4);
  border:1px solid rgba(244,223,164,.55);
  box-shadow:0 8px 30px rgba(201,154,60,.35),inset 0 1px 0 rgba(255,248,220,.5);
  animation:gradientShift 5s ease infinite}
.btn-primary:hover,.btn-glow:hover,.form-card .submit:hover,.nav-dropdown-menu .dd-cta:hover{
  box-shadow:0 12px 40px rgba(201,154,60,.5),inset 0 1px 0 rgba(255,248,220,.5);
  color:var(--ink)!important}
.btn-glow::after,.btn-arrow::after{text-shadow:none}
.btn-ghost{border:1px solid rgba(201,154,60,.4);color:var(--gold-hi)}
.btn-ghost:hover{border-color:var(--gold-hi);background:rgba(201,154,60,.08)}

/* desktop nav: phone = quiet outline pill, perfectly matched to the
   Get started button; one loud CTA per bar is enough */
@media (min-width:1101px){
  .phone-link{
    height:42px;padding:0 16px;border-radius:10px;
    display:inline-flex;align-items:center;
    background:transparent;
    border:1px solid rgba(201,154,60,.45);
    color:var(--gold-hi);
    font-size:14px;font-weight:600;letter-spacing:.2px;
    text-shadow:none;box-shadow:none;animation:none;
    transition:border-color var(--transition),background var(--transition),transform var(--transition)}
  .phone-link::before{content:none;animation:none}
  .phone-link:hover{transform:none;
    border-color:var(--gold-hi);background:rgba(201,154,60,.1);box-shadow:none}
  .nav-cta .btn{height:42px;padding:0 18px;font-size:14px;
    display:inline-flex;align-items:center}
}
.floating-call{
  background:linear-gradient(120deg,#8C6420 0%,#C99A3C 35%,#F4DFA4 55%,#C99A3C 75%,#8C6420 100%)!important;
  background-size:220% auto!important;color:var(--ink)!important;
  text-shadow:0 1px 0 rgba(255,245,215,.4);
  border:1px solid rgba(244,223,164,.55)}
.price-toggle button.active{color:var(--ink)}
.price-toggle::before{
  background:linear-gradient(120deg,#C99A3C,#F4DFA4);
  box-shadow:0 6px 18px rgba(201,154,60,.45)}

/* ============ CTA BLOCK — the golden tablet ============ */
.cta-block{
  background:linear-gradient(135deg,#8C6420 0%,#C99A3C 40%,#E5BE6A 65%,#B0742B 100%);
  background-size:200% 100%;
  border:1px solid rgba(244,223,164,.6);
  box-shadow:0 30px 90px rgba(201,154,60,.25),inset 0 1px 0 rgba(255,248,220,.5)}
.cta-block h2{color:var(--ink);text-shadow:0 1px 0 rgba(255,245,215,.35)}
.cta-block p{color:rgba(36,26,6,.85)}
.cta-block .btn{background:var(--ink);color:var(--gold-hi)}
.cta-block .btn:hover{background:#0C0903;color:#FFF3D0}

/* ============ CARDS — gilt-edged panels ============ */
.card{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 130%);
  border:1px solid rgba(201,154,60,.18)}
.card:hover{border-color:rgba(229,190,106,.6);
  box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(201,154,60,.2)}
.card .icon{border-radius:10px;
  background:linear-gradient(135deg,rgba(201,154,60,.22),rgba(201,154,60,.05));
  border:1px solid rgba(201,154,60,.35);
  box-shadow:inset 0 1px 0 rgba(244,223,164,.2)}
.card .arrow{color:var(--gold-hi)}
.step{border:1px solid rgba(201,154,60,.18)}
.step::before{background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  -webkit-background-clip:text;background-clip:text;
  font-family:var(--font-display);font-size:15px}
.quote{border:1px solid rgba(201,154,60,.18)}
.avatar{background:linear-gradient(135deg,var(--gold),var(--ember));color:#FFF6DF}
.faq-card{border:1px solid rgba(201,154,60,.18)}
.faq-card[open]{border-color:rgba(229,190,106,.55)}
.faq-card summary{font-size:15.5px;letter-spacing:0}

/* form card — the offering scroll */
.form-card{border:1px solid rgba(201,154,60,.3);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(244,223,164,.12)}
.form-card::before{opacity:.35}
.form-card input,.form-card select,.form-card textarea{border-radius:9px}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,154,60,.16)}

/* reviews + badges */
.reviews-grid{border:1px solid rgba(201,154,60,.2)}
.reviews-strip .badge{border:1px solid rgba(201,154,60,.25)}
.marquee-item{border:1px solid rgba(201,154,60,.2);border-radius:6px}
.stats-strip{background:linear-gradient(135deg,#1C1408,#0A0805);
  border-top:1px solid rgba(201,154,60,.25);border-bottom:1px solid rgba(201,154,60,.25)}
.stats-strip .stat-num{
  background:linear-gradient(120deg,#FFF3D0,var(--gold),#FFF3D0);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-strip .stat-label{font-family:var(--font-display);letter-spacing:2px}

/* dropdown menu */
.nav-dropdown-menu{border:1px solid rgba(201,154,60,.25);border-radius:12px}
.nav-dropdown-menu .dd-group-title{font-family:var(--font-display);letter-spacing:1.5px;color:var(--gold-hi)}
.nav-dropdown-menu a .dd-icon{
  background:linear-gradient(135deg,rgba(201,154,60,.2),rgba(217,91,43,.14));
  border:1px solid rgba(229,190,106,.3)}

/* ============ SELECTION + SCROLLBAR ============ */
::selection{background:rgba(201,154,60,.85);color:#140E03}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#0A0805}
::-webkit-scrollbar-thumb{background:#3A2E14;border-radius:6px;border:2px solid #0A0805}
::-webkit-scrollbar-thumb:hover{background:#8C6420}

/* ============ LIGHT THEME — aged parchment ============ */
[data-theme="light"] body{
  background:
    radial-gradient(1000px 400px at 50% -120px,rgba(201,154,60,.12),transparent 60%),
    var(--bg)}
[data-theme="light"] .nav{background:rgba(250,245,232,.88);
  border-bottom:1px solid rgba(140,100,32,.25)}
[data-theme="light"] .hero h1{text-shadow:none}
[data-theme="light"] footer,[data-theme="light"] .footer{
  background:#EFE6CF;border-top:1px solid rgba(140,100,32,.25)}
[data-theme="light"] .foot-grid h5{color:#8C6420}
[data-theme="light"] .eyebrow{
  background:rgba(201,154,60,.12);border-color:rgba(140,100,32,.4);color:#8C6420}
[data-theme="light"] .gradient-text{color:#8C6420!important;-webkit-text-fill-color:#8C6420!important}
[data-theme="light"] .btn-ghost{border-color:rgba(140,100,32,.45);color:#5C420F}
[data-theme="light"] .card,[data-theme="light"] .quote,[data-theme="light"] .step,
[data-theme="light"] .faq-card,[data-theme="light"] .form-card,
[data-theme="light"] .reviews-grid{background:#FFFDF4;border-color:#E0D3B0}
[data-theme="light"] .card:hover{border-color:rgba(140,100,32,.5);
  box-shadow:0 20px 40px rgba(140,100,32,.12)}
[data-theme="light"] ::selection{background:rgba(201,154,60,.5);color:#241A06}
[data-theme="light"] .cta-block h2,[data-theme="light"] .cta-block p{color:var(--ink)}
[data-theme="light"] .stats-strip{background:linear-gradient(135deg,#F2E6C8,#FDFAF0)}
[data-theme="light"] .stats-strip .stat-label{color:#8C6420}

/* a11y: respect base failsafes; nothing here hides content */

/* ===========================================================
   SPECTACLE LAYER — wow effects, tuned to sell
   =========================================================== */

/* gold scroll progress bar */
.mythos-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,#8C6420,#F4DFA4,#C99A3C);
  box-shadow:0 0 10px rgba(244,223,164,.5)}

/* ember canvas sits above orbs, below hero content */
.mythos-embers{position:absolute;inset:0;z-index:1;pointer-events:none}

/* turn the atmosphere back up */
.orb-1{opacity:.5}.orb-2{opacity:.32}.orb-3{opacity:.22}
.hero{background:
  radial-gradient(1100px 480px at 50% -180px,rgba(201,154,60,.26),transparent 65%),
  radial-gradient(700px 380px at 85% 110%,rgba(217,91,43,.12),transparent 60%)}

/* headline — breathing golden aura */
.hero h1{animation:mythosAura 4.5s ease-in-out infinite}
@keyframes mythosAura{
  0%,100%{text-shadow:0 2px 22px rgba(201,154,60,.18)}
  50%{text-shadow:0 2px 38px rgba(244,223,164,.36)}
}
.gradient-text{animation-duration:4.5s}

/* primary CTAs — recurring light sweep that pulls the eye */
.btn-primary,.btn-glow,.form-card .submit{position:relative;overflow:hidden}
.btn-primary::before,.btn-glow::before,.form-card .submit::before{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;
  background:linear-gradient(105deg,transparent,rgba(255,250,230,.5),transparent);
  transform:skewX(-20deg);pointer-events:none;
  animation:mythosSweep 4.8s cubic-bezier(.6,.1,.3,1) infinite}
/* desync the sweeps so the page doesn't flash in unison */
.btn-primary::before{animation-delay:1.7s}
.form-card .submit::before{animation-delay:.9s}
@keyframes mythosSweep{
  0%{left:-80%}45%{left:140%}100%{left:140%}
}

/* CTA block — pulsing halo so the closer section feels alive */
.cta-block{animation:gradientShift 8s ease infinite,mythosHalo 4.6s ease-in-out infinite}
@keyframes mythosHalo{
  0%,100%{box-shadow:0 30px 90px rgba(201,154,60,.25),inset 0 1px 0 rgba(255,248,220,.5)}
  50%{box-shadow:0 30px 120px rgba(229,190,106,.5),inset 0 1px 0 rgba(255,248,220,.5)}
}

/* cards — tilt-ready, stronger gold bloom under the cursor */
.card,.form-card,.quote{will-change:transform;transform-style:preserve-3d}
.card::before{
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),
    rgba(229,190,106,.22),transparent 40%)}
.card:hover{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 30px rgba(201,154,60,.18),
  0 0 0 1px rgba(229,190,106,.35)}

/* stat numbers — glow when revealed */
.stats-strip .stat-num,.stat .num{text-shadow:0 0 26px rgba(244,223,164,.35)}

/* deeper, slower reveal cascade = more cinematic scroll */
.reveal{transform:translateY(36px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,.8,.24,1)}
.reveal-stagger > *{transform:translateY(36px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.8,.24,1)}

/* respect reduced motion across the spectacle layer */
@media (prefers-reduced-motion:reduce){
  .hero h1{animation:none}
  .btn-primary::before,.btn-glow::before,.form-card .submit::before{animation:none;display:none}
  .cta-block{animation:none}
  .mythos-progress{display:none}
}

/* ===========================================================
   POLISH PASS — detail refinement
   =========================================================== */

/* consistent button geometry & calmer hovers */
.btn{border-radius:10px;padding:13px 24px;letter-spacing:.3px}
.btn-primary:hover,.btn-glow:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.98)}

/* accessible, on-theme focus rings */
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:4px}
.form-card input:focus-visible,.form-card select:focus-visible,
.form-card textarea:focus-visible{outline:none}

/* footer — glowing center seam on the gold hairline */
footer{position:relative}
footer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:300px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(244,223,164,.8),transparent)}

/* hero hairline gets the same seam for symmetry */
.hero{border-bottom-color:rgba(201,154,60,.18)}

/* cards: a touch more air, steadier rhythm */
.card{padding:30px 28px}
.card h3{margin-bottom:9px}
.card p{line-height:1.6}
.card .icon{width:44px;height:44px;font-size:20px;margin-bottom:16px}

/* marquee chips — quieter, tighter */
.marquee-item{font-size:13px;padding:9px 18px;color:var(--muted);
  border-color:rgba(201,154,60,.16)}
.marquee-item .icon{font-size:15px;opacity:.85}

/* eyebrow chips breathe a little */
.eyebrow{padding:7px 16px}

/* trust row stars slightly larger, aligned */
.trust-row .stars{font-size:17px}

/* form micro-typography */
.form-card label{letter-spacing:1px;font-size:11px}
.form-card input,.form-card select,.form-card textarea{font-size:14.5px;padding:12px 14px}
.form-card input::placeholder,.form-card textarea::placeholder{color:var(--muted-2)}

/* lead paragraphs shouldn't crowd the headline */
.hero .lead{margin-top:6px}

/* smoother card hover settle (works with the JS tilt) */
.card,.quote{transition:transform .35s cubic-bezier(.2,.8,.2,1),
  border-color var(--transition),background var(--transition),box-shadow .35s ease}

/* nav: a little more air around links, steadier logo */
.nav-inner{padding:15px 24px}
.logo{gap:8px}

/* keep the headline aura off small screens (less GPU, less blur soup) */
@media (max-width:760px){
  .hero h1{animation:none;text-shadow:0 2px 18px rgba(201,154,60,.18)}
}

/* ===========================================================
   SCROLL MOMENTS — gated behind html.mythos-js so nothing
   is hidden if the script doesn't run
   =========================================================== */

/* gold filigree divider draws itself when the heading scrolls in */
html.mythos-js .section-head h2::after,
html.mythos-js .reviews-head h2::after{
  width:0;opacity:0;
  transition:width .9s cubic-bezier(.2,.8,.2,1) .15s,opacity .5s ease .15s}
html.mythos-js .section-head.mythos-seen h2::after,
html.mythos-js .reviews-head.mythos-seen h2::after{
  width:160px;opacity:1}

/* golden CTA tablet rises and settles as it enters the viewport */
html.mythos-js .cta-block{
  opacity:0;transform:translateY(28px) scale(.97);
  transition:opacity .8s ease,transform .9s cubic-bezier(.16,.8,.24,1)}
html.mythos-js .cta-block.mythos-seen{
  opacity:1;transform:translateY(0) scale(1)}

/* hero content gets GPU-friendly hints for the scroll parallax */
.hero .wrap,.hero .orbs,.mythos-embers{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html.mythos-js .section-head h2::after,
  html.mythos-js .reviews-head h2::after{width:160px;opacity:1;transition:none}
  html.mythos-js .cta-block{opacity:1;transform:none;transition:none}
}

/* ===========================================================
   SCROLL COMPANION — golden star riding the page edge
   =========================================================== */
.mythos-comet{position:fixed;top:0;right:24px;z-index:90;
  pointer-events:none;opacity:0;line-height:1;
  transition:opacity .5s ease;will-change:transform}
.mythos-comet .mc-core{display:inline-block;font-size:23px;color:var(--gold-hi);
  text-shadow:0 0 10px rgba(244,223,164,.95),0 0 26px rgba(201,154,60,.65),
              0 0 60px rgba(201,154,60,.35);
  animation:mcSpin 7s linear infinite}
@keyframes mcSpin{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(1.15)}
  100%{transform:rotate(360deg) scale(1)}
}
.mythos-comet-trail{position:fixed;top:9px;right:33px;z-index:89;
  border-radius:50%;pointer-events:none;visibility:hidden;
  background:radial-gradient(circle,#F4DFA4 0%,rgba(201,154,60,.4) 60%,transparent 100%);
  will-change:transform}
[data-theme="light"] .mythos-comet .mc-core{
  color:#B0742B;
  text-shadow:0 0 10px rgba(201,154,60,.7),0 0 26px rgba(201,154,60,.4)}
@media (max-width:760px),(prefers-reduced-motion:reduce){
  .mythos-comet,.mythos-comet-trail{display:none}
}

/* CTA button glows brighter while the star orbits it */
.mythos-charged{
  filter:brightness(1.14) drop-shadow(0 0 16px rgba(244,223,164,.5));
  transition:filter .6s ease}