:root{
  --bg:#0b1120;
  --panel:#111c30;
  --card:#17243a;
  --line:#29374d;
  --text:#f8fafc;
  --muted:#a8b5c7;

  /* Brand colors */
  --blue:#38bdf8;
  --green:#10b981;
  --green2:#34d399;

  /* Hover colors */
  --green-hover:#059669;
  --green-active:#047857;
  --link-hover:#34d399;
  --panel-hover:#1c2a40;
  --border-hover:#3b506b;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;
  line-height:1.65;
}

a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease,background-color .2s ease;
}

a:hover{
  color:var(--link-hover);
}

/* BUTTONS */

button,
.btn{
  cursor:pointer;
  border:0;
  border-radius:14px;
  padding:12px 17px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

/* Primary green button */

.btn-primary{
  background:var(--green);
  color:#ffffff;
  border:1px solid var(--green);
}

.btn-primary:hover{
  background:var(--green-hover);
  color:#ffffff;
  border-color:var(--green-hover);
  box-shadow:0 6px 18px #10b9812b;
}

.btn-primary:active{
  background:var(--green-active);
  color:#ffffff;
  transform:translateY(1px);
}

/* Prevent button text and icons from turning blue */

.btn-primary:hover,
.btn-primary:hover *,
.nav .btn-primary:hover,
.nav .btn-primary:hover *{
  color:#ffffff;
}

/* Secondary button */

.btn-secondary{
  background:#ffffff0d;
  border:1px solid #ffffff20;
  color:#ffffff;
}

.btn-secondary:hover{
  background:#1e293b;
  border-color:var(--border-hover);
  color:#ffffff;
}

/* CONTAINER */

.container{
  width:min(1160px,calc(100% - 36px));
  margin:auto;
}

/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#0f172aef;
  backdrop-filter:blur(16px);
  border-bottom:1px solid #ffffff12;
}

.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}

.brand-mark{
  width:43px;
  height:43px;
  border-radius:15px;
  background:linear-gradient(135deg,#0284c7,var(--green));
  display:grid;
  place-items:center;
  font-size:22px;
}

.brand small{
  display:block;
  color:var(--muted);
  font-size:11px;
}

/* NAVIGATION */

.nav{
  display:flex;
  gap:15px;
  align-items:center;
  font-size:12px;
  font-weight:800;
}

.nav a{
  transition:color .2s ease,background-color .2s ease;
}

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

/* Active menu uses green, not blue */

.nav a.active{
  color:var(--green2);
}

/* Booking CTA in navigation */

.nav a.btn-primary{
  background:var(--green);
  color:#ffffff;
  border:1px solid var(--green);
}

.nav a.btn-primary:hover{
  background:var(--green-hover);
  color:#ffffff;
  border-color:var(--green-hover);
}

.menu-toggle{
  display:none;
  background:#ffffff10;
  color:white;
  border:1px solid #ffffff20;
}

/* HERO */

.hero{
  padding:64px 0 45px;
  background:radial-gradient(
    ellipse at 80% 0%,
    #0369a133,
    transparent 48%
  );
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:center;
}

.eyebrow{
  color:var(--green2);
  font-weight:900;
  font-size:12px;
  letter-spacing:1.3px;
  text-transform:uppercase;
}

.hero h1{
  font-size:clamp(36px,5vw,58px);
  line-height:1.08;
  letter-spacing:-1.8px;
  margin:14px 0;
}

.hero p,
.lead{
  font-size:17px;
  color:#c3cede;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0;
}

/* PANELS AND CARDS */

.visual-panel,
.card{
  background:linear-gradient(145deg,#17243a,#101a2c);
  border:1px solid #ffffff12;
  border-radius:22px;
  padding:24px;
  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.visual-panel{
  border-radius:30px;
  box-shadow:0 14px 40px #0004;
}

.card:hover{
  background:linear-gradient(145deg,#1c2a40,#142035);
  border-color:var(--border-hover);
  box-shadow:0 10px 28px #0003;
}

.visual-icon{
  font-size:65px;
}

.price{
  font-size:25px;
  font-weight:900;
  color:var(--green2);
}

.price small,
.muted{
  color:var(--muted);
  font-size:12px;
}

/* SECTIONS */

.section{
  padding:52px 0;
}

.section.alt{
  background:#0e1728;
}

.section h2{
  font-size:clamp(26px,3vw,36px);
  line-height:1.2;
  margin:8px 0 12px;
}

.section-head{
  max-width:760px;
  margin-bottom:24px;
}

.grid{
  display:grid;
  gap:18px;
}

.grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.card h3{
  margin:8px 0;
  font-size:19px;
}

.card p,
.content p,
.content li{
  color:#bdc9d9;
}

.card-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  background:#38bdf820;
  display:grid;
  place-items:center;
  font-size:22px;
}

.feature-list{
  padding-left:20px;
  color:#d3dcea;
}

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

/* CALCULATOR */

.calc{
  display:grid;
  gap:14px;
}

.calc label,
.contact-form label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#bdc9d9;
  margin-bottom:7px;
}

.calc input,
.calc select,
.contact-form input,
.contact-form textarea{
  width:100%;
  background:#0b1323;
  color:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.calc input:hover,
.calc select:hover,
.contact-form input:hover,
.contact-form textarea:hover{
  border-color:var(--border-hover);
}

.calc input:focus,
.calc select:focus,
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px #10b98130;
}

.calc input[type=range]{
  padding:0;
  accent-color:var(--green);
}

.calc-total{
  background:#0b1323;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.calc-total strong{
  font-size:23px;
  color:var(--green2);
}

/* PAGE HEADER */

.breadcrumb{
  font-size:12px;
  color:var(--muted);
  padding-top:20px;
}

.page-hero{
  padding:32px 0 20px;
}

.page-hero h1{
  font-size:clamp(32px,4.5vw,48px);
  line-height:1.12;
}

.content{
  max-width:850px;
}

.content h2{
  margin-top:30px;
}

/* FAQ */

.faq-item{
  border-bottom:1px solid var(--line);
  padding:16px 0;
  transition:border-color .2s ease;
}

.faq-item:hover{
  border-color:var(--border-hover);
}

.faq-item summary{
  cursor:pointer;
  font-weight:800;
  color:var(--text);
  transition:color .2s ease;
}

.faq-item summary:hover,
.faq-item[open] summary{
  color:var(--green2);
}

.faq-item p{
  color:var(--muted);
}

/* TABLE */

.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
}

.price-table{
  width:100%;
  border-collapse:collapse;
  min-width:500px;
}

.price-table th,
.price-table td{
  text-align:left;
  padding:14px;
  border-bottom:1px solid var(--line);
}

/* BLOG */

.blog-card{
  padding:0;
  overflow:hidden;
}

.blog-art{
  height:140px;
  display:grid;
  place-items:center;
  font-size:50px;
  background:linear-gradient(135deg,#1d3550,#101a2c);
}

.blog-body{
  padding:20px;
}

.blog-meta{
  font-size:11px;
  color:var(--green2);
  font-weight:800;
  text-transform:uppercase;
}

.blog-card:hover .blog-art{
  background:linear-gradient(135deg,#23435a,#14283b);
}

/* FOOTER */

.footer{
  border-top:1px solid #ffffff12;
  padding:40px 0 90px;
  background:#080e19;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:25px;
}

.footer h3{
  font-size:14px;
}

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

.footer a:hover{
  color:var(--green2);
}

.footer-links{
  display:grid;
  gap:8px;
}

/* MOBILE CTA */

.bottom-cta{
  display:none;
  position:fixed;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  z-index:45;
  width:calc(100% - 24px);
  max-width:480px;
  box-shadow:0 10px 35px #0008;
}

/* OTHER COMPONENTS */

.notice{
  font-size:12px;
  color:var(--muted);
  border-left:3px solid #fbbf24;
  padding:10px 14px;
  background:#fbbf2410;
}

.contact-form{
  display:grid;
  gap:12px;
}

.contact-form textarea{
  min-height:90px;
}

.map-frame{
  width:100%;
  height:300px;
  border:0;
  border-radius:18px;
}

.small{
  font-size:12px;
}

.tag{
  display:inline-block;
  padding:5px 10px;
  border-radius:99px;
  background:#ffffff0d;
  font-size:11px;
}

/* ACCESSIBILITY */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--green2);
  outline-offset:3px;
}

/* RESPONSIVE: TABLET */

@media(max-width:950px){
  .nav{
    gap:8px;
  }

  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* RESPONSIVE: MOBILE */

@media(max-width:700px){
  .container{
    width:calc(100% - 28px);
  }

  .menu-toggle{
    display:inline-flex;
  }

  .nav{
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    background:#0f172a;
    padding:12px 20px 20px;
    flex-direction:column;
    align-items:stretch;
  }

  .nav.open{
    display:flex;
  }

  .nav a{
    padding:10px;
    border-bottom:1px solid #ffffff0d;
  }

  .nav a.btn-primary{
    text-align:center;
    border-radius:12px;
    margin-top:8px;
  }

  .nav a.btn-primary:hover{
    background:var(--green-hover);
    color:#ffffff;
  }

  .hero{
    padding:38px 0 28px;
  }

  .hero-grid,
  .grid-2,
  .grid-3,
  .split{
    grid-template-columns:1fr;
  }

  .hero h1{
    letter-spacing:-1px;
  }

  .hero p,
  .lead{
    font-size:15px;
  }

  .section{
    padding:40px 0;
  }

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

  .bottom-cta{
    display:flex;
  }
}

/* REDUCE MOTION */

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none!important;
  }
}