:root{
  /* New Soft Palette */
  --bg-page: #f0f9ff;
  --bg-card: #ffffff;
  --primary: #3b82f6; /* Soft Royal Blue */
  --secondary: #ec4899; /* Pink */
  --accent: #f59e0b; /* Amber */
  --text-main: #1e293b;
  --text-muted: #64748b;
  
  --sky:#bde6ff;--sky2:#f4fbff;--ink:#183048;--pill:#ffffffcc;--pillText:#143044;--btn:#ff7ac6;--btn2:#ffd166;--ok:#21c55d
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Fredoka', ui-rounded,system-ui,sans-serif;color:var(--text-main);background:var(--bg-page)}
a{color:currentColor;text-decoration:none}
button{font:inherit}
html{scroll-behavior:smooth}

/* Landing */
body.landing .site-header{position:fixed;top:0;left:0;right:0;z-index:20; padding: 1rem;}
.site-header .navbar{max-width: 1200px; margin: 0 auto; display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.5rem;border-radius:99px;transition:all .2s; background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);}
.site-header.scrolled .navbar{background:rgba(255,255,255,0.95);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}

.hero{min-height:90vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:6rem 2rem 4rem;background: radial-gradient(circle at 50% 30%, #e0f2fe 0%, #f0f9ff 70%); text-align: center;}
.hero-content{max-width:800px; position: relative; z-index: 2;}
.hero h1{font-size:clamp(3rem,8vw,5rem);margin:0;color:var(--text-main);line-height: 1.1; letter-spacing: -0.02em;}
.hero-subtitle{font-size:clamp(1.2rem, 4vw, 1.5rem); margin: 1.5rem auto; max-width: 600px; color: var(--text-muted); line-height: 1.5;}
.hero-buttons{display:flex;gap:1rem;justify-content: center; flex-wrap: wrap; margin-top: 2rem;}

.btn-primary{background:var(--secondary);color:#fff; box-shadow: 0 10px 25px -5px rgba(236, 72, 153, 0.4); border:none;}
.btn-primary:hover{transform:translateY(-2px);background:#db2777; box-shadow: 0 15px 30px -5px rgba(236, 72, 153, 0.5);}

.btn-secondary{background:#fff;border:2px solid var(--bg-page);color:var(--primary); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);}
.btn-secondary:hover{transform:translateY(-2px);background:#fff;border-color:var(--primary);}

/* Sections Common */
section { padding: 5rem 2rem; }
section h2 { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; color: var(--text-main); }

.benefits{background:#fff;}
.benefit-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1100px;margin:0 auto}
.benefit{background:var(--bg-page); padding: 2rem; border-radius: 1.5rem; text-align: center; transition: transform 0.2s;}
.benefit:hover{transform: translateY(-5px);}
.benefit h3{font-size: 1.5rem; color: var(--primary); margin-bottom: 1rem;}
.benefit p{color: var(--text-muted); line-height: 1.6;}

/* Legacy overrides to clean up */
.hero-inner, .subtitle, .cta-row, .note, .seo { display: none; } /* Hide old unused classes if any remain */


/* Added: Features */
.features{background:#fffaf0;padding:3rem 2rem;text-align:center}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:2rem}
.feature-card{background:#ffe6eb;padding:1.5rem;border-radius:1rem;font-size:1.1rem;font-weight:bold;box-shadow:0 2px 5px rgba(0,0,0,.1)}

/* Added: FAQ */
.faq{padding:3rem 2rem}
.faq-item{margin-bottom:1.5rem}
.faq-item h3{font-size:1.3rem;color:#ff4d6d}

/* Added: Footer */
.footer{background:#333;color:#fff;padding:2rem;text-align:center}
.footer a{color:#ffb6c1}
.footer .small{font-size:.9rem;margin-top:.5rem}

/* Decorative balloons in hero */
.hero-art, .hero-balloons{position:absolute;inset:0;pointer-events:none; z-index: 1;}
.hero-art .balloon, .hero-balloons .balloon {
    position: absolute;
    width: 56px; height: 70px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    /* Main body highlight */
    background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9) 0%, transparent 50%);
    box-shadow: inset -6px -6px 12px rgba(0,0,0,0.15);
    animation: float 12s linear infinite, wobble 3s ease-in-out infinite;
}
/* Knot for hero balloons */
.hero-art .balloon::before, .hero-balloons .balloon::before {
    content: ""; position: absolute; bottom: -4px; left: 50%;
    width: 8px; height: 6px; border-radius: 50%;
    background: inherit; transform: translateX(-50%);
}
/* String for hero balloons */
.hero-art .balloon::after, .hero-balloons .balloon:after {
    content:""; position:absolute; top: 100%; left:50%; width:1px; height:40px; background:rgba(255,255,255,0.6); transform:translateX(-50%);
}
.hero-art .balloon.red, .hero-balloons .balloon.red{background-color:#ff6b6b;left:10%;animation-delay:0s}
.hero-art .balloon.blue, .hero-balloons .balloon.blue{background-color:#5eb6ff;left:25%;animation-delay:1s}
.hero-art .balloon.green, .hero-balloons .balloon.green{background-color:#47e36b;left:40%;animation-delay:2s}
.hero-art .balloon.yellow, .hero-balloons .balloon.yellow{background-color:#ffd166;left:60%;animation-delay:1.3s}
.hero-art .balloon.purple, .hero-balloons .balloon.purple{background-color:#b892ff;left:75%;animation-delay:.6s}
.hero-art .balloon.orange, .hero-balloons .balloon.orange{background-color:#ff9a3d;left:88%;animation-delay:2.8s}

@keyframes float{from{transform:translateY(120%)}to{transform:translateY(-120vh)}} /* Fix start pos */
@keyframes wobble{0%,100%{transform:translateX(0) rotate(0deg)}50%{transform:translateX(6px) rotate(4deg)}}

/* Game Style Update */
body.game{touch-action:manipulation;overscroll-behavior:none;background:linear-gradient(180deg,#bae6fd,#f0f9ff)} /* Softer Sky */
.hud{position:fixed;top:.5rem;left:.5rem;right:.5rem;display:grid;grid-template-columns:auto 1fr auto;gap:.5rem;z-index:10;align-items:center}

.pill{background:var(--pill);color:var(--pillText);backdrop-filter:saturate(160%) blur(4px);border-radius:999px;padding:.6rem .9rem;font-weight:800;text-align:center;box-shadow:0 6px 16px #00000014;font-size:1.1rem}
.pill.center{justify-self:center;display:flex;gap:.5rem;align-items:center}
.dot{opacity:.5}
.icon-btn{width:56px;height:56px;border-radius:50%;border:none;background:var(--pill);box-shadow:0 6px 16px #00000014;display:grid;place-items:center;cursor:pointer}
.icon{width:22px;height:22px;display:inline-block;mask-size:cover;-webkit-mask-size:cover;background:#143044}
.speaker-on{mask: url('/assets/icons/speaker-on.svg') no-repeat center / contain;-webkit-mask: url('/assets/icons/speaker-on.svg') no-repeat center / contain}
.speaker-off{mask: url('/assets/icons/speaker-off.svg') no-repeat center / contain;-webkit-mask: url('/assets/icons/speaker-off.svg') no-repeat center / contain}

.game-area{position:fixed;inset:0;overflow:hidden;background:linear-gradient(180deg,#c9eeff 30%,#b7e6ff 60%,#97df87 60%,#62cf6a 100%)}
.game-area:before{content:"";position:absolute;top:12%;left:10%;width:90px;height:48px;background:#fff;border-radius:40px;box-shadow:20px 10px 0 0 #fff, 45px 15px 0 0 #fff;opacity:.9}
.game-area:after{content:"";position:absolute;top:18%;left:70%;width:110px;height:56px;background:#fff;border-radius:40px;box-shadow:20px 10px 0 0 #fff, 45px 15px 0 0 #fff;opacity:.85}

/* Themes */
body.theme-space .game-area {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 70%, #312e81 100%);
}
body.theme-space .game-area:before,
body.theme-space .game-area:after {
  opacity: 0.1; /* dim clouds in space */
}
body.theme-sea .game-area {
  background: linear-gradient(180deg, #ecfeff 0%, #a5f3fc 40%, #0ea5e9 100%);
}

/* Interactive Feedback (Juice) */
.click-ripple {
    position: absolute;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%) scale(1);
    animation: rippleAnim 0.5s ease-out forwards;
    pointer-events: none;
    z-index: 5;
}
@keyframes rippleAnim {
    to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

.floating-score {
    position: absolute;
    color: #fff;
    font-weight: 900;
    font-size: 24px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: floatUp 1s ease-out forwards;
    z-index: 20;
}
@keyframes floatUp {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -100px) scale(1); opacity: 0; }
}

/* Mouse Trail */
.trail-dot {
    position: absolute;
    width: 12px; height: 12px;
    background: radial-gradient(circle, #fff, rgba(255,255,255,0));
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: trailFade 0.6s linear forwards;
    z-index: 4;
}
@keyframes trailFade {
    0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
}

.balloon-entity {
    position: absolute;
    width: 72px; height: 90px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    /* Main body gradient (3D look) */
    background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.1) 20%, transparent 60%);
    box-shadow: 
        inset -10px -10px 20px rgba(0,0,0,0.15),
        2px 10px 20px rgba(0,0,0,0.15); /* Drop shadow */
    animation: wobbleUp 4s ease-in-out infinite;
    transform-origin: center bottom;
    overflow: visible;
}
/* The Knot */
.balloon-entity::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px; height: 10px;
    background: inherit; /* Matches base color */
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1);
}
/* The String */
.balloon-entity::after {
    content: "";
    position: absolute;
    top: 100%; /* Start at bottom of balloon */
    left: 50%;
    width: 1px; 
    height: 80px;
    background: rgba(255,255,255,0.7);
    transform: translateX(-50%);
    z-index: -1;
}

/* Smoother animation - More Wobbly */
@keyframes wobbleUp {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(12px, 0) rotate(6deg); }
  40% { transform: translate(-8px, 0) rotate(-4deg); }
  60% { transform: translate(10px, 0) rotate(5deg); }
  80% { transform: translate(-6px, 0) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.modal{position:fixed;inset:0;background:#00000055;display:grid;place-items:center}
.modal.hidden{display:none}
.modal-card{background:#fff;border-radius:20px;padding:1.2rem 1.2rem 1.4rem;min-width:280px;box-shadow:0 20px 40px #0000002a;text-align:center}
.modal-card h2{font-size:1.8rem;color:#143044}
.modal-card h2{margin-top:0}
.final-score{font-size:1.3rem}

/* Modal Actions (Pause / Game Over) */
.modal .actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.modal .btn {
    padding: 0.8rem 1.5rem;
    border-radius: 99px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    border: 2px solid transparent;
    transition: transform 0.1s;
    background: #f1f5f9;
    color: #334155;
}
.modal .btn:hover { transform: translateY(-2px); background: #e2e8f0; }

.modal .btn.primary {
    background: var(--secondary);
    color: white;
    box-shadow: 0 4px 10px rgba(236, 72, 153, 0.3);
}
.modal .btn.primary:hover { background: #db2777; }

/* Confetti */
.confetti{position:absolute;width:8px;height:12px;background:var(--btn);opacity:.95;transform:translate(-50%,-50%);animation:burst .6s ease-out forwards;border-radius:2px}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(360deg);opacity:0}}

/* Confetti rain for finale */
.confetti-rain{position:absolute;width:8px;height:14px;top:-12px;border-radius:2px;opacity:.95;animation:rain 1.2s linear forwards}
@keyframes rain{to{transform:translateY(110vh) rotate(360deg);opacity:.9}}

/* Landing decorative scene */
.sun{position:absolute;top:20px;right:20px;width:80px;height:80px;border-radius:50%;background:#ffd166;box-shadow:0 0 0 10px #ffd16655, 0 0 0 22px #ffd16633}
.cloud{position:absolute;background:#fff;border-radius:40px;box-shadow:20px 10px 0 0 #fff, 45px 15px 0 0 #fff}
.cloud.c1{top:60px;left:10%;width:70px;height:40px;opacity:.9}
.cloud.c2{top:120px;left:40%;width:90px;height:48px;opacity:.85}
.cloud.c3{top:80px;left:70%;width:80px;height:44px;opacity:.8}
.grass{position:absolute;bottom:0;left:0;right:0;height:90px;background:linear-gradient(180deg,#7ee082,#4ccf59)}
.tree{position:absolute;bottom:60px;width:16px;height:60px;background:#8b5e3c;border-radius:6px}
.tree:after{content:"";position:absolute;bottom:40px;left:-24px;width:64px;height:44px;background:#3fcf6f;border-radius:50%}
.tree.t1{left:12%}
.tree.t2{left:84%}

/* Landing content enhancements */
.benefits h2{font-size:clamp(1.4rem,4.5vw,2rem)}
.benefits .about,.benefits .howto,.benefits .why{max-width:1000px;margin:1rem auto}
.benefits ul{padding-left:1.2rem}
.quote{max-width:900px;margin:1rem auto;padding:1rem 1.25rem;border-left:6px solid #ffd166;background:#fff8e7;border-radius:8px;box-shadow:0 4px 12px #00000010}

/* Utilities */
.hidden{display:none !important}

/* Color pool */
.c-red{background:#ff6b6b}
.c-blue{background:#5eb6ff}
.c-green{background:#47e36b}
.c-yellow{background:#ffd166}
.c-purple{background:#b892ff}
.c-orange{background:#ff9a3d}
.c-pink{background:#ff7ac6}
.c-teal{background:#14b8a6}
.c-cyan{background:#22d3ee}
.c-lime{background:#84cc16}
.c-rose{background:#fb7185}
.c-indigo{background:#6366f1}

/* Special Balloons */
.c-gold {
    background: radial-gradient(circle at 30% 30%, #fff7cc, #ffd700 40%, #b8860b 85%);
    box-shadow: inset 0 0 10px #ffeeaa, 0 8px 16px #00000030;
}
.c-star {
    background: radial-gradient(circle at 30% 30%, #e0f2fe, #38bdf8);
}
.c-star::before {
    content: "★";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@media (min-width: 768px){
  .hero{min-height:85vh}
}

/* --- Additional landing styles (merged) --- */
/* Extra hero text */
.hero-extra{font-size:1.1rem;margin-top:1rem;color:#444;line-height:1.6}
/* Complementary hero sub-rules */
.hero .subtitle{font-size:1.2rem;margin:1rem 0}
.hero .cta-row{margin-top:1.5rem}
.hero-art{position:relative;height:200px;margin-top:2rem}

/* Navigation */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;column-gap:2rem}
.navbar .logo{font-size:1.4rem;font-weight:bold;color:#ff5a5f;text-decoration:none;margin-right:1.25rem;white-space:nowrap}
.nav-links{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0}
.nav-links a{text-decoration:none;color:#333;font-weight:500}
.nav-links a:hover{color:#ff5a5f}
.nav-links a.active{color:#ff4d6d;border-bottom:3px solid #ff4d6d;padding-bottom:.2rem}

/* Anchor offset for fixed header */
:is(#benefits,#how,#testimonials,#play){scroll-margin-top:90px}

/* How It Works - Clean */
.how-it-works{background:var(--bg-page);padding:4rem 2rem;text-align:center;}
.how-it-works h2{font-size:2rem;margin-bottom:3rem;color:var(--text-main);}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:1000px;margin:0 auto}
.step{background:#fff;padding:2.5rem;border-radius:1.5rem;box-shadow:0 10px 30px -10px rgba(0,0,0,0.05); text-align: center; border: 1px solid rgba(0,0,0,0.02);}
.step-number{background:var(--primary);color:#fff;font-weight:900;border-radius:50%;display:inline-flex; width:48px;height:48px; align-items: center; justify-content: center; margin-bottom:1.5rem; font-size: 1.25rem;}
.step h3{color:var(--text-main); margin-bottom: 0.5rem;}
.step p{color:var(--text-muted);}

/* Expect Section - Clean */
.expect{padding:4rem 2rem;background:#fff;text-align:center}
.expect h2{font-size:2rem;margin-bottom:2rem}
.expect-list{list-style:none;padding:0;margin:0 auto;max-width:600px;text-align:left; background: var(--bg-page); padding: 2rem; border-radius: 1.5rem;}
.expect-list li{font-size:1.1rem;margin-bottom:1rem;padding-left:2rem;position:relative; color: var(--text-main);}
.expect-list li::before{content:"✔";position:absolute;left:0;color:var(--ok);font-weight:bold; font-size: 1.2rem;}

/* Testimonials (card style) - Clean */
.testimonials{background:var(--bg-page);padding:4rem 2rem;text-align:center}
.testimonials h2{font-size:2rem;margin-bottom:2.5rem}
.testimonial-list{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:1000px;margin:0 auto}
.testimonial{background:#fff;padding:2rem;border-radius:1.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.05); text-align: left; border: 1px solid rgba(0,0,0,0.02);}
.testimonial .quote{font-style:italic;font-size:1.1rem;margin-bottom:1rem; border: none; background: none; box-shadow: none; padding: 0; color: var(--text-main);}
.testimonial .author{font-weight:bold;color:var(--primary); display: block; margin-top: 1rem; font-style: normal; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em;}

/* Play CTA */
.play-cta{background:#fff;padding:6rem 2rem;text-align:center;}

.play-cta h2{font-size:2rem;margin-bottom:1rem}
.play-cta p{font-size:1.2rem;margin-bottom:1.5rem;color:#333}

/* Landing (Legacy - Hidden/Depreciated) */
/* .hero, .benefits, .how-it-works, .expect, .testimonials, .play-cta { display: none; } */

/* --- NEW LANDING PAGE STYLES --- */

/* Global container for the new layout */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 1.5rem; 
    width: 100%;
}

/* Hero Section */
.hero-new {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    /* Soft cheerful gradient */
    background: radial-gradient(circle at 60% 30%, #e0f2fe 0%, #f0f9ff 60%, #fff 100%);
}

.split-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  width: 100%;
}

.hero-text-side { 
    flex: 1; 
    text-align: left; 
    z-index: 10;
}
.hero-visual-side { 
    flex: 1; 
    position: relative; 
    display: flex; 
    justify-content: center;
    perspective: 1000px; /* For potential 3D feel */
}

@media (max-width: 900px) {
  .hero-new { min-height: auto; padding: 6rem 0 4rem; }
  .split-layout { flex-direction: column-reverse; text-align: center; gap: 3rem; }
  .hero-text-side { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-visual-side { width: 100%; }
}

/* Typography & Badges */
.badge-pill {
    display: inline-block;
    background: #bae6fd;
    color: #0369a1;
    padding: 0.6rem 1.2rem;
    border-radius: 99px;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(186, 230, 253, 0.5);
}

/* Brand Title (Inserted) */
.brand-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@media (max-width: 900px) { .brand-title { justify-content: center; } }

.display-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    color: #0f172a;
    margin: 0 0 1.5rem 0;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.lead-text {
    font-size: clamp(1rem, 2vw, 1.35rem);
    color: #475569;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 540px;
}

/* Action Buttons */
.action-buttons { 
    display: flex; 
    gap: 1rem; 
    flex-wrap: wrap; 
    margin-bottom: 3rem;
} 
@media (max-width: 900px) { .action-buttons { justify-content: center; } }

.cta-play {
    background: #ec4899;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(236, 72, 153, 0.5);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta-play:hover { 
    transform: translateY(-4px) scale(1.02); 
    background: #db2777; 
    box-shadow: 0 20px 30px -5px rgba(236, 72, 153, 0.6);
}

.cta-zen {
    background: white;
    color: #0ea5e9;
    border: 3px solid #e0f2fe;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 1rem 1.8rem;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}
.cta-zen:hover { 
    transform: translateY(-3px); 
    border-color: #0ea5e9; 
    color: #0284c7;
}

/* Trust Indicators */
.trust-indicators {
    display: flex; 
    gap: 2rem; 
    opacity: 0.8; 
    font-weight: 600; 
    font-size: 0.85rem; 
    color: #64748b;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 1.5rem;
} 
@media (max-width: 900px) { .trust-indicators { justify-content: center; flex-wrap: wrap; gap: 1rem; } }
.trust-item { display: flex; align-items: center; gap: 0.5rem; }

/* Device Preview - The "Phone" */
.device-frame {
    width: 320px;
    height: 600px;
    background: #fff;
    border: 8px solid #cbd5e1;
    border-radius: 40px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 2;
    transform: rotate(-3deg);
    transition: transform 0.3s ease;
}
.hero-visual-side:hover .device-frame { transform: rotate(0deg) translateY(-10px); }

/* Mobile Optimizations */
@media (max-width: 900px) {
  .hero-new { min-height: auto; padding: 2rem 0 4rem; overflow: hidden; } 
  .split-layout { flex-direction: column; text-align: center; gap: 4rem; }
  .hero-text-side { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-visual-side { width: 100%; }
  /* Remove rotation on mobile */
  .device-frame { transform: rotate(0deg); height: 500px; width: 280px; max-width: 90vw; margin: 0 auto; } 
  .hero-visual-side:hover .device-frame { transform: translateY(0); }
}

.screen-preview {
    /* Dark Space Theme Background */
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 70%, #312e81 100%);
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Simulated HUD for Landing Page */
.hud-preview {
    position: absolute;
    top: 15px; left: 15px; right: 15px;
    z-index: 10;
}
.hud-preview .top-row {
    display: flex; justify-content: space-between; align-items: center;
}
/* HUD elements customized for dark mode contrast */
.icon-plac {
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.15); /* Translucent white for dark mode */
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: #fff; /* White icon text */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
}
.pill-plac {
    background: rgba(255,255,255,0.15); /* Translucent white for dark mode */
    backdrop-filter: blur(4px);
    padding: 0.6rem 1.2rem;
    border-radius: 99px;
    font-weight: 800;
    color: #fff; /* White text */
    display: flex; gap: 0.8rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-size: 1.1rem;
    border: 1px solid rgba(255,255,255,0.1);
}
.pill-plac .dot { opacity: 0.5; }

/* Bento Grid */
.section-bento { padding: 6rem 0; background: #fff; position: relative; z-index: 5; }
.section-header { text-align: center; margin-bottom: 4rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.section-header h2 { font-size: 2.8rem; margin-bottom: 1rem; color: #0f172a; font-weight: 800; }
.section-header p { font-size: 1.3rem; color: #64748b; }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 1.5rem;
}
@media (max-width: 900px) { .bento-grid { grid-template-columns: 1fr; } }

.bento-card {
    background: #f8fafc;
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.3s;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}
.bento-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px -5px rgba(0,0,0,0.08); z-index: 2; }

.bento-card h3 { margin-top: 1rem; margin-bottom: 0.75rem; color: #1e293b; font-size: 1.4rem; font-weight: 700; }
.bento-card p { color: #64748b; line-height: 1.6; font-size: 1rem; margin: 0; }
.icon-lg { font-size: 3rem; margin-bottom: 1rem; display: block; }

/* Grid Spanning */
.focus { grid-column: span 2; background: linear-gradient(135deg, #eff6ff 0%, #fff 100%); border-color: #dbeafe; }
.tech { grid-row: span 2; background: linear-gradient(135deg, #fff1f2 0%, #fff 100%); border-color: #ffe4e6; }
.zen { grid-column: span 2; background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%); border-color: #e0f2fe; }
.safe { background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%); border-color: #dcfce7; }
.audio { background: linear-gradient(135deg, #fff7ed 0%, #fff 100%); border-color: #ffedd5; }

@media (max-width: 900px) { .focus, .tech, .zen { grid-column: span 1; grid-row: span 1; } }

/* Mini Visuals */
.balloon-demo {
    position: absolute;
    width: 45px; height: 56px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9) 0%, transparent 50%);
    box-shadow: inset -4px -4px 8px rgba(0,0,0,0.1);
    animation: float 8s linear infinite, wobble 3s ease-in-out infinite;
}
.balloon-demo::after { content:""; position:absolute; top: 100%; left:50%; width:1px; height:34px; background:rgba(255,255,255,0.6); }

.balloon-demo.red { background-color: #ff6b6b; left: 20%; bottom: -60px; animation-delay: 0s; }
.balloon-demo.blue { background-color: #5eb6ff; left: 60%; bottom: -60px; animation-delay: 1s; }
.balloon-demo.gold { 
    background-color: #ffd700; left: 40%; bottom: -60px; animation-delay: 2.5s; 
    background-image: radial-gradient(circle at 30% 30%, #fff7cc, #ffd700 40%, #b8860b 85%);
}

.cloud-demo { position: absolute; background: #fff; border-radius: 20px; opacity: 0.9; box-shadow: 5px 5px 0 rgba(0,0,0,0.02); }
.c1 { width: 70px; height: 35px; top: 50px; left: 30px; }
.c2 { width: 90px; height: 45px; top: 120px; right: -10px; }

/* Testimonial Scroller */
.section-testimonials { padding: 6rem 0; background: #f8fafc; text-align: center; border-top: 1px solid #f1f5f9; }
.section-testimonials h2 { font-size: 2.5rem; margin-bottom: 3rem; color: #334155; }
.testimonial-scroller { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.t-card { 
    background: white; 
    padding: 2.5rem; 
    border-radius: 24px; 
    max-width: 450px; 
    text-align: left; 
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.05); 
    border: 1px solid #e2e8f0;
}
.stars { color: #f59e0b; margin-bottom: 1rem; font-size: 1.2rem; }
.t-card p { font-size: 1.15rem; color: #334155; font-style: italic; margin-bottom: 1.5rem; line-height: 1.6; }
.t-card cite { color: #64748b; font-weight: bold; font-style: normal; display: block; border-top: 1px solid #f1f5f9; padding-top: 1rem; }

/* Hide Old components that might still be in DOM */
.hero, .hero-new ~ section:not(.section-bento):not(.section-testimonials):not(.site-footer) { display: none !important; }