:root{
  --black:#030405;
  --charcoal:#0b1016;
  --white:#f7f4ee;
  --muted:#aeb8c4;
  --blue:#8dd3ff;
  --gold:#d8b76a;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at 75% 15%,rgba(94,178,229,.18),transparent 28%),
             radial-gradient(circle at 20% 30%,rgba(216,183,106,.11),transparent 28%),
             var(--black);
  color:var(--white);
  line-height:1.65;
}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 7%;
  background:rgba(3,4,5,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-brand{text-decoration:none;font-weight:800;letter-spacing:3px;color:var(--white)}
.nav-brand span{color:var(--blue);font-weight:600}
.nav-links{display:flex;gap:24px;color:var(--muted);font-size:.95rem}
.nav-links a{text-decoration:none;color:inherit;transition:.25s}
.nav-links a:hover{color:var(--blue)}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:130px 7% 80px;position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;width:850px;height:850px;border-radius:50%;
  background:radial-gradient(circle,rgba(141,211,255,.16),transparent 65%);
  top:-240px;right:-220px;
}
.hero-inner{position:relative;z-index:2;max-width:950px;text-align:center}
.hero-logo{width:300px;max-width:82vw;border-radius:28px;box-shadow:0 0 80px rgba(141,211,255,.16);margin-bottom:24px}
.eyebrow,.section-label{color:var(--blue);text-transform:uppercase;letter-spacing:4px;font-size:.78rem;font-weight:700;margin-bottom:18px}
h1{font-size:clamp(2.5rem,6vw,5.8rem);line-height:1.02;letter-spacing:-3px;margin-bottom:24px}
h2{font-size:clamp(2rem,4vw,4rem);line-height:1.1;letter-spacing:-2px;margin-bottom:24px}
h3{font-size:1.3rem;margin-bottom:12px}
.hero-copy{max-width:760px;margin:0 auto;color:var(--muted);font-size:1.15rem}
.hero-actions{margin-top:36px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.btn{padding:14px 24px;border-radius:999px;text-decoration:none;font-weight:700;transition:.25s}
.btn.primary{background:linear-gradient(135deg,var(--blue),#f7f4ee);color:#050608}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(141,211,255,.22)}
.btn.ghost{border:1px solid var(--line);color:var(--white)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
.section{padding:100px 7%;max-width:1200px;margin:0 auto}
.intro{text-align:center;max-width:950px}
.intro p,.split p,.contact p{color:var(--muted);font-size:1.08rem}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.feature-card,.card,.step{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid var(--line);
  border-radius:26px;
  padding:30px;
  box-shadow:0 20px 70px rgba(0,0,0,.22);
}
.feature-card ul{list-style:none;display:grid;gap:13px}
.feature-card li:before{content:"✦";color:var(--blue);margin-right:10px}
.cards,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.card p,.step p{color:var(--muted)}
.step span{color:var(--gold);font-weight:900;letter-spacing:2px}
.quote{text-align:center;max-width:900px}
.quote p{font-size:clamp(1.8rem,4vw,3.5rem);line-height:1.18;color:var(--white)}
.contact{text-align:center}
.email-link{display:inline-block;margin:22px 0 30px;color:var(--blue);font-size:1.25rem;font-weight:700;text-decoration:none}
.contact-form{max-width:680px;margin:0 auto;display:grid;gap:14px}
.contact-form input,.contact-form textarea{
  width:100%;padding:15px 17px;background:rgba(255,255,255,.06);color:white;
  border:1px solid var(--line);border-radius:14px;outline:none;
}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue)}
.contact-form button{
  border:0;padding:15px;border-radius:999px;font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--white));color:#040506;cursor:pointer;
}
footer{text-align:center;padding:34px 7%;color:#8995a3;border-top:1px solid var(--line)}
@media(max-width:850px){
  .nav{flex-direction:column;gap:12px}
  .nav-links{gap:14px;font-size:.82rem}
  .hero{padding-top:160px}
  .split,.cards,.steps{grid-template-columns:1fr}
  h1{letter-spacing:-1.5px}
}



/* Refined blended scenery: subtle, background-only */
.ambient-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}

.soft-moon{
  position:absolute;
  top:19%;
  left:11%;
  width:95px;
  height:95px;
  border-radius:50%;
  background:radial-gradient(circle at 42% 38%,
    rgba(255,255,255,.42),
    rgba(141,211,255,.16) 45%,
    rgba(141,211,255,.04) 68%,
    transparent 74%);
  filter:blur(8px);
  opacity:.33;
}

.blue-haze{
  position:absolute;
  top:17%;
  right:-12%;
  width:58vw;
  height:58vw;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(141,211,255,.13),
    rgba(141,211,255,.04) 38%,
    transparent 70%);
  filter:blur(42px);
  opacity:.7;
}

.mountain-silhouette{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-1px;
  width:110vw;
  height:30vh;
  opacity:.18;
  background:linear-gradient(180deg,
    rgba(255,255,255,.08),
    rgba(141,211,255,.035) 42%,
    rgba(0,0,0,.02));
  clip-path:polygon(
    0% 100%, 7% 72%, 13% 89%, 21% 58%, 30% 83%,
    40% 44%, 49% 78%, 58% 38%, 69% 82%, 78% 55%,
    87% 85%, 95% 63%, 100% 100%
  );
  filter:blur(1.4px);
}

.mountain-front{
  height:23vh;
  bottom:-2vh;
  opacity:.13;
  background:linear-gradient(180deg,
    rgba(255,255,255,.06),
    rgba(216,183,106,.035) 46%,
    transparent);
  clip-path:polygon(
    0% 100%, 9% 80%, 16% 92%, 26% 65%, 36% 88%,
    45% 56%, 54% 90%, 63% 60%, 73% 89%, 84% 69%,
    92% 91%, 100% 100%
  );
}

.mountain-break{
  height:180px;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  opacity:.65;
  background:
    radial-gradient(circle at 65% 50%, rgba(141,211,255,.08), transparent 34%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.025), transparent);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.mountain-break:after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-1px;
  height:130px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.045),
    rgba(141,211,255,.035),
    transparent);
  clip-path:polygon(
    0% 100%, 10% 72%, 18% 91%, 28% 57%, 38% 87%,
    48% 43%, 59% 84%, 71% 53%, 82% 88%, 92% 67%, 100% 100%
  );
  filter:blur(1.2px);
  opacity:.45;
}

.hero-inner{
  position:relative;
  z-index:2;
}

@media(max-width:850px){
  .soft-moon{
    width:70px;
    height:70px;
    top:22%;
    left:7%;
    opacity:.24;
  }

  .mountain-silhouette{
    height:22vh;
    width:130vw;
  }

  .mountain-break{
    height:130px;
  }
}



/* Smooth cinematic transitions */
html{
  scroll-behavior:smooth;
}

.fade-up{
  opacity:0;
  transform:translateY(32px) scale(.985);
  transition:
    opacity 1s cubic-bezier(.22,1,.36,1),
    transform 1s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

.fade-up.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.card{
  transition:
    transform .45s ease,
    border-color .45s ease,
    box-shadow .45s ease,
    background .45s ease;
}

.card:hover{
  transform:translateY(-6px);
  border-color:rgba(141,211,255,.28);
  box-shadow:0 10px 35px rgba(141,211,255,.08);
}

.hero-card{
  animation:floatCard 8s ease-in-out infinite;
}

@keyframes floatCard{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
  100%{ transform:translateY(0px); }
}

.blue-haze{
  animation:hazeDrift 18s ease-in-out infinite alternate;
}

@keyframes hazeDrift{
  from{
    transform:translateX(0px) translateY(0px);
  }
  to{
    transform:translateX(-30px) translateY(10px);
  }
}

.soft-moon{
  animation:moonGlow 9s ease-in-out infinite;
}

@keyframes moonGlow{
  0%{
    opacity:.24;
    transform:scale(1);
  }
  50%{
    opacity:.34;
    transform:scale(1.03);
  }
  100%{
    opacity:.24;
    transform:scale(1);
  }
}

.section{
  position:relative;
  transition:background .6s ease;
}

.quote-text{
  text-shadow:0 0 24px rgba(255,255,255,.05);
}



/* Tone down previous scenery layers if present */
.scenery-layer,
.ambient-bg{
  opacity:.28 !important;
}

.moon,
.soft-moon:not(.subtle-moon){
  opacity:.10 !important;
  filter:blur(14px) !important;
}

.mountain,
.mountain-silhouette{
  opacity:.06 !important;
}

.scenery-divider,
.mountain-break{
  opacity:.34 !important;
}



/* Serenza subtle cinematic atmosphere */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 72% 24%, rgba(141,211,255,.09), transparent 28%),
    radial-gradient(circle at 18% 24%, rgba(216,183,106,.055), transparent 26%),
    linear-gradient(180deg, #030405 0%, #081018 58%, #030405 100%);
}

.subtle-world{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
  opacity:.85;
}

.subtle-moon{
  position:absolute;
  top:19%;
  left:10%;
  width:78px;
  height:78px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 38%,
    rgba(255,255,255,.34),
    rgba(141,211,255,.14) 42%,
    rgba(141,211,255,.035) 70%,
    transparent 75%);
  filter:blur(5px);
  opacity:.32;
  animation:subtleMoonPulse 12s ease-in-out infinite;
}

@keyframes subtleMoonPulse{
  0%,100%{opacity:.24; transform:scale(1);}
  50%{opacity:.34; transform:scale(1.025);}
}

.distant-mountains{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:120vw;
  height:25vh;
  opacity:.115;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(141,211,255,.035) 46%, transparent);
  clip-path:polygon(
    0% 100%, 7% 74%, 13% 92%, 23% 61%, 33% 88%,
    42% 46%, 52% 82%, 62% 40%, 73% 86%, 83% 58%,
    92% 90%, 100% 70%, 100% 100%
  );
  filter:blur(1.2px);
}

.low-mist{
  position:absolute;
  left:50%;
  bottom:7%;
  transform:translateX(-50%);
  width:78vw;
  height:74px;
  border-radius:50%;
  background:linear-gradient(90deg, transparent, rgba(141,211,255,.07), rgba(255,255,255,.065), rgba(216,183,106,.035), transparent);
  filter:blur(28px);
  opacity:.52;
  animation:mistDrift 18s ease-in-out infinite alternate;
}

@keyframes mistDrift{
  from{transform:translateX(-52%);}
  to{transform:translateX(-48%);}
}

.tree-line{
  position:absolute;
  bottom:0;
  width:240px;
  height:240px;
  opacity:.11;
  background:
    linear-gradient(to top, rgba(0,0,0,.75), transparent 88%),
    repeating-linear-gradient(90deg,
      transparent 0 18px,
      rgba(255,255,255,.10) 18px 19px,
      transparent 19px 32px);
  clip-path:polygon(
    0% 100%, 8% 42%, 15% 100%, 23% 35%, 31% 100%,
    41% 48%, 52% 100%, 63% 31%, 74% 100%,
    84% 50%, 92% 100%, 100% 100%
  );
  filter:blur(.8px);
}

.tree-left{left:-30px;}
.tree-right{right:-30px; transform:scaleX(-1);}

.hero-inner{
  position:relative;
  z-index:2;
}

.hero-logo{
  box-shadow:0 0 55px rgba(141,211,255,.09);
}

.subtle-landscape-break{
  position:relative;
  max-width:1200px;
  height:155px;
  margin:0 auto;
  overflow:hidden;
  opacity:.72;
  border-top:1px solid rgba(255,255,255,.045);
  border-bottom:1px solid rgba(255,255,255,.045);
  background:
    radial-gradient(circle at 70% 40%, rgba(141,211,255,.055), transparent 32%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.018), transparent);
}

.break-mountains{
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-2px;
  height:110px;
  opacity:.34;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(141,211,255,.025), transparent);
  clip-path:polygon(
    0% 100%, 8% 75%, 16% 91%, 27% 59%, 38% 88%,
    48% 49%, 60% 84%, 72% 56%, 84% 89%, 94% 68%, 100% 100%
  );
  filter:blur(1.2px);
}

.break-trees{
  position:absolute;
  left:5%;
  right:5%;
  bottom:0;
  height:95px;
  opacity:.10;
  background:repeating-linear-gradient(90deg,
    transparent 0 26px,
    rgba(255,255,255,.12) 26px 27px,
    transparent 27px 44px);
  clip-path:polygon(0% 100%, 3% 65%, 6% 100%, 11% 48%, 15% 100%, 21% 68%, 24% 100%, 31% 42%, 36% 100%, 45% 62%, 50% 100%, 60% 49%, 65% 100%, 74% 68%, 78% 100%, 88% 47%, 93% 100%, 100% 70%, 100% 100%);
}

.soft-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s ease, transform .85s ease;
}

.soft-reveal.visible{
  opacity:1;
  transform:translateY(0);
}

.card:hover,
.step:hover,
.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(141,211,255,.20);
  box-shadow:0 18px 50px rgba(0,0,0,.25), 0 0 24px rgba(141,211,255,.055);
}

@media(max-width:850px){
  .subtle-moon{
    width:58px;
    height:58px;
    top:21%;
    left:8%;
  }

  .tree-line{
    width:150px;
    height:170px;
    opacity:.075;
  }

  .distant-mountains{
    height:18vh;
    width:140vw;
  }

  .subtle-landscape-break{
    height:115px;
  }
}



/* Template-inspired Serenza luxury landing style */
body{
  background:
    radial-gradient(circle at 73% 18%, rgba(141,211,255,.16), transparent 28%),
    linear-gradient(180deg, #03070b 0%, #07111a 45%, #020405 100%) !important;
}

.nav{
  padding:24px 7% !important;
  background:linear-gradient(180deg, rgba(2,4,7,.86), rgba(2,4,7,.42)) !important;
  border-bottom:1px solid rgba(216,183,106,.12) !important;
}

.logo-brand{
  display:flex;
  align-items:center;
  gap:15px;
  letter-spacing:2px;
}

.logo-brand img{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 30px rgba(216,183,106,.14);
}

.logo-brand span{
  display:flex;
  flex-direction:column;
  line-height:1;
  font-size:1.4rem;
}

.logo-brand small{
  color:var(--blue);
  letter-spacing:4px;
  font-size:.62rem;
  margin-top:7px;
}

.nav-links{
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:.76rem !important;
}

.hero{
  justify-content:flex-start !important;
  align-items:center !important;
  min-height:100vh;
  padding:150px 7% 85px !important;
  background:
    linear-gradient(90deg, rgba(2,4,7,.98) 0%, rgba(2,4,7,.76) 43%, rgba(2,4,7,.25) 72%, rgba(2,4,7,.94) 100%),
    radial-gradient(circle at 78% 38%, rgba(141,211,255,.20), transparent 26%),
    linear-gradient(180deg, #020406 0%, #07131d 58%, #020406 100%) !important;
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(2,4,7,.28) 62%, #020406 100%),
    radial-gradient(circle at 82% 26%, rgba(255,255,255,.10), transparent 8%);
  z-index:1;
}

.hero-inner{
  max-width:720px !important;
  text-align:left !important;
  margin:0 !important;
  position:relative;
  z-index:3;
}

.hero-logo{
  display:none !important;
}

.eyebrow{
  color:var(--blue) !important;
  letter-spacing:6px !important;
  margin-bottom:28px !important;
}

.hero h1{
  max-width:680px;
  font-size:clamp(3.2rem, 6vw, 6.4rem) !important;
  line-height:.98 !important;
  letter-spacing:-4px !important;
}

.hero h1::after{
  content:"";
  display:block;
  width:160px;
  height:2px;
  margin-top:28px;
  background:linear-gradient(90deg, var(--gold), transparent);
}

.hero-copy{
  margin:26px 0 0 !important;
  max-width:590px !important;
  color:#b8c6d5 !important;
  font-size:1.04rem !important;
}

.hero-actions{
  justify-content:flex-start !important;
  margin-top:38px !important;
}

.btn{
  border-radius:6px !important;
  text-transform:uppercase;
  letter-spacing:1.6px;
  font-size:.76rem;
  padding:15px 28px !important;
}

.btn.primary{
  background:transparent !important;
  border:1px solid rgba(216,183,106,.8);
  color:#f6ead0 !important;
  box-shadow:0 0 22px rgba(216,183,106,.08);
}

.btn.primary:hover{
  background:rgba(216,183,106,.12) !important;
  box-shadow:0 0 35px rgba(216,183,106,.18);
}

.btn.ghost{
  border:0 !important;
  color:#d9e9f5 !important;
}

.btn.ghost span{
  color:var(--gold);
  margin-left:12px;
}

.subtle-world,
.ambient-bg,
.scenery-layer{
  opacity:1 !important;
  z-index:2 !important;
}

.distant-mountains{
  opacity:.24 !important;
  height:52vh !important;
  width:120vw !important;
  left:60% !important;
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(141,211,255,.075) 42%, rgba(0,0,0,.02)) !important;
  filter:blur(.8px) !important;
}

.tree-line{
  opacity:.18 !important;
  height:390px !important;
  width:390px !important;
  bottom:-20px !important;
}

.tree-left{left:-70px !important;}
.tree-right{right:20px !important;}

.subtle-moon{
  left:auto !important;
  right:16% !important;
  top:22% !important;
  width:105px !important;
  height:105px !important;
  opacity:.42 !important;
}

.low-mist{
  width:105vw !important;
  bottom:14% !important;
  opacity:.62 !important;
}

.section{
  max-width:1180px !important;
}

.process{
  margin-top:-20px;
}

.process h2{
  text-align:center;
  font-size:clamp(2rem, 4vw, 3.25rem) !important;
}

.process .section-label{
  text-align:center;
}

.steps .step,
.card,
.feature-card,
.mini-card{
  background:rgba(8,18,28,.62) !important;
  border:1px solid rgba(141,211,255,.14) !important;
  backdrop-filter:blur(16px);
}

.step span,
.mini-card span{
  color:var(--gold) !important;
}

.subtle-landscape-break,
.mountain-break,
.scenery-divider{
  height:330px !important;
  max-width:none !important;
  width:100% !important;
  opacity:.95 !important;
  background:
    linear-gradient(90deg, rgba(2,4,7,.98), rgba(2,4,7,.35), rgba(2,4,7,.96)),
    radial-gradient(circle at 72% 45%, rgba(141,211,255,.16), transparent 26%),
    linear-gradient(180deg, #020406, #08141f, #020406) !important;
  border-top:1px solid rgba(216,183,106,.12) !important;
  border-bottom:1px solid rgba(216,183,106,.09) !important;
}

.break-mountains,
.divider-mountains{
  height:250px !important;
  opacity:.42 !important;
}

.break-trees{
  opacity:.18 !important;
}

.quote{
  text-align:left !important;
  max-width:880px !important;
  margin-left:7% !important;
}

.quote p{
  max-width:620px;
  font-size:clamp(2rem, 4vw, 3.2rem) !important;
  color:#dfe8f1 !important;
}

.focus-section{
  display:grid;
  grid-template-columns:.95fr 1.4fr;
  gap:54px;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.07);
}

.focus-copy p{
  color:var(--muted);
  max-width:520px;
  margin-bottom:28px;
}

.focus-icons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.mini-card{
  min-height:210px;
  padding:24px;
  border-radius:18px;
}

.mini-card span{
  display:block;
  font-size:2rem;
  margin-bottom:20px;
}

.mini-card h3{
  font-size:1rem;
}

.mini-card p{
  color:var(--muted);
  font-size:.88rem;
}

.gold-outline{
  display:inline-block;
  border:1px solid rgba(216,183,106,.7) !important;
  color:#f6ead0 !important;
}

.contact{
  background:
    radial-gradient(circle at 18% 55%, rgba(141,211,255,.10), transparent 30%),
    linear-gradient(180deg, transparent, rgba(8,18,28,.45));
}

@media(max-width:900px){
  .nav{
    position:relative !important;
  }

  .hero{
    padding-top:80px !important;
  }

  .hero-inner{
    text-align:center !important;
    max-width:100% !important;
  }

  .hero-copy{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-actions{
    justify-content:center !important;
  }

  .focus-section,
  .focus-icons{
    grid-template-columns:1fr;
  }

  .quote{
    margin-left:auto !important;
    text-align:center !important;
  }
}