@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  --bg:#0b0b0a;
  --panel:#10100f;
  --gold:#bd8137;
  --gold-soft:#d59a4a;
  --cream:#f4eee5;
  --muted:#b9aa9a;
  --line:rgba(189,129,55,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#090909;
  color:var(--cream);
  font-family:"Montserrat",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

.page-shell{
  width:min(1024px,100%);
  min-height:100vh;
  margin:0 auto;
  background:
    radial-gradient(circle at 50% 20%, rgba(60,47,31,.14), transparent 28%),
    linear-gradient(180deg,#0a0a09 0%,#0d0d0c 100%);
  box-shadow:0 0 80px rgba(0,0,0,.65);
}

.hero{
  position:relative;
  min-height:560px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 34px 36px;
}
.hero-image{
  position:absolute;
  inset:0;
  background:url("mondial-hero.jpg") center top / cover no-repeat;
  transform:scale(1.02);
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(7,7,6,.30),rgba(7,7,6,.06) 44%,rgba(7,7,6,.48)),
    linear-gradient(180deg,rgba(0,0,0,.04) 15%,rgba(6,6,5,.24) 48%,#0b0b0a 86%,#0b0b0a 100%);
}
.brand{
  position:relative;
  z-index:2;
  width:min(760px,100%);
  text-align:center;
  transform:translateY(4px);
  text-shadow:0 4px 28px rgba(0,0,0,.7);
}
.brand-small{
  font-family:"Cormorant Garamond",Georgia,serif;
  color:#f0d5ac;
  font-size:clamp(31px,4vw,45px);
  letter-spacing:.20em;
  margin-left:.20em;
}
h1{
  margin:-3px 0 8px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(78px,12vw,126px);
  line-height:.92;
  font-weight:500;
  letter-spacing:.015em;
  color:#fbf5eb;
}
.since{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  color:var(--gold-soft);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:31px;
  letter-spacing:.16em;
}
.since span{
  width:120px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft));
}
.since span:last-child{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.since strong{font-weight:500;white-space:nowrap}

.info-card{
  width:min(700px,calc(100% - 54px));
  margin:0 auto;
}
.row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:26px;
  padding:32px 0 34px;
}
.icon{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:3px;
}
.icon svg{
  width:63px;
  height:63px;
  fill:none;
  stroke:var(--gold-soft);
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.content h2{
  margin:0 0 13px;
  color:var(--gold-soft);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:.19em;
}
.content p{
  margin:0;
  font-size:20px;
  line-height:1.62;
  font-weight:400;
}
.content p.primary{font-weight:500}
.content p.muted{color:var(--muted)}
.divider{height:1px;background:var(--line)}

.button{
  width:max-content;
  max-width:100%;
  margin-top:18px;
  min-height:52px;
  padding:0 20px;
  border:1px solid var(--gold);
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#e0a04e;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.085em;
  font-weight:500;
  transition:.2s ease;
}
.button svg{
  width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
}
.button:hover,.button:focus-visible{
  background:rgba(189,129,55,.10);
  border-color:var(--gold-soft);
  transform:translateY(-1px);
}
.button.compact{min-width:218px}
.phone{
  display:block;
  width:max-content;
  text-decoration:none;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:36px;
  letter-spacing:.04em;
  line-height:1;
}
.socials{
  display:flex;
  gap:54px;
  margin-top:12px;
}
.socials a{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-size:14px;
  letter-spacing:.06em;
  transition:.2s ease;
}
.socials a:hover{color:var(--gold-soft)}
.social-circle{
  width:70px;height:70px;border:1px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-soft);
}
.social-circle svg{
  width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:3;
}
.social-circle svg .fill{fill:currentColor;stroke:none}
.social-circle.fb{
  font-family:Arial,sans-serif;
  font-weight:bold;
  font-size:43px;
  padding-top:9px;
}
footer{
  padding:31px 0 38px;
  text-align:center;
}
.footer-main{
  color:var(--gold-soft);
  font-family:"Cormorant Garamond",Georgia,serif;
  letter-spacing:.19em;
  font-size:20px;
}
.footer-sub{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.17em;
}

@media (max-width:700px){
  .hero{min-height:470px;padding:0 18px 28px}
  .hero-image{background-position:42% top}
  .brand-small{font-size:27px}
  h1{font-size:clamp(68px,20vw,96px)}
  .since{font-size:24px;gap:13px}
  .since span{width:62px}
  .info-card{width:min(100% - 34px,620px)}
  .row{grid-template-columns:66px 1fr;gap:16px;padding:27px 0}
  .icon svg{width:51px;height:51px}
  .content h2{font-size:24px}
  .content p{font-size:17px}
  .phone{font-size:32px}
}

@media (max-width:470px){
  .hero{min-height:440px}
  .brand-small{font-size:21px;letter-spacing:.17em}
  h1{font-size:68px}
  .since{font-size:20px}
  .since span{width:45px}
  .row{grid-template-columns:1fr;gap:10px}
  .icon{justify-content:flex-start;padding:0}
  .icon svg{width:44px;height:44px}
  .social-main-icon{display:none}
  .content h2{font-size:22px}
  .button{width:100%;padding:0 12px;font-size:12px}
  .button.compact{min-width:0}
  .socials{gap:30px}
  .social-circle{width:62px;height:62px}
  .footer-main{font-size:17px}
}