:root{
  
  --bg: url("assets/bg.webp");

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --line: rgba(255,255,255,0.18);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  color: var(--text);
   font-family: "Pangolin", system-ui, sans-serif;
  background: #07070a;
  /* background image */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* single overlay so text stays readable */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: radial-gradient(900px 500px at 50% 20%, rgba(0,0,0,0.35), rgba(0,0,0,0.78));
  pointer-events: none;
}

.wrap{
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 52px);
  display: grid;
  gap: 28px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.65);
}



.hero{
  display: grid;
  justify-items: center;
  gap: 14px;
  padding-top: clamp(8px, 2vw, 18px);
}


.logo{
  width: 900px;
  height: auto;
  filter: brightness(1.15) contrast(1.08) saturate(1.05)
          drop-shadow(0 14px 35px rgba(0,0,0,0.6));
}

.desc{
  margin: 0;
  max-width: 62ch;
  text-align: center;
  color: var(--muted);
  font-size: clamp(32px, 2.2vw, 64px);
  line-height: 1.5;
}

.section h2{
  margin: 0 0 12px;
  font-size: clamp(24px, 2.6vw, 24px);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 26px 26px;
  border-radius: 14px;
  border: 3px solid rgb(255, 255, 255);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.btn:hover{ transform: translateY(-1px); background: rgb(255, 0, 0); }
.btn:active{ transform: translateY(0px); }
.btn.small{ padding: 11px 14px; }
.btn-big{
  padding: 18px 26px;
  font-size: 22px;
    font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 18px;
}
.video{
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--line);
  background: rgba(0,0,0,0.25);
}
.video iframe{
  width: 100%;
  height: 100%;
  display: block;
}


.section{
  text-align: center;
}

.links{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center; 
   font-size: 24px;
}
.links a{
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.3);
}
.links a:hover{
  color: var(--text);
  border-bottom-color: rgba(255,255,255,0.7);
}
.links a[aria-disabled="true"]{
  opacity: 0.6;
  pointer-events: none;
}


.inquiries{
  margin: 12px 0 0;
  color: var(--muted);
 font-size: 24px;
   
}

.inquiries a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.35);
}
.inquiries a:hover{
  border-bottom-color: rgba(255,255,255,0.8);
}



.hint{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.footer{
  text-align: center;
  color: var(--muted);
  padding: 8px 0 18px;
}


.footer-logo-link{
  display: inline-block;
  margin-bottom: 10px;
}

.footer-logo{
  width: 220px;          
  height: auto;
  opacity: 0.6;
  transition: transform 140ms ease, opacity 140ms ease;
}

.footer-logo-link:hover .footer-logo{
  transform: translateY(-2px) scale(1.03);
  opacity: 1;
}



@media (prefers-reduced-motion: reduce){
  .btn, .shot{ transition: none; }
  .btn:hover, .shot:hover{ transform: none; }
}

/* wrap is the positioning anchor for the decorations */
.wrap{
  position: relative; 
  z-index: 1;
}

/* put decor behind your content but inside the page */
.decor-layer{
  position: absolute;   
  inset: 0;           
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* make content sit above decorations */
.wrap > header,
.wrap > section,
.wrap > footer{
  position: relative;
  z-index: 1;
}

.deco{
  position: absolute;
  width: clamp(400px, 14vw, 500px);
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,1));
  transform:
    translate(var(--jx, 0px), var(--jy, 0px))
    rotate(var(--rot, 0deg))
    scale(var(--scale, 1));
}

/* Positions  */
.deco.d1 { top: -5%;  left: -45%; }
.deco.d2 { top: 60%; left: -44%; }
.deco.d3 { top: 2%;  right: -45%; }
.deco.d4 { top: 50%; right: -45%; }
.deco.d5 { top: 25%;  left: -45%; }

/* Hide decor on small screens if it gets cluttered */
@media (max-width: 700px){
  .decor-layer{ display: none; }
}