/* ========== Base ========== */
:root{
  --bg1:#061013;
  --bg2:#0b1b21;
  --glow:#0fa9b3;
  --glow2:#1fd6c5;
  --text:#eaf2f5;
  --muted:rgba(234,242,245,.72);
  --card:rgba(6,16,19,.72);
  --stroke:rgba(31,214,197,.35);
  --stroke2:rgba(31,214,197,.22);
  --shadow: 0 18px 55px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#000;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ========== Background base ========== */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(850px 550px at 50% 55%, rgba(15,169,179,.62), rgba(0,0,0,0) 62%),
    radial-gradient(900px 650px at 50% 58%, rgba(9,80,90,.55), rgba(0,0,0,0) 66%),
    radial-gradient(800px 500px at 18% 70%, rgba(15,169,179,.20), rgba(0,0,0,0) 55%),
    radial-gradient(850px 600px at 82% 70%, rgba(15,169,179,.18), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #0a1418 0%, #071014 45%, #050b0e 100%);
  filter: saturate(1.1) contrast(1.05);
}

/* ========== Layout helpers ========== */
.container{
  width:min(1180px, calc(100% - 64px));
  margin:0 auto;
}

.section{
  min-height:100vh;
  padding:120px 0 80px;
  position:relative;
  isolation:isolate;
}

/* ✅ Per-section background images */
.section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.28;              /* زود/قلل حسب رغبتك */
  filter:saturate(1.1) contrast(1.05);
}

.section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background: radial-gradient(900px 520px at 50% 58%, rgba(0,0,0,.28), rgba(0,0,0,.62));
  pointer-events:none;
}

/* map images */
#home::before{ background-image:url("assets/homeback.png"); opacity:.34; }
#games::before{ background-image:url("assets/gameback.png"); opacity:.26; }
#solutions::before{ background-image:url("assets/solutionsback.png"); opacity:.22; }
#about::before{ background-image:url("assets/aboutback.png"); opacity:.24; }
#values::before{ background-image:url("assets/about-valuesback.png"); opacity:.22; }
#contact::before{ background-image:url("assets/contactback.png"); opacity:.22; }

body.privacy-page .bg{
  z-index:-2;
}
body.privacy-page .section-privacy::before{
  background-image:url("assets/privacyback.png");
  opacity:.22;
}

/* ========== Header/Nav ========== */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  pointer-events:none;
}

.nav-wrap{
  pointer-events:auto;
  width:min(1180px, calc(100% - 64px));
  margin:22px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;

}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-link{ display:inline-flex; }

.brand-logo{
  width:44px;
  height:auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transform: translateX(-120px);

}

.nav{
  display:flex;
  align-items:center;
  gap:26px;
  padding:14px 18px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.08));
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  transform: translateX(120px);

}

.nav-link{
  font-size:15px;
  letter-spacing:.2px;
  color:rgba(234,242,245,.86);
  position:relative;
  padding:8px 6px;
  transition: color .15s ease, transform .15s ease;
}

.nav-link:hover{
  color: rgba(31,214,197,.95);
  transform: translateY(-1px);
}

.nav-link.active::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:-6px;
  height:2px;
  background: rgba(31,214,197,.9);
  border-radius:9px;
}

.btn-pill{
  padding:9px 16px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background: rgba(10,22,26,.45);
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn-pill:hover{
  background: rgba(10,22,26,.62);
  border-color: rgba(31,214,197,.55);
  box-shadow: 0 0 0 6px rgba(31,214,197,.08), 0 18px 40px rgba(0,0,0,.35);
}

/* ========== Floating Discord Button ========== */
.discord-fab{
  position:fixed;
  right:26px;
  bottom:22px;
  width:84px;
  height:84px;
  border-radius:22px;
  display:grid;
  place-items:center;
  z-index:60;
  background: rgba(10,22,26,.38);
  border:1px solid rgba(31,214,197,.35);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.discord-fab img{
  width:44px;
  height:44px;
  object-fit:contain; /* ✅ يمنع الستريتش */
  opacity:.96;
}

.discord-fab:hover{
  transform: translateY(-2px);
  border-color: rgba(31,214,197,.75);
  background: radial-gradient(120% 140% at 25% 20%, rgba(31,214,197,.35), rgba(10,22,26,.30));
  box-shadow:
    0 0 0 10px rgba(31,214,197,.10),
    0 0 32px rgba(31,214,197,.22),
    0 26px 60px rgba(0,0,0,.55);
}

.discord-fab:active{ transform: translateY(0px); }

/* ========== Hero (Home) ========== */
.hero{
  text-align:center;
  padding-top:90px;
  display:flex;                 /* ✅ يخلي المحتوى بالوسط */
  align-items:center;           /* عمودي */
}

.hero .container{
  width:min(980px, calc(100% - 64px));
}

.hero-title{
font-size: clamp(34px, 4.5vw, 54px);
  line-height:1.2;
  margin:0 0 14px;
  font-weight:900;
  text-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.hero-sub{
  margin:0 0 26px;
  color:rgba(234,242,245,.7);
  letter-spacing:.22em;
  font-size:12px;
  text-transform:uppercase;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:8px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: radial-gradient(120% 140% at 20% 10%, rgba(31,214,197,.95), rgba(12,129,145,.82));
  border-color: rgba(31,214,197,.35);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  color:#062127;
}

.btn-ghost{
  background: rgba(10,22,26,.35);
  border-color: rgba(31,214,197,.30);
  color: rgba(234,242,245,.92);
}

.btn-wide{ padding:14px 28px; min-width:190px; }

.btn:hover{ transform: translateY(-1px); }

/* ✅ Hover: النور + الزر نفسه يتلون */
.btn-primary:hover{
  background: radial-gradient(120% 140% at 20% 10%, rgba(31,214,197,1), rgba(35,205,255,.82));
  box-shadow:
    0 0 0 10px rgba(31,214,197,.10),
    0 0 34px rgba(31,214,197,.22),
    0 22px 52px rgba(0,0,0,.50);
}

.btn-ghost:hover{
  background: rgba(31,214,197,.14);
  border-color: rgba(31,214,197,.65);
  box-shadow:
    0 0 0 10px rgba(31,214,197,.08),
    0 0 30px rgba(31,214,197,.18);
  color: rgba(234,242,245,1);
}

/* ========== Section headings ========== */
.section-kicker{
  color: rgba(31,214,197,.9);
  font-style: italic;
  font-size: 22px;
  margin:0 0 18px;
}

/* ========== Games ========== */
.section-games{ padding-top:150px; }

.game-card{
  margin-top:20px;
  border-radius:22px;
  background: rgba(3,10,13,.62);
  box-shadow: var(--shadow);
  padding:38px;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:44px;
  align-items:center;
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.phone{
  width:320px;
  height:520px;
  border-radius:40px;
  background: rgba(0,0,0,.35);
  border: 5px solid rgba(70,130,150,.35);
  box-shadow: 0 22px 55px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
  margin:0 auto;
}

.phone-notch{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:28px;
  border-radius:18px;
  background: rgba(0,0,0,.55);
  z-index:2;
}

.phone-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
}

.game-info{ max-width:520px; }

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:10px;
  background: rgba(31,214,197,.16);
  border: 1px solid rgba(31,214,197,.30);
  color: rgba(234,242,245,.92);
  font-weight:600;
  margin-bottom:16px;
}

.game-title{
  font-size: clamp(34px, 4vw, 56px);
  margin:0 0 12px;
  font-weight:800;
}

.game-tagline{
  margin:0 0 14px;
  color: rgba(234,242,245,.9);
  font-size:18px;
  max-width:520px;
}

.game-desc{
  margin:0 0 18px;
  color: rgba(234,242,245,.68);
  max-width:560px;
  line-height:1.55;
}

.game-link{
  background: none;
  margin-bottom:18px;
  color: rgba(31,214,197,.95);
  font-weight:600;
  border: none;
  padding: 0;
  color: var(--glow);
  cursor: pointer;
}

/* ========== Solutions ========== */
.solutions-wrap{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  padding-top:80px;
}

.big-title{
  font-size: clamp(44px, 5.5vw, 76px);
  line-height:1.02;
  margin:0;
  font-weight:900;
}

.coming-soon{
  font-size: 40px;
  letter-spacing:.1em;
  color: rgba(31,214,197,.9);
  font-style: italic;
  padding-bottom:6px;
  opacity:.9;
    transform: translateY(300px);

}

.coming-soon span{
  color: rgba(234,242,245,.82);
  font-style: normal;
}

/* ========== About ========== */
.about{
  text-align:center;
  padding-top:220px;
}

.about-title{
  font-size: clamp(42px, 6vw, 74px);
  margin:0 0 10px;
  font-weight:900;
}

.about-sub{
  margin:0 0 28px;
  color: rgba(31,214,197,.85);
  font-style: italic;
  font-size: 20px;
}

.about-par{
  margin: 0 auto 22px;
  max-width: 860px;
  color: rgba(234,242,245,.80);
  line-height:1.55;
  font-size: 18px;
}

/* Circle button */
.scroll-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(31,214,197,.35);
  margin:34px auto 0;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.scroll-btn img{
  width:18px;
  height:18px;
  opacity:.9;
  object-fit:contain;
}

.scroll-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(31,214,197,.75);
  background: rgba(31,214,197,.10);
  box-shadow: 0 0 0 10px rgba(31,214,197,.08), 0 0 30px rgba(31,214,197,.16);
}

/* ========== Values ========== */
.values-title{
  text-align:center;
  font-size: clamp(38px, 5vw, 66px);
  margin: 0 0 44px;
  font-weight:900;
}

.value-card{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 26px;
  padding: 28px 26px;
  box-shadow: 0 18px 45px rgba(0,0,0,.40);
  margin: 18px auto;
  max-width: 820px;
  text-align:center;
  backdrop-filter: blur(10px);
}

.value-head{
  color: rgba(31,214,197,.90);
  font-size: 34px;
  font-style: italic;
  margin-bottom: 8px;
}

.value-body{
  color: rgba(234,242,245,.82);
  font-size: 18px;
}

/* ========== Contact ========== */
.section-contact{ padding-bottom:40px; }

.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items:start;
}

.contact-left{ padding-top:40px; }

.contact-title{
  font-size: clamp(38px, 4.6vw, 62px);
  margin:0 0 34px;
  font-weight:900;
}

.contact-line{
  display:flex;
  gap:10px;
  align-items:center;
  color: rgba(234,242,245,.82);
  margin-bottom: 20px;
  font-size: 18px;
}

.mini-ico{
  width:26px;
  height:26px;
  opacity:.9;
  object-fit:contain;
}

.social{
  display:flex;
  gap:12px;
  margin: 18px 0 18px;
}

.social-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.social-btn img{
  width:18px;
  height:18px;
  opacity:.92;
  object-fit:contain;
}

.social-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(31,214,197,.45);
  background: rgba(31,214,197,.10);
  box-shadow: 0 0 0 8px rgba(31,214,197,.06), 0 18px 40px rgba(0,0,0,.45);
}

.location{
  color: rgba(234,242,245,.62);
  margin-top: 10px;
}

.contact-card{
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  border-radius: 26px;
  padding: 28px;
  box-shadow: var(--shadow);
  margin-top: 40px;
  backdrop-filter: blur(10px);
}

.contact-card-title{
  margin:0 0 10px;
  color: rgba(31,214,197,.90);
  font-size: 30px;
  font-weight: 600;
}

.contact-hint{
  margin: 0 0 18px;
  color: rgba(234,242,245,.70);
  line-height: 1.6;
  font-size: 14px;
}

.contact-mailbtn{
  width:100%;
  justify-content:center;
  padding: 16px 18px;
}

/* Footer */
.footer{
  grid-column: 1 / -1;
  margin-top: 60px;
  text-align:center;
  padding: 36px 0 18px;
  opacity:.95;
}

.footer-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}

.footer-brand img{
  width:42px;
  object-fit:contain;
}

.footer-name{
  font-weight:900;
  letter-spacing:.06em;
}

.footer-subname{
  font-size:12px;
  opacity:.8;
}

.privacy-link{
  display:inline-block;
  margin-top: 8px;
  color: rgba(31,214,197,.95);
}

.copyright{
  margin-top: 16px;
  color: rgba(234,242,245,.58);
  font-size: 13px;
}

/* ========== Privacy Card ========== */
.section-privacy{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:120px 0 80px;
}

.privacy-card{
  width:min(900px, calc(100% - 64px));
  margin:0 auto;
  padding:34px 28px;
  border-radius:26px;
  background: rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.privacy-title{
  margin:0 0 8px;
  font-size: 42px;
  font-weight: 900;
}

.privacy-date{
  color: rgba(234,242,245,.65);
  margin-bottom: 18px;
}

.privacy-contact{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(234,242,245,.82);
}

.privacy-actions{ margin-top: 18px; }

/* ========== Modal (Trailer) ========== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:100;
}

.modal.is-open{ display:block; }

.modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(6px);
}

.modal-card{
  position:relative;
  width:min(1050px, calc(100% - 40px));
  margin: 90px auto 0;
  border-radius: 20px;
  background: rgba(10,22,26,.55);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 90px rgba(0,0,0,.60);
  overflow:hidden;
}

.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius: 14px;
  border:1px solid rgba(31,214,197,.25);
  background: rgba(0,0,0,.25);
  color: rgba(31,214,197,.95);
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
}

.modal-video-wrap{ padding: 24px; }

.modal-video{
  width:100%;
  max-height: 70vh;
  border-radius: 14px;
  background: #000;
}

/* ========== Responsive ========== */
@media (max-width: 980px){
  .nav{ gap:16px; }
  .nav-link{ font-size:14px; }

  .game-card{
    grid-template-columns: 1fr;
    padding: 28px;
    gap: 28px;
  }
  .phone{ width:300px; height:500px; }

  .contact{ grid-template-columns: 1fr; }
  .contact-card{ margin-top: 0; }
  .modal-card{ margin-top: 80px; }

  .discord-fab{ width:76px; height:76px; right:18px; bottom:18px; }
  .discord-fab img{ width:40px; height:40px; }
}

@media (max-width: 640px){
  .container{ width: calc(100% - 26px); }
  .nav{ padding: 12px 12px; }
  .nav-link.btn-pill{ display:none; }

  .hero-actions{ flex-direction:column; align-items:center; }
  .modal-video-wrap{ padding: 16px; }

  .discord-fab{ width:68px; height:68px; right:14px; bottom:14px; border-radius:20px; }
  .discord-fab img{ width:36px; height:36px; }
}
/* ===== Reveal on scroll ===== */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(2px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; transform:none; filter:none; opacity:1; }
}
.hover-underline{
  position: relative;
  display: inline-block;
}

.hover-underline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: currentColor; /* نفس لون النص */
  transition: width .25s ease;
}

.hover-underline:hover::after{
  width: 100%;
}