:root{
  --bg:#12100e;
  --bg-soft:#1b1815;
  --bg-card:#24201c;

  --blue:#14274f;
  --blue-light:#1d3f8c;

  --gold:#c8a646;
  --gold-soft:#d8b85c;

  --text:#f5f1e8;
  --muted:#b9afa0;
  --paper:#e4d8c3;

  --radius:22px;
  --max:1240px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  overflow-x:hidden;

  font-family:
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;

  background:
    radial-gradient(circle at top, rgba(29,63,140,.18), transparent 34%),
    linear-gradient(180deg, #12100e, #1b1815);

  color:var(--text);
}

body::before{
  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;

  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);

  background-size:40px 40px;

  opacity:.22;

  z-index:0;
}

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

img{
  max-width:100%;
  display:block;
}

.container{
  width:100%;
  max-width:var(--max);

  margin-inline:auto;

  padding-inline:44px;

  position:relative;
  z-index:2;
}

/* HEADER */

.header{
  position:sticky;
  top:0;

  z-index:50;

  backdrop-filter:blur(14px);

  background:rgba(18,16,14,.74);

  border-bottom:1px solid rgba(200,166,70,.22);
}

.nav{
  min-height:84px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}

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

.logo{
  width:58px;
  height:58px;

  border-radius:50%;

  border:2px solid var(--gold);

  background:#fff;

  padding:3px;

  box-shadow:0 0 0 4px rgba(200,166,70,.08);
}

.brand-title{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.35rem;

  line-height:1;

  letter-spacing:.03em;
}

.brand-subtitle{
  margin-top:6px;

  color:var(--muted);

  font-size:.82rem;
}

.menu{
  display:flex;
  align-items:center;
  gap:34px;

  color:var(--paper);

  font-size:1rem;
}

.menu a{
  opacity:.9;
}

.menu a:hover{
  color:var(--gold-soft);
}

/* BUTTONS */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:48px;

  padding:0 24px;

  border-radius:999px;

  border:1px solid rgba(200,166,70,.45);

  font-weight:600;

  transition:.25s;
}

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

.btn:not(.secondary){
  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--blue-light)
    );

  box-shadow:
    0 12px 34px rgba(0,0,0,.28);
}

.btn.secondary{
  background:rgba(18,16,14,.42);
  color:var(--gold-soft);
}

/* HERO */

.hero{
  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;

  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(18,16,14,.72) 0%,
      rgba(18,16,14,.34) 42%,
      rgba(18,16,14,.72) 100%
    ),

    radial-gradient(
      circle at 22% 55%,
      rgba(255,120,35,.12),
      transparent 32%
    ),

    radial-gradient(
      circle at 80% 25%,
      rgba(29,63,140,.12),
      transparent 38%
    ),

    url("/images/fds1.webp")
    center center / cover
    no-repeat;

  z-index:1;
}

.hero-bg::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(18,16,14,.08),
      rgba(18,16,14,.16) 65%,
      #12100e
    );
}

.hero-grid{
  width:100%;

  display:grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(380px, .9fr);

  gap:70px;

  align-items:center;
}

.hero-content{
  max-width:720px;
}

.kicker{
  color:var(--gold-soft);

  text-transform:uppercase;

  letter-spacing:.18em;

  font-size:.82rem;

  font-weight:700;
}

h1{
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(3.4rem, 5vw, 5.8rem);

  line-height:.92;

  margin:
    18px 0 26px;

  letter-spacing:-.04em;
}

.lead{
  max-width:620px;

  color:var(--paper);

  font-size:1.12rem;

  line-height:1.8;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:16px;

  margin-top:36px;
}

/* HERO CARD */

.hero-card{
  position:relative;

  min-height:390px;

  display:flex;
  align-items:flex-end;

  padding:40px;

  border-radius:30px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(20,39,79,.72),
      rgba(18,16,14,.92)
    );

  border:1px solid rgba(200,166,70,.26);

  box-shadow:
    0 40px 80px rgba(0,0,0,.45);
}

.hero-card::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(216,184,92,.14),
      transparent 36%
    );
}

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

.hero-card h2{
  margin:10px 0 16px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:3rem;

  line-height:.95;
}

.hero-card p{
  color:var(--paper);

  font-size:1.08rem;

  line-height:1.7;
}

/* PARALLAX SECTIONS */

.parallax-section{
  position:relative;

  min-height:88vh;

  display:flex;
  align-items:center;

  overflow:hidden;

  padding:90px 0;
}

.parallax-section::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      90deg,
      rgba(18,16,14,.78),
      rgba(18,16,14,.40),
      rgba(18,16,14,.82)
    ),
    var(--section-img);

  background-size:cover;
  background-position:center;

  background-attachment:fixed;

  z-index:0;
}

.parallax-section::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0,0,0,.45) 100%
    ),

    linear-gradient(
      180deg,
      rgba(18,16,14,.18),
      #12100e
    );

  z-index:1;
}

.parallax-content{
  position:relative;
  z-index:2;

  max-width:720px;
}

.parallax-content.right{
  margin-left:auto;
}

.parallax-card{
  background:rgba(18,16,14,.62);

  border:1px solid rgba(200,166,70,.24);

  border-radius:28px;

  padding:40px;

  backdrop-filter:blur(10px);

  box-shadow:
    0 30px 60px rgba(0,0,0,.35);
}

.parallax-card h2{
  margin:
    14px 0 20px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.6rem, 5vw, 5rem);

  line-height:.95;
}

.parallax-card p{
  color:var(--paper);

  font-size:1.1rem;

  line-height:1.85;
}

/* FOOTER */

.footer{
  position:relative;

  padding:40px 0;

  color:var(--muted);

  border-top:
    1px solid rgba(200,166,70,.18);
}

/* RESPONSIVE */

@media(max-width:1100px){

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

  .hero-card{
    min-height:320px;
  }

  .parallax-content.right{
    margin-left:0;
  }
}

@media(max-width:850px){

  .container{
    padding-inline:24px;
  }

  .menu{
    display:none;
  }

  .hero{
    min-height:auto;

    padding:
      120px 0 80px;
  }

  .hero-card{
    min-height:260px;
  }

  .parallax-section{
    min-height:auto;

    padding:70px 0;
  }

  .parallax-section::before{
    background-attachment:scroll;
  }

  .parallax-card{
    padding:28px;
  }
}

@media(max-width:520px){

  .container{
    padding-inline:18px;
  }

  .logo{
    width:48px;
    height:48px;
  }

  .brand-title{
    font-size:1.1rem;
  }

  h1{
    font-size:
      clamp(2.8rem, 13vw, 4rem);
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }
}