/* Base */
:root {
  --bg:#060606;
  --bg-alt:#0c0f15;
  --orange:#ff9d04;
  --orange-deep:#e17900;
  --green:#3cff96;
  --purple:#6d4bff;
  --text:#faf9f6;
  --muted:#b9b6c5;
  --danger:#ff3d3d;
  --radius:18px;
  --radius-sm:8px;
  --glass:rgba(255,255,255,0.05);
  --gradient:linear-gradient(135deg,#ff9d04,#ff3d3d 60%,#6d4bff);
  --font-title:'Luckiest Guy',cursive;
  --font-body:'Poppins',system-ui,sans-serif;
  --shadow:0 4px 12px -2px rgba(0,0,0,.6),0 8px 32px -4px rgba(0,0,0,.5);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:var(--orange); text-decoration:none; }
.fx-overlay{ position:fixed; inset:0; z-index:100; pointer-events:none; }

/* Page-wide dynamic background */
.page-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#050505; }
.page-bg::before, .page-bg::after{ content:""; position:absolute; inset:-10%; filter:blur(40px); opacity:.65; animation:flow 22s ease-in-out infinite alternate; background:
  radial-gradient(600px 300px at 20% 30%, rgba(255,157,4,.25), transparent 70%),
  radial-gradient(700px 380px at 80% 20%, rgba(255,61,61,.2), transparent 70%),
  radial-gradient(560px 260px at 60% 80%, rgba(109,75,255,.22), transparent 70%);
}
.page-bg::after{ animation-duration:34s; animation-delay:-8s; transform:rotate(20deg); opacity:.55; filter:blur(55px); }
@keyframes flow { 0%{ transform:translate3d(-2%,0,0) scale(1);} 50%{ transform:translate3d(2%, -1%,0) scale(1.04);} 100%{ transform:translate3d(-1%,1%,0) scale(1);} }

/* floating particles */
.page-bg .spark{ position:absolute; width:3px; height:3px; background:linear-gradient(180deg,#ffb13f,#e17900); border-radius:50%; box-shadow:0 0 8px rgba(255,157,4,.9); opacity:.9; animation:spark 9s linear infinite; }
@keyframes spark{ from{ transform:translateY(110vh) translateX(0);} to{ transform:translateY(-10vh) translateX(20vw);} }
/* swirling mist layer */
.page-bg .mist{ position:absolute; inset:-10%; background:
  radial-gradient(60% 40% at 30% 70%, rgba(255,255,255,.03), transparent 60%),
  radial-gradient(60% 40% at 70% 30%, rgba(255,255,255,.035), transparent 60%);
  mix-blend-mode:screen; filter:blur(30px) saturate(1.1); animation:mistSwirl 24s ease-in-out infinite alternate; }
@keyframes mistSwirl{ 0%{ transform:translate3d(-2%,2%,0) scale(1);} 100%{ transform:translate3d(2%,-2%,0) scale(1.06);} }

/* Skeleton silhouettes strips */
.page-bg .skeletons{ position:absolute; inset:0; pointer-events:none; opacity:.18; }
.page-bg .skeletons .strip{ position:absolute; left:-10vw; right:-10vw; height:160px; background:
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="160" viewBox="0 0 600 160" fill="none"><g fill="%23ff9d04" fill-opacity="0.08"><path d="M40 140c12-38 42-60 60-22 22-18 35-8 42 14 12-10 30-10 40 8 18-16 32-16 52 6 26-18 42-12 58 8 18-18 42-16 56 10 24-12 40-8 52 12H40Z"/><circle cx="96" cy="62" r="12"/><circle cx="136" cy="66" r="10"/><circle cx="176" cy="70" r="11"/><circle cx="356" cy="70" r="12"/><circle cx="396" cy="60" r="10"/><circle cx="436" cy="66" r="11"/></g></svg>') 0 0/600px 160px repeat-x; filter:blur(0.3px); }
.page-bg .skeletons .s1{ top:55%; animation:parallaxLeft 28s linear infinite; }
.page-bg .skeletons .s2{ top:78%; animation:parallaxRight 36s linear infinite; opacity:.14; }
@keyframes parallaxLeft{ from{ background-position-x:0; } to{ background-position-x: -600px; } }
@keyframes parallaxRight{ from{ background-position-x:0; } to{ background-position-x: 600px; } }

/* Crawling spiders layer (container only; spiders are added with JS) */
.page-bg .crawlers{ position:absolute; inset:0; pointer-events:none; }
.crawler{ position:absolute; width:22px; height:22px; background:radial-gradient(circle at 50% 50%, #000 35%, #222 65%, #000); border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.7); }
.crawler::after,.crawler::before{ content:""; position:absolute; width:28px; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,0)); top:50%; left:50%; transform-origin:left center; opacity:.4; }
.crawler::after{ transform:rotate(25deg); }
.crawler::before{ transform:rotate(-25deg); }

/* Ghosts */
.page-bg .ghosts{ position:absolute; inset:0; pointer-events:none; }
.ghost{ position:absolute; width:80px; height:110px; border-radius:50% 50% 40% 40%/45% 45% 55% 55%;
  background:radial-gradient(circle at 50% 30%, #fff, #f5f5f5 40%, #eaeaea 70%); filter:opacity(.06); box-shadow:0 0 30px rgba(255,255,255,.08); animation:float 10s ease-in-out infinite; }
.ghost::before,.ghost::after{ content:""; position:absolute; background:#000; border-radius:50%; top:38%; width:10px; height:14px; }
.ghost::before{ left:30%; }
.ghost::after{ right:30%; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }

/* Blinking eyes */
.page-bg .eyes-layer{ position:absolute; inset:0; pointer-events:none; }
.eyes{ position:absolute; width:24px; height:8px; display:flex; justify-content:space-between; filter:brightness(.9); }
.eyes .eye{ width:8px; height:8px; background:#ffd36b; border-radius:50%; box-shadow:0 0 8px rgba(255,211,107,.8); animation:blink 5s infinite; }
@keyframes blink{ 0%,8%,100%{ transform:scaleY(1) } 10%,12%{ transform:scaleY(.1) } }

/* Lantern glows */
.page-bg .lanterns{ position:absolute; inset:0; pointer-events:none; }
.lantern{ position:absolute; width:8px; height:8px; border-radius:50%; background:#ff9d04; box-shadow:0 0 24px 10px rgba(255,157,4,.35); animation:lantern 7s ease-in-out infinite; }
@keyframes lantern{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* Vignette overlay (on body) */
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; box-shadow: inset 0 0 150px 40px rgba(0,0,0,.78); animation:vignettePulse 10s ease-in-out infinite; }
@keyframes vignettePulse{ 0%,100%{ box-shadow: inset 0 0 150px 40px rgba(0,0,0,.78);} 50%{ box-shadow: inset 0 0 180px 60px rgba(0,0,0,.72);} }

/* Thunder flash and screen shake */
.page-bg .flash{ position:absolute; inset:0; background:
  radial-gradient(120% 80% at 60% -10%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
  linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  mix-blend-mode:screen; opacity:0; transition:opacity .15s ease; pointer-events:none; }
.page-bg .flash.active{ opacity:1; animation:flashSeq .7s ease-out forwards; }
@keyframes flashSeq{ 0%{opacity:0} 8%{opacity:1} 25%{opacity:.25} 45%{opacity:.8} 100%{opacity:0} }
body.shake{ animation:shake .6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake{ 10%,90%{ transform:translate3d(-1px,0,0);} 20%,80%{ transform:translate3d(2px,0,0);} 30%,50%,70%{ transform:translate3d(-4px,0,0);} 40%,60%{ transform:translate3d(4px,0,0);} }

/* Header */
.site-header { position:sticky; top:0; z-index:90; display:flex; gap:2rem; align-items:center; padding:0.75rem 2rem; background:rgba(10,10,10,.55); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08); }
.logo { font-family:var(--font-title); font-size:1.9rem; letter-spacing:1px; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 4px #000); }
.main-nav { margin-left:auto; }
.main-nav ul { list-style:none; display:flex; gap:1.5rem; padding:0; margin:0; }
.main-nav a { position:relative; padding:.35rem .4rem; font-weight:600; letter-spacing:.5px; }
.main-nav a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--orange); transition:.35s cubic-bezier(.65,.05,.36,1); }
.main-nav a:focus-visible,.main-nav a:hover { color:var(--text); }
.main-nav a:hover::after,.main-nav a:focus-visible::after { width:100%; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.25rem; }
.nav-toggle span { display:block; width:28px; height:3px; background:var(--text); margin:6px 0; border-radius:3px; transition:.4s; }

.cta-group { display:flex; gap:.75rem; }

/* Buttons */
.btn { --btn-bg:var(--orange); --btn-color:#111; font-family:var(--font-body); font-weight:700; letter-spacing:.5px; border:none; padding:.85rem 1.4rem; border-radius:var(--radius-sm); cursor:pointer; position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; text-transform:uppercase; box-shadow:0 4px 14px -4px rgba(0,0,0,.7); }
.btn.primary { background:var(--gradient); color:#fff; }
.btn.secondary { background:var(--glass); color:var(--text); backdrop-filter:blur(8px); }
.btn.outline { background:transparent; color:var(--text); border:2px solid var(--orange); }
.btn.ghost-btn { background:var(--orange); color:#000; }
.btn.copy-btn { background:var(--orange); min-width:90px; }
.btn:hover:not(:disabled) { filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 6px 18px -6px rgba(0,0,0,.75); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 70%); opacity:0; transition:.5s; }
.btn:hover::after { opacity:.7; }
/* scratch overlay */
.btn::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,157,4,.08) 12px 14px); mix-blend-mode:overlay; opacity:0; transition:.35s; }
.btn:hover::before{ opacity:.5; }

.btn.pulse { animation:pulse 3s infinite; }
.btn.wobble { animation:wobble 5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,157,4,.5);} 50%{ box-shadow:0 0 0 18px rgba(255,157,4,0);} }
@keyframes wobble { 0%,100%{ transform:translateY(0);} 25%{ transform:translateY(-4px);} 50%{ transform:translateY(3px);} 75%{ transform:translateY(-2px);} }

/* Pumpkin-shaped buttons: detailed jack-o'-lantern look */
.btn.pumpkin-btn{
  --pumpkin:#ff9d04; --pumpkin-dark:#c76700; --pumpkin-light:#ffc14f; --stem:#1fb35f; --glow:rgba(255,157,4,.65);
  background:transparent; color:#1a0b00; text-shadow:0 1px 0 rgba(255,255,255,.35);
  padding:1.15rem 2.6rem 1.15rem 3.2rem; border-radius:999px; box-shadow:none; font-size:.95rem;
}
/* body of pumpkin */
.btn.pumpkin-btn::before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:50% / 60% 40% 55% 45%;
  background:
    /* ribs */
    linear-gradient(90deg, transparent 0 8%, rgba(0,0,0,.2) 8% 12%, transparent 12% 24%, rgba(0,0,0,.16) 24% 28%, transparent 28% 44%, rgba(0,0,0,.16) 44% 48%, transparent 48% 68%, rgba(0,0,0,.2) 68% 72%, transparent 72% 100%),
    /* highlight + shade */
    radial-gradient(90% 70% at 50% 26%, rgba(255,255,255,.24), transparent 62%),
    radial-gradient(70% 90% at 50% 110%, rgba(0,0,0,.4), transparent 55%),
    /* pores */
    radial-gradient(7px 7px at 22% 58%, rgba(0,0,0,.08), transparent 60%),
  radial-gradient(6px 6px at 62% 42%, rgba(0,0,0,.06), transparent 60%),
  /* soft vignette */
  radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,.08), transparent 65%),
  /* base color */
  radial-gradient(circle at 50% 35%, var(--pumpkin-light), var(--pumpkin) 55%, var(--pumpkin-dark));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), inset 0 -10px 16px rgba(0,0,0,.28), inset 0 12px 18px rgba(255,255,255,.10),
              0 6px 18px -6px rgba(0,0,0,.8), 0 0 44px -10px var(--glow);
  transition: .35s cubic-bezier(.65,.05,.36,1);
}
/* stem + tiny tendrils */
.btn.pumpkin-btn::after{
  content:""; position:absolute; left:50%; top:-14px; width:44px; height:28px; translate:-50% 0; border-radius:30% 70% 55% 45%/40% 30% 70% 60%;
  background: radial-gradient(circle at 30% 40%, #55ff8d, var(--stem) 70%);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.6));
}
.btn.pumpkin-btn:active{ transform:translateY(0) scale(.98); }
@keyframes candleFlicker{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.06);} }
.btn.pumpkin-btn:hover::before{ animation:candleFlicker 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .btn.pumpkin-btn:hover::before{ animation:none; } }

/* small compact pumpkin button for tight layouts (e.g., COPY) */
.btn.pumpkin-btn.sm{ padding:.7rem 1.15rem .7rem 2.3rem; font-size:.82rem; }
.btn.pumpkin-btn.sm{ background-size:22px 18px; background-position:10px 50%; }
.btn.pumpkin-btn.sm::after{ width:28px; height:18px; top:-10px; }
.btn.pumpkin-btn.sm::before{ border-radius:50% / 58% 42% 60% 40%; }

/* New modern pill buttons (lighter than pumpkin variant) */
/* Pumpkin UX enhancements */
.btn.pumpkin-btn{ transition:transform .35s cubic-bezier(.65,.05,.36,1), filter .4s, box-shadow .4s; }
.btn.pumpkin-btn:hover::before{ animation:candleFlicker 1.2s ease-in-out infinite; }
.btn.pumpkin-btn:hover{ filter:brightness(1.05) saturate(1.05); }
.btn.pumpkin-btn:focus-visible{ outline:3px solid rgba(255,157,4,.75); outline-offset:4px; }
.btn.pumpkin-btn.glow{ box-shadow:0 0 0 0 rgba(255,157,4,.55),0 8px 26px -8px rgba(0,0,0,.9); animation:pumpkinPulse 4s ease-in-out infinite; }
@keyframes pumpkinPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,157,4,.55),0 8px 26px -8px rgba(0,0,0,.9);} 50%{ box-shadow:0 0 0 22px rgba(255,157,4,0),0 8px 34px -8px rgba(0,0,0,.95);} }
/* Large pumpkin variant */
.btn.pumpkin-btn.lg{ padding:1.35rem 3.1rem 1.35rem 3.6rem; font-size:1.05rem; }
/* Halloween intensified variant */
.btn.pumpkin-btn.halloween{ position:relative; }
.btn.pumpkin-btn.halloween::before{ box-shadow: inset 0 0 0 2px rgba(0,0,0,.3), inset 0 -14px 22px rgba(0,0,0,.38), inset 0 14px 22px rgba(255,255,255,.12), 0 0 38px -6px rgba(255,157,4,.8), 0 0 90px -10px rgba(255,87,20,.55); }
.btn.pumpkin-btn.halloween::after{ /* subtle ambient glow ring supplementing stem */ box-shadow:0 0 0 0 rgba(255,157,4,.4); }
.btn.pumpkin-btn.halloween .icon-slot{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, #222, #000); border-radius:50%; box-shadow:0 0 12px -2px rgba(255,157,4,.6),0 6px 14px -6px rgba(0,0,0,.9); position:relative; }
.btn.pumpkin-btn.halloween .icon-slot::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 52% 38%, rgba(255,157,4,.9), rgba(255,157,4,.15) 65%, transparent 75%); border-radius:inherit; mix-blend-mode:screen; opacity:.9; }
/* Drip effect (optional) */
.btn.pumpkin-btn.halloween.drip::before{ mask: radial-gradient(16px 10px at 14% 96%, #000 98%, transparent 100%), radial-gradient(22px 14px at 38% 97%, #000 98%, transparent 100%), radial-gradient(18px 10px at 62% 96%, #000 98%, transparent 100%), radial-gradient(16px 12px at 82% 97%, #000 98%, transparent 100%), linear-gradient(#000,#000); -webkit-mask: radial-gradient(16px 10px at 14% 96%, #000 98%, transparent 100%), radial-gradient(22px 14px at 38% 97%, #000 98%, transparent 100%), radial-gradient(18px 10px at 62% 96%, #000 98%, transparent 100%), radial-gradient(16px 12px at 82% 97%, #000 98%, transparent 100%), linear-gradient(#000,#000); -webkit-mask-composite: source-over, source-over, source-over, source-over, source-in; mask-composite: add, add, add, add, intersect; }
/* Ectoplasmic green aura */
.btn.pumpkin-btn.ecto{ box-shadow:0 0 0 0 rgba(60,255,150,.55),0 10px 30px -8px rgba(0,0,0,.85); position:relative; }
.btn.pumpkin-btn.ecto::after{ filter:drop-shadow(0 0 12px rgba(60,255,150,.85)) drop-shadow(0 0 28px rgba(60,255,150,.55)); }
.btn.pumpkin-btn.ecto:hover{ box-shadow:0 0 0 0 rgba(60,255,150,.55),0 14px 34px -10px rgba(0,0,0,.9); }
.btn.pumpkin-btn.halloween.glow{ animation:pumpkinPulse 5s ease-in-out infinite; }

/* Hero */
.hero { position:relative; min-height:100dvh; display:flex; align-items:center; padding:7rem clamp(1rem,4vw,4rem) 4rem; overflow:hidden; width:100%; box-sizing:border-box; }
.hero .content { max-width:660px; position:relative; z-index:3; text-align:left; margin:0; padding-top:0; }
@media (max-width:900px){ .hero .content { max-width:680px; } }
@media (max-width:640px){ 
  .hero { padding-top:6.5rem; padding-left:1rem; padding-right:1rem; } 
  .hero .content { text-align:center; }
  .contract-box { flex-direction:column; gap:0.5rem; }
  .contract-box code { word-break:break-all; font-size:0.8rem; }
}

@media (max-width:480px){
  .hero { padding:5rem 0.75rem 3rem; }
  .glow-text { font-size:clamp(2rem,8vw,2.6rem); }
  .lead { font-size:0.95rem; margin-bottom:1.2rem; }
}

@media (max-width:360px){
  .hero { padding:4rem 0.5rem 2rem; }
  .contract-box { padding:0.5rem; }
}
/* Soften hero bg since page background is now dynamic */
.hero-bg { position:absolute; inset:0; background:transparent; }
/* Pattern behind characters only */
/* remove heavy hero-layer motion; rely on page background */
.floating-bats,.floating-mist{ display:none; }
.glow-text { font-family:var(--font-title); font-size:clamp(2.6rem,6.5vw,4.6rem); line-height:1.05; letter-spacing:1px; text-shadow:0 2px 4px #000,0 0 16px rgba(255,157,4,.55); position:relative; display:inline-block; }
.glow-text::after { content:""; position:absolute; inset:14% -12%; background:linear-gradient(145deg,rgba(0,0,0,.65),rgba(0,0,0,.2) 45%,rgba(255,157,4,.08)); z-index:-1; border-radius:24px; filter:blur(12px); opacity:.85; }
.glow-text .accent { color:var(--orange); }
/* horror flicker on hover */
.glow-text:hover{ animation:glitch 1s steps(12) 1; }
@keyframes glitch{ 10%{ text-shadow:2px 0 #ff3d3d,-2px 0 #6d4bff,0 0 18px rgba(255,157,4,.6);} 20%{ text-shadow:-2px 0 #ff3d3d,2px 0 #6d4bff,0 0 22px rgba(255,157,4,.7);} 30%{ transform:skewX(2deg);} 40%{ transform:skewX(-2deg);} 100%{ text-shadow:0 2px 4px #000,0 0 16px rgba(255,157,4,.55);} }
.lead { font-size:1.05rem; max-width:560px; color:var(--muted); margin-bottom:1.6rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.contract-box { display:flex; gap:.75rem; align-items:center; background:rgba(255,255,255,.05); padding:.75rem 1rem; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-sm); width:100%; max-width:560px; position:relative; }
.contract-box code { font-family:monospace; font-size:.8rem; word-break:break-all; color:var(--green); }
.copy-toast { position:absolute; bottom:-1.6rem; right:0; font-size:.75rem; color:var(--green); opacity:0; transform:translateY(4px); transition:.4s; }
.copy-toast.active { opacity:1; transform:translateY(0); }
/* Legacy elements - removed */
.scooby-hero { display:none; }

/* Hero layered art */
.hero-art { position:absolute; inset:0; pointer-events:none; z-index:2; }
.hero-art .layer { position:absolute; max-width:100%; image-rendering:auto; display:block; }
.hero-art .layer img { width:100%; height:100%; display:block; object-fit:contain; }
.hero-art .layer.logo { width:min(560px,48%); top:0; left:50%; transform:translateX(-50%) scale(.85); animation:logoFloat 9s ease-in-out infinite; filter:drop-shadow(0 4px 16px rgba(0,0,0,.85)); opacity:.92; z-index:2; }
.hero-art .layer.scooby-main { width:min(720px,68%); bottom:18%; left:58%; transform:translateX(-50%); filter:drop-shadow(0 18px 40px rgba(0,0,0,.95)) drop-shadow(0 0 45px rgba(255,157,4,.5)); animation:logoFloat 11s ease-in-out infinite; z-index:5; }
.hero-art .layer.fire { display:none; }
/* Parallax strength will be added via JS by translating on mouse move / scroll */
.parallax { will-change:transform; }
@keyframes slowPan { from{ transform:scale(1) translateY(0);} to{ transform:scale(1.05) translateY(-2%);} }
@keyframes logoFloat { 0%,100%{ transform:translateX(-50%) translateY(0) scale(.95);} 50%{ transform:translateX(-50%) translateY(-18px) scale(1);} }
@keyframes fireRise { from{ filter:brightness(.9) drop-shadow(0 0 18px rgba(255,157,4,.35)); } to{ filter:brightness(1.1) drop-shadow(0 0 28px rgba(255,157,4,.55)); } }

/* Recenter hero image on smaller screens */
@media (max-width: 900px){
  .hero-art .layer.scooby-main{ left:50%; }
}

/* Push hero image further right on larger screens */
@media (min-width: 1024px){
  .hero-art .layer.scooby-main{ left:60%; }
}
@media (min-width: 1280px){
  .hero-art .layer.scooby-main{ left:62%; }
}
@media (min-width: 1440px){
  .hero-art .layer.scooby-main{ left:64%; }
}
@media (min-width: 1600px){
  .hero-art .layer.scooby-main{ left:66%; }
  .pumpkin { padding:2.5rem 1.4rem 2.2rem; font-size:.9rem; }
  .pumpkin .icon { width:74px; height:74px; }
/* Panels */
.panel { padding:5rem clamp(1rem,4vw,4rem); position:relative; }
/* Specific tighter layout for about section (restore previous look) */
.panel.about-img { padding:3.5rem clamp(1rem,4vw,3rem); width:100%; box-sizing:border-box; }
.panel.about-img .img-wrap::before,
.panel.about-img .img-wrap::after{ inset:-8px; }
  .pumpkin { padding:2.2rem 1.1rem 2rem; font-size:.85rem; }
  .pumpkin .icon { width:66px; height:66px; }
.panel.join { background:transparent; text-align:center; }

/* About single image section */
  .pumpkin { padding:1.9rem .9rem 1.7rem; font-size:.78rem; }
  .pumpkin .icon { width:60px; height:60px; }
.about-img .img-wrap::before, .about-img .img-wrap::after { content:""; position:absolute; inset:-12px; border-radius:24px; pointer-events:none; }
.about-img .img-wrap::before { border:2px solid rgba(255,157,4,.4); box-shadow:0 0 0 1px rgba(255,157,4,.15) inset, 0 0 36px -8px rgba(255,157,4,.6); filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); animation:framePulse 6s ease-in-out infinite; }
.about-img .img-wrap::before,
.about-img .img-wrap::after{ will-change:transform,opacity; }
@keyframes framePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.85; } }
.about-img .img-wrap::after { background:
  radial-gradient(180px 120px at 0% 0%, rgba(255,157,4,.12), transparent 70%),
  radial-gradient(180px 120px at 100% 0%, rgba(255,157,4,.12), transparent 70%),
  radial-gradient(180px 120px at 0% 100%, rgba(255,61,61,.1), transparent 70%),
  radial-gradient(180px 120px at 100% 100%, rgba(109,75,255,.12), transparent 70%);
  border-radius:24px;
}
.about-img .img-wrap::after{
  mask:
   radial-gradient(24px 24px at 10px 10px, #000 98%, transparent 100%) top left,
   radial-gradient(24px 24px at calc(100% - 10px) 10px, #000 98%, transparent 100%) top right,
   radial-gradient(24px 24px at 10px calc(100% - 10px), #000 98%, transparent 100%) bottom left,
   radial-gradient(24px 24px at calc(100% - 10px) calc(100% - 10px), #000 98%, transparent 100%) bottom right;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.about-img img { width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 12px 40px -10px rgba(0,0,0,.7); position:relative; z-index:1; }

/* Adjust Scooby card size - enlarged more */
.panel.about-img { padding:3.2rem clamp(1rem,3vw,2.5rem); }
.about-img .img-wrap { max-width:760px; margin:0 auto; position:relative; }
/* Ensure image scales within new constrained wrapper */
.about-img img { width:100%; height:auto; }
@media (max-width:600px){
  .panel.about-img { padding:3rem 1rem 3.2rem; }
  .about-img .img-wrap { max-width:100%; }
}

/* Section-specific pattern removed to unify design */

/* Dangling spiders */
.about-img .spider { position:absolute; top:-80px; width:26px; height:26px; background:
  radial-gradient(circle at 50% 50%, #000 30%, #222 60%, #000 100%);
  border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.6); animation:spiderDrop 6s ease-in-out infinite; }
.about-img .spider::before { content:""; position:absolute; top:-160px; left:50%; width:1px; height:180px; background:linear-gradient(#666,#999); transform:translateX(-50%); }
.about-img .spider.left { left:8%; animation-delay:.6s; }
.about-img .spider.right { right:10%; animation-delay:1.4s; }
@keyframes spiderDrop { 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(85px) rotate(6deg);} }
/* reveal animation handled in Utility section */

/* Steps */
/* steps/step-card styles removed with section */

/* Tokenomics section removed */

/* Socials Pumpkin Grid */
.social-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); max-width:880px; margin:0 auto; }
.socials-inner{ max-width:1100px; margin:0 auto; padding:0 1.5rem; }
@media (max-width:640px){
  .socials-inner{ padding:0 1rem; }
}
.pumpkin { --pk:#ff9d04; --pk-dark:#c76700; --pk-light:#ffc14f; position:relative; border-radius:50% / 52% 48% 46% 54%; padding:2.8rem 1.6rem 2.5rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.7rem; text-decoration:none; color:#111; font-weight:700; font-size:.95rem; isolation:isolate; z-index:1; background:
  /* ribbing */
  linear-gradient(90deg, transparent 0 6%, rgba(0,0,0,.18) 6% 10%, transparent 10% 20%, rgba(0,0,0,.14) 20% 24%, transparent 24% 36%, rgba(0,0,0,.14) 36% 40%, transparent 40% 60%, rgba(0,0,0,.14) 60% 64%, transparent 64% 76%, rgba(0,0,0,.18) 76% 80%, transparent 80% 100%),
  /* specular highlights */
  radial-gradient(120% 80% at 40% 22%, rgba(255,255,255,.20), transparent 55%),
  radial-gradient(120% 80% at 62% 26%, rgba(255,255,255,.12), transparent 60%),
  /* bottom + rim shade */
  radial-gradient(80% 100% at 50% 120%, rgba(0,0,0,.45), transparent 55%),
  radial-gradient(130% 100% at -10% 50%, rgba(0,0,0,.18), transparent 40%),
  radial-gradient(130% 100% at 110% 50%, rgba(0,0,0,.18), transparent 40%),
    /* soft vignette */
    radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,.08), transparent 65%),
  /* small warts/pores */
  radial-gradient(8px 8px at 24% 46%, rgba(0,0,0,.08), transparent 60%),
  radial-gradient(6px 6px at 68% 58%, rgba(0,0,0,.06), transparent 60%),
  radial-gradient(5px 5px at 42% 72%, rgba(0,0,0,.06), transparent 60%),
  /* soft vignette */
  radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,.08), transparent 65%),
  /* base color */
  radial-gradient(circle at 55% 35%, var(--pk-light), var(--pk) 58%, var(--pk-dark));
 }
.pumpkin::after{ content:""; position:absolute; left:50%; bottom:14%; translate:-50% 0; width:120px; height:48px; pointer-events:none; opacity:.18; filter:drop-shadow(0 0 8px rgba(255,157,4,.25)); transition:.35s cubic-bezier(.65,.05,.36,1); background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80"><g fill="%23000"><path d="M40 20 64 8 88 20 64 32z"/><path d="M112 20 136 8 160 20 136 32z"/><path d="M46 60c26-16 82-16 108 0-26 26-86 26-108 0z"/></g></svg>') center/contain no-repeat; }
.pumpkin .icon { width:82px; height:82px; background:radial-gradient(circle at 50% 35%,#222,#000); border-radius:50%; position:relative; display:grid; place-items:center; }
.pumpkin .icon::after{ filter:drop-shadow(0 0 10px rgba(255,157,4,.45)); opacity:.95; }
.icon-telegram::after { content:""; width:40px; height:40px; display:block; background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 240 240\"><path fill=\"%23fff\" d=\"M120 0a120 120 0 1 0 0 240 120 120 0 0 0 0-240Zm55 82-18 86c-1 7-6 9-12 6l-34-25-16 16c-2 2-3 3-7 3l2-37 68-61c3-3-1-4-5-2L80 124l-35-11c-8-3-8-8 2-12l138-53c6-2 12 2 10 11Z"/></svg>') center/contain no-repeat; }
.icon-x::after { content:""; width:40px; height:40px; display:block; background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 120 120\" fill=\"none\" stroke=\"%23eee\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 10 110 110M110 10 10 110\"/></svg>') center/contain no-repeat; }
.icon-dex::after { content:""; width:40px; height:40px; display:block; background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 120 120\" fill=\"none\"><circle cx=\"60\" cy=\"60\" r=\"56\" fill=\"%23000\" stroke=\"%23eee\" stroke-width=\"6\"/><text x=\"60\" y=\"78\" font-size=\"54\" text-anchor=\"middle\" fill=\"%23eee\" font-family=\"Arial,Helvetica,sans-serif\">$</text></svg>') center/contain no-repeat; }
.pumpkin .label { font-family:var(--font-title); letter-spacing:1.1px; color:#2b1200; text-shadow:0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,0,0,.25); background:rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.2); padding:.2rem .55rem; border-radius:12px; }
.pumpkin:hover { transform:translateY(-10px) rotate(calc(var(--twist) - 2deg)) scale(1.05); box-shadow:0 10px 28px -6px rgba(0,0,0,.9),0 8px 68px -16px rgba(255,157,4,.75); background:
  linear-gradient(90deg, transparent 0 6%, rgba(0,0,0,.2) 6% 10%, transparent 10% 20%, rgba(0,0,0,.16) 20% 24%, transparent 24% 36%, rgba(0,0,0,.16) 36% 40%, transparent 40% 60%, rgba(0,0,0,.16) 60% 64%, transparent 64% 76%, rgba(0,0,0,.2) 76% 80%, transparent 80% 100%),
  radial-gradient(120% 80% at 40% 22%, rgba(255,255,255,.26), transparent 55%),
  radial-gradient(120% 80% at 62% 26%, rgba(255,255,255,.16), transparent 60%),
  radial-gradient(80% 100% at 50% 120%, rgba(0,0,0,.5), transparent 55%),
  radial-gradient(130% 100% at -10% 50%, rgba(0,0,0,.2), transparent 40%),
  radial-gradient(130% 100% at 110% 50%, rgba(0,0,0,.2), transparent 40%),
  radial-gradient(8px 8px at 24% 46%, rgba(0,0,0,.08), transparent 60%),
  radial-gradient(6px 6px at 68% 58%, rgba(0,0,0,.06), transparent 60%),
  radial-gradient(5px 5px at 42% 72%, rgba(0,0,0,.06), transparent 60%),
  radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,.1), transparent 65%),
  radial-gradient(circle at 55% 35%, var(--pk-light), var(--pk) 58%, var(--pk-dark)); }
.pumpkin:hover .icon{ box-shadow:inset 0 -4px 8px rgba(0,0,0,.5), inset 0 10px 14px rgba(255,255,255,.16), inset 0 0 0 8px rgba(0,0,0,.32), 0 0 26px rgba(255,157,4,.7); }
.pumpkin:focus-visible{ outline:3px solid rgba(255,157,4,.65); outline-offset:3px; }
.pumpkin:hover::after{ opacity:.3; transform:translateY(-2px); }
.pumpkin:hover::before { transform:rotate(16deg) translateY(2px); }
.pumpkin:active { transform:translateY(-3px) scale(.97); }

/* Candy X & PumpFun Social Links */
.candy-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  padding: 2rem 0;
  flex-wrap: wrap;
}

.candy-link {
  display: block;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.candy-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.candy-image {
  max-width: 250px;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  border-radius: 12px;
  position: relative;
  z-index: 2;
}

.orange-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255, 157, 4, 0.4) 0%, rgba(255, 157, 4, 0.2) 40%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  opacity: 0.8;
  animation: aurapulse 2s ease-in-out infinite alternate;
}

.candy-link:hover .candy-image {
  transform: scale(1.1);
  filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 157, 4, 0.7));
}

.candy-link:hover .orange-aura {
  opacity: 1;
  animation: aurapulse 1s ease-in-out infinite alternate;
}

@keyframes aurapulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .candy-container {
    gap: 3rem;
  }
  .candy-image {
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  .candy-container {
    flex-direction: column;
    gap: 2rem;
  }
}

/* Removed alternate shape-alt variant: reverting to classic earlier shape */

/* Carved face overlay */
.pumpkin .carve-face{ position:absolute; inset:0; pointer-events:none; display:block; }
.pumpkin .carve-face::after{ /* mouth */ content:""; position:absolute; left:20%; right:20%; bottom:18%; height:28%; border-radius:0 0 60% 60% / 0 0 90% 90%; background:
  radial-gradient(90% 120% at 50% 140%, #000 0 55%, transparent 60%),
  linear-gradient(#030303,#0a0a0a);
  mask:radial-gradient(90% 160% at 50% -10%, transparent 52%, #000 53%); box-shadow:0 0 6px 1px rgba(0,0,0,.55) inset; }
.pumpkin .carve-face .eye{ position:absolute; width:22%; aspect-ratio:1/1; top:17%; background:linear-gradient(145deg,#020202,#0b0b0b 55%); clip-path:polygon(50% 0,100% 100%,0 100%); box-shadow:0 0 6px 1px rgba(0,0,0,.65),0 0 14px -4px rgba(0,0,0,.85) inset; }
.pumpkin .carve-face .eye.left{ left:6%; }
.pumpkin .carve-face .eye.right{ right:6%; }
@keyframes facePulse{ 0%,100%{ filter:brightness(.9);} 50%{ filter:brightness(1);} }
.pumpkin:hover .carve-face .eye,.pumpkin:hover .carve-face::after{ animation:facePulse 2.6s ease-in-out infinite; }

/* Carved detailed variant */
.pumpkin.carved{ --glow-off:#130900; --glow-on:#ffbb3b; --glow-hot:#ffeb9a; }
.pumpkin.carved::before{ /* deepen groove contrast */ background:
  repeating-radial-gradient(circle at 48% 52%, rgba(0,0,0,.18) 0 6px, transparent 6px 12px),
  linear-gradient(90deg, rgba(0,0,0,.55) 0 2%, transparent 3% 7%, rgba(0,0,0,.35) 7% 9%, transparent 9% 15%, rgba(0,0,0,.28) 15% 18%, transparent 18% 26%, rgba(0,0,0,.3) 26% 29%, transparent 29% 38%, rgba(0,0,0,.34) 38% 41%, transparent 41% 50%, rgba(0,0,0,.3) 50% 53%, transparent 53% 61%, rgba(0,0,0,.35) 61% 64%, transparent 64% 72%, rgba(0,0,0,.48) 72% 74%, transparent 74% 100%),
  radial-gradient(90% 70% at 50% 26%, rgba(255,255,255,.24), transparent 62%),
  radial-gradient(70% 90% at 50% 110%, rgba(0,0,0,.5), transparent 55%),
  radial-gradient(circle at 50% 35%, var(--pk-light), var(--pk) 55%, var(--pk-dark));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 -16px 22px rgba(0,0,0,.42), inset 0 14px 24px rgba(255,255,255,.12), 0 0 34px -10px rgba(255,157,4,.5);
}
.pumpkin.carved .carve-face .eye,
.pumpkin.carved .carve-face::after{ background:linear-gradient(140deg,#040302,#0d0b0a 55%); box-shadow:0 0 4px 1px #000 inset,0 0 18px -6px #000; transition:filter .5s, background-color .6s, box-shadow .55s; }
.pumpkin.carved .carve-face .eye{ filter:drop-shadow(0 0 0 rgba(0,0,0,0)); }
.pumpkin.carved .inner-glow{ position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none; mix-blend-mode:screen; background:
  radial-gradient(60% 50% at 50% 55%, rgba(255,187,59,.55), rgba(255,116,12,.15) 70%, transparent 75%),
  radial-gradient(30% 25% at 40% 38%, rgba(255,255,200,.6), transparent 70%),
  radial-gradient(30% 25% at 60% 40%, rgba(255,255,210,.55), transparent 70%);
  transition:opacity .65s ease, filter .6s ease;
}
.pumpkin.carved:hover .inner-glow{ opacity:1; filter:brightness(1.05) saturate(1.25); }
@keyframes flicker { 0%,100%{ opacity:1 } 45%{ opacity:.92 } 50%{ opacity:.78 } 55%{ opacity:.95 } 70%{ opacity:.88 } }
.pumpkin.carved:hover .carve-face .eye,
.pumpkin.carved:hover .carve-face::after{ background:radial-gradient(circle at 50% 60%, var(--glow-hot) 0 18%, var(--glow-on) 19% 55%, var(--glow-off) 70%); box-shadow:0 0 14px -2px rgba(255,170,32,.9),0 0 42px -6px rgba(255,140,0,.65),0 0 70px -8px rgba(255,90,0,.45); filter:brightness(1.05); animation:flicker 1.8s infinite steps(28); }
.pumpkin.carved:hover{ box-shadow:0 12px 34px -8px rgba(0,0,0,.9),0 0 60px -8px rgba(255,140,20,.55); }
.pumpkin.carved:active .inner-glow{ filter:brightness(.95) saturate(1.1); }

/* Lantern advanced variant (dynamic internal flame + subtle idle glow) */
.pumpkin.carved.lantern{ position:relative; --flicker:1; }
.pumpkin.carved.lantern .carve-face{ filter:brightness(calc(.82 + var(--flicker)*.08)); }
.pumpkin.carved.lantern .carve-face .flame{ position:absolute; left:50%; top:54%; width:30%; aspect-ratio:2/3; transform:translate(-50%,-50%) scale(calc(.95 + var(--flicker)*.15)); filter:blur(calc(1px + var(--flicker)*1.4px)); pointer-events:none; mix-blend-mode:screen; }
.pumpkin.carved.lantern .carve-face .flame::before,
.pumpkin.carved.lantern .carve-face .flame::after{ content:""; position:absolute; inset:0; border-radius:46% 54% 50% 50% / 40% 40% 60% 60%; background:
  radial-gradient(60% 55% at 50% 30%, rgba(255,255,210,.9), rgba(255,200,120,.65) 60%, rgba(255,140,0,.25) 72%, transparent 75%),
  radial-gradient(90% 90% at 50% 70%, rgba(255,120,0,.6), transparent 70%);
  animation:flameWaver 1.2s ease-in-out infinite; }
.pumpkin.carved.lantern .carve-face .flame::after{ inset:14% 16% 4% 16%; filter:blur(4px) brightness(1.3); opacity:.75; animation-duration:1.4s; }
.pumpkin.carved.lantern .inner-glow{ background:
  radial-gradient(40% 35% at 50% 55%, rgba(255,220,120,.55), rgba(255,140,20,.25) 68%, transparent 72%),
  radial-gradient(80% 70% at 50% 60%, rgba(255,155,30,.12), transparent 70%);
  opacity:.85; transition:opacity .6s, filter .6s; }
.pumpkin.carved.lantern:hover .inner-glow{ opacity:1; filter:brightness(1.15) saturate(1.35); }
.pumpkin.carved.lantern:hover{ box-shadow:0 14px 38px -10px rgba(0,0,0,.92),0 0 80px -16px rgba(255,155,20,.65); }
.pumpkin.carved.lantern:hover .carve-face .eye,
.pumpkin.carved.lantern:hover .carve-face::after{ animation:flicker 1.6s infinite steps(28); }

@keyframes flameWaver{ 0%,100%{ transform:translateY(0) scaleX(.82) } 50%{ transform:translateY(-6%) scaleX(.95) } }


@keyframes ember{ 0%,100%{ opacity:.45 } 50%{ opacity:.7 } }
@media (prefers-reduced-motion: reduce){ .pumpkin .icon::before{ animation:none; } }

/* Join */
.join-form { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; max-width:620px; margin:0 auto; }
.join-form input { flex:1 1 280px; background:#111; border:1px solid #222; color:var(--text); padding:.95rem 1.1rem; border-radius:var(--radius-sm); font-size:.9rem; font-family:var(--font-body); }
.join-form input:focus { outline:2px solid var(--orange); outline-offset:2px; }

/* Buy page specific styles */
.buy-hero { min-height:60vh; }
.chart-section { padding:3rem clamp(1rem,4vw,4rem); }
.chart-container { max-width:1200px; margin:0 auto; }
.chart-wrap { background:rgba(255,255,255,.05); padding:1.5rem; border-radius:24px; border:1px solid rgba(255,157,4,.2); box-shadow:0 8px 32px -8px rgba(0,0,0,.6); }
.panel-title { font-family:var(--font-title); font-size:2.2rem; text-align:center; margin-bottom:2rem; color:var(--orange); text-shadow:0 2px 4px #000; }

/* Footer */
.site-footer { text-align:center; padding:2rem 1rem 3rem; background:transparent; position:relative; overflow:hidden; }
.marquee { --speed:35s; width:100%; max-width:100vw; position:relative; overflow:hidden; mask:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent); margin-bottom:1.2rem; }
.track { display:inline-block; white-space:nowrap; animation:scroll var(--speed) linear infinite; font-family:var(--font-title); font-size:1.5rem; letter-spacing:2px; color:var(--orange); }
@keyframes scroll { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.legal { max-width:720px; margin:0 auto; font-size:.65rem; color:#666; line-height:1.4; }

/* Responsive */
@media (max-width:820px){
  .main-nav ul { position:absolute; top:100%; right:0; background:#0f0f0f; flex-direction:column; width:220px; padding:1rem 1.2rem 1.4rem; border:1px solid #1e1e1e; border-radius:var(--radius-sm); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(-8px); transition:.45s cubic-bezier(.65,.05,.36,1); }
  .main-nav ul.open { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-toggle{ display:block; }
  .cta-group { display:none; }
  .hero { padding-top:6rem; }
}
@media (max-width:520px){
  .hero { padding:6.5rem 1rem 4rem; }
  .panel { padding:4rem 1rem; }
  .panel.about-img { padding:3rem 1rem 3.2rem; }
  .pumpkin { padding:2rem 1rem 1.8rem; }
  .pumpkin .icon { width:64px; height:64px; }
}

/* Responsive fine-tuning for social pumpkins */
@media (min-width: 1600px){
  .hero-art .layer.scooby-main{ left:70%; }
}

/* Accessibility focus */
:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

/* Enhanced Responsive Design Fixes */
/* Prevent horizontal scrolling */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Container fixes */
.hero, .panel {
  width: 100%;
  box-sizing: border-box;
}

/* Marquee improvement */
.marquee {
  width: 100%;
  max-width: calc(100vw - 2rem);
  margin: 0 auto;
}

/* Enhanced mobile support */
@media (max-width: 768px) {
  .hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero .content {
    text-align: center;
    max-width: 100%;
  }
  
  .contract-box {
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
  }
  
  .contract-box code {
    word-break: break-all;
    font-size: 0.8rem;
    text-align: center;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .hero {
    padding: 5rem 0.75rem 3rem;
  }
  
  .glow-text {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
  
  .lead {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
  }
  
  .panel {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Ultra-small screens */
@media (max-width: 360px) {
  .hero {
    padding: 4rem 0.5rem 2rem;
  }
  
  .contract-box {
    padding: 0.5rem;
  }
  
  .candy-image {
    max-width: 120px;
  }
}

/* Large screens improvements */
@media (min-width: 1920px) {
  .hero-art .layer.scooby-main {
    left: 68%;
  }
  
  .hero {
    padding-left: clamp(2rem, 6vw, 8rem);
    padding-right: clamp(2rem, 6vw, 8rem);
  }
}

/* Ultra-wide screens */
@media (min-width: 2560px) {
  .hero-art .layer.scooby-main {
    left: 70%;
  }
  
  .hero {
    padding-left: clamp(4rem, 8vw, 12rem);
    padding-right: clamp(4rem, 8vw, 12rem);
  }
}

/* Utility animations for intersection reveals (optional JS) */
.reveal { opacity:0; transform:translateY(24px); transition:.75s cubic-bezier(.65,.05,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }