/* ورقنا — layout: nav, hero, sections, footer */
.nav{position:sticky; top:0; z-index:60; background:rgba(11,18,32,.72); backdrop-filter:blur(16px); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; gap:18px; height:70px}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{width:40px; height:40px; display:grid; place-items:center; background:linear-gradient(140deg,#0f4c2c,#15803d); border:1px solid rgba(240,196,96,.45); border-radius:12px; padding:4px}
.brand-mark svg{width:100%; height:100%}
.brand-txt{font-family:var(--head); font-weight:900; font-size:1.28rem; display:flex; flex-direction:column; line-height:1}
.brand-txt em{font-style:normal; font-size:.6rem; letter-spacing:3px; color:var(--accent-2); font-weight:600; margin-top:3px}
.nav-links{display:flex; gap:6px; margin-inline-start:18px}
.nav-links a{padding:9px 14px; border-radius:10px; color:var(--fg-2); font-weight:600; font-size:.95rem; transition:background .2s,color .2s}
.nav-links a:hover,.nav-links a.is-on{background:var(--glass); color:var(--fg)}
.nav-actions{display:flex; align-items:center; gap:10px; margin-inline-start:auto}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--glass); border:1px solid var(--border-2); color:var(--fg); font-weight:700}
.chip-balance:hover{background:rgba(240,196,96,.12); border-color:rgba(240,196,96,.45)}
.chip-balance .ic{color:var(--gold)}
.chip-plus{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#1c1204}
.avatarbtn{width:40px; height:40px; border-radius:50%; border:1px solid var(--border-2); background:linear-gradient(140deg,#1d2b45,#243b5c); color:#fff; font-weight:800; font-family:var(--head)}
.navburger{display:none; background:none; border:0; color:var(--fg)}
.mobile-menu{display:none; flex-direction:column; padding:10px 4vw 16px; gap:4px; border-top:1px solid var(--border)}
.mobile-menu a{padding:11px 12px; border-radius:10px; color:var(--fg-2); font-weight:600}
.mobile-menu a:hover{background:var(--glass)}

.hero{position:relative; padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px); overflow:hidden}
.hero-bg{position:absolute; inset:0; overflow:hidden}
.felt{position:absolute; inset:auto auto -40% 50%; translate:-50% 0; width:1200px; height:1200px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(21,128,61,.5),rgba(11,63,38,.25) 55%,transparent 72%); filter:blur(10px)}
.glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.glow-a{width:420px; height:420px; background:rgba(21,128,61,.55); top:-120px; inset-inline-end:-60px}
.glow-b{width:380px; height:380px; background:rgba(217,119,6,.35); bottom:-140px; inset-inline-start:-80px}
.hero-inner{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.hero-copy h1{margin:14px 0 14px}
.hero-copy p{font-size:1.06rem; max-width:56ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 30px}
.hero-stats{display:flex; flex-wrap:wrap; gap:28px}
.hero-stats b{display:flex; align-items:center; gap:5px; font-family:var(--head); font-size:1.5rem}
.hero-stats span{display:block; color:var(--fg-3); font-size:.84rem}

.hero-art{position:relative; height:400px; display:grid; place-items:center}
.cardsfan{position:relative; width:300px; height:340px}
.pcard{
  position:absolute; inset-inline-start:50%; top:12%; width:150px; height:214px; border-radius:14px;
  background:linear-gradient(160deg,#fdfbf6,#e9e3d5); border:1px solid rgba(0,0,0,.15);
  box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:space-between;
  padding:12px; font-family:var(--head); font-weight:800; font-size:1.5rem; color:#12213a;
  transform-origin:bottom center; animation:fadeUp .8s both;
}
.pcard i{font-style:normal; font-size:2.4rem; align-self:center}
.pcard em{font-style:normal; font-size:.6rem; letter-spacing:2px; color:#8a6a1f; align-self:center}
.pcard.red{color:#b81f3c}
.pcard-1{transform:translateX(-50%) rotate(-2deg); top:6%; z-index:3; animation-delay:.15s}
.pcard-2{transform:translateX(-50%) rotate(-15deg) translateX(-58px); z-index:2; opacity:.95; animation-delay:.05s}
.pcard-3{transform:translateX(-50%) rotate(15deg) translateX(58px); z-index:1; opacity:.9}
.cardsfan:hover .pcard-2{transform:translateX(-50%) rotate(-21deg) translateX(-84px)}
.cardsfan:hover .pcard-3{transform:translateX(-50%) rotate(21deg) translateX(84px)}
.pcard{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.float-badge{
  position:absolute; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  background:rgba(19,31,51,.86); border:1px solid var(--border-2); backdrop-filter:blur(10px);
  font-size:.82rem; font-weight:600; box-shadow:var(--shadow); animation:floaty 5s ease-in-out infinite
}
.float-badge .ic{color:var(--gold)}
.fb-1{top:6%; inset-inline-start:-4%}
.fb-2{bottom:10%; inset-inline-end:-2%; animation-delay:1.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}to{opacity:1}}

.strip{border-block:1px solid var(--border); background:linear-gradient(90deg,rgba(15,31,43,.9),rgba(11,18,32,.6))}
.strip-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:22px 0}
.strip-item{display:flex; gap:12px; align-items:flex-start}
.strip-item .ic{color:var(--gold); width:22px; height:22px; margin-top:3px}
.strip-item b{display:block; font-family:var(--head); font-size:.98rem}
.strip-item span{color:var(--fg-3); font-size:.84rem}

.section{padding:clamp(48px,6vw,86px) 0}
.section-alt{background:linear-gradient(180deg,rgba(15,31,43,.55),transparent)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:32px}
.sec-head p{max-width:62ch; margin:8px 0 0}

.footer{border-top:1px solid var(--border); background:var(--bg-2); padding:46px 0 0; margin-top:20px}
.footer-inner{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; padding-bottom:34px}
.footer-brand p{max-width:44ch; margin-top:10px; font-size:.92rem}
.footer-social{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.footer-cols div{display:flex; flex-direction:column; gap:9px}
.footer-cols b{font-family:var(--head); font-size:.95rem; margin-bottom:2px}
.footer-cols a{color:var(--fg-3); font-size:.9rem; transition:color .2s}
.footer-cols a:hover{color:var(--gold)}
.footer-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--border); padding:18px 0; color:var(--fg-3); font-size:.82rem}

@media (max-width:1024px){
  .nav-links{display:none}
  .navburger{display:grid; place-items:center}
  .mobile-menu.is-open{display:flex}
  .hero-inner{grid-template-columns:1fr}
  .hero-art{height:330px}
  .footer-inner{grid-template-columns:1fr}
  .strip-inner{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .nav-inner{height:62px; gap:10px}
  #howBtn{display:none}
  .hero-stats{gap:18px}
  .strip-inner{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  .fb-1,.fb-2{position:static; margin:6px auto}
}