*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:Arial,Helvetica,sans-serif;color:#eee;background:#050505;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:1240px;padding:0 24px;margin:auto}
:root{--orange:#ff6500;--orange2:#ff8a00;--black:#070707;--cream:#0c0c0c}

header{
  position:fixed;top:0;left:0;width:100%;z-index:9999;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  height:82px;background:rgba(0,0,0,.82);border-bottom:1px solid rgba(255,106,0,.2)
}
nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:block;transition:0.3s}
.brand:hover{transform:scale(1.02)}
.brand-logo{height:60px;width:auto;border-radius:12px;mix-blend-mode:screen;filter:contrast(1.1)}
.navlinks{display:flex;gap:42px;color:#fff;font-weight:700;font-size:14px}
.navlinks a{transition:color 0.3s;}
.navlinks a:hover, .navlinks a.active{color:var(--orange)}
.nav-cta{border:1px solid var(--orange);color:var(--orange);padding:10px 25px;border-radius:30px;font-weight:700;transition:all 0.3s}
.nav-cta:hover{background:var(--orange);color:#fff;box-shadow:0 0 15px rgba(255,101,0,0.4)}

.hero{
  min-height:650px;padding-top:82px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 53% 48%,rgba(255,95,0,.20),transparent 25%),
    linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.83) 48%,rgba(0,0,0,.72) 100%),
    linear-gradient(180deg,#090909,#1a120c 60%,#050505);
}
.hero:before{
  content:"";position:absolute;inset:0;opacity:.22;
  background:repeating-linear-gradient(110deg,transparent 0 90px,#8c5b38 91px 92px);
  transform:translateY(80px) scale(1.4);
}
.hero-content{position:relative;z-index:2;display:flex;align-items:center;min-height:568px}
.hero-copy{width:52%;padding-top:55px}
.pill{display:inline-block;background:var(--orange);padding:5px 16px;border-radius:20px;font-size:13px;font-weight:800;letter-spacing:.5px}
h1{font-size:50px;line-height:.94;margin:16px 0 14px;font-weight:900}
h1 span{color:var(--orange)}
.hero-copy>p{font-size:17px;line-height:1.5;max-width:570px;color:#eee}
.benefits{display:flex;gap:52px;margin:34px 0}
.benefit{display:flex;gap:14px;max-width:180px}
.icon{color:var(--orange);font-size:29px;font-weight:900}
.benefit b{display:block;color:var(--orange);font-size:14px;margin-bottom:4px}
.benefit small{font-size:12px;line-height:1.3;color:#ddd}
.buttons{display:flex;gap:22px}
.btn{padding:14px 34px;border-radius:30px;font-weight:800;border:1px solid var(--orange);transition:all 0.3s;display:inline-block}
.btn.primary{background:linear-gradient(90deg,var(--orange),#cf5200);color:#fff;box-shadow:0 8px 20px rgba(255,101,0,0.3)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(255,101,0,0.5)}
.btn.secondary{color:#fff;background:#050505;border:1px solid rgba(255,255,255,0.2)}
.btn.secondary:hover{border-color:#fff;background:#1a1a1a}

.phone-area{position:relative;width:48%;height:470px}
.phone{
  position:absolute;right:50px;top:20px;width:280px;height:420px;border:9px solid #151515;border-radius:35px;
  transform:rotate(8deg);background:
  radial-gradient(circle at 48% 60%,rgba(255,98,0,.8),transparent 7%),
  linear-gradient(145deg,#191919,#030303 60%);
  box-shadow:0 20px 50px #000,0 0 25px rgba(255,100,0,.18);
  overflow:hidden
}
.phone:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#000;border-radius:0 0 16px 16px}
.phone-logo{position:absolute;top:70px;left:0;right:0;text-align:center;color:var(--orange);font-size:30px;font-weight:900}
.road{position:absolute;left:45px;right:45px;top:145px;height:190px;border:4px dashed var(--orange);border-radius:50%;transform:rotate(-25deg)}
.pin{position:absolute;width:34px;height:34px;border-radius:50%;border:5px solid var(--orange);box-shadow:0 0 20px var(--orange);background:#321507}
.pin.one{left:34px;bottom:38px}.pin.two{right:38px;top:175px}
.ride-card{position:absolute;background:#fff;color:#111;border-radius:18px;padding:14px 24px;text-align:center;box-shadow:0 8px 30px #0008;font-weight:800}
.ride-card .emoji{font-size:36px;display:block;margin-bottom:5px}
.ride-card.bike{right:-5px;top:70px}.ride-card.auto{right:-55px;top:178px}.ride-card.car{right:5px;top:300px}

.about{background:var(--cream);padding:42px 0 38px}
.about-grid{display:grid;grid-template-columns:1.15fr 2fr;gap:95px;align-items:center}
.eyebrow{color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.5px}
h2{font-size:28px;line-height:1.05;margin:6px 0 8px;font-weight:900}
h2 span{color:var(--orange)}
.about p{font-size:13px;line-height:1.4}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;border-left:1px solid #333;padding:10px}
.stat .big{color:var(--orange);font-size:31px}.stat b{display:block;font-size:14px}.stat small{font-size:12px}

.how{background:linear-gradient(135deg,#050505,#111);color:#fff;padding:48px 0}
.center{text-align:center}
.how h2{font-size:30px;color:#fff}.how h2 span{color:var(--orange)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:40px}
.tab-btn{background:transparent;border:2px solid #333;color:#888;padding:10px 30px;border-radius:25px;font-weight:700;cursor:pointer;transition:all 0.3s;font-size:14px}
.tab-btn.active{border-color:var(--orange);color:var(--orange);background:rgba(255,106,0,0.1)}
.tab-btn:hover:not(.active){color:#fff;border-color:#666}
.step{display:flex;align-items:center;gap:12px}.num{background:var(--orange);color:#111;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font-weight:900;flex:none}
.step-icon{width:60px;height:60px;border:1px solid #5a2b0d;border-radius:50%;display:grid;place-items:center;font-size:27px;color:var(--orange);flex:none}
.step b{font-size:13px}.step p{font-size:11px;color:#ccc;margin-top:4px;line-height:1.35}

.app-redesign{padding:40px 0 80px;position:relative;background:#050505;z-index:1}
.apps-container{border:1px solid rgba(255,106,0,.2);border-radius:24px;display:flex;align-items:center;position:relative;background:radial-gradient(circle at bottom right,rgba(255,101,0,.15),transparent 50%),#111;padding:60px 40px;box-shadow:0 10px 40px rgba(0,0,0,0.5)}
.apps-content{width:55%;z-index:2}
.apps-content .pill{margin-bottom:15px;border:1px solid rgba(255,101,0,0.5);background:rgba(255,101,0,0.1);color:var(--orange)}
.apps-content h2{font-size:48px;line-height:1.05;margin-bottom:15px}
.apps-content p{color:#ccc;font-size:16px;line-height:1.5;margin-bottom:35px}
.apps-features{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.feature-item{display:flex;flex-direction:column}
.feature-icon{width:45px;height:45px;border:1px solid rgba(255,255,255,0.1);border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:12px;background:rgba(255,255,255,0.03)}
.feature-item b{font-size:13px;color:#fff;margin-bottom:5px}
.feature-item small{font-size:11px;color:#999;line-height:1.4}
.apps-mockups{width:45%;position:relative;height:450px;display:flex;justify-content:center;align-items:flex-end}
.glow-bg{position:absolute;width:100%;height:60px;bottom:0;background:radial-gradient(ellipse at center,rgba(255,101,0,0.5),transparent 70%);border-radius:50%}
.phone-mockup{width:220px;height:430px;background:#111;border:8px solid #222;border-radius:35px;box-shadow:0 20px 40px rgba(0,0,0,0.9);position:absolute;bottom:10px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:40px;text-align:center}
.phone-notch{width:90px;height:25px;background:#222;position:absolute;top:0;left:50%;transform:translateX(-50%);border-radius:0 0 12px 12px}
.phone-mockup.rider{z-index:2;left:20px;transform:rotate(-4deg);background:linear-gradient(145deg,#23150c,#050505);border-color:#3a2012}
.phone-mockup.captain{z-index:1;right:20px;transform:rotate(6deg) scale(0.95);background:linear-gradient(145deg,#111,#000)}
.phone-mockup strong{color:var(--orange);font-size:22px;letter-spacing:1px;font-weight:900}
.phone-mockup small{font-size:14px;margin-bottom:20px;color:#fff;font-weight:bold}
.phone-mockup p{font-size:12px;color:#aaa;line-height:1.4;margin:10px 0}
.phone-mockup p.highlight{font-style:italic;font-size:26px;font-weight:900;color:#ff8a00;line-height:1;margin-top:20px}
.apps-footer{position:absolute;bottom:-35px;left:50%;transform:translateX(-50%);z-index:10}
.store-btn{background:#000;border:1px solid rgba(255,255,255,0.15);border-radius:12px;display:flex;align-items:center;padding:12px 30px;gap:15px;cursor:pointer;transition:0.3s;box-shadow:0 10px 25px rgba(0,0,0,0.4)}
.store-btn:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 10px 20px rgba(255,101,0,0.3)}
.play-icon{font-size:24px}
.store-text{display:flex;flex-direction:column;text-align:left}
.store-text small{font-size:10px;color:#aaa;font-weight:bold;text-transform:uppercase}
.store-text strong{font-size:20px;color:#fff;font-weight:900;margin-top:2px}
.store-text .coming-soon{color:var(--orange);margin-top:2px}

.contact{background:var(--cream);padding:60px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr .7fr;gap:70px;align-items:center}
.contact h2{font-size:32px}.contact p{font-size:14px;line-height:1.5;color:#ccc;margin-top:8px}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
input,textarea{border:1px solid #2a2a2a;border-radius:12px;padding:14px 18px;font:inherit;background:#0d0d0d;color:#eee;transition:all 0.3s}
input:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,101,0,0.15)}
input:nth-child(3),textarea{grid-column:1/-1}
textarea{height:120px;resize:none}
form button{grid-column:1/-1;border:0;background:linear-gradient(90deg,var(--orange),#ff8a00);color:#fff;padding:15px;border-radius:12px;font-weight:900;font-size:15px;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s}
form button:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(255,101,0,0.4)}
.details{font-size:14px}
.details div{margin:22px 0;color:var(--orange);font-size:18px}
.details b{display:block;color:#fff;margin:6px 0 2px;font-size:15px}
.details span{color:#aaa;font-size:13px;display:block}

footer{background:#080808;color:#fff;padding:28px 0 18px}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
footer h4{font-size:12px;margin-bottom:8px} footer a,footer p{font-size:11px;color:#bbb;display:block;margin:4px 0}
.copyright{text-align:center;border-top:1px solid #222;margin-top:22px;padding-top:8px;color:#aaa;font-size:11px}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:20}
.hamburger span{width:25px;height:3px;background:var(--orange);border-radius:2px;transition:0.3s}
.nav-right{display:flex;align-items:center;gap:15px}

@media(max-width:900px){
  .hamburger{display:flex}
  .nav-cta{display:none}
  .navlinks{position:fixed;top:82px;left:-100%;width:100%;height:calc(100vh - 82px);background:rgba(0,0,0,0.95);flex-direction:column;align-items:center;justify-content:center;transition:0.3s;gap:30px;font-size:20px}
  .navlinks.active{left:0}
  .hero-copy{width:100%}.phone-area{display:none}.hero{min-height:auto;padding-bottom:60px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.stats{margin-top:30px}.steps{grid-template-columns:1fr 1fr}
  .apps-container{flex-direction:column;padding:30px 20px}.apps-content, .apps-mockups{width:100%}
  .apps-mockups{height:400px;margin-top:40px}
  .apps-features{grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
  .phone-mockup{transform-origin:bottom center !important}
  .phone-mockup.rider{left:50%;margin-left:-110px;transform:translateX(-40%) rotate(-4deg) scale(0.85) !important;bottom:0;}
  .phone-mockup.captain{left:50%;margin-left:-110px;transform:translateX(40%) rotate(6deg) scale(0.8) !important;bottom:0;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:560px){
  .container{padding:0 14px}h1{font-size:36px}
  .benefits{flex-direction:column;gap:12px}.steps{grid-template-columns:1fr}.stores{flex-direction:column;width:100%}.store{width:100%}
  .stats{grid-template-columns:1fr 1fr;border:none !important;padding:20px 0 !important;gap:20px}.stat{border:none !important}
  .footer-grid{grid-template-columns:1fr;gap:30px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .buttons{flex-direction:column;gap:12px}.btn{text-align:center;width:100%}
  
  /* App Download Responsive Fix */
  .apps-content h2{font-size:32px}
  .apps-mockups{height:300px;margin-top:30px}
  .phone-mockup{transform-origin:bottom center !important}
  .phone-mockup.rider{left:50%;margin-left:-110px;transform:translateX(-22%) rotate(-5deg) scale(0.65) !important;bottom:0;}
  .phone-mockup.captain{left:50%;margin-left:-110px;transform:translateX(25%) rotate(8deg) scale(0.6) !important;bottom:0;}

  /* Contact Form Mobile Fix */
  form{grid-template-columns:1fr}
  input,textarea{grid-column:1/-1}
}

.scroll-top { position: fixed; bottom: -60px; right: 30px; background: var(--orange); color: #fff; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; cursor: pointer; z-index: 10000; transition: all 0.4s; box-shadow: 0 4px 15px rgba(255, 101, 0, 0.4); opacity: 0; pointer-events: none; }
.scroll-top.visible { bottom: 30px; opacity: 1; pointer-events: auto; }
.scroll-top:hover { transform: translateY(-5px); background: #fff; color: var(--orange); }

.theme-toggle { display: flex; align-items: center; gap: 8px; background: transparent; border: none; font-size: 16px; font-weight: 800; cursor: pointer; padding: 5px; transition: transform 0.3s; color: var(--orange); }
.theme-toggle:hover { transform: scale(1.05); }
body.light-mode .theme-toggle { color: var(--orange); }

/* --- Light Mode Overrides --- */
body.light-mode { background: #FFF9F4; color: #171717; --orange: #FF6B00; --orange2: #E85D00; }
body.light-mode header { background: rgba(255, 249, 244, 0.92); border-bottom: 1px solid #EDE1D8; }
body.light-mode .navlinks { background: #FFF9F4; }
@media(max-width:900px){ body.light-mode .navlinks { background: rgba(255, 249, 244, 0.98); } }
body.light-mode .navlinks a { color: #555555; }
body.light-mode .navlinks a:hover, body.light-mode .navlinks a.active { color: var(--orange); }
body.light-mode .hamburger span { background: #171717; }
body.light-mode .brand-logo { filter: invert(1) hue-rotate(180deg) brightness(1.2) contrast(1.2); mix-blend-mode: multiply; }

body.light-mode .hero { background: #FFF9F4; color: #171717; }
body.light-mode .hero h1 { color: #171717; }
body.light-mode strong[style*="color:#fff"], body.light-mode b[style*="color:#fff"], body.light-mode .stats b { color: #171717 !important; }
body.light-mode .hero:before { opacity: 1; background: repeating-linear-gradient(110deg, transparent 0 90px, rgba(255, 107, 0, 0.07) 91px 92px); }
body.light-mode .hero-copy > p { color: #555555; }
body.light-mode .btn.primary { box-shadow: 0 8px 20px rgba(255, 107, 0, 0.25); }
body.light-mode .btn.secondary { background: #FFFFFF; color: #171717; border: 1px solid #EDE1D8; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
body.light-mode .btn.secondary:hover { background: #FFF9F4; border-color: #FF6B00; }

body.light-mode .phone { background: #0a0a0a; border: 9px solid #FFFFFF; box-shadow: 0 0 0 1px #EDE1D8, 0 20px 40px rgba(0,0,0,0.08), 0 0 35px rgba(255,107,0,0.15); }
body.light-mode .phone:before { background: #FFFFFF; border: 1px solid #EDE1D8; border-top: none; }
body.light-mode .ride-card { background: #FFFFFF; color: #171717; border: 1px solid #EDE1D8; box-shadow: 0 8px 24px rgba(0,0,0,0.06); transition: all 0.3s; }
body.light-mode .ride-card:hover { border-color: var(--orange); box-shadow: 0 8px 24px rgba(255,107,0,0.15); }

body.light-mode .app-redesign, body.light-mode .about { background: #FFF9F4 !important; }
body.light-mode .apps-container { background: #FFFFFF; border-color: #EDE1D8; box-shadow: 0 10px 40px rgba(0,0,0,0.04); }
body.light-mode .apps-container > div:first-child > div:nth-child(2) { background: #FFFFFF !important; border: 1px solid #EDE1D8 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.04) !important; }

body.light-mode .how { background: #FFF9F4; color: #171717; }
body.light-mode .how h2, body.light-mode .contact h2 { color: #171717; }
body.light-mode .tab-btn { border-color: #EDE1D8; color: #555555; background: #FFFFFF; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
body.light-mode .tab-btn.active { border-color: var(--orange); color: var(--orange); background: rgba(255,107,0,0.08); }
body.light-mode .tab-btn:hover:not(.active) { color: #171717; border-color: #ccc; }
body.light-mode .step p, body.light-mode p { color: #555555; }
body.light-mode .feature-icon, body.light-mode .step-icon { background: #FFFFFF; border-color: #EDE1D8; }
body.light-mode .feature-item b { color: #171717; }
body.light-mode .feature-item small { color: #555555; }

body.light-mode .phone-mockup { background: #0a0a0a !important; border: 8px solid #FFFFFF; box-shadow: 0 0 0 1px #EDE1D8, 0 25px 40px rgba(0,0,0,0.08), 0 0 35px rgba(255,107,0,0.15); }
body.light-mode .phone-notch { background: #FFFFFF; border: 1px solid #EDE1D8; border-top: none; }
body.light-mode .phone-mockup small { color: #FFFFFF !important; }
body.light-mode .phone-mockup p { color: #AAAAAA !important; }
body.light-mode .phone-mockup strong { color: var(--orange) !important; }
body.light-mode .apps-mockups img { filter: contrast(1.1) !important; mix-blend-mode: screen !important; }

body.light-mode .store-btn { background: #FFFFFF; border: 1px solid #EDE1D8; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
body.light-mode .store-text strong { color: #171717; }
body.light-mode .store-text small { color: #555555; }

body.light-mode .contact { background: #FFF9F4; }
body.light-mode input, body.light-mode textarea { background: #FFFFFF; border: 1px solid #EDE1D8; color: #171717; }
body.light-mode input:focus, body.light-mode textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,107,0,0.1); }
body.light-mode .details b { color: #171717 !important; }
body.light-mode .details span { color: #555555 !important; }

body.light-mode footer { background: #FFF9F4; color: #171717; border-top: 1px solid #EDE1D8; }
body.light-mode footer a, body.light-mode footer p { color: #555555; }
body.light-mode footer h4 { color: #171717; }
body.light-mode .copyright { border-top-color: #EDE1D8; color: #777777; }

body.light-mode [style*="color:#fff"]:not(.phone-mockup *), body.light-mode [style*="color: #fff"]:not(.phone-mockup *) { color: #171717 !important; }
body.light-mode [style*="color:#aaa"]:not(.phone-mockup *), body.light-mode [style*="color: #aaa"]:not(.phone-mockup *), 
body.light-mode [style*="color:#ccc"]:not(.phone-mockup *), body.light-mode [style*="color: #ccc"]:not(.phone-mockup *), 
body.light-mode [style*="color:#bbb"]:not(.phone-mockup *), body.light-mode [style*="color: #bbb"]:not(.phone-mockup *) { color: #555555 !important; }

body.light-mode .stats { border-color: #EDE1D8 !important; }
body.light-mode .stats .stat { border-left-color: #EDE1D8 !important; }
body.light-mode .stat b, body.light-mode .benefit b { color: #171717 !important; }
body.light-mode .benefit small { color: #555555; }
body.light-mode footer svg { color: #555555 !important; }
body.light-mode footer a:hover { color: var(--orange) !important; }
body.light-mode footer a:hover svg { color: var(--orange) !important; }

/* Toast Notifications */
.toast-msg { position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 15px 35px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100000; pointer-events: none; }
.toast-msg.show { bottom: 40px; opacity: 1; }
.toast-msg.success span { color: var(--orange); font-size: 18px; }
.toast-msg.error span { color: #f44336; font-size: 18px; }
body.light-mode .toast-msg { background: #fff; color: #111; box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.05); }

/* Custom Popup */
.custom-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 100000; opacity: 0; pointer-events: none; transition: 0.3s; }
.custom-popup-overlay.show { opacity: 1; pointer-events: auto; }
.custom-popup-box { background: #111; border: 1px solid rgba(255,101,0,0.3); border-radius: 20px; padding: 40px; text-align: center; max-width: 400px; transform: translateY(30px) scale(0.9); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(255,101,0,0.1); margin: 0 20px; }
.custom-popup-overlay.show .custom-popup-box { transform: translateY(0) scale(1); }
.custom-popup-icon { font-size: 50px; margin-bottom: 15px; }
.custom-popup-box h3 { font-size: 24px; margin-bottom: 15px; color: #fff; line-height: 1.3; }
.custom-popup-box p { font-size: 14px; color: #ccc; line-height: 1.6; margin-bottom: 25px; }
.custom-popup-box button { background: linear-gradient(90deg, var(--orange), #ff8a00); border: none; color: #fff; padding: 12px 35px; border-radius: 30px; font-weight: 800; font-size: 15px; cursor: pointer; transition: 0.3s; }
.custom-popup-box button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255,101,0,0.4); }

body.light-mode .custom-popup-box { background: #fff; border-color: #EDE1D8; box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 30px rgba(255,107,0,0.05); }
body.light-mode .custom-popup-box h3 { color: #171717; }
body.light-mode .custom-popup-box p { color: #555555; }

/* Legal / Dynamic Information Pages */
.legal-content {
  padding: 120px 0 80px;
  min-height: 80vh;
}
.legal-container {
  max-width: 900px;
  margin: 0 auto;
}
.legal-content h1 {
  font-size: 38px;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff;
  font-weight: 800;
}
.legal-content .updated {
  color: var(--orange);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 35px;
  display: inline-block;
  background: rgba(255, 101, 0, 0.1);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 101, 0, 0.25);
}
.legal-content h2 {
  font-size: 24px;
  line-height: 1.3;
  margin-top: 40px;
  margin-bottom: 16px;
  color: var(--orange);
  font-weight: 700;
}
.legal-content h3 {
  font-size: 19px;
  line-height: 1.4;
  margin-top: 28px;
  margin-bottom: 12px;
  color: #fff;
  font-weight: 700;
}
.legal-content h4 {
  font-size: 16px;
  line-height: 1.4;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #ddd;
  font-weight: 600;
}
.legal-content p,
.legal-content li {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 14px;
  color: #ccc;
}
.legal-content ul,
.legal-content ol {
  padding-left: 24px;
  margin-bottom: 24px;
}
.legal-content li {
  margin-bottom: 8px;
}
.legal-content strong,
.legal-content b {
  color: #fff;
  font-weight: 700;
}
.legal-content a {
  color: var(--orange);
  text-decoration: none;
  transition: color 0.2s;
}
.legal-content a:hover {
  text-decoration: underline;
}

/* Light mode for legal content */
body.light-mode .legal-content {
  background: #FFF9F4;
}
body.light-mode .legal-content h1,
body.light-mode .legal-content h3,
body.light-mode .legal-content h4 {
  color: #171717;
}
body.light-mode .legal-content p,
body.light-mode .legal-content li {
  color: #555555;
}
body.light-mode .legal-content strong,
body.light-mode .legal-content b {
  color: #111111;
}
body.light-mode .legal-content .updated {
  background: rgba(255, 101, 0, 0.08);
  border-color: rgba(255, 101, 0, 0.2);
}

/* Skeleton Loading Shimmer */
.skeleton-loader {
  width: 100%;
}
.skeleton-line {
  height: 16px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.1) 37%, rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
.skeleton-title {
  height: 40px;
  width: 45%;
  margin-bottom: 24px;
  border-radius: 10px;
}
.skeleton-badge {
  height: 24px;
  width: 25%;
  margin-bottom: 35px;
  border-radius: 20px;
}
.skeleton-heading {
  height: 28px;
  width: 35%;
  margin-top: 35px;
  margin-bottom: 18px;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
body.light-mode .skeleton-line {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.09) 37%, rgba(0, 0, 0, 0.04) 63%);
  background-size: 400% 100%;
}

/* Large Screens & TV Support */
@media(min-width: 1400px){
  .container{max-width: 1350px;}
  .phone{transform:rotate(5deg) scale(1.15); right:70px;}
}
@media(min-width: 1900px){
  .container{max-width: 1600px;}
  body { zoom: 1.25; }
}
@media(min-width: 2500px){
  body { zoom: 1.5; }
}