/* ============================================
   CaSocialSpin.com — Main Stylesheet
   Light teal & amber arcade theme
   ============================================ */

:root {
  --clr-primary: #0D9488;
  --clr-primary-dark: #0B7E73;
  --clr-primary-light: #5EEAD4;
  --clr-accent: #F59E0B;
  --clr-accent-dark: #D97706;
  --clr-rose: #F43F5E;
  --clr-rose-light: #FDA4AF;
  --clr-indigo: #6366F1;
  --clr-sky: #38BDF8;

  --clr-bg: #F8FFFE;
  --clr-white: #FFFFFF;
  --clr-text: #1A2E2B;
  --clr-text-mid: #3D5856;
  --clr-text-muted: #6B8A87;
  --clr-border: #D1E8E5;
  --clr-border-light: #E8F5F3;

  --grad-hero: linear-gradient(135deg, #F0FDFA 0%, #ECFDF5 40%, #FFFBEB 100%);
  --grad-card: linear-gradient(145deg, #FFFFFF 0%, #F0FDFA 100%);
  --grad-primary: linear-gradient(135deg, #0D9488 0%, #5EEAD4 100%);
  --grad-accent: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
  --grad-footer: linear-gradient(180deg, #1A2E2B 0%, #0F1B19 100%);

  --ff-main: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: clamp(2rem, 4vw, 3rem);
  --fs-hero: clamp(2.25rem, 5vw, 3.75rem);
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px; --sp-section: 80px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(13,148,136,0.06);
  --shadow-md: 0 4px 14px rgba(13,148,136,0.08);
  --shadow-lg: 0 8px 32px rgba(13,148,136,0.12);
  --shadow-xl: 0 16px 48px rgba(13,148,136,0.16);
  --shadow-card: 0 2px 12px rgba(13,148,136,0.07);
  --tr-fast: 0.15s ease; --tr-normal: 0.3s ease; --tr-slow: 0.5s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--ff-main);font-size:var(--fs-base);line-height:1.7;color:var(--clr-text);background:var(--clr-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--clr-primary);text-decoration:none;transition:color var(--tr-fast)}
a:hover{color:var(--clr-primary-dark)}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.25;font-weight:var(--fw-bold);color:var(--clr-text)}

.container{max-width:1200px;margin:0 auto;padding:0 var(--sp-lg)}
.section{padding:var(--sp-section) 0}
.section-header{text-align:center;max-width:680px;margin:0 auto var(--sp-2xl)}
.section-header h2{font-size:var(--fs-3xl);font-weight:var(--fw-extrabold);margin-bottom:var(--sp-md)}
.section-header p{font-size:var(--fs-md);color:var(--clr-text-mid)}
.badge{display:inline-block;padding:var(--sp-xs) var(--sp-md);background:rgba(13,148,136,0.1);color:var(--clr-primary);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:1.2px;border-radius:var(--r-full);margin-bottom:var(--sp-md)}
.text-gradient{background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-sm);padding:14px 28px;font-family:var(--ff-main);font-size:var(--fs-base);font-weight:var(--fw-bold);border:2px solid transparent;border-radius:var(--r-full);cursor:pointer;transition:all var(--tr-normal);text-decoration:none;line-height:1}
.btn-primary{background:var(--grad-primary);color:var(--clr-white);box-shadow:0 4px 16px rgba(13,148,136,0.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(13,148,136,0.4);color:var(--clr-white)}
.btn-accent{background:var(--clr-accent);color:var(--clr-white);box-shadow:0 4px 16px rgba(245,158,11,0.3)}
.btn-accent:hover{background:var(--clr-accent-dark);transform:translateY(-2px);box-shadow:0 6px 24px rgba(245,158,11,0.4);color:var(--clr-white)}
.btn-outline{background:transparent;color:var(--clr-primary);border-color:var(--clr-primary)}
.btn-outline:hover{background:var(--clr-primary);color:var(--clr-white)}
.btn-gold{background:var(--grad-accent);color:var(--clr-text);font-weight:var(--fw-extrabold);box-shadow:0 4px 16px rgba(245,158,11,0.3)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(245,158,11,0.4)}
.btn-lg{padding:18px 36px;font-size:var(--fs-lg)}

/* Header */
.header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:all var(--tr-normal)}
.header.scrolled{border-bottom-color:var(--clr-border);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:var(--sp-sm);font-size:var(--fs-xl);font-weight:var(--fw-extrabold);color:var(--clr-text)}
.logo:hover{color:var(--clr-text)}
.logo-icon{width:42px;height:42px;background:var(--grad-primary);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--clr-white)}
.nav-desktop{display:flex;align-items:center;gap:var(--sp-xl)}
.nav-desktop a{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--clr-text-mid);padding:var(--sp-sm) 0;position:relative}
.nav-desktop a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--clr-primary);border-radius:2px;transition:width var(--tr-normal)}
.nav-desktop a:hover,.nav-desktop a.active{color:var(--clr-primary)}
.nav-desktop a:hover::after,.nav-desktop a.active::after{width:100%}
.mobile-menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:var(--sp-sm)}
.mobile-menu-btn span{display:block;width:24px;height:2px;background:var(--clr-text);border-radius:2px;transition:all var(--tr-normal)}
.nav-mobile{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;background:var(--clr-white);padding:var(--sp-xl) var(--sp-lg);z-index:999;overflow-y:auto}
.nav-mobile.open{display:flex;flex-direction:column;gap:var(--sp-md)}
.nav-mobile a{font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--clr-text);padding:var(--sp-md) 0;border-bottom:1px solid var(--clr-border-light)}

/* Age Modal */
.age-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:var(--sp-lg)}
.age-modal-overlay.hidden{display:none}
.age-modal{background:var(--clr-white);border-radius:var(--r-xl);padding:var(--sp-2xl) var(--sp-xl);max-width:440px;width:100%;text-align:center;box-shadow:var(--shadow-xl)}
.age-modal-icon{font-size:48px;margin-bottom:var(--sp-md)}
.age-modal h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-sm)}
.age-modal p{color:var(--clr-text-mid);margin-bottom:var(--sp-lg)}
.age-modal-buttons{display:flex;gap:var(--sp-md);justify-content:center}

/* Cookie Banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--clr-white);border-top:1px solid var(--clr-border);padding:var(--sp-lg);z-index:9000;box-shadow:0 -4px 20px rgba(0,0,0,0.08);transform:translateY(100%);transition:transform var(--tr-slow)}
.cookie-banner.visible{transform:translateY(0)}
.cookie-banner.hidden{display:none}
.cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-lg);max-width:1200px;margin:0 auto;flex-wrap:wrap}
.cookie-inner p{flex:1;min-width:280px;font-size:var(--fs-sm);color:var(--clr-text-mid)}
.cookie-inner p a{text-decoration:underline}
.cookie-buttons{display:flex;gap:var(--sp-sm)}

/* Hero */
.hero{background:var(--grad-hero);padding:var(--sp-3xl) 0 var(--sp-section);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-180px;right:-180px;width:480px;height:480px;background:radial-gradient(circle,rgba(13,148,136,0.07) 0%,transparent 70%);border-radius:50%}
.hero::after{content:'';position:absolute;bottom:-120px;left:-80px;width:360px;height:360px;background:radial-gradient(circle,rgba(245,158,11,0.08) 0%,transparent 70%);border-radius:50%}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2xl);align-items:center;position:relative;z-index:1}
.hero-content{max-width:560px}
.hero-content h1{font-size:var(--fs-hero);font-weight:var(--fw-extrabold);margin-bottom:var(--sp-lg);line-height:1.12}
.hero-content p{font-size:var(--fs-md);color:var(--clr-text-mid);margin-bottom:var(--sp-xl);max-width:480px}
.hero-buttons{display:flex;gap:var(--sp-md);flex-wrap:wrap}
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-game-preview{width:100%;max-width:440px;aspect-ratio:1;background:var(--grad-card);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);display:flex;align-items:center;justify-content:center;font-size:110px;position:relative;overflow:hidden;border:2px solid var(--clr-border-light)}

/* Features */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.feature-card{background:var(--clr-white);border-radius:var(--r-lg);padding:var(--sp-xl);border:1px solid var(--clr-border-light);box-shadow:var(--shadow-card);transition:all var(--tr-normal)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-icon{width:56px;height:56px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:var(--sp-md)}
.feature-icon.teal{background:rgba(13,148,136,0.1)}
.feature-icon.amber{background:rgba(245,158,11,0.1)}
.feature-icon.rose{background:rgba(244,63,94,0.1)}
.feature-icon.indigo{background:rgba(99,102,241,0.1)}
.feature-icon.sky{background:rgba(56,189,248,0.1)}
.feature-card h3{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-bottom:var(--sp-sm)}
.feature-card p{font-size:var(--fs-sm);color:var(--clr-text-mid);line-height:1.7}

/* Steps */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-xl);counter-reset:step}
.step-card{text-align:center;padding:var(--sp-xl) var(--sp-md)}
.step-number{width:64px;height:64px;border-radius:50%;background:var(--grad-primary);color:var(--clr-white);font-size:var(--fs-2xl);font-weight:var(--fw-extrabold);display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-md);box-shadow:0 4px 16px rgba(13,148,136,0.25)}
.step-card h3{font-size:var(--fs-lg);margin-bottom:var(--sp-sm)}
.step-card p{font-size:var(--fs-sm);color:var(--clr-text-mid)}

/* Game Section */
.game-section{background:var(--grad-hero)}
.game-wrapper{max-width:800px;margin:0 auto}
.game-card{background:var(--clr-white);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-xl);border:1px solid var(--clr-border-light)}
.game-canvas-area{padding:var(--sp-xl);display:flex;justify-content:center;align-items:center;min-height:400px;background:linear-gradient(180deg,#F0FDFA 0%,#FFFFFF 100%)}
.game-info{padding:var(--sp-xl);border-top:1px solid var(--clr-border-light)}
.game-info h3{font-size:var(--fs-xl);margin-bottom:var(--sp-sm)}
.game-info p{color:var(--clr-text-mid);line-height:1.7}
.game-disclaimer{margin-top:var(--sp-lg);padding:var(--sp-md);background:#FFFBEB;border-radius:var(--r-sm);border-left:4px solid var(--clr-accent);font-size:var(--fs-sm);color:var(--clr-text-mid);font-style:italic}

/* Spinner Game */
.spinner-container{display:flex;flex-direction:column;align-items:center;gap:var(--sp-lg);width:100%;max-width:420px}
.reels-wrapper{display:flex;gap:var(--sp-md);justify-content:center;align-items:center}
.reel{width:110px;height:130px;background:var(--clr-white);border:3px solid var(--clr-border);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:60px;box-shadow:var(--shadow-md);overflow:hidden;position:relative;transition:border-color var(--tr-normal)}
.reel.spinning{border-color:var(--clr-primary);animation:reelGlow 0.4s ease infinite alternate}
.reel.win{border-color:var(--clr-accent);box-shadow:0 0 20px rgba(245,158,11,0.3)}
@keyframes reelGlow{from{box-shadow:var(--shadow-md)}to{box-shadow:0 0 16px rgba(13,148,136,0.25)}}
.reel-symbol{transition:transform var(--tr-fast)}
.spinner-controls{display:flex;flex-direction:column;align-items:center;gap:var(--sp-md);width:100%}
.difficulty-row{display:flex;align-items:center;gap:var(--sp-md)}
.difficulty-row label{font-weight:var(--fw-semibold);color:var(--clr-text-mid);font-size:var(--fs-sm)}
.difficulty-row select{padding:var(--sp-sm) var(--sp-md);border:2px solid var(--clr-border);border-radius:var(--r-sm);font-family:var(--ff-main);font-size:var(--fs-sm);font-weight:var(--fw-medium);background:var(--clr-white);color:var(--clr-text);cursor:pointer}
.difficulty-row select:focus{outline:none;border-color:var(--clr-primary)}
#spinBtn{min-width:200px}
#spinBtn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.spinner-result{min-height:48px;text-align:center;font-size:var(--fs-lg);font-weight:var(--fw-bold);padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-sm);transition:all var(--tr-normal)}
.spinner-result.win{color:var(--clr-primary);background:rgba(13,148,136,0.08)}
.spinner-result.match{color:var(--clr-accent-dark);background:rgba(245,158,11,0.1)}
.spinner-result.jackpot{color:var(--clr-rose);background:rgba(244,63,94,0.08)}
.score-display{font-size:var(--fs-sm);color:var(--clr-text-muted)}
.score-display span{font-weight:var(--fw-bold);color:var(--clr-primary)}

/* FAQ */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border:1px solid var(--clr-border-light);border-radius:var(--r-md);margin-bottom:var(--sp-md);background:var(--clr-white);overflow:hidden;transition:box-shadow var(--tr-normal)}
.faq-item:hover{box-shadow:var(--shadow-sm)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--sp-lg);background:none;border:none;cursor:pointer;font-family:var(--ff-main);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--clr-text);text-align:left;gap:var(--sp-md)}
.faq-question:hover{color:var(--clr-primary)}
.faq-icon{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:rgba(13,148,136,0.08);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--clr-primary);transition:transform var(--tr-normal)}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--tr-slow)}
.faq-item.open .faq-answer{max-height:400px}
.faq-answer-inner{padding:0 var(--sp-lg) var(--sp-lg);color:var(--clr-text-mid);font-size:var(--fs-sm);line-height:1.8}

/* CTA */
.cta-section{background:var(--grad-primary);text-align:center;color:var(--clr-white);padding:var(--sp-3xl) 0;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:rgba(255,255,255,0.05);border-radius:50%}
.cta-section h2{color:var(--clr-white);font-size:var(--fs-3xl);margin-bottom:var(--sp-md)}
.cta-section p{font-size:var(--fs-md);opacity:0.9;margin-bottom:var(--sp-xl);max-width:560px;margin-left:auto;margin-right:auto}

/* Footer */
.footer{background:var(--grad-footer);color:rgba(255,255,255,0.7);padding:var(--sp-3xl) 0 var(--sp-xl)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-2xl);margin-bottom:var(--sp-2xl)}
.footer-brand p{font-size:var(--fs-sm);line-height:1.8;margin-top:var(--sp-md)}
.footer h4{color:var(--clr-white);font-size:var(--fs-sm);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-md)}
.footer-links a{display:block;color:rgba(255,255,255,0.6);font-size:var(--fs-sm);padding:var(--sp-xs) 0;transition:color var(--tr-fast)}
.footer-links a:hover{color:var(--clr-white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:var(--sp-lg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-md)}
.footer-bottom p{font-size:var(--fs-xs)}
.footer-disclaimer{font-size:var(--fs-xs);max-width:600px;line-height:1.6;opacity:0.5}
.age-badge-footer{display:inline-flex;align-items:center;gap:var(--sp-sm);padding:var(--sp-sm) var(--sp-md);border:1px solid rgba(255,255,255,0.2);border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:rgba(255,255,255,0.8);margin-top:var(--sp-md)}

/* Legal Pages */
.legal-page{padding:var(--sp-section) 0;min-height:70vh}
.legal-page .container{max-width:820px}
.legal-page h1{font-size:var(--fs-3xl);margin-bottom:var(--sp-sm)}
.legal-page .last-updated{color:var(--clr-text-muted);font-size:var(--fs-sm);margin-bottom:var(--sp-2xl)}
.legal-toc{background:var(--clr-white);border:1px solid var(--clr-border-light);border-radius:var(--r-md);padding:var(--sp-lg);margin-bottom:var(--sp-2xl)}
.legal-toc h3{font-size:var(--fs-base);margin-bottom:var(--sp-md)}
.legal-toc ol{list-style:decimal;padding-left:var(--sp-lg)}
.legal-toc li{margin-bottom:var(--sp-xs)}
.legal-toc a{font-size:var(--fs-sm);color:var(--clr-primary)}
.legal-section{margin-bottom:var(--sp-2xl)}
.legal-section h2{font-size:var(--fs-xl);margin-bottom:var(--sp-md);padding-bottom:var(--sp-sm);border-bottom:2px solid var(--clr-border-light)}
.legal-section h3{font-size:var(--fs-md);margin-top:var(--sp-lg);margin-bottom:var(--sp-sm)}
.legal-section p{color:var(--clr-text-mid);margin-bottom:var(--sp-md);line-height:1.8}
.legal-section ul,.legal-section ol{list-style:disc;padding-left:var(--sp-lg);margin-bottom:var(--sp-md)}
.legal-section ol{list-style:decimal}
.legal-section li{color:var(--clr-text-mid);margin-bottom:var(--sp-sm);line-height:1.7}
.legal-section table{width:100%;border-collapse:collapse;margin-bottom:var(--sp-md);font-size:var(--fs-sm)}
.legal-section th,.legal-section td{padding:var(--sp-md);text-align:left;border:1px solid var(--clr-border)}
.legal-section th{background:var(--clr-bg);font-weight:var(--fw-semibold)}
.legal-section td{color:var(--clr-text-mid)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2xl)}
.contact-form{background:var(--clr-white);border:1px solid var(--clr-border-light);border-radius:var(--r-lg);padding:var(--sp-xl);box-shadow:var(--shadow-card)}
.form-group{margin-bottom:var(--sp-lg)}
.form-group label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--clr-text);margin-bottom:var(--sp-sm)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px var(--sp-md);border:2px solid var(--clr-border);border-radius:var(--r-sm);font-family:var(--ff-main);font-size:var(--fs-base);color:var(--clr-text);transition:border-color var(--tr-fast);background:var(--clr-white)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--clr-primary);box-shadow:0 0 0 3px rgba(13,148,136,0.1)}
.form-group textarea{resize:vertical;min-height:140px}
.form-group .error-msg{font-size:var(--fs-xs);color:var(--clr-rose);margin-top:var(--sp-xs);display:none}
.form-group.has-error input,.form-group.has-error textarea{border-color:var(--clr-rose)}
.form-group.has-error .error-msg{display:block}
.form-success{display:none;text-align:center;padding:var(--sp-xl)}
.form-success.visible{display:block}
.form-success .check-icon{font-size:48px;margin-bottom:var(--sp-md)}
.contact-info-cards{display:flex;flex-direction:column;gap:var(--sp-md)}
.contact-card{background:var(--clr-white);border:1px solid var(--clr-border-light);border-radius:var(--r-md);padding:var(--sp-lg);display:flex;gap:var(--sp-md);align-items:flex-start}
.contact-card-icon{width:48px;height:48px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:rgba(13,148,136,0.08)}
.contact-card h4{font-size:var(--fs-base);margin-bottom:var(--sp-xs)}
.contact-card p{font-size:var(--fs-sm);color:var(--clr-text-mid)}

/* Content Article */
.content-section{background:var(--clr-white)}
.content-article{max-width:800px;margin:0 auto}
.content-article h3{font-size:var(--fs-xl);margin-top:var(--sp-xl);margin-bottom:var(--sp-md)}
.content-article p{color:var(--clr-text-mid);margin-bottom:var(--sp-md);line-height:1.8}

/* Scroll Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal.revealed{opacity:1;transform:translateY(0)}

/* Toast */
.toast-container{position:fixed;top:88px;right:var(--sp-lg);z-index:9500;display:flex;flex-direction:column;gap:var(--sp-sm)}
.toast{padding:var(--sp-md) var(--sp-lg);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--clr-white);box-shadow:var(--shadow-lg);animation:toastIn 0.3s ease;cursor:pointer}
.toast.success{background:var(--clr-primary)}
.toast.error{background:var(--clr-rose)}
.toast.info{background:var(--clr-indigo)}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* Responsive */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-content{max-width:100%}
  .hero-content p{max-width:100%}
  .hero-buttons{justify-content:center}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  :root{--sp-section:56px}
  .nav-desktop{display:none}
  .mobile-menu-btn{display:flex}
  .features-grid,.steps-grid{grid-template-columns:1fr}
  .hero-game-preview{max-width:300px;font-size:80px}
  .reel{width:90px;height:110px;font-size:48px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .age-modal-buttons{flex-direction:column}
}
@media(max-width:480px){
  .hero-content h1{font-size:1.75rem}
  .reel{width:76px;height:94px;font-size:40px}
  .btn-lg{padding:14px 24px;font-size:var(--fs-base)}
}