/* CHANGED: Color scheme to red */
    :root { color-scheme: dark; --neon-red: #FF0033; }
    * { box-sizing: border-box; }
    body { margin:0; background:#030303; color:#f5f5f5; overflow-y:auto; overflow-x:hidden; cursor:none; font-family:Inter,sans-serif; }
    #bgCanvas { position:fixed; inset:0; z-index:0; }
    #loader { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#030303; }
    #loaderWrap { width:220px; height:3px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; }
    #loader-bar { height:100%; width:0%; background:#fff; transition:width .2s linear; }
    #overlay { position:fixed; inset:0; z-index:20; pointer-events:none; padding:24px; display:flex; flex-direction:column; }
    #heroContent { transition:opacity .6s ease, transform .6s ease, visibility .6s ease; }
    .glass { background:rgba(0,0,0,.52); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(18px); }
    nav { pointer-events:auto; position:fixed; left:24px; right:24px; top:18px; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-radius:16px; z-index:40; }
    
    .brand { display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:.5px; }
    .brand-logo { height: 32px; width: auto; border-radius: 8px; }
    
    .links { display:flex; gap:24px; color:rgba(255,255,255,.9); font-weight:600; font-size:14px; }
    .links a { text-decoration:none; color:inherit; transition:color .2s; }
    /* CHANGED: Hover color to red */
    .links a:hover { color:var(--neon-red); }
    .hero { margin-top:18vh; max-width:800px; pointer-events:auto; }
    /* CHANGED: Kicker color to red */
    .kicker { font-family:'JetBrains Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:2px; color:var(--neon-red); margin-bottom:16px; display:inline-block; }
    h1 { font-family:'Space Grotesk',sans-serif; font-size:clamp(48px,8vw,86px); line-height:1.04; margin:14px 0 24px; color:#fff; text-shadow:0 12px 45px rgba(0,0,0,.55); letter-spacing:-0.02em; }
    .lead { font-size:clamp(18px,2.2vw,22px); color:rgba(255,255,255,.95); line-height:1.6; max-width:60ch; margin-bottom:32px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
    .cta-group { display:flex; gap:16px; align-items:center; margin-top:22px; }
    /* CHANGED: CTA background and shadow to red */
    .cta { display:inline-flex; align-items:center; justify-content:center; padding:16px 28px; border-radius:12px; color:#fff; text-decoration:none; font-weight:700; background:var(--neon-red); transition:transform .2s, box-shadow .2s; }
    .cta:hover { transform:translateY(-2px); box-shadow:0 10px 20px -10px var(--neon-red); }
    .cta.secondary { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
    .cta.secondary:hover { background:rgba(255,255,255,.1); box-shadow:none; }
    
    #pageRoot { position:relative; z-index:30; pointer-events:auto; margin-top:100vh; }
    /* CHANGED: Made section backgrounds more transparent for better visibility */
    section { min-height:100vh; padding:120px 8vw; display:flex; flex-direction:column; justify-content:center; border-top:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(3,3,3,0.7), rgba(3,3,3,0.9)); }
    /* CHANGED: Added text shadow for better readability */
    section h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(36px,5vw,64px); margin:12px 0 24px; color:#fff; letter-spacing:-0.01em; text-shadow: 0 4px 8px rgba(0,0,0,0.5); }
    /* CHANGED: Increased text brightness and added shadow */
    section p.section-lead { max-width:64ch; font-size:20px; color:rgba(255,255,255,.95); line-height:1.7; margin-bottom: 32px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
    
    .content-wrapper { max-width: 64ch; }
    /* NEW: Centered content wrapper modifier */
    .content-wrapper.centered { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }

    .benefits-list { list-style: none; padding: 0; margin: 0 0 40px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    /* CHANGED: Increased list item brightness */
    .benefits-list li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: rgba(255,255,255,0.95); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
    /* CHANGED: Bullet point color and shadow to red */
    .benefits-list li::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--neon-red); border-radius: 50%; box-shadow: 0 0 8px var(--neon-red); flex-shrink: 0; }
    
    .app-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
    /* NEW: Large button modifier */
    .app-buttons.large { justify-content: center; margin-top: 40px; }
    .store-btn { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 12px; text-decoration: none; color: #fff; transition: all 0.2s ease; }
    /* NEW: Large store button style */
    .store-btn.large { padding: 16px 32px; border-radius: 16px; }
    /* CHANGED: Hover border color to red */
    .store-btn:hover { background: rgba(255,255,255,0.15); border-color: var(--neon-red); transform: translateY(-2px); }
    .store-btn svg { width: 24px; height: 24px; fill: currentColor; }
    /* NEW: Larger icons for large buttons */
    .store-btn.large svg { width: 32px; height: 32px; }
    .store-btn-text { display: flex; flex-direction: column; line-height: 1.2; }
    .store-btn-text span:first-child { font-size: 10px; text-transform: uppercase; opacity: 0.7; }
    .store-btn-text span:last-child { font-weight: 700; font-size: 16px; }
    /* NEW: Larger text for large buttons */
    .store-btn.large .store-btn-text span:first-child { font-size: 12px; }
    .store-btn.large .store-btn-text span:last-child { font-size: 20px; }

    .section-app-icon { width: 80px; height: auto; border-radius: 18px; margin-bottom: 24px; box-shadow: 0 10px 25px rgba(0,0,0,0.25); display: block; }
    .hover-float {
      transition: transform .06s linear, box-shadow .12s ease-out;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .hover-float:hover {
      box-shadow: 0 24px 50px rgba(0,0,0,0.45);
    }

    /* NEW: Final Section Styles */
    #final-cta {
      background: linear-gradient(0deg, rgba(3,3,3,1) 0%, rgba(3,3,3,0.8) 100%);
      padding-bottom: 160px;
    }
    .mockup-container {
      width: 280px;
      height: 560px;
      background: linear-gradient(45deg, #222, #111);
      border-radius: 40px;
      border: 4px solid rgba(255,255,255,0.1);
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      margin: 0 auto 40px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mockup-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .subheadline {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(24px, 4vw, 42px);
      margin: -16px 0 16px;
      color: var(--neon-red);
      font-weight: 700;
      position: relative;
      display: inline-block;
    }
    .emoji-apple {
      font-size: 1.5em;
      position: absolute;
      animation: float 3s ease-in-out infinite;
    }
    .emoji-apple.left { left: -1.8em; top: -0.2em; animation-delay: 0s; }
    .emoji-apple.right { right: -1.8em; bottom: -0.2em; animation-delay: 1.5s; }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .subtext {
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 32px;
    }
    .closing-quote {
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 600;
      line-height: 1.4;
      max-width: 24ch;
      margin: 40px auto;
      color: #fff;
    }

    /* NEW: Scroll-triggered animations */
    .animate-block {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .animate-block.is-visible { opacity: 1; transform: translateY(0); }

    /* NEW: Zoom animation */
    .animate-zoom {
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 1s ease-out, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .animate-zoom.is-visible { opacity: 1; transform: scale(1); }

    /* NEW: Fade animation */
    .animate-fade {
      opacity: 0;
      transition: opacity 1.2s ease-out;
    }
    .animate-fade.is-visible { opacity: 1; }

    /* Staggered delays for animations */
    .section-app-icon.animate-block { transition-delay: 0s; }
    .kicker.animate-block { transition-delay: 0.1s; }
    h2.animate-block { transition-delay: 0.2s; }
    .section-lead.animate-block { transition-delay: 0.3s; }
    .benefits-list.animate-block { transition-delay: 0.4s; }
    .app-buttons.animate-block { transition-delay: 0.5s; }

    /* Final section delays */
    .mockup-container.animate-zoom { transition-delay: 0.1s; }
    #final-cta h2.animate-block { transition-delay: 0.3s; }
    .subheadline.animate-block { transition-delay: 0.4s; }
    .subtext.animate-block { transition-delay: 0.5s; }
    .closing-quote.animate-fade { transition-delay: 0.7s; }
    .app-buttons.large.animate-block { transition-delay: 0.9s; }


    @media (min-width: 900px) {
      /* Existing alternating layout */
      section:nth-child(even) { align-items:flex-end; text-align:right; }
      section:nth-child(even) .benefits-list li { flex-direction: row-reverse; }
      section:nth-child(even) .app-buttons { justify-content: flex-end; }
      section:nth-child(even) .section-app-icon { margin-left: auto; }
      .section-app-icon { width: 100px; }

      /* NEW: Force centered alignment for the final section, overriding the alternating rule */
      #final-cta.centered-section { align-items: center !important; text-align: center !important; }
      #final-cta .app-buttons { justify-content: center !important; }
    }

    /* CHANGED: Cursor colors to red */
    .cursor-dot { position:fixed; width:8px; height:8px; background:var(--neon-red); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:screen; }
    .cursor-ring { position:fixed; width:40px; height:40px; border:1.5px solid rgba(255,255,255,.55); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:border-color .2s; }
    .cursor-ripple { position:fixed; border:1px solid var(--neon-red); border-radius:9999px; pointer-events:none; z-index:9997; transform:translate(-50%,-50%); animation:ripple .55s ease-out forwards; }
    @keyframes ripple { from { width:8px; height:8px; opacity:.7; } to { width:80px; height:80px; opacity:0; } }
    
    .media-card-placeholder { height: 200px; }

    @media (max-width: 900px) { body { cursor:auto; } .cursor-dot, .cursor-ring { display:none; } #overlay { padding:14px; } nav{left:14px;right:14px;top:12px; padding:12px 14px; flex-wrap:wrap; gap:12px; align-items:flex-start;} .brand{font-size:18px;} .links { display:flex; width:100%; gap:10px; flex-wrap:wrap; justify-content:flex-start; font-size:13px; } .links a{padding:8px 10px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);} section { min-height:auto; padding:80px 24px; align-items:flex-start!important; text-align:left!important; } h1{font-size:42px;} .benefits-list { grid-template-columns: 1fr; } section:nth-child(even) .benefits-list li { flex-direction: row; } section:nth-child(even) .app-buttons { justify-content: flex-start; }
      /* NEW: Ensure final section is centered on mobile too */
      #final-cta.centered-section { align-items: center !important; text-align: center !important; }
      #final-cta .app-buttons { justify-content: center !important; }
      .closing-quote { font-size: 22px; }
    }