:root{--bg:#f6f7f9;--card:#ffffff;--card-premium:rgba(248,250,252,0.8);--muted:#6b7280;--accent:#007aff;--gradient-primary:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary:linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);--glass: rgba(255,255,255,0.6);--shadow:0 8px 30px rgba(14,22,36,0.12);--shadow-premium:0 20px 60px rgba(102, 126, 234, 0.15);--radius:18px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial;color:#111827;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45;background:var(--bg)}
.hero-bg{background:url('../img/camper_header.jpeg') no-repeat center center;background-size:cover;background-attachment:fixed;margin:0;width:100%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:optimize-quality}
.container{max-width:1100px;margin:0 auto;padding:48px 24px}
.hero-bg .container{padding:0 24px}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 0;position:relative}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:56px;height:56px;flex:0 0 56px;border-radius:12px;object-fit:contain;box-shadow:var(--shadow);image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:optimize-quality}
.brand h1{font-size:18px;margin:0;color:#111827;font-weight:700;text-shadow:0 2px 4px rgba(255,255,255,0.8)}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:#2c3e50;text-decoration:none;font-weight:700;text-shadow:0 1px 2px rgba(255,255,255,0.7)}
.mobile-menu-toggle{display:none;background:rgba(255,255,255,0.8);border:none;cursor:pointer;padding:8px;border-radius:8px;backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.mobile-menu-toggle svg{width:24px;height:24px;fill:#2c3e50}
.nav-list{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
@media (max-width:768px){
  .nav{position:static}
  .nav-list{display:none;position:absolute;top:100%;right:0;left:0;flex-direction:column;gap:12px;background:rgba(255,255,255,0.95);border-radius:12px;padding:16px;box-shadow:var(--shadow);backdrop-filter:blur(10px);margin-top:8px;z-index:100}
  .nav-list.active{display:flex}
  .nav-list li{width:100%}
  .nav-list a{display:block;padding:8px 12px;border-radius:8px;text-align:center}
  .nav-list a:hover{background:rgba(0,122,255,0.1)}
  .mobile-menu-toggle{display:block;position:absolute;top:50%;right:0;transform:translateY(-50%)}
  .cta{margin-top:0}
}
.cta{background:rgba(255,255,255,0.8);color:#2c3e50;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,0.9);backdrop-filter:blur(10px)}
.hero{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center;padding:36px 0}
.hero-text{background:rgba(0,0,0,0.4);padding:32px;border-radius:16px;backdrop-filter:blur(2px);overflow:hidden}
.eyebrow{color:rgba(255,255,255,0.8);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:1px}
.hero h2{font-size:42px;margin:10px 0 8px;line-height:1.05;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.hero p.lead{color:rgba(255,255,255,0.9);font-size:18px;margin:0 0 20px;text-shadow:0 1px 5px rgba(0,0,0,0.2)}
.hero .stat .muted{color:rgba(255,255,255,0.8)}
.download-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:20px 0;max-width:100%}
.badge{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.75));padding:10px 14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.08);text-decoration:none;color:inherit;border:1px solid rgba(16,24,40,0.04)}
.badge svg{width:28px;height:28px}
.store-badge{display:inline-block;text-decoration:none;transition:transform .2s ease;margin:2px;max-width:320px}
.store-badge:hover{transform:scale(1.02)}
.store-badge img{height:220px;width:auto;max-width:100%}
.phone-wrap{display:flex;justify-content:center}
.phone{width:320px;border-radius:24px;background:linear-gradient(180deg,#0f1724 0%,#0b1220 100%);padding:6px;border:4px solid #0b1220;box-shadow:0 18px 60px rgba(2,6,23,0.45)}
.screen{width:100%;height:640px;background:linear-gradient(180deg,#061226,#08203a);border-radius:18px;overflow:hidden;position:relative}
.screen img{width:100%;height:100%;object-fit:contain;border-radius:18px;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:optimize-quality;image-rendering:-moz-crisp-edges;-ms-interpolation-mode:bicubic;backface-visibility:hidden;transform:translateZ(0);object-position:center}

/* High-DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .screen img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:34px}
.card{background:var(--card);border-radius:20px;padding:28px;box-shadow:var(--shadow);border:1px solid rgba(16,24,40,0.04);transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden;backdrop-filter:blur(10px)}
.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 25px 80px rgba(102, 126, 234, 0.2);border-color:rgba(102, 126, 234, 0.1)}
.card:nth-child(even):hover{box-shadow:0 25px 80px rgba(252, 182, 159, 0.2);border-color:rgba(252, 182, 159, 0.2)}
.card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.card-icon{width:24px;height:24px;flex-shrink:0}
.card h3{margin:0;font-size:18px;font-weight:700}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);opacity:0;transition:opacity .4s ease;border-radius:20px 20px 0 0}
.card:hover::before{opacity:1}
.card:nth-child(even)::before{background:var(--gradient-secondary)}
.muted{color:var(--muted)}
.premium{
  display:flex;
  gap:32px;
  align-items:center;
  margin:48px 0;
  padding:40px;
  border-radius:28px;
  background:linear-gradient(135deg, #2c2c34 0%, #3a3a42 50%, #2c2c34 100%);
  box-shadow:
    0 25px 80px rgba(0,0,0,0.4),
    0 0 0 1px rgba(212,175,55,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  border:2px solid #d4af37;
  position:relative;
  overflow:hidden
}
.premium::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(212,175,55,0.05) 0%, transparent 50%, rgba(212,175,55,0.03) 100%);
  pointer-events:none
}
.premium h3{color:#ffffff;margin-top:0;text-shadow:0 2px 8px rgba(0,0,0,0.5);font-size:24px;font-weight:700}
.premium p{color:#e2e8f0;text-shadow:0 1px 3px rgba(0,0,0,0.3);font-size:16px;line-height:1.6}
.premium ul{color:#f1f5f9;margin:0;padding-left:20px;font-size:15px}
.premium li{margin-bottom:12px;position:relative;line-height:1.5}
.premium li::marker{color:#ffd700;content:'👑 '}
.premium img{width:180px;border-radius:14px}
.premium ul{margin:0;padding-left:18px}
.testimonials{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{padding:16px;border-radius:14px;background:linear-gradient(180deg,#fff,#fbfbff);border:1px solid rgba(16,24,40,0.04)}
footer{margin-top:48px;padding:26px 0;border-top:1px solid rgba(16,24,40,0.04);color:var(--muted);font-size:14px;display:flex;justify-content:space-between;align-items:center}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:28px;text-align:center}
  .hero-text{padding:24px;margin:0 auto;max-width:600px}
  .hero h2{font-size:32px}
  .hero p.lead{font-size:16px}
  .download-row{justify-content:center}
  .store-badge img{height:180px}
  .phone{margin:0 auto;width:280px}
  .screen{height:560px}
  .features,.testimonials{grid-template-columns:1fr}
  .premium{flex-direction:column;align-items:flex-start;text-align:left}
  .premium img{width:100%;max-width:300px;margin:0 auto}
}
@media (max-width:480px){
  .container{padding:24px 16px}
  .hero-bg .container{padding:0 16px}
  .hero{padding:24px 0}
  .hero-text{padding:20px}
  .hero h2{font-size:24px}
  .hero p.lead{font-size:14px}
  .store-badge img{height:140px}
  .phone{width:240px}
  .screen{height:480px}
  .card{padding:18px}
  .premium{padding:20px}
}
.fade-up{opacity:0;transform:translateY(10px);animation:fadeUp .6s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
.stat{display:flex;gap:12px;align-items:baseline}
.stat .num{font-weight:800;font-size:28px}
.main-content{background:linear-gradient(135deg,#2095F2 0%,#FF6E40 100%);color:#fff}
.main-content h2,.main-content h3{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.main-content .muted{color:rgba(255,255,255,0.9);text-shadow:0 1px 4px rgba(0,0,0,.3)}
.main-content .card{background:rgba(255,255,255,0.85);backdrop-filter:blur(15px);color:#111827}
.main-content .card h3{color:#111827;text-shadow:none}
.main-content .card .muted{color:var(--muted);text-shadow:none}
.main-content .premium{
  background:linear-gradient(135deg, #2c2c34 0%, #3a3a42 50%, #2c2c34 100%);
  backdrop-filter:blur(10px);
  color:#ffffff;
  border:2px solid #d4af37;
  box-shadow:
    0 25px 80px rgba(0,0,0,0.4),
    0 0 0 1px rgba(212,175,55,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  position:relative
}
.main-content .premium::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(212,175,55,0.05) 0%, transparent 50%, rgba(212,175,55,0.03) 100%);
  pointer-events:none
}

.main-content .premium h3{
  color:#d4af37;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
  font-size:26px;
  font-weight:800;
  letter-spacing:0.5px;
  position:relative
}
.main-content .premium h3::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:60px;
  height:2px;
  background:linear-gradient(90deg, #d4af37, transparent);
}
.main-content .premium .muted,.main-content .premium p{
  color:#e2e8f0;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
  font-size:16px;
  line-height:1.7
}
.main-content .premium ul{
  color:#f8fafc;
  font-size:15px
}
.main-content .premium li{
  position:relative;
  padding-left:8px;
  margin-bottom:14px
}
.main-content .premium li::before{
  content:'◆';
  position:absolute;
  left:-18px;
  color:#d4af37;
  font-size:12px;
  font-weight:bold
}
.main-content .premium .cta{
  background:#d4af37;
  color:#2c2c34;
  border:2px solid #b8941f;
  backdrop-filter:none;
  font-weight:800;
  text-shadow:none;
  box-shadow:0 6px 20px rgba(212,175,55,0.3);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1)
}
.main-content .premium .cta:hover{
  background:#e6c547;
  box-shadow:0 8px 25px rgba(212,175,55,0.4);
  transform:translateY(-1px);
  border-color:#d4af37
}
.main-content .quote{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);color:#111827}
.main-content .quote strong{color:#111827}
.main-content .quote .muted{color:var(--muted);text-shadow:none}
.main-content footer{color:rgba(255,255,255,0.9);border-top:1px solid rgba(255,255,255,0.2)}
.main-content footer a{color:rgba(255,255,255,0.8)!important}