:root{
  --gold:#f4b41a;
  --green:#2e9e4f;
  --blue:#1e6fc0;
  --navy:#17306b;
  --orange:#f26a2e;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  height:100%;
  overflow:hidden;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif;
  background:#0a0e17;
  color:#ffffff;
}

/* ---------- Video Background ---------- */
.video-bg-container{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:0;
  background:#0a0e17;
}
.video-bg-container video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.video-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  background:radial-gradient(circle at center, rgba(10,14,23,0.3) 0%, rgba(10,14,23,0.65) 100%),
             linear-gradient(180deg, rgba(10,14,23,0.5) 0%, rgba(10,14,23,0.2) 40%, rgba(10,14,23,0.75) 100%);
  pointer-events:none;
}

/* ---------- Intro ---------- */
#intro{
  position:fixed;
  inset:0;
  z-index:30;
  background:radial-gradient(circle at 50% 40%,#e6c7a2,#b88b60);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 1s ease, visibility 1s ease;
}
#intro.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.drops{position:absolute;inset:0;overflow:hidden}
.drops i{
  position:absolute;
  top:-120px;
  width:2px;
  height:90px;
  background:linear-gradient(transparent,rgba(255,255,255,.9));
  opacity:.5;
  animation:rain linear infinite;
}
@keyframes rain{to{transform:translateY(120vh)}}
.bk{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,200,.9),rgba(255,220,150,.15) 70%);
  filter:blur(3px);
  animation:bkf linear infinite;
}
@keyframes bkf{
  from{transform:translateY(20px);opacity:0}
  30%{opacity:.9}
  to{transform:translateY(-60px);opacity:0}
}
.logo{position:relative;width:min(90vw,460px);text-align:center}
.logo svg{width:100%;display:block;overflow:visible}
.mk{
  fill:none;
  stroke:#fff;
  stroke-width:46;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:draw 1.3s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.word{
  display:flex;
  justify-content:center;
  white-space:pre;
  font-weight:800;
  font-size:clamp(28px,8.4vw,50px);
  color:#141414;
  text-shadow:2px 3px 6px rgba(0,0,0,.35);
  margin-top:2px;
  font-family:'Segoe UI',Arial,sans-serif;
}
.word span{
  display:inline-block;
  opacity:0;
  transform:translateY(-100vh) scaleY(2.5);
  filter:blur(6px);
  animation:fall .9s cubic-bezier(.3,1.5,.5,1) forwards;
}
@keyframes fall{60%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}
.tag{
  color:#1e4fa8;
  font-weight:600;
  letter-spacing:1px;
  font-size:clamp(11px,2.7vw,15px);
  margin-top:4px;
  opacity:0;
  animation:fadeUp .8s 2.6s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Main Content ---------- */
main{
  position:relative;
  z-index:5;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  gap:16px;
  opacity:0;
  transition:opacity 1.2s .4s;
}
body.ready main{opacity:1}

.mini{
  width:min(90vw,360px);
  animation:float 5s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-8px)}}
.mini svg{
  width:min(280px,80vw);
  margin:0 auto;
  height:auto;
  display:block;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.mini .w{
  font-weight:800;
  font-size:clamp(24px,5.5vw,34px);
  color:#ffffff;
  text-shadow:0 2px 10px rgba(0,0,0,0.7);
  margin-top:2px;
  white-space:nowrap;
}
.mini .tg{
  color:var(--gold);
  font-weight:600;
  font-size:14px;
  letter-spacing:1.5px;
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
  margin-top:4px;
}

h1{
  font-size:clamp(18px,3.4vw,28px);
  font-weight:500;
  color:#ffffff;
  text-shadow:0 2px 14px rgba(0,0,0,0.85);
  max-width:700px;
}
.contact{
  font-size:15px;
  color:rgba(255,255,255,0.9);
  text-shadow:0 1px 8px rgba(0,0,0,0.8);
}
.contact a{
  color:var(--gold);
  text-decoration:none;
  font-weight:600;
  transition:color .2s, text-shadow .2s;
}
.contact a:hover{
  color:#ffffff;
  text-shadow:0 0 10px rgba(244,180,26,0.9);
}

.cs{
  font-size:clamp(26px,6vw,46px);
  font-weight:800;
  letter-spacing:6px;
  text-transform:uppercase;
  background:linear-gradient(90deg,var(--gold),#ffe372,var(--green),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% 100%;
  animation:shine 4s linear infinite;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.85));
}
@keyframes shine{to{background-position:-200% 0}}

/* Timer */
.timer{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:4px;
}
.box{
  width:96px;
  height:108px;
  border:1px solid rgba(244,180,26,0.5);
  border-radius:12px;
  background:rgba(15, 23, 42, 0.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0, 0, 0, 0.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  animation:glow 3s ease-in-out infinite;
  transition:transform .3s;
}
.box:hover{transform:translateY(-4px)}
.box:nth-child(2){animation-delay:.3s}
.box:nth-child(3){animation-delay:.6s}
.box:nth-child(4){animation-delay:.9s}
@keyframes glow{50%{box-shadow:0 0 22px rgba(244,180,26,0.45);border-color:var(--gold)}}
.box b{
  font-size:36px;
  color:#ffffff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(0,0,0,0.5);
}
.box small{
  font-size:12px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;
}
@media(max-width:480px){
  .box{width:72px;height:90px}
  .box b{font-size:26px}
}

/* Sound Button */
.sound-btn{
  position:fixed;
  bottom:22px;
  right:22px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  background:rgba(15, 23, 42, 0.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(244, 180, 26, 0.5);
  color:#ffffff;
  border-radius:30px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 4px 18px rgba(0,0,0,0.4);
}
.sound-btn:hover{
  background:rgba(244, 180, 26, 0.25);
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(244,180,26,0.3);
}
.sound-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}