@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root{
  --bg:#07090c;
  --panel:#101318;
  --panel2:#15191f;
  --line:rgba(255,255,255,.09);
  --text:#f4f5f6;
  --muted:#9ca3ad;
  --accent:#d7b56d;
  --accent2:#f1d99b;
  --max:1240px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  line-height:1.6;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:
    linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);
  background-size:50px 50px;
  z-index:-1;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

.container{
  width:min(var(--max),calc(100% - 40px));
  margin:auto;
}

/* TOP BAR */

.topbar{
  height:34px;
  background:#040507;
  border-bottom:1px solid var(--line);
  color:#858b94;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.topbar .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* NAVIGATION */

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(7,9,12,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}

.nav{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
}

.mark{
  width:38px;
  height:38px;
  border:1px solid var(--accent);
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--accent);
  font-family:Manrope;
  font-weight:800;
}

.brand strong{
  font-family:Manrope;
  font-size:18px;
  letter-spacing:.14em;
}

.brand small{
  display:block;
  color:#777d85;
  font-size:8px;
  letter-spacing:.24em;
}

nav{
    display:flex;
  align-items:center;
  gap:28px;
}

nav a{
  font-size:12px;
  color:#c9ccd1;
  text-transform:uppercase;
  letter-spacing:.13em;
  transition:.25s;
}

nav a:hover{
  color:var(--accent);
}

.nav-cta{
  border:1px solid rgba(215,181,109,.6);
  padding:12px 18px;
  color:var(--accent);
}

.menu{
  display:none;
  border:0;
  background:none;
  color:white;
  font-size:26px;
}

/* HERO */

.hero{
  min-height:720px;
  display:grid;
  align-items:end;
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(3,5,7,.94) 0%,
      rgba(3,5,7,.68) 48%,
      rgba(3,5,7,.2) 100%
    ),
    url("https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?auto=format&fit=crop&w=2000&q=85")
    center/cover;
}

.hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:35%;
  background:linear-gradient(transparent,var(--bg));
}

.hero-content{
  position:relative;
  z-index:1;
  padding:110px 0 90px;
}

.eyebrow{
  color:var(--accent);
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:700;
}

.hero h1{
  font-size:clamp(48px,7vw,92px);
  line-height:.96;
  max-width:850px;
  letter-spacing:-.055em;
  margin:18px 0;
}

.hero h1 em{
  color:var(--accent);
  font-style:normal;
}

.hero p{
  max-width:650px;
  color:#c2c6cc;
  font-size:17px;
  margin:24px 0 34px;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  border:1px solid transparent;
  background:var(--accent);
  color:#111;
  padding:15px 23px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s;
}

.btn:hover{
  transform:translateY(-2px);
  background:var(--accent2);
}

.btn.ghost{
  background:rgba(0,0,0,.15);
  border-color:rgba(255,255,255,.25);
  color:white;
}

.hero-meta{
  display:flex;
  gap:36px;
  margin-top:55px;
  padding-top:25px;
  border-top:1px solid rgba(255,255,255,.16);
  max-width:780px;
}

.hero-meta strong{
  display:block;
  font:800 24px Manrope;
  color:white;
}

.hero-meta span{
  font-size:11px;
  color:#90959d;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* TRUST */

.trust{
  margin-top:-30px;
  position:relative;
  z-index:3;
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(16,19,24,.95);
  border:1px solid var(--line);
  box-shadow:0 20px 60px #0008;
}

.trust-item{
  padding:26px;
  border-right:1px solid var(--line);
}

.trust-item:last-child{
  border:0;
}

.trust-item strong{
  font:700 14px Manrope;
  display:block;
  margin-bottom:6px;
}

.trust-item span{
  font-size:12px;
  color:var(--muted);
}

/* GENERAL SECTIONS */

section{
  padding:110px 0;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:48px;
}

.section-head h2{
  font-size:clamp(34px,4vw,54px);
  letter-spacing:-.04em;
  line-height:1.05;
  margin-top:9px;
}

.section-head p{
  max-width:490px;
  color:var(--muted);
  font-size:14px;
}

/* SERVICES */

.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.card{
  background:linear-gradient(145deg,#12161b,#0d1014);
  border:1px solid var(--line);
  padding:30px;
  position:relative;
  overflow:hidden;
  transition:.3s;
}

.card:hover{
  transform:translateY(-6px);
  border-color:rgba(215,181,109,.45);
}

.card:after{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  right:-35px;
  top:-35px;
  border:1px solid rgba(215,181,109,.13);
  border-radius:50%;
}

.icon{
  width:44px;
  height:44px;
  border:1px solid rgba(215,181,109,.35);
  display:grid;
  place-items:center;
  color:var(--accent);
  margin-bottom:25px;
  font-size:19px;
}

.card h3{
  font-size:20px;
  margin-bottom:10px;
}

.card p{
  font-size:13px;
  color:var(--muted);
  min-height:63px;
}

.card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.price{
  color:var(--accent);
  font-weight:800;
  font-size:13px;
}

.learn{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#aaa;
}

/* EXPERIENCE */

.experience{
  background:#0b0e12;
}

.experience-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
}

.visual{
  min-height:570px;
  background:
    linear-gradient(180deg,transparent,#05070a 95%),
    url("https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=1200&q=85")
    center/cover;
  border:1px solid var(--line);
  position:relative;
}

.badge{
  position:absolute;
  right:24px;
  bottom:24px;
  background:#0a0c0fdd;
  border:1px solid var(--line);
  padding:20px 24px;
  backdrop-filter:blur(12px);
}

.badge b{
  display:block;
  color:var(--accent);
  font:800 28px Manrope;
}

.badge span{
  font-size:10px;
  color:#aaa;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.copy h2{
  font-size:clamp(35px,4vw,58px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:12px 0 20px;
}

.copy>p{
  color:var(--muted);
  font-size:14px;
}

.features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:30px;
}

.feature{
  border-top:1px solid var(--line);
  padding-top:16px;
}

.feature b{
  font-size:13px;
}

.feature p{
  font-size:12px;
  color:#818791;
  margin-top:5px;
}

/* BOOKING */

.booking{
  background:linear-gradient(90deg,#0b0e12,#11151a);
}

.booking-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:45px;
  align-items:start;
}

.booking-info h2{
  font-size:52px;
  line-height:1.02;
  letter-spacing:-.04em;
  margin:12px 0 20px;
}

.booking-info>p{
  color:var(--muted);
  font-size:14px;
}

.info-list{
  margin-top:35px;
}

.info-list div{
  padding:18px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:15px;
}

.info-list b{
  font-size:12px;
}

.info-list span{
  color:var(--muted);
  font-size:12px;
}

.form{
  background:#0b0e12;
  border:1px solid var(--line);
  padding:30px;
}

.form h3{
  font-size:24px;
  margin-bottom:20px;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.field.full{
  grid-column:1/-1;
}

label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#8c929a;
}

input,
select,
textarea{
  background:#11151a;
  color:#fff;
  border:1px solid #282d34;
  padding:13px 14px;
  outline:none;
  border-radius:0;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--accent);
}

textarea{
  min-height:110px;
  resize:vertical;
}

.form .btn{
  width:100%;
  margin-top:18px;
}

.form-note{
  font-size:10px;
  color:#686f78;
  text-align:center;
  margin-top:12px;
}

/* PROCESS */

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.step{
  background:#0c0f13;
  padding:30px;
  min-height:190px;
}

.num{
  color:var(--accent);
  font:800 12px Manrope;
}

.step h3{
  font-size:18px;
  margin:25px 0 8px;
}

.step p{
  font-size:12px;
  color:var(--muted);
}

/* VEHICLE SHOWCASE */

.fleet{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.fleet-card{
  height:360px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:#111;
}

.fleet-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s;
}

.fleet-card:hover img{
  transform:scale(1.06);
}

.fleet-card:after{
  content:"";
  position:absolute;
  inset:35% 0 0;
  background:linear-gradient(transparent,#050608);
}

.fleet-caption{
  position:absolute;
  z-index:2;
  bottom:25px;
  left:25px;
}

.fleet-caption span{
  font-size:10px;
  color:var(--accent);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.fleet-caption h3{
  font-size:22px;
  margin-top:4px;
}

/* TESTIMONIAL */

.testimonial{
  background:#0b0e12;
}

.quote{
  max-width:850px;
  margin:auto;
  text-align:center;
}

.quote-mark{
  font:800 60px Georgia;
  color:var(--accent);
  height:45px;
}

.quote p{
  font:500 27px/1.35 Manrope;
  letter-spacing:-.02em;
}

.quote small{
  display:block;
  color:#858b94;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin-top:25px;
  font-size:10px;
}

/* CTA */

.cta{
  padding:70px 0;
}

.cta-box{
  border:1px solid rgba(215,181,109,.3);
  padding:55px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(215,181,109,.08),
      transparent 35%
    ),
    #0d1014;
}

.cta-box h2{
  font-size:38px;
  letter-spacing:-.04em;
}

.cta-box p{
  color:var(--muted);
  font-size:13px;
  margin-top:7px;
}

/* FOOTER */

footer{
  border-top:1px solid var(--line);
  padding:50px 0 25px;
  background:#05070a;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:35px;
}

.footer-grid h4{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:#aaa;
  margin-bottom:18px;
}

.footer-grid p,
.footer-grid a{
  display:block;
  color:#747b84;
  font-size:12px;
  margin:7px 0;
}

.footer-bottom{
  margin-top:45px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#555;
  font-size:10px;
}

/* MODAL */

.modal{
  display:none;
  position:fixed;
  inset:0;
  background:#000b;
  z-index:3000;
  place-items:center;
  padding:20px;
}

.modal.show{
  display:grid;
}

.modal-box{
  max-width:470px;
  width:100%;
  background:#11151a;
  border:1px solid rgba(215,181,109,.4);
  padding:38px;
  text-align:center;
}

.modal-box .icon{
  margin:0 auto 18px;
}

.modal-box h2{
  font-size:30px;
}

.modal-box p{
  color:#9ca3ad;
  font-size:13px;
  margin:12px 0 25px;
}

.modal-box .btn{
  width:100%;
}

/* SCROLL ANIMATION */

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:.7s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}

/* TABLET */

@media(max-width:900px){

  nav{
    display:none;
    position:absolute;
    top:82px;
    left:0;
    right:0;
    background:#080a0d;
    padding:20px;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
  }

  nav.open{
    display:flex;
  }

  .menu{
    display:block;
  }

  .nav-cta{
    display:none;
  }

  .trust-grid,
  .services,
  .process-grid{
    grid-template-columns:1fr 1fr;
  }

  .experience-grid,
  .booking-layout{
    grid-template-columns:1fr;
  }

  .fleet{
    grid-template-columns:1fr 1fr;
  }

  .visual{
    min-height:420px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* MOBILE */

@media(max-width:600px){

  .container{
    width:min(100% - 28px,var(--max));
  }

  .topbar{
    display:none;
  }

  .nav{
    height:70px;
  }

  .hero{
    min-height:690px;
  }

  .hero-content{
    padding:90px 0 70px;
  }

  .hero-meta{
    gap:15px;
    flex-wrap:wrap;
  }

  section{
    padding:75px 0;
  }

  .section-head{
    display:block;
  }

  .section-head p{
    margin-top:15px;
  }

  .trust-grid,
  .services,
  .process-grid,
  .fleet,
  .features,
  .grid{
    grid-template-columns:1fr;
  }

  .trust-item{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .visual{
    min-height:340px;
  }

  .booking-info h2{
    font-size:42px;
  }

  .form{
    padding:20px;
  }

  .field.full{
    grid-column:auto;
  }

  .cta-box{
    padding:30px;
    display:block;
  }

  .cta-box .btn{
    margin-top:25px;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    display:block;
  }

  .footer-bottom span{
    display:block;
    margin-top:8px;
  }
}