
:root{
  --navy:#123040;
  --navy-deep:#0d2230;
  --sea:#4ea8c7;
  --sea-soft:#e8f8fc;
  --foam:#f7fdff;
  --sand:#f8efe3;
  --pearl:#fffaf4;
  --gold:#d7a35e;
  --gold-deep:#b77b37;
  --coral:#f1b38d;
  --ink:#183040;
  --muted:#607787;
  --line:rgba(18,48,64,.10);
  --shadow:0 18px 48px rgba(20,41,56,.12);
  --radius:28px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(78,168,199,.14), transparent 28%),
    radial-gradient(circle at top right, rgba(215,163,94,.14), transparent 24%),
    linear-gradient(180deg,#fffdf9 0%, var(--pearl) 42%, var(--sand) 100%);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max), calc(100% - 32px));margin:0 auto}

.topbar{
  background:linear-gradient(90deg,var(--navy-deep),var(--navy));
  color:#fff;
  font-size:.96rem;
}
.topbar .container{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;flex-wrap:wrap
}
.topbar a{color:#fff;font-weight:700}

.site-nav{
  position:sticky;top:0;z-index:40;
  background:rgba(255,250,244,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-nav .container{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 0
}
.logo{
  display:flex;align-items:center;gap:12px;
  font-weight:800;font-size:1.1rem;color:var(--navy)
}
.logo-badge{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--gold),#f0c58b)
}
.nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav-links a{font-weight:700;color:var(--navy)}
.nav-toggle{display:none;border:none;background:none;font-size:1.5rem;color:var(--navy)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:999px;font-weight:800;
  border:1px solid transparent;transition:.22s ease
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#fff;box-shadow:0 10px 24px rgba(183,123,55,.28)
}
.btn-navy{
  background:linear-gradient(135deg,var(--navy),#20475b);
  color:#fff;box-shadow:0 10px 22px rgba(18,48,64,.22)
}
.btn-ghost{
  background:rgba(255,255,255,.12);
  color:#fff;border-color:rgba(255,255,255,.28)
}
.btn-pearl{
  background:#fff;color:var(--navy);border-color:rgba(18,48,64,.10)
}

.hero{
  position:relative;min-height:790px;display:flex;align-items:center;
  background:
    linear-gradient(90deg, rgba(14,31,42,.62) 0%, rgba(14,31,42,.48) 32%, rgba(14,31,42,.18) 58%, rgba(14,31,42,.06) 100%),
    url('images/home-hero-luxury.jpg') center/cover no-repeat;
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(78,168,199,.10), rgba(255,255,255,0) 28%, rgba(255,240,220,.10) 100%);
}
.hero:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  background:linear-gradient(180deg, rgba(248,239,227,0), var(--sand) 100%)
}
.hero-grid{
  position:relative;z-index:1;
  width:min(var(--max), calc(100% - 32px));margin:0 auto;
  display:grid;grid-template-columns:1.06fr .94fr;gap:28px;align-items:center;
  padding:76px 0 118px
}
.hero-copy{color:#fff}
.kicker{
  display:inline-block;padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  font-weight:700;letter-spacing:.02em
}
.hero h1{
  margin:18px 0 16px;
  font-size:clamp(2.9rem,5.2vw,5.6rem);
  line-height:.96;max-width:10.5ch
}
.hero p{
  margin:0;max-width:58ch;line-height:1.72;
  color:rgba(255,255,255,.92);font-size:1.08rem
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-capsules{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;max-width:760px
}
.hero-cap{
  padding:16px 18px;border-radius:20px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px)
}
.hero-cap strong{display:block;color:#fff}
.hero-cap span{display:block;margin-top:5px;color:rgba(255,255,255,.80);font-size:.95rem}

.form-card{
  background:rgba(255,250,244,.96);
  border:1px solid rgba(255,255,255,.92);
  border-radius:34px;box-shadow:var(--shadow);padding:30px
}
.form-ribbon{
  background:linear-gradient(90deg,var(--gold),#e3b57d);
  color:#fff;border-radius:20px;padding:15px 18px;font-weight:800;
  text-align:center;margin-bottom:18px
}
.form-card h2{margin:0 0 8px;font-size:2.15rem;color:var(--navy)}
.form-card p{margin:0 0 18px;color:var(--muted);line-height:1.7}
form{display:grid;gap:12px}
.form-grid-2,.form-grid-3{display:grid;gap:12px}
.form-grid-2{grid-template-columns:1fr 1fr}
.form-grid-3{grid-template-columns:1fr 1fr 1fr}
input,textarea{
  width:100%;padding:15px 16px;border-radius:16px;
  border:1px solid rgba(18,48,64,.12);background:#fff;
  font:inherit;color:var(--ink)
}
textarea{min-height:110px;resize:vertical}
.form-note{
  margin-top:14px;padding:14px 16px;border-radius:18px;
  background:linear-gradient(135deg, rgba(78,168,199,.10), rgba(215,163,94,.10));
  color:#365667;border:1px solid rgba(78,168,199,.14)
}

.section{padding:36px 0 78px}
.section-title{text-align:center;max-width:780px;margin:0 auto 30px}
.section-title h2{
  margin:0 0 10px;font-size:clamp(2rem,3vw,3.15rem);line-height:1.02;
  color:var(--navy)
}
.section-title p{margin:0;color:var(--muted);line-height:1.75}

.banner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px;
  padding:30px;border-radius:30px;box-shadow:var(--shadow);
  background:linear-gradient(135deg,#ffffff,#effbff 55%, #fff8ef 100%);
  border:1px solid var(--line)
}
.banner h3{margin:0 0 10px;font-size:2rem;color:var(--navy)}
.banner p{margin:0;color:var(--muted);line-height:1.75}
.banner-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap}

.cards-4,.cards-3,.grid-2,.reviews,.cta-split{display:grid;gap:20px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.grid-2,.reviews,.cta-split{grid-template-columns:1fr 1fr}
.card,.review-card,.cta-box,.feature-band{
  background:#fff;border:1px solid var(--line);border-radius:28px;
  box-shadow:var(--shadow)
}
.card,.review-card{padding:24px}
.card h3,.review-card h3{margin:0 0 10px;color:var(--navy)}
.card p,.review-card p{margin:0;color:var(--muted);line-height:1.75}
.image-card{
  overflow:hidden;border-radius:22px;margin-bottom:16px;border:1px solid var(--line)
}
.image-card img{width:100%;height:230px;object-fit:cover}
.stars{color:var(--gold-deep);font-size:1.05rem;letter-spacing:.18em;margin-bottom:10px}
.quote-source{margin-top:12px;font-weight:800;color:var(--navy)}

.feature-band{
  padding:36px;
  background:
    linear-gradient(135deg, rgba(18,48,64,.96), rgba(32,87,108,.94)),
    linear-gradient(135deg, rgba(215,163,94,.10), rgba(255,255,255,0));
  color:#fff
}
.feature-band h2{margin:0 0 12px;font-size:2.25rem}
.feature-band p{margin:0;color:rgba(255,255,255,.86);line-height:1.75}
.feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px
}
.feature-pill{
  padding:14px 16px;border-radius:18px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  font-weight:700
}

.cta-box{padding:30px}
.cta-box.dark{
  background:linear-gradient(135deg,var(--navy),#21485d);
  color:#fff
}
.cta-box.light{
  background:linear-gradient(135deg,#ffffff,#fff8ef)
}
.cta-box h3{margin:0 0 10px;font-size:2rem}
.cta-box p{margin:0;line-height:1.75}
.cta-box.dark p{color:rgba(255,255,255,.86)}
.cta-box.light p{color:var(--muted)}

.site-footer{
  background:linear-gradient(180deg,var(--navy),var(--navy-deep));
  color:#eef7fa;margin-top:36px;padding:48px 0 24px
}
.footer-grid{
  width:min(var(--max), calc(100% - 32px));margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:24px
}
.site-footer h3,.site-footer h4{margin:0 0 12px}
.site-footer p,.site-footer li{line-height:1.75;color:rgba(238,247,250,.84)}
.site-footer ul{list-style:none;padding:0;margin:0}
.footer-bottom{
  width:min(var(--max), calc(100% - 32px));margin:24px auto 0;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:rgba(238,247,250,.72)
}

.page-hero{
  padding:52px 0 14px;
  background:linear-gradient(180deg,#f2fbff 0%, #fff7ef 100%)
}
.page-hero-grid{
  display:grid;grid-template-columns:1fr .95fr;gap:24px;align-items:center
}
.page-hero-copy h1{
  margin:14px 0 12px;font-size:clamp(2.4rem,4vw,4.4rem);line-height:.98
}
.page-hero-copy p{margin:0;color:var(--muted);line-height:1.75}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.badge{
  padding:10px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--navy);font-weight:700
}
.page-image{
  overflow:hidden;border-radius:30px;border:1px solid var(--line);box-shadow:var(--shadow)
}
.page-image img{width:100%;height:370px;object-fit:cover}

@media (max-width:980px){
  .hero-grid,.cards-4,.cards-3,.grid-2,.reviews,.cta-split,.page-hero-grid,.banner,.footer-grid,.feature-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero h1{max-width:none}
  .hero-capsules,.form-grid-2,.form-grid-3{grid-template-columns:1fr}
  .banner-actions{justify-content:flex-start}
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:16px;right:16px;top:76px;
    background:#fff;border:1px solid var(--line);border-radius:24px;
    box-shadow:var(--shadow);padding:18px;flex-direction:column;align-items:flex-start
  }
  body.nav-open .nav-links{display:flex}
}
