:root{
  --bg:#f7fafc; --paper:#ffffff; --ink:#0f1520; --muted:#607082; --line:#e6edf5;
  --brand:#2b7fd6; --brand-2:#1e67b5; --pill:#eef6ff; --pill-line:#d7e9ff;
  --shadow:0 12px 34px rgba(36,61,95,.14);
  --radius:18px; --container:1220px;
  --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

/* universal container with mobile-safe padding */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:calc(clamp(18px,5vw,28px) + var(--sa-l));
  padding-right:calc(clamp(18px,5vw,28px) + var(--sa-r));
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:none;border-radius:999px;
  padding:12px 18px;font:inherit;font-weight:600;text-align:center;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(43,127,214,.20)}
.btn.primary:hover{background:var(--brand-2);transform:translateY(-1px)}
.btn.ghost{background:#f3f7fb;border:1px solid var(--line);color:var(--ink)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:80px}
.brand{display:flex;align-items:center;font-weight:700;font-size:18px}
.logo{
  width:72px;height:72px;border-radius:12px;
  display:block;object-fit:contain;
  transform:scale(1.14);transform-origin:left center;
}
.logo-sm{
  width:48px;height:48px;border-radius:12px;
  transform:scale(1.05);
}
.menu{display:flex;align-items:center;gap:18px}
.menu a{color:var(--muted);font-weight:600}
.menu a:hover{color:var(--ink)}
.actions{display:flex;align-items:center;gap:10px}
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px}
.burger span{display:block;width:18px;height:2px;background:#1c2742;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#1c2742}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (max-width:980px){
  .menu{display:none}
  .burger{display:block}
  .nav.open .menu{
    display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line);
    padding:14px calc(clamp(18px,5vw,28px) + var(--sa-r));
    padding-left:calc(clamp(18px,5vw,28px) + var(--sa-l));
  }
}

/* Section shell */
.section{padding:30px 0}
.section h2{font-size:clamp(22px,3.4vw,30px);margin:0 0 6px;font-weight:700}
.section .sub{color:var(--muted);margin-bottom:12px;font-weight:500}

/* HERO */
.hero{position:relative;color:#fff;border-bottom-left-radius:28px;border-bottom-right-radius:28px;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,30,.65),rgba(11,22,30,.28))}
.hero-inner{
  position:relative;
  padding-top:clamp(76px,12vh,128px);
  padding-bottom:clamp(76px,12vh,128px);
}
.h-title{font-size:clamp(30px,7vw,64px);line-height:1.04;font-weight:700;margin:0 0 10px;max-width:14ch}
.h-sub{font-size:clamp(14px,2.6vw,18px);opacity:.96;max-width:720px;margin:0 0 16px;font-weight:500}
.h-cta{display:flex;flex-wrap:wrap;gap:10px}

/* CAMPERS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:18px;
  align-items:stretch;
}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  transform:translateY(6px);opacity:0;
  transition:transform .45s ease,opacity .45s ease,box-shadow .18s ease;
}
.card.show{transform:translateY(0);opacity:1}
.card:hover{box-shadow:0 18px 42px rgba(36,61,95,.18)}
.card .img{position:relative;height:240px}
.card img{width:100%;height:100%;object-fit:cover}
.price{position:absolute;bottom:12px;right:12px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;font-weight:700;box-shadow:0 8px 20px rgba(20,35,60,.12)}
.card .body{padding:16px}
.ttl{font-size:19px;font-weight:700;margin:8px 0}
.row2{display:flex;gap:10px;justify-content:space-between;align-items:center}
.cta-sm{display:inline-flex;align-items:center;gap:8px;background:#f3f7fb;border:1px solid var(--line);padding:10px 12px;border-radius:12px;font-weight:600}
@media (max-width:640px){
  .section{padding:30px 0}
  .card .img{height:200px}
  .card .body{padding:18px}
}

/* WHY CHOOSE US */
.benefits{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px
}
.benefit{
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:16px;display:grid;gap:6px;transform:translateY(10px);opacity:0;transition:transform .5s ease,opacity .5s ease
}
.benefit.show{transform:translateY(0);opacity:1}
.benefit b{font-weight:700}
.benefit p{margin:0;color:var(--muted);font-weight:500}
@media (max-width:900px){ .benefits{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .benefits{grid-template-columns:1fr} }

/* OUR STORY */
.story{
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:18px;transform:translateY(10px);opacity:0;transition:transform .5s ease,opacity .5s ease
}
.story.show{transform:translateY(0);opacity:1}
.story p{margin:.4rem 0;color:var(--muted);font-weight:500}

/* CONTACT US */
.contact{
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:18px
}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1 / -1}
.inp{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:12px;border-radius:12px;background:#f9fbfd}
.inp input,.inp textarea{border:none;background:transparent;outline:none;font:inherit;width:100%}
.inp textarea{min-height:110px;resize:vertical}
@media (max-width:780px){ .form{grid-template-columns:1fr} }

/* FOOTER */
.footer{background:#0f1520;color:#d9e2ef;margin-top:30px}
.fwrap{max-width:var(--container);margin:0 auto;display:grid;gap:18px;grid-template-columns:2fr 1fr 1fr;
  padding:28px calc(clamp(18px,5vw,28px) + var(--sa-r));
  padding-left:calc(clamp(18px,5vw,28px) + var(--sa-l));
}
.fwrap h4{margin:0 0 10px;font-weight:700;color:#fff}
.fwrap a{color:#d9e2ef}
.fwrap a:hover{color:#fff}
.copy{padding:14px calc(clamp(18px,5vw,28px) + var(--sa-r));
  padding-left:calc(clamp(18px,5vw,28px) + var(--sa-l));text-align:center;color:#b9c6d6;font-weight:500}
@media (max-width:900px){ .fwrap{grid-template-columns:1fr} }

.socials{margin-top:12px}
.social-links{display:flex;gap:10px;align-items:center}
.social-icon{
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:#1b2a3f;color:#fff;
  transition:transform .18s ease, background .18s ease;
}
.social-icon:hover{background:#2b7fd6;transform:translateY(-2px)}
.social-icon svg{width:20px;height:20px}
.rights{margin:6px 0 0;color:#9fb1c7;font-weight:600;font-size:14px}

/* Hero mobile tweaks */
@media (max-width:720px){
  .h-title{max-width:12ch}
  .h-cta .btn{padding:12px 16px}
}

/* Floating WhatsApp */
.wa-floating{
  position:fixed;
  right:calc(16px + var(--sa-r));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:66px;height:66px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#2ddd6c,#1fb75a);
  color:#fff;
  border-radius:50%;
  box-shadow:0 10px 24px rgba(37,211,102,.35);
  z-index:80;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  animation:wa-bounce 8s ease-in-out infinite;
}
.wa-floating:hover{
  background:linear-gradient(145deg,#1fb75a,#17a84d);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(37,211,102,.42);
  color:#fff;
}
.wa-floating svg{width:30px;height:30px}

@keyframes wa-bounce{
  0%,65%,100%{transform:translateY(0)}
  15%{transform:translateY(-7px)}
  30%{transform:translateY(0)}
  45%{transform:translateY(-4px)}
}