: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;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream) url('https://arazzo.store/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:28px 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:.04em; text-transform:uppercase; font-size:13px;}
.az-header--hero{ color:var(--ink); }

/* ---------- HERO ---------- */
.az-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  padding-top:120px;
}
.az-hero__text{
  position:relative; z-index:2; text-align:left; max-width:640px; margin:0 auto;
  will-change:transform;
}
.az-hero__title{ margin:0 0 20px; font-family:var(--font-display); font-weight:700; line-height:.92; }
.az-hero__best{ display:block; font-weight:800; font-size:clamp(44px,7vw,88px); text-transform:uppercase; letter-spacing:-.02em; }
.az-hero__line2{ display:flex; align-items:baseline; justify-content:flex-start; gap:10px; }
.az-hero__for{ font-weight:500; font-size:clamp(16px,2.2vw,26px); text-transform:uppercase; letter-spacing:-.01em; }
.az-hero__space{
  font-family:var(--font-script); font-size:clamp(64px,10.5vw,140px); font-weight:400;
  display:inline-block; transform:rotate(-7deg); transform-origin:left bottom; margin-left:2px;
}
.az-hero__para{
  font-family:var(--font-body); text-transform:uppercase; font-weight:600;
  letter-spacing:.015em; font-size:13px; line-height:1.8; max-width:480px; margin:0; color:#2a2a2a;
}
.az-hero__pair{
  position:relative; z-index:2; display:flex; justify-content:center; gap:5vw;
  margin-top:64px; padding:0 6vw;
}
.az-hero__pinflag{
  position:relative; flex:0 1 380px; max-width:38vw;
  box-shadow:0 24px 40px -14px rgba(0,0,0,.35);
}
.az-hero__pinflag img{ display:block; width:100%; height:auto; }
.az-hero__pin{
  position:absolute; top:-9px; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe9a8, #b8860b 70%, #6b4e00);
  box-shadow:0 2px 4px rgba(0,0,0,.4); z-index:3;
}
.az-hero__pin--l{ left:14px; }
.az-hero__pin--r{ right:14px; }

/* ---------- FAVOURITE FLAGS (red reveal) ---------- */
.az-fav{ position:relative; background:transparent; padding-bottom:0; overflow:hidden; }
.az-fav__circle{
  position:relative; width:100%; aspect-ratio:2.2/1; max-height:74vh;
  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(55%); will-change:transform;
}
.az-fav__stage{
  position:relative; margin-top:-42vh; padding:80px 6vw 120px;
  color:var(--yellow); text-align:center;
  background:var(--red);
}
.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:-.02em;
  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:13px; letter-spacing:.015em;
  text-transform:uppercase; line-height:1.8; font-weight:600;
}

/* ---------- WELCOME TO THE WALL ---------- */
.az-wall{ position:relative; background:var(--red); height:340vh; }
.az-wall__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.az-wall__grid{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr;
  gap:14px; padding:14px; z-index:1;
}
.az-wall__cell{ overflow:hidden; border-radius:3px; will-change:transform; }
.az-wall__cell img{ width:100%; height:100%; object-fit:cover; }
.az-wall__cell--c0{ transform:translateY(-6%); }
.az-wall__cell--c1{ transform:translateY(8%); }
.az-wall__cell--c2{ transform:translateY(-3%); }
.az-wall__content{
  position:relative; z-index:2; text-align:center; color:var(--yellow);
  background:rgba(95,5,17,.35); backdrop-filter:blur(2px);
  padding:48px 6vw; border-radius:4px; max-width:640px;
}
.az-wall__title{ margin:0 0 6px; font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5.5vw,58px); text-transform:uppercase; }
.az-wall__script{ display:block; font-family:var(--font-script); font-weight:400; color:#fff; font-size:1.4em; }
.az-wall__para{ color:#fff; font-size:13px; letter-spacing:.05em; line-height:1.8; text-transform:uppercase; font-weight:600; margin:18px 0 26px; }

/* ---------- STRIPE / MARQUEE ---------- */
.az-stripe{ background:var(--blue); color:var(--yellow); overflow:hidden; white-space:nowrap; padding:16px 0; }
.az-stripe--footer{ text-align:center; font-family:var(--font-display); font-weight:700; letter-spacing:.08em; font-size:13px; }
.az-stripe__track{ display:inline-flex; animation:az-marquee 22s linear infinite; }
.az-stripe__track span{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:22px; letter-spacing:.03em; padding-right:12px; }
@keyframes az-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- CATEGORY GRIDS (music / football) ---------- */
.az-cat{ padding:90px 6vw; }
.az-cat--music{ background:linear-gradient(160deg,var(--maroon),var(--red)); color:#fff; }
.az-cat--football{ background:#fff; color:var(--ink); }
.az-cat__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:44px; }
.az-cat__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5vw,56px); text-transform:uppercase; color:var(--yellow); margin:0; }
.az-cat--football .az-cat__title{ color:var(--ink); -webkit-text-stroke:1px var(--ink); }
.az-cat__all{ font-family:var(--font-display); font-weight:700; letter-spacing:.05em; font-size:13px; color:var(--yellow); }
.az-cat--football .az-cat__all{ color:var(--red); }
.az-cat__note{ max-width:340px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; line-height:1.7; }
.az-cat__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px 24px; }
.az-card{ display:block; }
.az-card__img{ aspect-ratio:3/4; overflow:hidden; border-radius:3px; background:#eee; margin-bottom:10px; }
.az-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.az-card:hover .az-card__img img{ transform:scale(1.04); }
.az-card__name{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:0; text-align:center; }
.az-cat__empty{ opacity:.7; font-size:13px; grid-column:1/-1; text-align:center; }

/* ---------- INFINITE CANVAS ---------- */
.az-canvas{ position:relative; height:100vh; background:var(--maroon); overflow:hidden; cursor:grab; }
.az-canvas:active{ cursor:grabbing; }
.az-canvas__world{ position:absolute; inset:0; }
.az-canvas__hint{ position:absolute; bottom:24px; left:6vw; color:rgba(255,255,255,.5); font-size:11px; letter-spacing:.08em; z-index:5; }

/* ---------- COLLAGE ---------- */
.az-collage{ background:var(--cream); padding:100px 6vw 140px; }
.az-collage__flow{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 22px; font-family:var(--font-body);
  color:var(--olive); font-weight:800; font-size:clamp(30px,6vw,72px); line-height:1;
}
.az-collage__word{ text-transform:none; }
.az-collage__word--big{ font-size:1.35em; }
.az-collage__img{ height:1.6em; width:auto; border-radius:2px; box-shadow:0 6px 18px rgba(0,0,0,.15); }

/* ---------- FOOTER ---------- */
.az-footer{ background:radial-gradient(120% 100% at 50% 0%, var(--red), var(--maroon)); padding:70px 6vw 0; }
.az-footer__inner{ text-align:center; }
.az-footer__logo{ max-width:640px; width:80%; margin:0 auto 40px; }
.az-footer__nav{ display:flex; justify-content:center; gap:36px; flex-wrap:wrap; padding-bottom:36px; }
.az-footer__nav a{ font-family:var(--font-display); font-weight:700; letter-spacing:.05em; font-size:14px; color:var(--yellow); text-transform:uppercase; }
.az-footer__ig{ margin-left:auto; }

/* ---------- GENERIC PAGE (contact/track/fallback) ---------- */
.az-page{ padding:160px 6vw 100px; min-height:60vh; }
.az-page__inner{ max-width:760px; margin:0 auto; }
.az-page__title{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(30px,5vw,52px); margin-bottom:20px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:820px){
  .az-header{ padding:20px 5vw; }
  .az-header__nav{ gap:16px; font-size:11px; }
  .az-hero__flags{ grid-template-columns:repeat(2,1fr); padding-top:170px; }
  .az-hero__flag--2,.az-hero__flag--3{ display:none; }
  .az-fav__row{ gap:20px; }
  .az-fav__flagwrap{ width:44vw; }
  .az-wall__grid{ grid-template-columns:repeat(3,1fr); }
  .az-cat__grid{ grid-template-columns:repeat(2,1fr); }
  .az-collage__flow{ font-size:32px; }
}