:root{
  --bg1:#04050b;
  --bg2:#091120;
  --text:#f7f9ff;
  --muted:rgba(247,249,255,.72);
  --border:rgba(255,255,255,.16);
  --c1:#67e8ff;
  --c2:#b58cff;
  --c3:#6ef7c8;
  --shadow:0 30px 100px rgba(0,0,0,.52);
}

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

@font-face {
  font-family: "IRANYekanXVF";
  src: url("fonts/IRANYekanXVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body *{
  font-family: "IRANYekanXVF", Arial, sans-serif;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 20%, rgba(103,232,255,.14), transparent 26%),
    radial-gradient(circle at 80% 80%, rgba(181,140,255,.16), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(110,247,200,.08), transparent 35%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}

#fxCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}

#mouseGlow{
  position:fixed;
  width:240px;
  height:240px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(circle, rgba(103,232,255,.18), rgba(181,140,255,.10), transparent 72%);
  filter:blur(12px);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .25s ease;
}

.bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(48px);
  pointer-events:none;
  animation: drift 14s ease-in-out infinite;
  z-index:0;
}

.orb-1{ width:260px; height:260px; left:8%; top:12%; background:rgba(103,232,255,.17); }
.orb-2{ width:330px; height:330px; right:8%; top:46%; background:rgba(181,140,255,.16); animation-delay:-4s; }
.orb-3{ width:180px; height:180px; left:48%; bottom:10%; background:rgba(110,247,200,.12); animation-delay:-7s; }

@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(14px,-24px) scale(1.08); }
}

.frame{
  position:absolute;
  inset:18px;
  border-radius:30px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), var(--shadow);
  pointer-events:none;
  z-index:2;
}

.hero{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  z-index:3;
}

.brand-btn{
  position:relative;
  border:none;
  background:transparent;
  cursor:pointer;
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:30px 34px;
  outline:none;
  transform:translateZ(0);
}

.brand-core{
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.2), rgba(255,255,255,.06) 42%, transparent 72%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 0 60px rgba(103,232,255,.12), inset 0 0 30px rgba(255,255,255,.05);
  animation: corePulse 3.8s ease-in-out infinite;
}

.brand-title{
  position:relative;
  font-size:clamp(2.4rem, 6vw, 5.8rem);
  font-weight:900;
  letter-spacing:2px;
  text-shadow:0 0 12px rgba(103,232,255,.45), 0 0 34px rgba(181,140,255,.26);
  animation: titlePulse 3.8s ease-in-out infinite;
}

.brand-title::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--c1), var(--c2), var(--c3), transparent);
  background-size:200% 100%;
  animation: shine 3s linear infinite;
}

.brand-subtitle{
  margin-top: 5px;
  font-size:1rem;
  color:var(--muted);
  letter-spacing:5px;
}

.brand-tag{
  font-size:.78rem;
  color:rgba(247,249,255,.52);
  letter-spacing:2px;
  margin-top:2px;
}

.hint{
  position:absolute;
  bottom:28px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--c1);
  text-shadow: 0 0 10px rgba(103, 232, 255, .85), 0 0 18px rgba(103, 232, 255, .5);
  animation: hintGlow 2.8s ease-in-out infinite;
}

@keyframes hintGlow{
  0%,100%{
    opacity:.75;
    filter: brightness(1);
    text-shadow:
      0 0 8px rgba(103,232,255,.12),
      0 0 18px rgba(181,140,255,.08);
  }
  50%{
    opacity:1;
    filter: brightness(1.1);
    text-shadow:
      0 0 12px rgba(103,232,255,.28),
      0 0 26px rgba(181,140,255,.18),
      0 0 40px rgba(103,232,255,.12);
  }
}

@keyframes corePulse{
  0%,100%{ transform:scale(1); opacity:.82; }
  50%{ transform:scale(1.05); opacity:1; }
}

@keyframes titlePulse{
  0%,100%{ transform:translateY(0) scale(1); filter:brightness(1); }
  50%{ transform:translateY(-1px) scale(1.015); filter:brightness(1.12); }
}

@keyframes shine{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

.cards-layer{
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}

.cards-layer.open{
  opacity:1;
  pointer-events:auto;
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(2,4,10,.28);
  backdrop-filter:blur(10px);
}

.card{
  position:fixed;
  left:50%;
  top:50%;
  width:min(250px, 78vw);
  min-height:158px;
  padding:18px 18px 16px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 45px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  transform:translate(-50%, -50%) scale(.06);
  transition:transform 2.3s cubic-bezier(.08,1,.14,1), opacity .8s ease, filter 2.3s ease;
  filter:blur(10px);
  will-change: transform, opacity, filter;
  animation: floatCard 9s ease-in-out infinite;
  animation-play-state: paused;
  cursor:pointer;
}

.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(103,232,255,.38), rgba(181,140,255,.22), rgba(110,247,200,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.45;
  pointer-events:none;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 35%, transparent 65%, rgba(255,255,255,.08));
  pointer-events:none;
  opacity:.45;
}

.card-num{
  position:absolute;
  top:12px;
  left:14px;
  font-size:1rem;
  font-weight:800;
  letter-spacing:1px;
  color:var(--c1);
  text-shadow:0 0 10px rgba(103,232,255,.85), 0 0 18px rgba(103,232,255,.5);
  opacity:.95;
}

.card h3{
  font-size:1.08rem;
  margin:18px 0 10px;
}

.card p{
  font-size:.85rem;
  line-height:1.85;
  color:rgba(247,249,255,.8);
}

.cards-layer.open .card{
  opacity:1;
  filter:blur(0);
  animation-play-state:running;
}

.cards-layer.open .card[data-slot="1"]{ transform:translate(-50%, -50%) translate(0,-300px) scale(1); transition-delay:.00s; }
.cards-layer.open .card[data-slot="2"]{ transform:translate(-50%, -50%) translate(215px,-215px) scale(1); transition-delay:.05s; }
.cards-layer.open .card[data-slot="3"]{ transform:translate(-50%, -50%) translate(300px,0) scale(1); transition-delay:.10s; }
.cards-layer.open .card[data-slot="4"]{ transform:translate(-50%, -50%) translate(215px,215px) scale(1); transition-delay:.15s; }
.cards-layer.open .card[data-slot="5"]{ transform:translate(-50%, -50%) translate(0,300px) scale(1); transition-delay:.20s; }
.cards-layer.open .card[data-slot="6"]{ transform:translate(-50%, -50%) translate(-215px,215px) scale(1); transition-delay:.25s; }
.cards-layer.open .card[data-slot="7"]{ transform:translate(-50%, -50%) translate(-300px,0) scale(1); transition-delay:.30s; }
.cards-layer.open .card[data-slot="8"]{ transform:translate(-50%, -50%) translate(-215px,-215px) scale(1); transition-delay:.35s; }

.cards-layer.closing .card{
  opacity:0;
  filter:blur(10px);
  transition-duration:1.35s;
}

.detail-modal{
  position:fixed;
  inset:0;
  z-index:20;
  opacity:0;
  pointer-events:none;
  transition:opacity .42s ease;
}

.detail-modal.open{
  opacity:1;
  pointer-events:auto;
}

.detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,3,8,.72);
  backdrop-filter:blur(18px);
  transition:opacity .5s ease;
}

.detail-card{
  position:absolute;
  left:50%;
  top:50%;
  width:min(720px, 92vw);
  max-height:min(78vh, 760px);
  overflow:auto;
  padding:28px 26px 24px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 120px rgba(0,0,0,.5);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transform:
    translate(-50%, -50%)
    translateY(34px)
    scale(.68)
    rotateX(10deg);
  opacity:0;
  filter:blur(14px) saturate(.85);
  transform-origin:center center;
  transition:
    transform .82s cubic-bezier(.16,1,.18,1),
    opacity .3s ease,
    filter .82s ease;
  will-change: transform, opacity, filter;
}

.detail-modal.open .detail-card{
  transform:
    translate(-50%, -50%)
    translateY(0)
    scale(1)
    rotateX(0deg);
  opacity:1;
  filter:blur(0) saturate(1);
}

.detail-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(103,232,255,.12);
  border:1px solid rgba(103,232,255,.24);
  color:var(--c1);
  font-weight:800;
  margin-bottom:16px;
  box-shadow:0 0 24px rgba(103,232,255,.08);
}

.detail-card h2{
  font-size:clamp(1.5rem, 3vw, 2.4rem);
  margin-bottom:10px;
  line-height:1.4;
}

.detail-lead{
  font-size:1rem;
  line-height:2;
  color:rgba(247,249,255,.88);
  margin-bottom:18px;
}

.detail-body{
  display:grid;
  gap:14px;
  color:rgba(247,249,255,.8);
  font-size:.96rem;
  line-height:2;
}

.detail-body p{
  margin:0;
}

.detail-close{
  position:absolute;
  top:16px;
  left:16px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:1.8rem;
  cursor:pointer;
}

.detail-close:hover{
  background:rgba(255,255,255,.14);
}

@media (max-width: 768px){
  .frame{ inset:12px; border-radius:24px; }
  .brand-core{ width:165px; height:165px; }
  .brand-title{ font-size:clamp(2.15rem, 9.2vw, 3.7rem); }
  .brand-subtitle{ font-size:.92rem; letter-spacing:3px; }

  .card{
    width:clamp(136px, 38vw, 170px);
    min-height:120px;
    padding:11px 11px 12px;
    border-radius:17px;
  }

  .cards-layer.open .card[data-slot="1"]{ transform:translate(-50%, -50%) translate(calc(-1 * clamp(96px, 22vw, 116px)), calc(-1 * clamp(208px, 24vh, 236px))) scale(1); }
  .cards-layer.open .card[data-slot="2"]{ transform:translate(-50%, -50%) translate(clamp(96px, 22vw, 116px), calc(-1 * clamp(208px, 24vh, 236px))) scale(1); }
  .cards-layer.open .card[data-slot="3"]{ transform:translate(-50%, -50%) translate(calc(-1 * clamp(96px, 22vw, 116px)), calc(-1 * clamp(94px, 11vh, 114px))) scale(1); }
  .cards-layer.open .card[data-slot="4"]{ transform:translate(-50%, -50%) translate(clamp(96px, 22vw, 116px), calc(-1 * clamp(94px, 11vh, 114px))) scale(1); }
  .cards-layer.open .card[data-slot="5"]{ transform:translate(-50%, -50%) translate(calc(-1 * clamp(96px, 22vw, 116px)), clamp(94px, 11vh, 114px)) scale(1); }
  .cards-layer.open .card[data-slot="6"]{ transform:translate(-50%, -50%) translate(clamp(96px, 22vw, 116px), clamp(94px, 11vh, 114px)) scale(1); }
  .cards-layer.open .card[data-slot="7"]{ transform:translate(-50%, -50%) translate(calc(-1 * clamp(96px, 22vw, 116px)), clamp(208px, 24vh, 236px)) scale(1); }
  .cards-layer.open .card[data-slot="8"]{ transform:translate(-50%, -50%) translate(clamp(96px, 22vw, 116px), clamp(208px, 24vh, 236px)) scale(1); }

  .hint{
    bottom:18px;
    font-size:.84rem;
    line-height:1.6;
  }

  .detail-card{
    padding:22px 18px 18px;
    border-radius:22px;
    transform:
      translate(-50%, -50%)
      translateY(24px)
      scale(.72)
      rotateX(8deg);
  }
}

@media (max-width: 480px){
  .brand-btn{ padding:20px 16px; }
  .brand-core{ width:138px; height:138px; }
  .brand-title{ font-size:clamp(1.95rem, 10vw, 1.25rem); }
  .brand-tag{ font-size:.7rem; }

  .card{
    width:clamp(132px, 39vw, 160px);
    min-height:140px;
    padding:10px 10px 12px;
    border-radius:16px;
  }

  .cards-layer.open .card[data-slot="1"]{ transform:translate(-50%, -50%) translate(calc(-1 * clamp(92px, 20vw, 108px)), calc(-1 * clamp(230px, 28vh, 260px))) scale(1); }
  .cards-layer.open .card[data-slot="2"]{ transform:translate(-50%, -50%) translate(clamp(92px, 20vw, 108px), calc(-1 * clamp(230px, 28vh, 260px))) scale(1); }
  .cards-layer.open .card[data-slot="3"]{ transform:translate(-50%, -50%) translate(calc(-1 * clamp(92px, 20vw, 108px)), calc(-1 * clamp(108px, 13vh, 124px))) scale(1); }
  .cards-layer.open .card[data-slot="4"]{ transform:translate(-50%, -50%) translate(clamp(92px, 20vw, 108px), calc(-1 * clamp(108px, 13vh, 124px))) scale(1); }
  .cards-layer.open .card[data-slot="5"]{ transform:translate(-50%, -50%) translate(calc(-1 * clamp(92px, 20vw, 108px)), clamp(108px, 13vh, 124px)) scale(1); }
  .cards-layer.open .card[data-slot="6"]{ transform:translate(-50%, -50%) translate(clamp(92px, 20vw, 108px), clamp(108px, 13vh, 124px)) scale(1); }
  .cards-layer.open .card[data-slot="7"]{ transform:translate(-50%, -50%) translate(calc(-1 * clamp(92px, 20vw, 108px)), clamp(230px, 28vh, 260px)) scale(1); }
  .cards-layer.open .card[data-slot="8"]{ transform:translate(-50%, -50%) translate(clamp(92px, 20vw, 108px), clamp(230px, 28vh, 260px)) scale(1); }
}