*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --black:#000;
  --black-soft:#080808;
  --white:#fff;
  --gold:#d4a72c;
  --gold-light:#f4d36f;
  --gold-deep:#8d6513;
  --amber:#ffbb47;
  --orange:#ff7a00;
  --fire:#ffb000;
  --line:rgba(255,255,255,.09);
}

html{
  background:#000;
  color-scheme:dark;
}

body{
  min-width:320px;
  background:#000;
  color:#fff;
  font-family:Inter,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.container{
  width:min(1240px,calc(100% - 40px));
  margin-inline:auto;
}

/* HEADER */
.site-header{
  min-height:100svh;
  position:relative;
  background:
    radial-gradient(circle at 50% 48%,rgba(212,167,44,.09),transparent 30%),
    #000;
  overflow:hidden;
}

.navbar{
  position:relative;
  z-index:50;
  height:82px;
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:32px;
}

.brand{
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
  font-size:.93rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.brand-xau{
  color:var(--gold-light);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.34rem;
  letter-spacing:.08em;
}

.pro{
  min-height:21px;
  padding:4px 7px;
  border-radius:5px;
  color:#090909;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));
  font-size:.58rem;
  letter-spacing:.1em;
  display:inline-flex;
  align-items:center;
}

.menu{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}

.menu a{
  position:relative;
  padding:12px 10px;
  color:rgba(255,255,255,.78);
  font-size:.78rem;
  font-weight:700;
  transition:color .2s ease;
  white-space:nowrap;
}

.menu a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
  transform:scaleX(0);
  transition:transform .22s ease;
}

.menu a:hover,
.menu a:focus-visible{
  color:#fff;
}

.menu a:hover::after,
.menu a:focus-visible::after{
  transform:scaleX(1);
}

.menu-toggle{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#090909;
  cursor:pointer;
}

.menu-toggle span{
  display:block;
  width:20px;
  height:1px;
  margin:5px auto;
  background:#fff;
}

/* HERO */
.hero{
  min-height:calc(100svh - 82px);
  position:relative;
  display:grid;
  place-items:center;
  padding:42px 20px 54px;
  isolation:isolate;
}

.hero-glow{
  position:absolute;
  z-index:-4;
  left:50%;
  top:42%;
  width:min(900px,85vw);
  aspect-ratio:1.8/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(198,145,19,.12),transparent 68%);
  filter:blur(35px);
}

.bull-stage{
  width:min(920px,94vw);
  min-height:560px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:92px;
}

.bull{
  position:relative;
  z-index:10;
  width:min(610px,76vw);
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 16px 14px rgba(0,0,0,.78))
    drop-shadow(0 0 30px rgba(212,167,44,.14));
  animation:bullFloat 5.5s ease-in-out infinite;
}

.ground-glow{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:126px;
  width:min(650px,80vw);
  height:62px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse,rgba(255,255,255,.12),rgba(255,176,0,.22) 20%,rgba(255,122,0,.18) 38%,transparent 72%);
  filter:blur(20px);
  opacity:.9;
}

/* BURNING-UP SMOKE */
.smoke-field{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:30px;
  width:min(1220px,138vw);
  height:360px;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:visible;
  filter:contrast(112%);
}

.smoke{
  position:absolute;
  bottom:14px;
  display:block;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at 50% 68%,
      rgba(255,181,73,.42) 0%,
      rgba(255,129,0,.18) 12%,
      rgba(255,255,255,.52) 22%,
      rgba(220,220,220,.28) 42%,
      rgba(150,150,150,.14) 58%,
      rgba(65,65,65,.04) 72%,
      transparent 84%
    );
  filter:blur(35px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}

.smoke-base{
  position:absolute;
  left:50%;
  bottom:0;
  display:block;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,210,90,.34) 0%,
      rgba(255,156,33,.22) 18%,
      rgba(255,255,255,.18) 36%,
      rgba(175,175,175,.08) 52%,
      transparent 76%);
  filter:blur(40px);
  opacity:.95;
  animation:smokeBase 3.1s ease-in-out infinite;
}

.smoke-base-1{ width:760px; height:94px; }
.smoke-base-2{ width:940px; height:102px; opacity:.74; animation-delay:-1.1s; }
.smoke-base-3{ width:1090px; height:108px; opacity:.56; animation-delay:-2.2s; }

.flame-core{
  position:absolute;
  bottom:16px;
  display:block;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,
      rgba(255,227,138,.55) 0%,
      rgba(255,178,41,.36) 26%,
      rgba(255,122,0,.18) 50%,
      transparent 76%);
  filter:blur(26px);
  mix-blend-mode:screen;
  opacity:.82;
}

.flame-core-1{
  left:50%;
  width:290px;
  height:110px;
  transform:translateX(-50%);
  animation:flamePulse 1.3s ease-in-out infinite;
}
.flame-core-2{
  left:36%;
  width:180px;
  height:90px;
  animation:flameFlickerLeft 1.05s ease-in-out infinite;
}
.flame-core-3{
  left:56%;
  width:200px;
  height:94px;
  animation:flameFlickerRight 1.15s ease-in-out infinite;
}

.smoke-1{ left:-10%; width:430px; height:150px; animation:smokeLeft 3.8s linear infinite; }
.smoke-2{ left:2%; width:420px; height:144px; opacity:.8; animation:smokeRise 4.2s linear -1.2s infinite; }
.smoke-3{ left:16%; width:460px; height:158px; opacity:.82; animation:smokeDrift 4.8s linear -2.4s infinite; }
.smoke-4{ left:29%; width:420px; height:145px; opacity:.8; animation:smokeRight 4s linear -.7s infinite; }
.smoke-5{ left:41%; width:470px; height:165px; opacity:.84; animation:smokeRise 4.4s linear -2.8s infinite reverse; }
.smoke-6{ left:55%; width:450px; height:152px; opacity:.76; animation:smokeLeft 4.1s linear -1.8s infinite; }
.smoke-7{ left:66%; width:430px; height:145px; opacity:.78; animation:smokeRight 4s linear -.4s infinite; }
.smoke-8{ left:78%; width:420px; height:148px; opacity:.72; animation:smokeRise 4.6s linear -3.1s infinite; }
.smoke-9{ left:10%; bottom:2px; width:560px; height:120px; opacity:.5; filter:blur(42px); animation:smokePulse 3.2s ease-in-out infinite; }
.smoke-10{ left:48%; bottom:4px; width:580px; height:124px; opacity:.46; filter:blur(46px); animation:smokePulseAlt 3.7s ease-in-out infinite; }
.smoke-11{ left:24%; width:360px; height:132px; opacity:.68; animation:smokeDrift 4.6s linear -1.4s infinite reverse; }
.smoke-12{ left:60%; width:360px; height:132px; opacity:.68; animation:smokeDrift 4.4s linear -3s infinite; }

/* EMBERS */
.ember-field{
  position:absolute;
  inset:0;
}

.ember{
  position:absolute;
  bottom:18px;
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,241,178,1) 0%, rgba(255,190,59,.95) 40%, rgba(255,122,0,.8) 70%, transparent 100%);
  filter:blur(.4px);
  box-shadow:
    0 0 10px rgba(255,190,59,.8),
    0 0 22px rgba(255,122,0,.45);
  opacity:0;
}

.ember-1{ left:30%; animation:emberRise 1.8s linear 0s infinite; }
.ember-2{ left:36%; animation:emberRise 1.5s linear .4s infinite; }
.ember-3{ left:42%; animation:emberRise 2s linear .8s infinite; }
.ember-4{ left:48%; animation:emberRise 1.6s linear .2s infinite; }
.ember-5{ left:54%; animation:emberRise 1.9s linear .9s infinite; }
.ember-6{ left:58%; animation:emberRise 1.7s linear .5s infinite; }
.ember-7{ left:62%; animation:emberRise 2.1s linear 1.1s infinite; }
.ember-8{ left:45%; animation:emberRise 1.55s linear .7s infinite; }
.ember-9{ left:52%; animation:emberRise 1.85s linear .1s infinite; }
.ember-10{ left:39%; animation:emberRise 1.65s linear 1.2s infinite; }

@keyframes bullFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@keyframes smokeLeft{
  0%{
    transform:translate3d(-70px,20px,0) scale(.88) rotate(-4deg);
    opacity:.06;
  }
  12%{opacity:.68}
  52%{
    transform:translate3d(92px,-72px,0) scale(1.14) rotate(2deg);
    opacity:.58;
  }
  100%{
    transform:translate3d(195px,-188px,0) scale(1.46) rotate(6deg);
    opacity:0;
  }
}

@keyframes smokeRight{
  0%{
    transform:translate3d(76px,20px,0) scale(.86) rotate(4deg);
    opacity:.06;
  }
  14%{opacity:.66}
  52%{
    transform:translate3d(-82px,-66px,0) scale(1.14) rotate(-2deg);
    opacity:.56;
  }
  100%{
    transform:translate3d(-194px,-182px,0) scale(1.42) rotate(-6deg);
    opacity:0;
  }
}

@keyframes smokeRise{
  0%{
    transform:translate3d(-24px,28px,0) scale(.72);
    opacity:.04;
  }
  14%{opacity:.68}
  52%{
    transform:translate3d(28px,-84px,0) scale(1.12);
    opacity:.56;
  }
  100%{
    transform:translate3d(68px,-208px,0) scale(1.54);
    opacity:0;
  }
}

@keyframes smokeDrift{
  0%{
    transform:translate3d(-84px,22px,0) scale(.82) rotate(-3deg);
    opacity:.05;
  }
  16%{opacity:.62}
  52%{
    transform:translate3d(0,-76px,0) scale(1.1) rotate(1deg);
    opacity:.52;
  }
  100%{
    transform:translate3d(122px,-194px,0) scale(1.48) rotate(5deg);
    opacity:0;
  }
}

@keyframes smokePulse{
  0%,100%{
    transform:translateX(-54px) translateY(0) scale(.92);
    opacity:.36;
  }
  50%{
    transform:translateX(54px) translateY(-38px) scale(1.2);
    opacity:.68;
  }
}

@keyframes smokePulseAlt{
  0%,100%{
    transform:translateX(44px) translateY(0) scale(.9);
    opacity:.28;
  }
  50%{
    transform:translateX(-44px) translateY(-34px) scale(1.22);
    opacity:.6;
  }
}

@keyframes smokeBase{
  0%,100%{
    transform:translateX(-50%) translateY(0) scaleX(.94) scaleY(.94);
    opacity:.58;
  }
  50%{
    transform:translateX(-50%) translateY(-18px) scaleX(1.05) scaleY(1.12);
    opacity:.98;
  }
}

@keyframes flamePulse{
  0%,100%{
    transform:translateX(-50%) scale(1,.92);
    opacity:.72;
  }
  50%{
    transform:translateX(-50%) scale(1.08,1.14);
    opacity:1;
  }
}

@keyframes flameFlickerLeft{
  0%,100%{
    transform:translateX(0) translateY(0) scale(.96);
    opacity:.58;
  }
  50%{
    transform:translateX(-10px) translateY(-8px) scale(1.1);
    opacity:.92;
  }
}

@keyframes flameFlickerRight{
  0%,100%{
    transform:translateX(0) translateY(0) scale(.98);
    opacity:.54;
  }
  50%{
    transform:translateX(10px) translateY(-9px) scale(1.12);
    opacity:.9;
  }
}

@keyframes emberRise{
  0%{
    transform:translate3d(0,0,0) scale(.6);
    opacity:0;
  }
  12%{
    opacity:1;
  }
  65%{
    transform:translate3d(-10px,-120px,0) scale(1);
    opacity:.85;
  }
  100%{
    transform:translate3d(18px,-230px,0) scale(.5);
    opacity:0;
  }
}

/* TEXT BELOW BULL */
.hero-copy{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:24px;
  width:100%;
  transform:translateX(-50%);
  text-align:center;
  pointer-events:none;
}

.eyebrow{
  margin-bottom:8px;
  color:rgba(255,255,255,.48);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.17em;
}

.hero-copy h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:1;
  font-weight:500;
  letter-spacing:-.02em;
}

.hero-copy h1 span{
  color:var(--gold-light);
}

.tagline{
  margin-top:11px;
  color:rgba(255,255,255,.54);
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* RESPONSIVE */
@media (max-width:1060px){
  .menu a{
    padding-inline:7px;
    font-size:.71rem;
  }
}

@media (max-width:900px){
  .navbar{ height:72px; }

  .menu-toggle{ display:block; }

  .menu{
    position:absolute;
    top:calc(100% + 10px);
    left:20px;
    right:20px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(5,5,5,.98);
    box-shadow:0 24px 60px rgba(0,0,0,.65);
  }

  .menu.is-open{ display:flex; }

  .menu a{
    padding:13px;
    font-size:.82rem;
  }

  .menu a::after{ display:none; }

  .hero{
    min-height:calc(100svh - 72px);
    padding-top:20px;
  }

  .bull-stage{
    min-height:500px;
    padding-bottom:86px;
  }

  .bull{
    width:min(560px,84vw);
  }

  .smoke-field{
    width:min(1080px,150vw);
    height:310px;
  }
}

@media (max-width:560px){
  .container{
    width:min(100% - 28px,1240px);
  }

  .brand{ font-size:.75rem; }
  .brand-xau{ font-size:1.08rem; }

  .hero{ padding-inline:8px; }

  .bull-stage{
    width:100%;
    min-height:430px;
    padding-bottom:78px;
  }

  .bull{
    width:min(440px,92vw);
  }

  .smoke-field{
    width:900px;
    height:265px;
    bottom:40px;
    transform:translateX(-50%) scale(.88);
  }

  .ground-glow{
    bottom:116px;
    width:82vw;
  }

  .hero-copy{ bottom:18px; }
  .eyebrow{ font-size:.55rem; }
  .tagline{ font-size:.56rem; }
}

@media (prefers-reduced-motion:reduce){
  .bull,
  .smoke,
  .smoke-base,
  .flame-core,
  .ember{
    animation:none !important;
  }
}


/* ============================================================
   TOUCH / MOBILE ZOOM CONTROL
   Keeps the approved layout fixed on touch devices.
   ============================================================ */
html,
body {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
picture,
.site-header,
.hero,
.bull-stage {
  touch-action: manipulation;
  -webkit-user-drag: none;
}

img {
  -webkit-user-select: none;
  user-select: none;
}
