*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#e5e5e5;background:#000;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Deep Dark Universe Background */
body{background:
  radial-gradient(ellipse at 20% 20%, rgba(20,20,40,0.3) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(10,10,30,0.2) 0%, transparent 50%),
  radial-gradient(ellipse at 40% 60%, rgba(15,15,35,0.1) 0%, transparent 50%),
  radial-gradient(ellipse at center, #020202 0%, #000000 40%, #000000 100%);
  position:relative;overflow-x:hidden;min-height:100vh}

/* Removed AI Circuit Pattern */

/* Removed all tech elements */

/* Minimal Dark Universe Starfield - Cross Browser Compatible */
.stars,.stars2,.stars3{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:-1;background-repeat:repeat;background-position:0 0;will-change:background-position;transform:translateZ(0);backface-visibility:hidden}

/* Reduced star layers with fewer stars */
.stars{background-image:
  radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 60px 20px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 100px 80px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 140px 10px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 180px 90px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 220px 70px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 260px 20px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 300px 40px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 340px 60px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 380px 30px, #fff 50%, transparent 51%);
  background-size:400px 400px;
  -webkit-animation:moveStarsDiagonal 400s linear infinite;
  -moz-animation:moveStarsDiagonal 400s linear infinite;
  -o-animation:moveStarsDiagonal 400s linear infinite;
  -ms-animation:moveStarsDiagonal 400s linear infinite;
  animation:moveStarsDiagonal 400s linear infinite;
  opacity:0.6}

.stars2{background-image:
  radial-gradient(1px 1px at 40px 70px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 80px 50px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 120px 40px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 160px 60px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 200px 30px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 240px 50px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 280px 80px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 320px 10px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 360px 90px, #fff 50%, transparent 51%);
  background-size:400px 400px;
  -webkit-animation:moveStarsDiagonal 500s linear infinite reverse;
  -moz-animation:moveStarsDiagonal 500s linear infinite reverse;
  -o-animation:moveStarsDiagonal 500s linear infinite reverse;
  -ms-animation:moveStarsDiagonal 500s linear infinite reverse;
  animation:moveStarsDiagonal 500s linear infinite reverse;
  opacity:0.4}

.stars3{background-image:
  radial-gradient(1px 1px at 10px 20px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 50px 10px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 90px 70px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 130px 80px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 170px 20px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 210px 90px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 250px 10px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 290px 30px, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 330px 50px, #fff 50%, transparent 51%),
  radial-gradient(2px 2px at 370px 60px, #fff 50%, transparent 51%);
  background-size:400px 400px;
  -webkit-animation:moveStarsDiagonal 600s linear infinite;
  -moz-animation:moveStarsDiagonal 600s linear infinite;
  -o-animation:moveStarsDiagonal 600s linear infinite;
  -ms-animation:moveStarsDiagonal 600s linear infinite;
  animation:moveStarsDiagonal 600s linear infinite;
  opacity:0.3}

/* Removed green grid overlay */

@keyframes moveStars{from{background-position:0 0}to{background-position:-10000px 10000px}}
@keyframes moveStarsDiagonal{from{background-position:0 0}to{background-position:-10000px 10000px}}
@keyframes moveStarsTransform{from{transform:translate(0, 0)}to{transform:translate(-10000px, 10000px)}}

/* Cross-browser compatibility for star animations */
@-webkit-keyframes moveStarsDiagonal{from{background-position:0 0}to{background-position:-10000px 10000px}}
@-moz-keyframes moveStarsDiagonal{from{background-position:0 0}to{background-position:-10000px 10000px}}
@-o-keyframes moveStarsDiagonal{from{background-position:0 0}to{background-position:-10000px 10000px}}
@-ms-keyframes moveStarsDiagonal{from{background-position:0 0}to{background-position:-10000px 10000px}}
@keyframes circuitPulse{0%,100%{opacity:0.03;transform:scale(1)}50%{opacity:0.08;transform:scale(1.02)}}
@keyframes dataFlow{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(100vh);opacity:0}}
@keyframes neuralPulse{0%,100%{opacity:0.2;transform:scale(1);box-shadow:0 0 10px var(--primary)}50%{opacity:0.6;transform:scale(1.5);box-shadow:0 0 20px var(--primary), 0 0 30px var(--primary-light)}}
@keyframes gridShift{0%{background-position:0 0}100%{background-position:100px 100px}}

/* Removed all tech particles and AI glow */

@keyframes floatParticle{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(50px);opacity:0}}
@keyframes aiGlow{0%,100%{opacity:0.1;transform:scale(1)}50%{opacity:0.2;transform:scale(1.1)}}

/* Top Right Corner Icons */
.top-icons{position:fixed;top:20px;right:20px;z-index:1000;display:flex;gap:12px;align-items:center}
.top-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.3);border:2px solid transparent;position:relative;overflow:hidden}
.top-icon::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, var(--primary), var(--primary-2));opacity:0.1;transition:opacity 0.3s ease}
.top-icon:hover::before{opacity:0.2}
.top-icon.call{background:linear-gradient(135deg, #1a1a1a, #2a2a2a);border-color:var(--primary);color:var(--primary)}
.top-icon.call:hover{background:linear-gradient(135deg, var(--primary), var(--primary-2));color:#000;transform:translateY(-2px);box-shadow:0 6px 20px rgba(149, 217, 113, 0.4)}
.top-icon.whatsapp{background:linear-gradient(135deg, #1a1a1a, #2a2a2a);border-color:#25D366;color:#25D366}
.top-icon.whatsapp:hover{background:linear-gradient(135deg, #25D366, #128C7E);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37, 211, 102, 0.4)}
.top-icon svg{width:20px;height:20px;position:relative;z-index:1}
.top-icon:hover svg{transform:scale(1.1)}

/* Mobile responsiveness for top icons */
@media (max-width: 768px) {
  .top-icons{top:15px;right:15px;gap:10px}
  .top-icon{width:40px;height:40px;min-width:40px;min-height:40px}
  .top-icon svg{width:18px;height:18px}
}

@media (max-width: 480px) {
  .top-icons{top:12px;right:12px;gap:8px}
  .top-icon{width:36px;height:36px;min-width:36px;min-height:36px}
  .top-icon svg{width:16px;height:16px}
}

@media (max-width: 320px) {
  .top-icons{top:10px;right:10px;gap:6px}
  .top-icon{width:32px;height:32px;min-width:32px;min-height:32px}
  .top-icon svg{width:14px;height:14px}
}

/* Realistic Shooting Stars */
.meteors{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:-1;overflow:hidden}

/* Bright shooting star */
.meteor{position:absolute;top:-5%;left:105%;width:2px;height:2px;background:#fff;border-radius:50%;
  box-shadow:0 0 4px #fff, 0 0 8px rgba(255,255,255,0.6), 0 0 12px rgba(255,255,255,0.3);
  transform:rotate(-30deg);
  -webkit-animation:shootBright 15s linear infinite;
  -moz-animation:shootBright 15s linear infinite;
  -o-animation:shootBright 15s linear infinite;
  -ms-animation:shootBright 15s linear infinite;
  animation:shootBright 15s linear infinite}

.meteor:after{content:"";position:absolute;right:2px;top:0px;width:80px;height:2px;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0.9) 20%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0.2) 80%,transparent 100%);
  border-radius:1px;box-shadow:0 0 4px #fff, 0 0 8px rgba(255,255,255,0.4)}

.meteor:before{content:"";position:absolute;right:2px;top:-1px;width:60px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.3) 60%,transparent 100%);
  border-radius:0.5px;opacity:0.7}

/* Faint shooting star */
.meteor.faint{width:1px;height:1px;box-shadow:0 0 2px #fff, 0 0 4px rgba(255,255,255,0.4);
  transform:rotate(-45deg);
  -webkit-animation:shootFaint 20s linear infinite;
  -moz-animation:shootFaint 20s linear infinite;
  -o-animation:shootFaint 20s linear infinite;
  -ms-animation:shootFaint 20s linear infinite;
  animation:shootFaint 20s linear infinite}

.meteor.faint:after{width:50px;height:1px;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.2) 70%,transparent 100%);
  box-shadow:0 0 2px #fff}

.meteor.faint:before{width:30px;height:0.5px;background:linear-gradient(90deg,rgba(255,255,255,0.5) 0%,transparent 100%);opacity:0.5}

/* Fast shooting star */
.meteor.fast{width:1px;height:1px;box-shadow:0 0 3px #fff, 0 0 6px rgba(255,255,255,0.5);
  transform:rotate(-60deg);
  -webkit-animation:shootFast 8s linear infinite;
  -moz-animation:shootFast 8s linear infinite;
  -o-animation:shootFast 8s linear infinite;
  -ms-animation:shootFast 8s linear infinite;
  animation:shootFast 8s linear infinite}

.meteor.fast:after{width:40px;height:1px;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0.8) 40%,transparent 100%);
  box-shadow:0 0 3px #fff}

.meteor.fast:before{width:25px;height:0.5px;background:linear-gradient(90deg,rgba(255,255,255,0.7) 0%,transparent 100%);opacity:0.6}

@keyframes shootBright{0%{transform:translate(0,0) rotate(-30deg);opacity:0}2%{opacity:1}98%{opacity:1}100%{transform:translate(-1600px,800px) rotate(-30deg);opacity:0}}
@keyframes shootFaint{0%{transform:translate(0,0) rotate(-45deg);opacity:0}3%{opacity:0.8}97%{opacity:0.8}100%{transform:translate(-1200px,600px) rotate(-45deg);opacity:0}}
@keyframes shootFast{0%{transform:translate(0,0) rotate(-60deg);opacity:0}1%{opacity:1}99%{opacity:1}100%{transform:translate(-1000px,500px) rotate(-60deg);opacity:0}}

/* Cross-browser compatibility for shooting stars */
@-webkit-keyframes shootBright{0%{transform:translate(0,0) rotate(-30deg);opacity:0}2%{opacity:1}98%{opacity:1}100%{transform:translate(-1600px,800px) rotate(-30deg);opacity:0}}
@-webkit-keyframes shootFaint{0%{transform:translate(0,0) rotate(-45deg);opacity:0}3%{opacity:0.8}97%{opacity:0.8}100%{transform:translate(-1200px,600px) rotate(-45deg);opacity:0}}
@-webkit-keyframes shootFast{0%{transform:translate(0,0) rotate(-60deg);opacity:0}1%{opacity:1}99%{opacity:1}100%{transform:translate(-1000px,500px) rotate(-60deg);opacity:0}}

@-moz-keyframes shootBright{0%{transform:translate(0,0) rotate(-30deg);opacity:0}2%{opacity:1}98%{opacity:1}100%{transform:translate(-1600px,800px) rotate(-30deg);opacity:0}}
@-moz-keyframes shootFaint{0%{transform:translate(0,0) rotate(-45deg);opacity:0}3%{opacity:0.8}97%{opacity:0.8}100%{transform:translate(-1200px,600px) rotate(-45deg);opacity:0}}
@-moz-keyframes shootFast{0%{transform:translate(0,0) rotate(-60deg);opacity:0}1%{opacity:1}99%{opacity:1}100%{transform:translate(-1000px,500px) rotate(-60deg);opacity:0}}

@-o-keyframes shootBright{0%{transform:translate(0,0) rotate(-30deg);opacity:0}2%{opacity:1}98%{opacity:1}100%{transform:translate(-1600px,800px) rotate(-30deg);opacity:0}}
@-o-keyframes shootFaint{0%{transform:translate(0,0) rotate(-45deg);opacity:0}3%{opacity:0.8}97%{opacity:0.8}100%{transform:translate(-1200px,600px) rotate(-45deg);opacity:0}}
@-o-keyframes shootFast{0%{transform:translate(0,0) rotate(-60deg);opacity:0}1%{opacity:1}99%{opacity:1}100%{transform:translate(-1000px,500px) rotate(-60deg);opacity:0}}

@-ms-keyframes shootBright{0%{transform:translate(0,0) rotate(-30deg);opacity:0}2%{opacity:1}98%{opacity:1}100%{transform:translate(-1600px,800px) rotate(-30deg);opacity:0}}
@-ms-keyframes shootFaint{0%{transform:translate(0,0) rotate(-45deg);opacity:0}3%{opacity:0.8}97%{opacity:0.8}100%{transform:translate(-1200px,600px) rotate(-45deg);opacity:0}}
@-ms-keyframes shootFast{0%{transform:translate(0,0) rotate(-60deg);opacity:0}1%{opacity:1}99%{opacity:1}100%{transform:translate(-1000px,500px) rotate(-60deg);opacity:0}}

/* individual delays/positions */
.meteor.m1{top:15%;left:98%;animation-delay:0s;animation-duration:18s}
.meteor.m2{top:30%;left:100%;animation-delay:4s;animation-duration:16s}
.meteor.m3{top:8%;left:102%;animation-delay:8s;animation-duration:22s}
.meteor.m4{top:45%;left:99%;animation-delay:12s;animation-duration:14s}
.meteor.m5{top:20%;left:101%;animation-delay:16s;animation-duration:20s}

/* Subtle Glitter Effects */
.glitter{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:-1;opacity:0.3}
.glitter-particle{position:absolute;width:1px;height:1px;background:#fff;border-radius:50%;box-shadow:0 0 1px #fff;
  -webkit-animation:glitter 6s ease-in-out infinite;
  -moz-animation:glitter 6s ease-in-out infinite;
  -o-animation:glitter 6s ease-in-out infinite;
  -ms-animation:glitter 6s ease-in-out infinite;
  animation:glitter 6s ease-in-out infinite}
.glitter-particle:nth-child(1){top:20%;left:15%;animation-delay:0s;animation-duration:5s}
.glitter-particle:nth-child(2){top:40%;left:25%;animation-delay:1s;animation-duration:6s}
.glitter-particle:nth-child(3){top:60%;left:35%;animation-delay:2s;animation-duration:5.5s}
.glitter-particle:nth-child(4){top:30%;left:55%;animation-delay:3s;animation-duration:6.5s}
.glitter-particle:nth-child(5){top:70%;left:65%;animation-delay:4s;animation-duration:5s}
.glitter-particle:nth-child(6){top:10%;left:75%;animation-delay:5s;animation-duration:6s}

@keyframes glitter{0%,100%{opacity:0;transform:scale(0.3)}50%{opacity:0.8;transform:scale(1)}}

/* Cross-browser compatibility for glitter */
@-webkit-keyframes glitter{0%,100%{opacity:0;transform:scale(0.3)}50%{opacity:0.8;transform:scale(1)}}
@-moz-keyframes glitter{0%,100%{opacity:0;transform:scale(0.3)}50%{opacity:0.8;transform:scale(1)}}
@-o-keyframes glitter{0%,100%{opacity:0;transform:scale(0.3)}50%{opacity:0.8;transform:scale(1)}}
@-ms-keyframes glitter{0%,100%{opacity:0;transform:scale(0.3)}50%{opacity:0.8;transform:scale(1)}}

/* Distant Galaxy Effects */
.galaxy{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:-2;opacity:0.1}
.galaxy-1{position:absolute;top:10%;right:15%;width:200px;height:100px;background:radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 70%);border-radius:50%;transform:rotate(45deg);
  -webkit-animation:galaxyGlow 30s ease-in-out infinite;
  -moz-animation:galaxyGlow 30s ease-in-out infinite;
  -o-animation:galaxyGlow 30s ease-in-out infinite;
  -ms-animation:galaxyGlow 30s ease-in-out infinite;
  animation:galaxyGlow 30s ease-in-out infinite}
.galaxy-2{position:absolute;bottom:20%;left:10%;width:150px;height:80px;background:radial-gradient(ellipse, rgba(255,255,255,0.03) 0%, transparent 60%);border-radius:50%;transform:rotate(-30deg);
  -webkit-animation:galaxyGlow 40s ease-in-out infinite reverse;
  -moz-animation:galaxyGlow 40s ease-in-out infinite reverse;
  -o-animation:galaxyGlow 40s ease-in-out infinite reverse;
  -ms-animation:galaxyGlow 40s ease-in-out infinite reverse;
  animation:galaxyGlow 40s ease-in-out infinite reverse}
.galaxy-3{position:absolute;top:60%;right:30%;width:100px;height:60px;background:radial-gradient(ellipse, rgba(255,255,255,0.02) 0%, transparent 50%);border-radius:50%;transform:rotate(60deg);
  -webkit-animation:galaxyGlow 50s ease-in-out infinite;
  -moz-animation:galaxyGlow 50s ease-in-out infinite;
  -o-animation:galaxyGlow 50s ease-in-out infinite;
  -ms-animation:galaxyGlow 50s ease-in-out infinite;
  animation:galaxyGlow 50s ease-in-out infinite}

@keyframes galaxyGlow{0%,100%{opacity:0.1;transform:rotate(45deg) scale(1)}50%{opacity:0.2;transform:rotate(45deg) scale(1.1)}}

/* Cross-browser compatibility for galaxy */
@-webkit-keyframes galaxyGlow{0%,100%{opacity:0.1;transform:rotate(45deg) scale(1)}50%{opacity:0.2;transform:rotate(45deg) scale(1.1)}}
@-moz-keyframes galaxyGlow{0%,100%{opacity:0.1;transform:rotate(45deg) scale(1)}50%{opacity:0.2;transform:rotate(45deg) scale(1.1)}}
@-o-keyframes galaxyGlow{0%,100%{opacity:0.1;transform:rotate(45deg) scale(1)}50%{opacity:0.2;transform:rotate(45deg) scale(1.1)}}
@-ms-keyframes galaxyGlow{0%,100%{opacity:0.1;transform:rotate(45deg) scale(1)}50%{opacity:0.2;transform:rotate(45deg) scale(1.1)}}
:root{--border:#1f1f1f;--muted:#0b0b0b;--muted-2:#111;--primary:#95D971;--primary-2:#7BC55A;--primary-light:#B8E89A}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.nav{position:relative;backdrop-filter:saturate(120%) blur(6px);background:rgba(0,0,0,.0);border-bottom:1px solid transparent}
.hero-only{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 0 80px;gap:22px}
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start;padding:70px 0}
.hero-left{display:flex;flex-direction:column;gap:16px}
.intro{color:#e5e5e5;opacity:.9;margin:0;font-weight:800;font-size:60px}
.intro-row{display:flex;align-items:center;gap:16px}
.logo{height:36px}
.logo-img{width:300px;height:auto;display:block}
.tagline{max-width:980px;color:#c9c9c9;font-size:24px;line-height:1.35}
.tagline span{color:var(--primary);font-weight:900}
.cta-row{display:flex;align-items:center;gap:16px}
.cta.big{display:inline-block;padding:16px 32px;border-radius:8px;border:2px solid var(--primary);background:transparent;color:var(--primary);text-decoration:none;font-weight:700;transition:all 0.2s ease;min-width:180px;text-align:center;position:relative}
.cta.big:hover{background:var(--primary);color:#000}
.cta.big::after{content:'→';margin-left:8px;transition:all 0.2s ease}
.cta.big:hover::after{transform:translateX(2px)}
.chip{background:#0c0c0c;border:1px solid var(--primary-2);color:var(--primary);border-radius:999px;padding:8px 14px;font-weight:800}
.trust{display:flex;gap:24px;color:#9a9a9a;font-size:14px}
.wrap{display:flex;flex-direction:column;min-height:100%}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;padding:64px 0}
.hero-copy h1{font-size:48px;line-height:1.1;margin:0 0 14px}
.hero-copy p{color:#a3a3a3;margin:0 0 18px}
.commute{display:grid;gap:12px;margin:18px 0}
.grid2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.commute input,.commute select{width:100%;background:var(--muted-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:#fff}
.commute .cta{background:var(--primary-2);color:#0a0a0a;border:0;border-radius:10px;padding:12px 16px;font-weight:800;text-align:center}
.commute .cta:hover{background:var(--primary)}
.fine{font-size:12px;color:#8a8a8a}
.hero-card{position:relative}
.badge{position:absolute;left:50%;transform:translateX(-50%);top:-12px;background:var(--primary-2);color:#0a0a0a;font-size:11px;font-weight:800;padding:6px 10px;border-radius:999px}
.card{background:var(--muted);border:1px solid var(--primary-2);border-radius:14px;padding:22px}
.card .icon{font-size:22px}
.card h2{margin:6px 0 4px;font-size:28px}
.card .sub{color:#a3a3a3;margin:0 0 8px}
.price{margin:12px 0 12px}
.price span{font-size:36px;font-weight:800;margin-right:6px}
.price small{color:#a3a3a3}
.features{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:#c7c7c7}
.features li::before{content:'✔';color:var(--primary-2);margin-right:8px}
.cta{display:block;text-align:center;background:var(--primary-2);color:#0a0a0a;text-decoration:none;font-weight:800;border-radius:12px;padding:12px 14px;margin-top:12px}
.cta:hover{background:var(--primary)}
.foot{border-top:1px solid var(--border);padding:22px 0;color:#8a8a8a;margin-top:auto}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-card{order:2}.hero-copy{order:1}}

/* Features section */
.features-wrap{background:#050505;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.features-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:42px 0}
.feat{background:var(--muted);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;gap:12px}
.feat .i{width:44px;height:44px;border-radius:10px;background:#0f0f0f;border:1px solid #222;display:flex;align-items:center;justify-content:center;color:var(--primary-2);font-size:22px}
.feat h4{margin:2px 0 6px;font-size:16px}
.feat p{margin:0;color:#a3a3a3;font-size:13px;line-height:1.3}
@media (max-width:1100px){.features-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.features-grid{grid-template-columns:1fr}}
.hero-illus{display:flex;align-items:center;justify-content:center}
.hero-svg{max-width:100%;height:auto;border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,#0b0b0b,#060606)}

/* Two-column form + why */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:40px 0 70px}
.two-col-only{display:grid;grid-template-columns:1fr;gap:28px;padding:10px 0 70px}
.panel{background:#070707cc;border:1px solid var(--border);border-radius:16px;padding:18px 18px 20px}
#quoteForm{margin-bottom:0}
.panel-title{margin:6px 2px 2px;font-size:22px;font-weight:800}
.panel-sub{margin:0 2px 16px;color:#9aa09e;font-size:13px}
.seg{margin:12px 0}
.seg label{display:block;margin:0 0 12px;color:#fff;font-size:15px;font-weight:600;letter-spacing:0.2px}
.form-label{display:block;margin:0 0 16px;color:#fff;font-size:16px;font-weight:600;letter-spacing:0.3px}
.seg-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg-btn{background:#1a1a1a;border:2px solid #333;color:#fff;border-radius:8px;padding:8px 10px;text-align:left;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px;transition:all 0.2s ease}
.seg-btn span{display:block;color:#aaa;font-weight:500;font-size:13px;margin-top:4px}
.btn-icon{font-size:14px;margin-right:0;flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:#2a2a2a;border-radius:4px;border:1px solid #444;transition:all 0.2s ease}
.btn-content{display:flex;flex-direction:column;gap:2px;flex:1}
.btn-title{font-weight:600;font-size:13px;color:#fff;transition:color 0.2s ease}
.btn-subtitle{font-size:10px;color:#aaa;font-weight:500;transition:color 0.2s ease}
.seg-btn.active .btn-title{color:var(--primary)}
.seg-btn.active .btn-subtitle{color:var(--primary)}
.seg-btn.active{border-color:var(--primary);background:#0f1a0a;color:var(--primary)}
.seg-btn.active .btn-icon{background:var(--primary);color:#000;border-color:var(--primary)}
.seg-btn:hover{border-color:#555;background:#222}
.nudge{position:absolute;top:6px;right:6px;background:linear-gradient(135deg, #ff6b6b, #ff8e8e, #ffa8a8);color:#fff;font-size:11px;font-weight:800;padding:6px 10px;border-radius:14px;animation:nudgePulse 2s ease-in-out infinite;box-shadow:0 3px 15px rgba(255, 107, 107, 0.5);border:1px solid rgba(255, 255, 255, 0.3);z-index:10;text-transform:uppercase;letter-spacing:0.5px}
@keyframes nudgePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.9}}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.8;transform:scale(1.05)}}
#directionRow[aria-hidden="true"]{display:none}
#directionRow{margin-top:16px}
.field{margin:12px 0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
@media (max-width:768px){.field-row{grid-template-columns:1fr;gap:12px}}
.panel-title{font-size:22px;font-weight:800;color:#fff;margin:0 0 8px;text-align:center}
.panel-sub{font-size:14px;color:#aaa;margin:0 0 24px;text-align:center;line-height:1.4}
.field label{display:block;margin:0 0 10px;color:#b9b9b9;font-size:14px;font-weight:600}
.input{background:#1a1a1a;border:2px solid #333;border-radius:8px;display:flex;align-items:center;gap:8px;padding:10px 12px;min-height:40px;transition:all 0.2s ease}
.input.with-icon{justify-content:space-between}
.input.with-icon span{opacity:.7}
.input input{background:transparent;border:0;outline:0;color:#fff;width:100%;font-size:15px;font-weight:500;flex:1}
.input-icon{color:var(--primary);font-size:18px;flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:#2a2a2a;border-radius:4px;border:1px solid #444}
.phone-prefix{color:#aaa;font-size:15px;font-weight:500;padding:0 8px 0 0;border-right:1px solid #444;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#1a1a1a;border-radius:8px 0 0 8px;min-width:40px}
.input-icon-right{color:var(--primary);font-size:18px;flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#2a2a2a;border-radius:4px;border:1px solid #444;transition:all 0.2s ease}
.input:focus-within{border-color:var(--primary);background:#222}
.select-wrapper{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#1a1a1a;border:2px solid #333;border-radius:10px;min-height:44px;transition:all 0.2s ease}
.select-wrapper select{width:100%;background:none;border:none;outline:none;color:#fff;font-size:15px;font-weight:500;appearance:none;cursor:pointer;flex:1}
.select-icon{color:var(--primary);font-size:18px;flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:#2a2a2a;border-radius:4px;border:1px solid #444}
.select-wrapper:focus-within{border-color:var(--primary);background:#222}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{padding:6px 12px;border-radius:16px;background:transparent;border:2px solid #444;color:#aaa;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:4px;min-height:32px;font-weight:600;font-size:12px}
.chip.active{border-color:var(--primary);color:#000;background:var(--primary)}
.chip:hover{border-color:#666;background:#222;color:#fff}
.chip-icon{font-weight:600;font-size:12px;color:inherit;background:rgba(149, 217, 113, 0.1);border-radius:50px;padding:4px 6px;min-width:20px;text-align:center;border:1px solid rgba(149, 217, 113, 0.2)}
.chip-text{font-weight:600;font-size:12px}
.hint{color:#aaa;font-size:12px;margin:6px 0 0;font-weight:500;display:flex;align-items:center;gap:4px}
.cta.full{width:100%;margin-top:16px;padding:16px 24px;border-radius:10px;border:2px solid var(--primary);background:transparent;color:var(--primary);text-decoration:none;font-weight:700;transition:all 0.2s ease;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;font-size:15px}
.cta.full:hover{background:var(--primary);color:#000}
.cta-icon{font-size:18px;flex-shrink:0}
.cta-text{flex:1;font-size:15px;font-weight:700}
.cta-arrow{font-size:16px;transition:all 0.2s ease;flex-shrink:0}
.button-group{display:flex;justify-content:center;gap:12px;margin-top:12px;width:100%}
@media (max-width:768px){.button-group{justify-content:center;gap:16px}.cta.primary{min-width:85%;width:85%;padding:14px 24px}}
.cta.primary{background:linear-gradient(135deg,var(--primary),#4CAF50);border:2px solid var(--primary);color:#000;font-weight:700;transition:all 0.3s ease;min-width:75%;width:75%;padding:16px 32px;justify-content:center;text-align:center}
.cta.primary:hover{background:linear-gradient(135deg,#4CAF50,var(--primary));border-color:#4CAF50;transform:translateY(-2px);box-shadow:0 8px 25px rgba(76,175,80,0.3)}
.cta{position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left 0.5s}
.cta:hover::before{left:100%}
.field.error .input{border-color:#ff4444;box-shadow:0 0 0 4px rgba(255, 68, 68, 0.15)}
.field.error .select-wrapper{border-color:#ff4444;box-shadow:0 0 0 4px rgba(255, 68, 68, 0.15)}
.field.error .form-label{color:#ff4444}
.seg.error{border:2px solid #ff4444;border-radius:12px;padding:12px;background:rgba(255, 68, 68, 0.05)}
.seg.error .form-label{color:#ff4444}
.chips.error{border:2px solid #ff4444;border-radius:12px;padding:12px;background:rgba(255, 68, 68, 0.05)}
.chips.error .form-label{color:#ff4444}
.error-message{color:#ff4444;font-size:14px;font-weight:500;margin-top:6px;display:none;align-items:center;gap:6px}
.error-message.show{display:flex}
.error-message::before{content:'⚠️';font-size:12px}

.why .panel-title{margin-bottom:8px}
.primary{color:var(--primary)}
.why-list{display:flex;flex-direction:column;gap:8px}
.why-item{display:flex;gap:12px;align-items:flex-start;background:#0b0b0b;border:1px solid #1b1b1b;border-radius:10px;padding:12px;position:relative;transition:all 0.3s ease}
.why-item.active{background:linear-gradient(135deg, rgba(149, 217, 113, 0.08), rgba(123, 197, 90, 0.04));border:1px solid rgba(149, 217, 113, 0.2);position:relative;overflow:hidden}
.why-item.active::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--primary));z-index:1}
.why-item.active::after{content:'FEATURED';position:absolute;top:8px;right:12px;background:var(--primary);color:#000;font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:0.5px;z-index:2;animation:pulse 2s ease-in-out infinite}
.why-item .icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#0f0f0f;border:1px solid #222;color:var(--primary);font-size:16px;transition:all 0.3s ease}
.why-item.active .icon{background:var(--primary);color:#000;border-color:var(--primary-2);transform:scale(1.1);box-shadow:0 0 15px rgba(149, 217, 113, 0.4)}
.why-item h4{margin:0 0 3px;font-size:15px;transition:color 0.3s ease}
.why-item.active h4{color:var(--primary);font-weight:700;text-shadow:0 0 10px rgba(149, 217, 113, 0.3)}
.why-item p{margin:0;color:#a1a1a1;font-size:12px;line-height:1.4;transition:color 0.3s ease}
.why-item.active p{color:#e0e0e0;font-weight:500}
.why-image{margin-top:24px;padding:16px;background:linear-gradient(135deg, rgba(149, 217, 113, 0.08), rgba(123, 197, 90, 0.04));border:1px solid rgba(149, 217, 113, 0.15);border-radius:16px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;min-height:200px}
.why-image::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(149, 217, 113, 0.1) 0%, rgba(123, 197, 90, 0.05) 50%, rgba(149, 217, 113, 0.08) 100%);z-index:1;pointer-events:none}
.why-image::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--primary));z-index:2;pointer-events:none}
.why-image picture{width:100%;max-width:400px;height:auto;display:flex;align-items:center;justify-content:center;position:relative;z-index:3;border-radius:12px;overflow:hidden;box-shadow:0 8px 25px rgba(149, 217, 113, 0.2)}
.why-image img{width:100%;height:auto;max-height:180px;object-fit:cover;object-position:center;border-radius:12px;transition:transform 0.3s ease}
.why-image:hover img{transform:scale(1.02)}

/* Inspirational Quote Section */
.quote-section{margin-top:20px;padding:18px;background:linear-gradient(135deg, rgba(149, 217, 113, 0.05), rgba(123, 197, 90, 0.02));border:1px solid rgba(149, 217, 113, 0.1);border-radius:12px;text-align:center;position:relative;overflow:hidden}
.quote-section::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, var(--primary), var(--primary-2), var(--primary));opacity:0.6}
.inspirational-quote{margin:0;font-style:italic;font-size:16px;line-height:1.5;color:#e5e5e5;position:relative;z-index:1}
.inspirational-quote cite{display:block;margin-top:8px;font-size:13px;color:var(--primary);font-weight:600;font-style:normal;opacity:0.9}

/* Clean Ride-Sharing Scene */
.ride-scene{position:relative;width:100%;height:100%;background:#f8f9fa;border-radius:8px;overflow:hidden}

/* Map Background */
.map-background{position:absolute;top:20px;left:20px;right:20px;height:120px;background:#e8e9ea;border-radius:12px;z-index:1}
.map-route{position:absolute;top:50%;left:10%;right:10%;height:3px;background:#333;border-radius:2px;opacity:0.6}
.map-pin{position:absolute;width:12px;height:12px;background:var(--primary);border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.pin1{top:30%;left:15%}
.pin2{top:60%;left:35%}
.pin3{top:40%;left:65%}
.pin4{top:70%;left:80%}
.moving-car-icon{position:absolute;top:45%;left:25%;width:16px;height:16px;background:#fff;border:2px solid #333;border-radius:3px;animation:carMove 4s ease-in-out infinite}

/* Main Car */
.main-car{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:3;width:180px;height:80px}
.car-body{position:relative;width:100%;height:100%;background:var(--primary);border-radius:20px 8px 8px 20px;box-shadow:0 4px 15px rgba(149, 217, 113, 0.3)}
.car-front{position:absolute;top:10px;left:0;width:20px;height:60px;background:var(--primary-2);border-radius:20px 0 0 20px}
.car-windshield{position:absolute;top:15px;left:25px;right:25px;height:25px;background:rgba(255,255,255,0.3);border-radius:8px}
.car-door-left{position:absolute;top:45px;left:30px;width:25px;height:30px;background:rgba(255,255,255,0.2);border-radius:4px}
.car-door-right{position:absolute;top:45px;right:30px;width:25px;height:30px;background:rgba(255,255,255,0.2);border-radius:4px}
.car-wheel-left{position:absolute;bottom:-8px;left:20px;width:20px;height:20px;background:#333;border-radius:50%;border:3px solid #666}
.car-wheel-right{position:absolute;bottom:-8px;right:20px;width:20px;height:20px;background:#333;border-radius:50%;border:3px solid #666}
.car-headlight-left{position:absolute;top:25px;left:5px;width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 10px #fff}
.car-headlight-right{position:absolute;top:25px;right:5px;width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 10px #fff}

/* People */
.scene-people{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4}
.person{position:absolute}
.person1{top:60%;left:10%;animation:personWalk 3s ease-in-out infinite}
.person2{top:45%;left:45%;z-index:2}
.person3{top:50%;right:15%}
.person-head{width:20px;height:20px;background:#ffdbac;border-radius:50%;margin:0 auto 5px;position:relative}
.person-body{width:24px;height:30px;margin:0 auto;border-radius:4px;position:relative}
.person1 .person-body{background:var(--primary)}
.person2 .person-body{background:#333}
.person3 .person-body{background:var(--primary)}
.person-bag{position:absolute;top:15px;right:-8px;width:12px;height:16px;background:#666;border-radius:3px}
.person-arm{position:absolute;top:10px;right:-5px;width:8px;height:12px;background:#ffdbac;border-radius:4px;transform:rotate(15deg)}
.person-hand{position:absolute;top:25px;left:-5px;width:6px;height:8px;background:#ffdbac;border-radius:3px}

/* Decorative Elements */
.scene-decorations{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}
.leaf-cluster{position:absolute;width:30px;height:20px;background:#2d5a2d;border-radius:50% 20% 50% 20%;opacity:0.6}
.leaf1{bottom:10px;left:10px;transform:rotate(-15deg)}
.leaf2{bottom:15px;right:15px;transform:rotate(20deg)}

/* Animations */
@keyframes carMove{0%,100%{transform:translateX(0px) rotate(0deg)}25%{transform:translateX(20px) rotate(2deg)}50%{transform:translateX(40px) rotate(0deg)}75%{transform:translateX(20px) rotate(-2deg)}}
@keyframes personWalk{0%,100%{transform:translateX(0px)}50%{transform:translateX(10px)}}

/* What Happens Next Section */
.next-steps-section{background:linear-gradient(135deg, #0a0a0a, #111111);border-top:1px solid var(--border);padding:80px 0;position:relative;z-index:2}
.next-steps-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 20%, rgba(149, 217, 113, 0.03) 0%, transparent 50%),radial-gradient(circle at 80% 80%, rgba(123, 197, 90, 0.02) 0%, transparent 50%),radial-gradient(circle at 40% 60%, rgba(149, 217, 113, 0.02) 0%, transparent 50%);pointer-events:none}
.next-steps-content{max-width:1000px;margin:0 auto;text-align:center;position:relative;z-index:1}
.next-steps-title{font-size:42px;font-weight:800;color:#fff;margin:0 0 60px;letter-spacing:0.5px;line-height:1.2}
.next-steps-title .primary{color:var(--primary)}
.steps-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:40px;margin-top:40px}
.step-item{text-align:center;position:relative;padding:20px}
.step-number{width:60px;height:60px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#0a0a0a;margin:0 auto 24px;box-shadow:0 8px 25px rgba(149, 217, 113, 0.3);transition:all 0.3s ease;position:relative;z-index:2}
.step-number::before{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;background:linear-gradient(135deg, var(--primary), var(--primary-2));border-radius:50%;opacity:0.2;z-index:-1;transition:all 0.3s ease}
.step-item:hover .step-number{transform:scale(1.1);box-shadow:0 12px 35px rgba(149, 217, 113, 0.4)}
.step-item:hover .step-number::before{opacity:0.3;transform:scale(1.1)}
.step-title{font-size:24px;font-weight:700;color:#fff;margin:0 0 16px;letter-spacing:0.3px}
.step-description{font-size:16px;color:#aaa;line-height:1.6;margin:0;font-weight:500;max-width:280px;margin:0 auto}

/* Connecting Lines */
.step-item:not(:last-child)::after{content:'';position:absolute;top:50px;right:-20px;width:40px;height:2px;background:linear-gradient(90deg, var(--primary), transparent);opacity:0.3;z-index:1}
.step-item:not(:last-child)::before{content:'';position:absolute;top:48px;right:-18px;width:6px;height:6px;background:var(--primary);border-radius:50%;z-index:2}

@media (max-width:1100px){.two-col{grid-template-columns:1fr;gap:20px;padding:30px 0 60px}.hero-split{grid-template-columns:1fr}}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .container{padding:0 16px}
  .hero{padding:40px 0;gap:24px}
  
  /* Hero section mobile optimization */
  .hero-only{padding:20px 0}
  .intro-row{text-align:center;margin-bottom:16px}
  .intro{font-size:14px;margin-bottom:8px}
  .logo-img{max-width:120px;height:auto;margin:0 auto 16px;display:block}
  .tagline{font-size:16px;line-height:1.5;text-align:center;margin-bottom:24px}
  .cta-row{text-align:center;margin-bottom:16px}
  .chip{text-align:center;margin:0 auto 16px;display:inline-block}
  .trust{text-align:center;margin-top:16px}
  
  /* Two-column layout becomes single column on mobile */
  .two-col{grid-template-columns:1fr;gap:20px;padding:20px 0 50px}
  .hero-copy h1{font-size:36px;line-height:1.2}
  .hero-copy p{font-size:16px;margin-bottom:16px}
  .tagline{font-size:16px;line-height:1.5}
  .cta.big{padding:16px 32px;font-size:16px;min-width:180px}
  .trust{flex-direction:column;gap:12px;text-align:center;margin-top:16px}
  .panel{padding:16px;border-radius:12px}
  .panel-title{font-size:20px;margin-bottom:8px}
  .panel-sub{font-size:14px;margin-bottom:20px}
  .seg{margin:16px 0}
  .seg label{font-size:15px;margin-bottom:12px}
  .seg-row{grid-template-columns:1fr 1fr;gap:6px}
  .seg-btn{padding:8px 10px;min-height:40px;gap:6px}
  .btn-title{font-size:12px}
  .btn-subtitle{font-size:9px}
  .btn-icon{width:20px;height:20px;font-size:14px}
  .form-label{font-size:15px;margin-bottom:12px}
  .field{margin:12px 0}
  .input{padding:14px 16px;min-height:48px;font-size:15px}
  .input-icon{font-size:16px}
  .select-wrapper{padding:14px 16px;min-height:48px}
  .select-icon{font-size:16px}
  .chips{gap:6px;padding:8px}
  .chip{padding:8px 12px;min-height:36px;font-size:13px;font-weight:600}
  .hint{font-size:12px;margin-top:8px}
  .cta.full{padding:16px 24px;font-size:15px;min-width:180px}
  .cta-icon{font-size:16px}
  .cta-text{font-size:15px}
  .error-message{font-size:13px;margin-top:4px}
  .why-image{margin-top:20px;padding:14px;min-height:160px}
  .why-image picture{max-width:350px}
  .why-image img{max-height:140px}
  .quote-section{margin-top:18px;padding:16px}
  .inspirational-quote{font-size:15px}
  .inspirational-quote cite{font-size:12px;margin-top:6px}
  .tech-icon, .code-symbol{font-size:14px}
  .tech-icon{font-size:16px}
  .why-image{min-height:250px;padding:18px;border-radius:18px}
  .why-image picture{max-width:450px}
  .why-image img{max-height:250px}
  .ride-scene{height:150px}
  .main-car{width:140px;height:60px}
  .map-background{height:90px;top:15px;left:15px;right:15px}
  .person-head{width:16px;height:16px}
  .person-body{width:20px;height:24px}
  .next-steps-section{padding:60px 0}
  .next-steps-title{font-size:36px;margin-bottom:50px}
  .steps-grid{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .step-item{padding:16px}
  .step-number{width:50px;height:50px;font-size:20px;margin-bottom:20px}
  .step-title{font-size:20px;margin-bottom:12px}
  .step-description{font-size:15px;max-width:100%}
  .step-item:not(:last-child)::after{display:none}
  .step-item:not(:last-child)::before{display:none}
}

@media (max-width: 480px) {
  .container{padding:0 12px}
  .hero{padding:32px 0;gap:20px}
  .hero-copy h1{font-size:28px;line-height:1.3}
  .hero-copy p{font-size:15px}
  .tagline{font-size:15px}
  .cta.big{padding:14px 24px;font-size:15px;min-width:160px}
  .panel{padding:12px;border-radius:8px}
  .panel-title{font-size:18px}
  .panel-sub{font-size:13px}
  .seg-btn{padding:8px 10px;min-height:40px;gap:6px}
  .btn-title{font-size:11px}
  .btn-subtitle{font-size:8px}
  .btn-icon{width:18px;height:18px;font-size:12px}
  .form-label{font-size:14px}
  .input{padding:12px 14px;min-height:44px;font-size:14px}
  .select-wrapper{padding:12px 14px;min-height:44px}
  .chips{gap:5px;padding:6px}
  .chip{padding:6px 10px;min-height:32px;font-size:12px;font-weight:600}
  .cta.full{padding:14px 20px;font-size:14px;min-width:160px}
  .cta-icon{font-size:14px}
  .cta-text{font-size:14px}
  .error-message{font-size:12px}
  
  /* Extra small mobile optimizations */
  .hero-only{padding:16px 0}
  .logo-img{max-width:100px;margin-bottom:12px}
  .tagline{font-size:15px;margin-bottom:20px}
  .two-col{padding:16px 0 40px;gap:16px}
  .panel{padding:12px;border-radius:8px}
  .seg{margin:10px 0}
  .field{margin:10px 0}
  .field-row{gap:8px;margin:12px 0}
  .button-group{gap:12px;margin-top:10px}.cta.primary{min-width:90%;width:90%;padding:12px 20px}
  .chips{gap:5px;margin:8px 0}
  .chip{padding:6px 10px;min-height:30px;font-size:11px;font-weight:600}
  .hint{font-size:11px;margin-top:6px}
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
  .container{padding:0 8px}
  .hero{padding:24px 0;gap:16px}
  .hero-only{padding:12px 0}
  .logo-img{max-width:80px;margin-bottom:8px}
  .tagline{font-size:14px;margin-bottom:16px}
  .cta.big{padding:12px 20px;font-size:14px;min-width:140px}
  .panel{padding:10px;border-radius:6px}
  .panel-title{font-size:16px}
  .panel-sub{font-size:12px}
  .seg{margin:8px 0}
  .field{margin:8px 0}
  .field-row{gap:6px;margin:10px 0}
  .input{padding:10px 12px;min-height:40px;font-size:13px}
  .select-wrapper{padding:10px 12px;min-height:40px}
  .seg-btn{padding:6px 8px;min-height:36px;gap:4px}
  .btn-title{font-size:10px}
  .btn-subtitle{font-size:7px}
  .btn-icon{width:16px;height:16px;font-size:10px}
  .chip{padding:5px 8px;min-height:28px;font-size:10px;font-weight:600}
  .chips{gap:4px;margin:6px 0}
  .button-group{gap:8px;margin-top:8px}.cta.primary{min-width:95%;width:95%;padding:10px 16px}
  .cta{padding:10px 14px;font-size:13px;min-height:40px}
  .cta-icon{font-size:12px}
  .cta-text{font-size:13px}
  .hint{font-size:10px;margin-top:4px}
  .two-col{padding:12px 0 30px;gap:12px}
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .hero{padding:24px 0}
  .hero-copy h1{font-size:32px}
  .panel{padding:12px}
  .seg-btn{min-height:48px;padding:12px 16px}
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .seg-btn:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
  .seg-btn:active{transform:scale(0.98);background:linear-gradient(135deg, rgba(149, 217, 113, 0.15), rgba(123, 197, 90, 0.08))}
  .chip:hover{transform:none}
  .chip:active{transform:scale(0.95)}
  .cta.big:hover{transform:none}
  .cta.big:active{transform:scale(0.98)}
  .cta.full:hover{transform:none}
  .cta.full:active{transform:scale(0.98)}
  .cta:hover{transform:none}
  .cta:active{transform:scale(0.98)}
  .top-icon:hover{transform:none}
  .top-icon:active{transform:scale(0.95)}
  
  /* Ensure minimum touch target size */
  .seg-btn{min-height:44px}
  .chip{min-height:44px}
  .cta{min-height:44px}
  .input{min-height:44px}
  .select-wrapper{min-height:44px}
  .top-icon{min-width:44px;min-height:44px}
}

/* Prevent zoom on input focus (iOS) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="text"], input[type="email"], select, textarea {
    font-size: 16px;
  }
}

/* Need Help Section */
.help-section{background:linear-gradient(135deg, #0a0a0a, #111111);border-top:1px solid var(--border);padding:60px 0;position:relative;z-index:2}
.help-content{max-width:800px;margin:0 auto;text-align:center}
.help-header{margin-bottom:40px}
.help-icon{width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(149, 217, 113, 0.1), rgba(123, 197, 90, 0.05));border:2px solid var(--primary);border-radius:50%;color:var(--primary);transition:all 0.3s ease}
.help-icon:hover{background:linear-gradient(135deg, rgba(149, 217, 113, 0.2), rgba(123, 197, 90, 0.1));transform:scale(1.05);box-shadow:0 8px 25px rgba(149, 217, 113, 0.3)}
.help-title{font-size:32px;font-weight:800;color:#fff;margin:0 0 12px;letter-spacing:0.5px}
.help-subtitle{font-size:18px;color:#aaa;font-weight:500;margin:0;line-height:1.5;max-width:500px;margin:0 auto}
.help-actions{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}
.help-btn{display:flex;align-items:center;gap:16px;padding:20px 24px;background:linear-gradient(135deg, #0c0c0c, #1a1a1a);border:2px solid #333;border-radius:16px;text-decoration:none;color:#fff;transition:all 0.3s ease;position:relative;overflow:hidden;min-height:80px}
.help-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--primary), var(--primary-2));opacity:0;transition:opacity 0.3s ease}
.help-btn:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 12px 30px rgba(149, 217, 113, 0.2)}
.help-btn:hover::before{opacity:1}
.phone-btn:hover{background:linear-gradient(135deg, rgba(149, 217, 113, 0.1), rgba(123, 197, 90, 0.05))}
.whatsapp-btn:hover{background:linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(25, 160, 71, 0.05));border-color:#25D366}
.whatsapp-btn:hover::before{background:linear-gradient(90deg, #25D366, #19A047)}
.help-btn .btn-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(149, 217, 113, 0.1);border:1px solid rgba(149, 217, 113, 0.2);border-radius:12px;color:var(--primary);transition:all 0.3s ease;flex-shrink:0}
.whatsapp-btn .btn-icon{background:rgba(37, 211, 102, 0.1);border-color:rgba(37, 211, 102, 0.2);color:#25D366}
.help-btn:hover .btn-icon{background:rgba(149, 217, 113, 0.2);transform:scale(1.1);box-shadow:0 4px 15px rgba(149, 217, 113, 0.3)}
.whatsapp-btn:hover .btn-icon{background:rgba(37, 211, 102, 0.2);box-shadow:0 4px 15px rgba(37, 211, 102, 0.3)}
.help-btn .btn-content{display:flex;flex-direction:column;gap:4px;flex:1;text-align:left}
.help-btn .btn-title{font-size:18px;font-weight:700;color:#fff;margin:0}
.help-btn .btn-subtitle{font-size:14px;color:#aaa;font-weight:500;margin:0}
.help-btn .btn-arrow{font-size:20px;color:var(--primary);transition:all 0.3s ease;font-weight:700}
.help-btn:hover .btn-arrow{transform:translateX(4px);color:var(--primary)}
.whatsapp-btn:hover .btn-arrow{color:#25D366}
.help-info{display:flex;justify-content:center;gap:32px;flex-wrap:wrap}
.info-item{display:flex;align-items:center;gap:8px;color:#aaa;font-size:14px;font-weight:500}
.info-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}

/* Mobile responsiveness for help section */
@media (max-width: 768px) {
  .help-section{padding:40px 0}
  .help-icon{width:64px;height:64px;margin-bottom:20px}
  .help-title{font-size:28px;margin-bottom:10px}
  .help-subtitle{font-size:16px}
  .help-actions{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
  .help-btn{padding:16px 20px;min-height:70px;gap:12px}
  .help-btn .btn-icon{width:40px;height:40px}
  .help-btn .btn-title{font-size:16px}
  .help-btn .btn-subtitle{font-size:13px}
  .help-info{gap:24px}
  .info-item{font-size:13px}
}

@media (max-width: 480px) {
  .help-section{padding:32px 0}
  .help-icon{width:56px;height:56px;margin-bottom:16px}
  .help-title{font-size:24px}
  .help-subtitle{font-size:15px}
  .help-actions{gap:12px;margin-bottom:24px}
  .help-btn{padding:14px 16px;min-height:64px;gap:10px}
  .help-btn .btn-icon{width:36px;height:36px}
  .help-btn .btn-title{font-size:15px}
  .help-btn .btn-subtitle{font-size:12px}
  .help-info{gap:16px;flex-direction:column}
  .info-item{font-size:12px}
  .why-image{margin-top:16px;padding:12px;min-height:140px;border-radius:12px}
  .why-image picture{max-width:100%}
  .why-image img{max-height:120px}
  .why-item.active::after{font-size:8px;padding:1px 4px;top:6px;right:8px}
  .quote-section{margin-top:16px;padding:14px}
  .inspirational-quote{font-size:14px}
  .inspirational-quote cite{font-size:11px;margin-top:6px}
  .tech-icon, .code-symbol{font-size:12px}
  .tech-icon{font-size:14px}
  .happy-face{font-size:10px}
  .ride-scene{height:120px}
  .main-car{width:120px;height:50px}
  .map-background{height:70px;top:10px;left:10px;right:10px}
  .person-head{width:14px;height:14px}
  .person-body{width:18px;height:22px}
  .next-steps-section{padding:50px 0}
  .next-steps-title{font-size:32px;margin-bottom:40px}
  .steps-grid{gap:28px;margin-top:28px}
  .step-item{padding:12px}
  .step-number{width:45px;height:45px;font-size:18px;margin-bottom:16px}
  .step-title{font-size:18px;margin-bottom:10px}
  .step-description{font-size:14px}
}