:root{
  --gold-primary:#fcc218;
  --gold-light:#ffdd93;
  --gold-deep:#96650b;
  --cream:#faf6ee;
}

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

html,body{height:100%; overflow:hidden}

body{
  background:#161310;
  font-family:"Cairo","Segoe UI",sans-serif;
}

/* full-page finished hero image, gently softened so text reads well
   anywhere on the page, not just in one zone */
.hero-bg{
  position:fixed;
  inset:-12px;
  z-index:0;
  background-image:url("hero-panel.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(3px);
}

/* uniform dark tint across the whole viewport — consistent contrast
   no matter where content sits */
.content-scrim{
  position:fixed;
  z-index:3;
  inset:0;
  background:rgba(0,0,0,0.3);
  pointer-events:none;
}

.content-col{
  position:fixed;
  z-index:4;
  inset:0;
  pointer-events:none;
}

.content-col .group{
  position:absolute;
  left:0;
  width:clamp(230px, 56vw, 480px);
  padding:0 clamp(1.25rem, 6vw, 3rem);
  text-align:right;
  pointer-events:auto;
  opacity:0;
  animation:fadeIn .5s ease forwards;
}

.group-logo{ top:17%; transform:translateY(-50%); }
.group-title{ top:47%; transform:translateY(-50%); }
.group-accent{ top:65%; transform:translateY(-50%); }
.group-icons{ top:88%; transform:translateY(-50%); }

.content-col .group-logo{ animation-delay:0s; }
.content-col .group-title,
.content-col .group-accent{ animation-delay:.5s; }
.content-col .group-icons{ animation-delay:1s; }

@keyframes fadeIn{
  from{opacity:0; transform:translateY(calc(-50% + 14px))}
  to{opacity:1; transform:translateY(-50%)}
}

.logo-mark{
  width:clamp(78px, 9vw, 150px);
  height:clamp(78px, 9vw, 150px);
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.text-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(.15rem, .8vh, .4rem);
}

.name{
  font-size:clamp(1.9rem, 5.8vh, 3.4rem);
  font-weight:800;
  color:var(--gold-primary);
  letter-spacing:.5px;
  line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,0.45);
}

.branch{
  font-size:clamp(1rem, 2.6vh, 1.5rem);
  font-weight:600;
  color:var(--gold-light);
  text-shadow:0 1px 8px rgba(0,0,0,0.4);
}

.slogan{
  font-size:clamp(.95rem, 2.2vh, 1.3rem);
  font-weight:400;
  color:var(--cream);
  text-shadow:0 1px 8px rgba(0,0,0,0.4);
}

.group-accent{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.tagline{
  font-size:clamp(.85rem, 1.8vh, 1.15rem);
  font-weight:400;
  letter-spacing:.3px;
  color:var(--gold-light);
  opacity:.85;
}

.loading-dots{
  margin-top:clamp(.7rem, 2.5vh, 1.2rem);
  display:flex;
  gap:clamp(.35rem, 1vw, .5rem);
}

.loading-dots span{
  width:clamp(6px, 1vw, 8px);
  height:clamp(6px, 1vw, 8px);
  border-radius:50%;
  background:var(--gold-primary);
  opacity:.25;
  animation:dotPulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1){animation-delay:0s}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}

@keyframes dotPulse{
  0%,80%,100%{opacity:.25; transform:scale(1)}
  40%{opacity:1; transform:scale(1.25)}
}

.icons-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:.3rem clamp(.6rem, 2.5vw, 1.2rem);
  max-width:100%;
}

.contact-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  color:var(--cream);
  text-decoration:none;
}

.icon-circle{
  position:relative;
  width:clamp(38px, 6.5vh, 50px);
  height:clamp(38px, 6.5vh, 50px);
  min-width:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(252,194,24,0.85);
  color:var(--gold-light);
  opacity:0;
  animation:iconIn .5s ease forwards;
  animation-delay:calc(1s + (var(--i, 0) * 0.08s));
  transition:background-color .3s ease, border-color .3s ease;
}

.contact-item:nth-child(1) .icon-circle{--i:0}
.contact-item:nth-child(2) .icon-circle{--i:1}
.contact-item:nth-child(3) .icon-circle{--i:2}
.contact-item:nth-child(4) .icon-circle{--i:3}

@keyframes iconIn{
  from{opacity:0}
  to{opacity:1}
}

.icon-circle i{
  font-size:clamp(16px, 3vh, 22px);
  line-height:1;
}

.label{
  font-size:clamp(.7rem, 1.45vh, .85rem);
  color:var(--cream);
  opacity:.88;
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}

.contact-item:hover .icon-circle,
.contact-item:focus-visible .icon-circle,
.contact-item.touch-active .icon-circle{
  background-color:rgba(252,194,24,0.18);
  border-color:rgba(252,194,24,1);
}

@media (prefers-reduced-motion: reduce){
  .icon-circle,
  .content-col .group{animation:none; opacity:1}
}

@media (max-width:768px){
  .content-col .group{
    left:0;
    width:100%;
    text-align:center;
    padding:0 clamp(1.25rem, 6vw, 2rem);
  }

  .text-block,
  .group-accent{align-items:center}

  .icons-row{justify-content:center}

  .logo-mark{
    width:clamp(102px, 40vw, 150px);
    height:clamp(102px, 40vw, 150px);
  }
}