:root{
  --red:#b00d1f;
  --maroon:#5f0511;
  --yellow:#ffdf00;
  --blue:#0a2fe0;
  --cream:#f5f3ee;
  --olive:#3c421f;
  --ink:#111111;
  --font-display:"Aileron", Arial, Helvetica, sans-serif;
  --font-script:"Luxurious Script", cursive;
  --font-body:"Aileron", Arial, Helvetica, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* Best-Fla.png rides on the body so it flows continuously behind BOTH hero and fav.
   The red circle in .az-fav rises up over the same image, matching the mockup. */
body{
  margin:0;
  font-family:var(--font-body);
  background:#e8e6df url('https://arazzostore.in/wp-content/uploads/2026/07/Best-Fla.png') top center / 100% auto no-repeat;
  color:var(--ink);
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- HEADER ---------- */
.az-header{
  position:absolute; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 6vw;
}
.az-header__logo img{height:44px; width:auto;}
.az-header__nav{display:flex; gap:36px; font-family:var(--font-body); font-weight:700; letter-spacing:-.02em; text-transform:uppercase; font-size:clamp(12px,1.05vw,15px);}

/* ---------- HERO (transparent — body bg shows through) ---------- */
.az-hero{
  position:relative;
  min-height:100vh;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  padding-top:120px;
}
.az-hero__text{
  position:relative; z-index:2; text-align:left; width:min(720px, 92vw); margin:0 auto;
  will-change:transform;
}
.az-hero__title{ margin:0 0 20px; font-family:var(--font-display); font-weight:800; line-height:.92; }
.az-hero__best{ display:block; font-weight:800; font-size:clamp(46px,6.6vw,92px); text-transform:uppercase; letter-spacing:-.045em; white-space:nowrap; }
.az-hero__line2{ display:flex; align-items:flex-end; justify-content:flex-start; gap:6px; margin-top:-.15em; flex-wrap:nowrap; white-space:nowrap; }
.az-hero__for{ font-weight:600; font-size:clamp(14px,1.55vw,22px); text-transform:uppercase; letter-spacing:-.01em; padding-bottom:.6em; }
.az-hero__space{
  font-family:var(--font-script); font-size:clamp(70px,9.5vw,132px); font-weight:400;
  display:inline-block; transform:rotate(-6deg); transform-origin:left bottom; line-height:.85;
}
.az-hero__para{
  font-family:var(--font-body); text-transform:uppercase; font-weight:600;
  letter-spacing:-.015em; font-size:clamp(13px,1.15vw,17px); line-height:1.65; max-width:380px; margin:0; color:#1a1a1a;
}

/* ---------- FAVOURITE FLAGS (red dome rises OVER the same body bg) ---------- */
.az-fav{
  position:relative;
  background:transparent;
  overflow:hidden;
  padding-top:60vh; /* pushes content down so bg image is visible above dome */
}
.az-fav__circle{
  position:absolute; left:0; right:0; bottom:auto; top:60vh;
  width:120%; margin-left:-10%;
  aspect-ratio:2/1;
  background:radial-gradient(120% 140% at 50% 0%, var(--red) 0%, var(--maroon) 85%);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:translateY(35%); will-change:transform; z-index:1;
}
.az-fav__stage{
  position:relative;
  z-index:2;
  background:var(--red);
  padding:8vh 6vw 14vh;
  color:var(--yellow); text-align:center;
  margin-top:0;
}
.az-fav__row{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.az-fav__left, .az-fav__right{
  display:flex; flex-direction:column; font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,5vw,64px); line-height:.95; text-transform:uppercase; letter-spacing:-.035em;
  flex:1 1 240px;
}
.az-fav__left{ text-align:right; align-items:flex-end; }
.az-fav__right{ text-align:left; align-items:flex-start; }
.az-fav__flagwrap{ position:relative; width:0; overflow:hidden; max-width:320px; aspect-ratio:3/2; opacity:0; flex:0 0 auto; }
.az-fav__flag{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transform:scale(.9);
}
.az-fav__flag.is-on{ opacity:1; transform:scale(1); }
.az-fav__para{
  max-width:640px; margin:32px auto 0; color:#fff; font-size:clamp(11px,.95vw,14px); letter-spacing:-.005em;
  text-transform:uppercase; line-height:1.7; font-weight:600;
}

@media (max-width:820px){
  .az-header__nav{ gap:16px; font-size:11px; }
  .az-hero__para{ max-width:280px; }
  .az-fav__row{ gap:14px; }
  .az-fav__flagwrap{ width:44vw; max-width:260px; }
}