/* =========================================================
   KUBO HALLOWEEN v4
   - no emoji: every ornament is CSS or inline SVG
   - no backdrop-filter, no blend modes, no fixed gradients,
     no JS particles, no pointer listeners
   - the only motion: 3 bats + 1 spider (transform only), partner marquee
   ========================================================= */
:root{
  color-scheme:dark;
  --bg:#0a0710;--paper:#15101d;--paper-soft:#1b1525;--ink:#f2eadb;--muted:#b9afc2;
  --line:#322745;--accent:#ff7a1a;--accent-dark:#ff9a4a;--accent-soft:#2b1a10;--cream:#15101d;
  --shadow:0 18px 44px rgba(0,0,0,.45);--radius:22px;
  --crypt:#140e1d;--violet:#8b5cf6;
  --card:linear-gradient(160deg,#1c1527,#130e1b);
  --leaf:8px 26px 8px 26px;
  --display:"Pirata One",Anuphan,system-ui,serif;
  --web:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M120 0L2.0 0.0M120 0L11.0 45.2M120 0L36.6 83.4M120 0L74.8 109.0M120 0L120.0 118.0M94.0 0.0Q98.1 4.4 96.0 9.9M96.0 9.9Q101.4 12.4 101.6 18.4M101.6 18.4Q107.6 18.6 110.1 24.0M110.1 24.0Q115.6 21.9 120.0 26.0M68.0 0.0Q76.1 8.7 72.0 19.9M72.0 19.9Q82.8 24.8 83.2 36.8M83.2 36.8Q95.2 37.2 100.1 48.0M100.1 48.0Q111.3 43.9 120.0 52.0M42.0 0.0Q54.2 13.1 47.9 29.8M47.9 29.8Q64.2 37.3 64.8 55.2M64.8 55.2Q82.7 55.8 90.2 72.1M90.2 72.1Q106.9 65.8 120.0 78.0M16.0 0.0Q32.3 17.4 23.9 39.8M23.9 39.8Q45.6 49.7 46.5 73.5M46.5 73.5Q70.3 74.4 80.2 96.1M80.2 96.1Q102.6 87.7 120.0 104.0' fill='none' stroke='%23efe6d2' stroke-opacity='.34' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  --grave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 90' preserveAspectRatio='none'%3E%3Cpath d='M640 90V44M640 62L617 44L609 30M640 52L662 36L668 21M640 44L636 26M617 44L605 46M662 36L677 38M640 70L655 58' stroke='%23140e1d' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M0 90V80C110 71 190 83 310 77S560 69 690 78S860 71 960 77V90ZM60 90V59.0A13.0 13.0 0 0 1 86 59.0V90ZM100 90V67.0A11.0 11.0 0 0 1 122 67.0V90ZM246 90V51.0A15.0 15.0 0 0 1 276 51.0V90ZM398 90V64.0A12.0 12.0 0 0 1 422 64.0V90ZM520 90V57.0A14.0 14.0 0 0 1 548 57.0V90ZM760 90V63.0A13.0 13.0 0 0 1 786 63.0V90ZM826 90V71.0A11.0 11.0 0 0 1 848 71.0V90ZM930 90V61.0A11.0 11.0 0 0 1 952 61.0V90ZM188 90V38H192V90ZM181 47H199V51H181ZM453 90V46H457V90ZM446 55H464V59H446ZM698 90V54H702V90ZM691 63H709V67H691Z' fill='%23140e1d'/%3E%3Cg%3E%3Cellipse cx='870' cy='66' rx='17' ry='13' fill='%23b8480c'/%3E%3Cpath d='M870 53q-1-5 3-7' stroke='%233a6b2a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M861 63l4-5 3 6zM872 64l3-6 4 5zM860 71l3 3 3-3 4 3 4-3 4 3 3-3-2-3h-15z' fill='%23ffd27a'/%3E%3C/g%3E%3C/svg%3E");
  --flame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23e8590c'/%3E%3Cstop offset='.6' stop-color='%23ff8a2b'/%3E%3Cstop offset='1' stop-color='%23ffd08a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 1c1 4 6 7 6 13a6 6 0 0 1-12 0c0-3 2-4 3-7 1 1 1 2 2 3 1-2 1-5 1-9z' fill='url(%23g)'/%3E%3C/svg%3E");
}
html{background:var(--bg);scrollbar-color:#3a2d4f var(--bg)}
body{
  color:var(--ink);
  background:
    radial-gradient(ellipse 60rem 30rem at 88% -8rem,rgba(139,92,246,.17),transparent 70%),
    radial-gradient(ellipse 52rem 26rem at 6% -6rem,rgba(255,122,26,.11),transparent 70%),
    var(--bg);
  background-size:auto;
}
::selection{background:rgba(255,122,26,.38);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
main,.site-footer{position:relative;z-index:1}

/* ---- moon (scrolls with the page, painted once) ---- */
body::before{
  content:"";position:absolute;inset:auto;z-index:0;pointer-events:none;
  top:96px;right:clamp(20px,7vw,120px);width:clamp(52px,7vw,96px);aspect-ratio:1;
  border-radius:50%;opacity:1;mix-blend-mode:normal;
  background:
    radial-gradient(circle at 62% 60%,rgba(120,105,60,.30) 0 9%,transparent 10%),
    radial-gradient(circle at 30% 64%,rgba(120,105,60,.24) 0 6%,transparent 7%),
    radial-gradient(circle at 56% 24%,rgba(120,105,60,.22) 0 5%,transparent 6%),
    radial-gradient(circle at 36% 32%,#fffbe6,#efe5c3 50%,#d3c698);
  box-shadow:0 0 0 1px rgba(255,248,220,.16),0 0 46px rgba(255,236,170,.22),0 0 140px rgba(255,236,170,.10);
}
/* ---- stars (static, fixed) ---- */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 8% 22%,rgba(255,246,220,.7),transparent),
    radial-gradient(1px 1px at 17% 61%,rgba(255,246,220,.5),transparent),
    radial-gradient(1.5px 1.5px at 29% 14%,rgba(255,246,220,.6),transparent),
    radial-gradient(1px 1px at 38% 78%,rgba(255,246,220,.45),transparent),
    radial-gradient(1.5px 1.5px at 47% 33%,rgba(255,246,220,.55),transparent),
    radial-gradient(1px 1px at 58% 9%,rgba(255,246,220,.6),transparent),
    radial-gradient(1.5px 1.5px at 66% 70%,rgba(255,246,220,.5),transparent),
    radial-gradient(1px 1px at 74% 41%,rgba(255,246,220,.45),transparent),
    radial-gradient(1.5px 1.5px at 83% 86%,rgba(255,246,220,.55),transparent),
    radial-gradient(1px 1px at 91% 28%,rgba(255,246,220,.6),transparent),
    radial-gradient(1px 1px at 96% 64%,rgba(255,246,220,.45),transparent),
    radial-gradient(1px 1px at 3% 90%,rgba(255,246,220,.45),transparent);
}

/* ---- header ---- */
.site-header{
  background:rgba(10,7,16,.95);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,122,26,.16);
}
.brand{color:var(--ink)}
.brand span{font-family:var(--display);font-size:1.7rem;font-weight:400;letter-spacing:.01em;line-height:1}
.brand-logo{border:2px solid #4a3a63;background:#120d19;box-shadow:0 0 0 2px rgba(255,122,26,.25),0 8px 20px rgba(0,0,0,.5)}
.nav-links{color:var(--muted)}
.nav-links a:hover,.footer-links a:hover{color:var(--accent-dark)}
.lang-switch,.menu-toggle,.theme-toggle{background:var(--paper);border-color:var(--line);color:var(--ink);box-shadow:none}
.lang-switch button{color:var(--muted)}
.lang-switch button.active{background:var(--accent);color:#1a0d04}
.menu-toggle span{background:var(--ink)}

/* effects toggle (was the light/dark switch): a candle flame */
.theme-toggle{transition:border-color .2s}
.theme-toggle:hover{border-color:var(--accent)}
.fx-flame{display:block;width:15px;height:21px;background:var(--flame) center/contain no-repeat;transition:opacity .2s,filter .2s}
.theme-toggle[aria-pressed="false"] .fx-flame{opacity:.4;filter:grayscale(1)}

/* ---- type ---- */
.eyebrow,.promo-kicker,.promo-price-label{color:var(--accent-dark);text-transform:none;letter-spacing:.06em;font-size:.84rem}
.eyebrow,.promo-kicker{display:flex;align-items:center;gap:9px}
.eyebrow::before,.promo-kicker::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
.card-kicker,.command-card .category,.policy-updated,.partner-label{color:var(--accent-dark)}
.command-card .category{text-transform:none}
.hero-text,.section-heading p,.feature-grid p,.command-card p,.premium-band p,.metrics span,
.legal-card p,.legal-card li,.legal-muted,.partner-card p{color:var(--muted)}
.hero h1{
  font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:.88;
  font-size:clamp(6rem,17vw,13rem);color:var(--ink);
  text-shadow:0 0 70px rgba(255,122,26,.30),0 3px 0 rgba(0,0,0,.45);
}

/* ---- buttons ---- */
.button{
  background:#1d1628;border:1px solid #3a2d4f;color:var(--ink);box-shadow:none;will-change:auto;
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;
}
.button:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 24px rgba(255,122,26,.12)}
.button.secondary{background:transparent}
.button.primary{background:var(--accent);border-color:var(--accent);color:#1a0d04;box-shadow:0 8px 22px rgba(255,122,26,.25)}
.button.primary:hover{background:#ff8a35;border-color:#ff8a35;box-shadow:0 12px 28px rgba(255,122,26,.35)}

/* ---- card family ---- */
.command-card,.feature-grid article,.partner-card,.policy-card,.legal-card,.premium-band,.metrics div,
.promo-hero,.promo-card,.promo-panel,.promo-step,.promo-price-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--leaf);
  box-shadow:var(--shadow);will-change:auto;
}
.metrics div{border-radius:6px 20px 6px 20px}
.command-card:hover,.feature-grid article:hover{
  border-color:rgba(255,122,26,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,122,26,.12);
}
.metrics div::before{background:linear-gradient(135deg,rgba(139,92,246,.12),transparent)}
.metrics strong{color:var(--ink)}
.mini-list span{background:rgba(255,255,255,.03);border:1px solid #30253f;border-radius:10px;color:var(--muted);text-align:center}
.mini-list span:hover{border-color:rgba(255,122,26,.5);color:var(--ink)}

/* wax seal numbers */
.feature-icon,.brand-mark,.promo-step-number{
  background:radial-gradient(circle at 35% 30%,#ff9a4a,#d9560a 62%,#a63c05);
  color:#2a1204;border:0;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.16),inset 0 0 0 5px rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.4);
}
.feature-icon{width:52px;height:52px}
.promo-icon{background:#241a12;border:1px solid rgba(255,122,26,.3);border-radius:50%;color:var(--accent-dark)}

/* ---- the tombstone (hero card) ---- */
.hero-card{
  border-radius:999px 999px 10px 10px;text-align:center;
  padding:78px clamp(24px,4vw,44px) 40px;
  background:linear-gradient(180deg,#261b36 0,#171121 38%,#110c19 100%);
  border:1px solid #3d2f55;
  box-shadow:0 0 0 7px var(--bg),0 0 0 8px rgba(255,122,26,.35),0 30px 70px rgba(0,0,0,.55);
}
.hero-card::before{
  content:"";position:absolute;inset:12px;width:auto;height:auto;border-radius:999px 999px 4px 4px;
  border:1px solid rgba(255,122,26,.28);background:none;pointer-events:none;
}
.hero-card::after{display:none}
.avatar-shell{
  width:116px;height:116px;margin:0 auto;padding:6px;border-radius:50%;
  background:#0e0a15;border:2px solid #4a3a63;
  box-shadow:0 0 0 4px rgba(255,122,26,.18),0 0 40px rgba(255,122,26,.18);
}
.bot-avatar{border-radius:50%}
.card-kicker{margin:28px 0 8px}

/* ---- inputs / tabs ---- */
.search-box input{background:#120d19;border:1px solid var(--line);color:var(--ink)}
.search-box input::placeholder{color:#7d7189}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,26,.18);background:#150f1d}
.category-tabs button{background:#150f1d;border-color:var(--line);color:var(--muted);will-change:auto}
.category-tabs button:hover{background:#1b1426;border-color:var(--accent);color:var(--ink)}
.category-tabs button.active{background:var(--accent);border-color:var(--accent);color:#1a0d04}
.command-card code{background:#120d19;border-color:var(--line);color:#ffc89a}
.showcase-image-button{border-radius:8px 26px 8px 26px;border-color:var(--line);background:var(--paper)}
.showcase-tags span{background:#150f1d;border-color:var(--line)}

/* ---- cobwebs (large containers only) ---- */
.legal-card,.premium-band{position:relative;overflow:hidden}
.legal-card>*,.premium-band>*{position:relative;z-index:1}
.legal-card::after,.premium-band::after,.promo-hero::after{
  content:"";position:absolute;right:0;top:0;left:auto;bottom:auto;z-index:0;
  width:clamp(90px,14vw,150px);height:clamp(90px,14vw,150px);border-radius:0;
  background:var(--web) no-repeat top right/contain;pointer-events:none;
}
.promo-hero::before{background:radial-gradient(circle,rgba(139,92,246,.20),transparent 68%)}
.promo-hero h1{color:var(--ink)}
.legal-card,.promo-hero{border-radius:10px 40px 10px 40px}
.premium-band{
  border-radius:10px 40px 10px 40px;
  background:radial-gradient(circle at 100% 0,rgba(255,122,26,.16),transparent 22rem),
             radial-gradient(circle at 0 100%,rgba(139,92,246,.12),transparent 20rem),
             var(--card);
}
.legal-card h1{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.03em;max-width:calc(100% - 90px)}
.legal-card a{color:var(--accent-dark)}
.legal-card a:hover{color:#ffc89a}
#legalContent h2{margin-top:34px;padding-top:26px;border-top:1px dashed var(--line)}
#legalContent h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-card li::marker{color:var(--accent)}

/* ---- partner marquee: no mask, cheaper compositing ---- */
.partner-marquee{-webkit-mask-image:none;mask-image:none}
.partner-card-head img{border-color:#3b2f52;background:#11141a}
.partner-card h3{color:var(--ink)}

/* ---- promote page ---- */
.promo-note{background:#150f1d;border-color:var(--line)}
.promo-list li::before,.promo-price-features li::before{color:var(--accent)}
.promo-price-card::before{height:4px;background:linear-gradient(90deg,#ff7a1a,#8b5cf6)}
.promo-price-amount strong{font-family:var(--display);font-weight:400;letter-spacing:0;color:var(--accent-dark);font-size:clamp(4rem,9vw,6.4rem)}
.promo-cta{
  color:var(--ink);border-color:rgba(255,122,26,.35);border-radius:10px 40px 10px 40px;
  background:radial-gradient(circle at 100% 0,rgba(255,122,26,.20),transparent 20rem),linear-gradient(160deg,#2a1a0f,#150f1d);
}
.promo-cta h2{color:var(--ink)}
.promo-cta p{color:var(--muted)}
.promo-cta .button{background:var(--accent);border-color:var(--accent);color:#1a0d04}

/* ---- footer + graveyard ---- */
.site-footer{
  margin-top:clamp(72px,10vw,112px);padding-top:34px;
  background:var(--crypt);border-top:0;color:var(--muted);
}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(56px,8vw,92px);
  background:var(--grave) repeat-x left bottom/auto 100%;pointer-events:none;
}

/* ---- scene: bats + hanging spider (injected by script.js) ---- */
.hw-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hw-bat{position:absolute;left:0;top:var(--y);width:var(--s,32px);color:#3b2d55;display:block;
  animation:hwFly var(--t) linear var(--d) infinite;will-change:transform}
.hw-bat svg{display:block;width:100%;height:auto;transform-origin:50% 45%;animation:hwFlap .42s ease-in-out infinite alternate}
.hw-bat:nth-of-type(1){--y:13vh;--s:34px;--t:27s;--d:-6s}
.hw-bat:nth-of-type(2){--y:34vh;--s:26px;--t:35s;--d:-19s}
.hw-bat:nth-of-type(3){--y:58vh;--s:30px;--t:31s;--d:-2s}
@keyframes hwFly{
  0%{transform:translate3d(-12vw,0,0)}25%{transform:translate3d(20vw,-26px,0)}
  50%{transform:translate3d(52vw,10px,0)}75%{transform:translate3d(82vw,-22px,0)}
  100%{transform:translate3d(112vw,4px,0)}
}
@keyframes hwFlap{from{transform:scaleY(1)}to{transform:scaleY(.5)}}
.hw-spider{
  display:none;position:absolute;top:100%;left:min(44%,520px);width:34px;height:clamp(56px,6vw,84px);
  transform-origin:50% 0;animation:hwSwing 5.5s ease-in-out infinite alternate;pointer-events:none;
}
.hw-spider::before{content:"";position:absolute;left:50%;top:0;bottom:28px;width:1px;background:rgba(239,230,210,.45)}
.hw-spider svg{position:absolute;left:0;bottom:0;width:34px;height:34px}
@keyframes hwSwing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media (min-width:900px){.hw-spider{display:block}}
html.fx-off .hw-sky,html.fx-off .hw-spider{display:none}

/* ---- mobile ---- */
@media (max-width:768px){
  body::before{top:78px;right:18px;width:50px}
  .hero h1{font-size:clamp(5rem,27vw,8rem)}
  .nav-links a{background:var(--paper);border:1px solid var(--line);color:var(--muted)}
  .nav-links a:hover{background:#1b1426;color:var(--accent-dark)}
  .hero-card{padding-top:68px;padding-bottom:30px}
  .hw-bat:nth-of-type(3){display:none}
}
@media (max-width:430px){.brand span{font-size:1.5rem}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hw-bat,.hw-bat svg,.hw-spider{animation:none}
  .hw-bat{display:none}
}