/* ═══════════════════════════════════
   THMANYAH FONTS
═══════════════════════════════════ */
@font-face { font-family:'Thmanyah'; src:url('thmanyahsans-Light.woff2') format('woff2'); font-weight:300; }
@font-face { font-family:'Thmanyah'; src:url('thmanyahsans-Regular.woff2') format('woff2'); font-weight:400; }
@font-face { font-family:'Thmanyah'; src:url('thmanyahsans-Medium.woff2') format('woff2'); font-weight:500; }
@font-face { font-family:'Thmanyah'; src:url('thmanyahsans-Bold.woff2') format('woff2'); font-weight:700; }
@font-face { font-family:'Thmanyah'; src:url('thmanyahsans-Black.woff2') format('woff2'); font-weight:900; }

/* ═══════════════════════════════════
   BASE
═══════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body.client-body {
  font-family:'Thmanyah', sans-serif;
  background:#130321;
  color:#e8eaf6;
  direction:rtl;
  overflow-x:hidden;
}

.container { max-width:1160px; margin:0 auto; padding:0 48px; }

/* ═══════════════════════════════════
   HEADER
═══════════════════════════════════ */
.client-header {
  position:fixed; top:0; right:0; left:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 48px;
  transition:background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.client-header.scrolled {
  background:rgba(19,3,33,.92);
  backdrop-filter:blur(24px);
  border-bottom-color:rgba(255,255,255,.07);
}

.client-logo { display:flex; align-items:center; gap:14px; }

.logo-mark {
  display:flex; align-items:center; gap:10px;
  font-size:1.2rem; font-weight:700; color:#fff;
  font-family:'Thmanyah', sans-serif;
}
.logo-mark-icon {
  width:40px; height:40px;
  background:linear-gradient(135deg,#9333ea,#6d28d9);
  border-radius:11px; display:grid; place-items:center;
  font-size:20px; box-shadow:0 4px 20px rgba(147,51,234,.5);
  overflow:hidden;
}
/* صورة الشعار — تستبدل الأيقون لما تضيف صورتك */
.logo-mark-icon img {
  width:100%; height:100%; object-fit:cover; border-radius:11px;
}
.logo-img-placeholder {
  width:40px; height:40px; border-radius:11px;
  object-fit:contain;
  box-shadow:0 4px 20px rgba(147,51,234,.4);
}

.ministry-img { height:40px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; }

.client-nav { display:flex; align-items:center; gap:2px; }
.client-nav a {
  color:rgba(255,255,255,.65); text-decoration:none;
  font-size:.92rem; font-weight:500; padding:8px 16px; border-radius:30px;
  transition:all .2s; font-family:'Thmanyah', sans-serif;
}
.client-nav a:hover { color:#fff; background:rgba(255,255,255,.08); }

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; overflow:hidden; direction:rtl;
  background:
    radial-gradient(ellipse 65% 65% at 5% 95%, rgba(130,40,210,.6) 0%, transparent 58%),
    radial-gradient(ellipse 55% 55% at 90% 5%, rgba(80,20,160,.4) 0%, transparent 55%),
    radial-gradient(ellipse 90% 90% at 50% 50%, #2a0855 0%, #130321 68%);
}

.orb { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; }
.orb1 { width:580px; height:580px; background:radial-gradient(circle,rgba(139,62,218,.48) 0%,transparent 70%); bottom:-140px; right:-60px; }
.orb2 { width:360px; height:360px; background:radial-gradient(circle,rgba(80,28,220,.38) 0%,transparent 70%); top:30px; left:28%; }
.orb3 { width:250px; height:250px; background:radial-gradient(circle,rgba(220,60,180,.2) 0%,transparent 70%); top:25%; left:8%; }

.hero-inner {
  position:relative; z-index:10; width:100%; max-width:1280px;
  margin:0 auto; padding:80px 64px 0;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}

.hero-content { flex:1; max-width:560px; display:flex; flex-direction:column; align-items:flex-start; }

.hero-visual { flex-shrink:0; width:400px; height:400px; display:flex; align-items:center; justify-content:center; position:relative; }
.fanjan-wrap { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.fanjan-img {
  width:380px; height:auto; object-fit:contain;
  animation:fanjan-float 5s ease-in-out infinite;
  filter:drop-shadow(0 24px 60px rgba(139,62,218,.55)) drop-shadow(0 8px 24px rgba(139,62,218,.3));
  position:relative; z-index:2;
}
.fanjan-glow {
  position:absolute; bottom:10%; left:50%; transform:translateX(-50%);
  width:260px; height:60px;
  background:radial-gradient(ellipse,rgba(139,62,218,.55) 0%,transparent 70%);
  filter:blur(20px); animation:fanjan-shadow 5s ease-in-out infinite; z-index:1;
}
@keyframes fanjan-float { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-22px) rotate(-4deg)} }
@keyframes fanjan-shadow { 0%,100%{opacity:.7;transform:translateX(-50%) scaleX(1)} 50%{opacity:.4;transform:translateX(-50%) scaleX(.8)} }

.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:30px; padding:9px 20px; font-size:.88rem; color:rgba(255,255,255,.8);
  margin-bottom:28px; backdrop-filter:blur(10px); font-family:'Thmanyah',sans-serif; font-weight:500;
}
.hero-badge-dot { width:8px; height:8px; background:#c084fc; border-radius:50%; box-shadow:0 0 10px #a855f7; animation:blink 2s ease infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.hero-title { font-family:'Thmanyah',sans-serif; font-weight:900; color:#fff; line-height:1.07; margin-bottom:22px; text-align:right; width:100%; }
.hero-line1, .hero-line2 { display:block; font-size:clamp(3rem,6.5vw,6rem); letter-spacing:-1.5px; }
.hero-accent { background:linear-gradient(90deg,#f0abfc,#a855f7,#818cf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.hero-sub { font-size:1rem; color:rgba(255,255,255,.52); margin-bottom:42px; font-family:'Thmanyah',sans-serif; font-weight:400; line-height:1.9; text-align:right; width:100%; }

.hero-form { width:100%; max-width:500px; }
.hero-input-wrap {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:7px; backdrop-filter:blur(14px);
  transition:border-color .25s, box-shadow .25s;
}
.hero-input-wrap:focus-within { border-color:rgba(168,85,247,.65); box-shadow:0 0 0 3px rgba(168,85,247,.13),0 10px 36px rgba(168,85,247,.18); }

.hero-input {
  flex:1 !important; background:transparent !important; border:none !important; outline:none !important;
  color:#fff !important; font-family:'Courier New',monospace !important; font-size:1.05rem !important;
  font-weight:700 !important; letter-spacing:3px !important; text-align:center !important;
  padding:13px 14px !important; direction:ltr !important; box-shadow:none !important; min-width:0 !important;
}
.hero-input::placeholder { color:rgba(255,255,255,.25) !important; letter-spacing:2px; font-weight:400; }

.hero-btn {
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#a855f7,#7c3aed); border:none; border-radius:13px;
  color:#fff; font-family:'Thmanyah',sans-serif; font-size:.92rem; font-weight:700;
  padding:13px 22px; cursor:pointer; white-space:nowrap; transition:all .2s;
  box-shadow:0 4px 20px rgba(124,58,237,.45);
}
.hero-btn:hover { background:linear-gradient(135deg,#c084fc,#9333ea); transform:translateY(-1px); box-shadow:0 8px 28px rgba(124,58,237,.6); }
.hero-btn svg { transform:rotate(180deg); }

.client-alert { margin-top:14px; font-size:.88rem; font-family:'Thmanyah',sans-serif; border-radius:12px; padding:0; color:transparent; text-align:center; transition:all .25s; }
.client-alert.show-err { color:#fca5a5; background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.22); padding:12px 18px; }
.client-alert.show-ok  { color:#86efac; background:rgba(134,239,172,.1); border:1px solid rgba(134,239,172,.22); padding:12px 18px; }

.scroll-hint {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  width:42px; height:42px; border:1px solid rgba(255,255,255,.16); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.4); text-decoration:none; z-index:10;
  animation:bobDown 2.4s ease-in-out infinite;
}
.scroll-hint:hover { border-color:rgba(168,85,247,.6); color:#c084fc; }
@keyframes bobDown { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ═══════════════════════════════════
   GAMES REVEALED
═══════════════════════════════════ */
.games-reveal {
  direction:rtl;
  background:radial-gradient(ellipse 70% 50% at 10% 60%,rgba(79,15,143,.32) 0%,transparent 60%),linear-gradient(180deg,#130321 0%,#0e0120 100%);
  padding:90px 0;
}
.games-reveal-inner { max-width:1160px; margin:0 auto; padding:0 48px; }
.games-reveal-header { text-align:center; margin-bottom:52px; }
.games-reveal-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.26); border-radius:30px; padding:7px 20px; font-size:.83rem; color:#c084fc; margin-bottom:16px; font-family:'Thmanyah',sans-serif; font-weight:500; }
.games-reveal-title { font-family:'Thmanyah',sans-serif; font-weight:900; font-size:clamp(2rem,4vw,3rem); color:#fff; margin-bottom:10px; }
.games-reveal-sub { color:rgba(255,255,255,.42); font-size:.95rem; font-family:'Thmanyah',sans-serif; }

.games-grid-client { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:24px; }
.game-card-client { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; overflow:hidden; transition:all .25s; }
.game-card-client:hover { border-color:rgba(168,85,247,.48); transform:translateY(-6px); box-shadow:0 20px 50px rgba(124,58,237,.26); }
.game-card-img { width:100%; height:155px; background:linear-gradient(135deg,rgba(88,28,135,.7),rgba(59,7,100,.9)); display:flex; align-items:center; justify-content:center; font-size:3.5rem; position:relative; overflow:hidden; }
.game-card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.game-card-body { padding:20px; }
.game-card-name { font-family:'Thmanyah',sans-serif; font-weight:700; font-size:1rem; color:#fff; margin-bottom:6px; }
.game-card-desc { font-family:'Thmanyah',sans-serif; font-size:.84rem; color:rgba(255,255,255,.45); margin-bottom:16px; line-height:1.65; }
.game-card-link { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:linear-gradient(135deg,#a855f7,#7c3aed); color:#fff; border-radius:12px; padding:12px; text-decoration:none; font-family:'Thmanyah',sans-serif; font-weight:700; font-size:.92rem; transition:all .2s; box-shadow:0 4px 18px rgba(124,58,237,.32); }
.game-card-link:hover { background:linear-gradient(135deg,#c084fc,#9333ea); box-shadow:0 8px 26px rgba(124,58,237,.52); }
.game-card-link svg { transform:rotate(180deg); }
.empty-client { text-align:center; padding:60px 20px; color:rgba(255,255,255,.3); font-family:'Thmanyah',sans-serif; grid-column:1/-1; }
.empty-client .icon { font-size:3rem; margin-bottom:14px; }

/* ═══════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════ */
.section-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(168,85,247,.1); border:1px solid rgba(168,85,247,.24); border-radius:30px; padding:7px 20px; font-size:.83rem; color:#c084fc; font-family:'Thmanyah',sans-serif; font-weight:500; margin-bottom:18px; }
.section-title { font-family:'Thmanyah',sans-serif; font-weight:900; font-size:clamp(1.9rem,4vw,2.9rem); color:#fff; margin-bottom:12px; line-height:1.15; }
.section-sub { color:rgba(255,255,255,.42); font-size:.97rem; font-family:'Thmanyah',sans-serif; margin-bottom:52px; }

/* ═══════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════ */
.section-how {
  padding:110px 0; text-align:center;
  background:radial-gradient(ellipse 60% 50% at 90% 50%,rgba(79,15,143,.25) 0%,transparent 60%),linear-gradient(180deg,#0e0120 0%,#130321 100%);
}
.steps-grid { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.step-card {
  flex:1; min-width:240px; max-width:320px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:24px; padding:36px 28px;
  transition:all .3s; opacity:0; transform:translateY(28px);
}
.step-card.visible { opacity:1; transform:translateY(0); }
.step-card:hover { border-color:rgba(168,85,247,.4); background:rgba(168,85,247,.05); transform:translateY(-4px); }
.step-num { font-family:'Thmanyah',sans-serif; font-weight:900; font-size:3.5rem; color:rgba(168,85,247,.18); line-height:1; margin-bottom:16px; }
.step-icon-wrap { width:56px; height:56px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; transition:transform .3s; }
.step-card:hover .step-icon-wrap { transform:scale(1.1) rotate(-4deg); }
.step-icon-orange { background:rgba(251,146,60,.12); border:1px solid rgba(251,146,60,.22); box-shadow:0 4px 16px rgba(251,146,60,.15); }
.step-icon-blue   { background:rgba(96,165,250,.12);  border:1px solid rgba(96,165,250,.22);  box-shadow:0 4px 16px rgba(96,165,250,.15); }
.step-icon-purple { background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.22); box-shadow:0 4px 16px rgba(167,139,250,.15); }
.step-title { font-family:'Thmanyah',sans-serif; font-weight:700; font-size:1.08rem; color:#fff; margin-bottom:10px; }
.step-desc  { font-family:'Thmanyah',sans-serif; font-size:.87rem; color:rgba(255,255,255,.44); line-height:1.8; }

/* ═══════════════════════════════════
   BENTO GRID — FEATURES
═══════════════════════════════════ */
.section-features {
  padding:110px 0; text-align:center;
  background:radial-gradient(ellipse 70% 60% at 15% 40%,rgba(100,20,180,.3) 0%,transparent 60%),linear-gradient(180deg,#130321 0%,#0e0120 100%);
}

.bento-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 260px 220px;
  gap:16px;
  text-align:right;
  direction:rtl;
}

/* الكارد الأساسي */
.bento-card {
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:28px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .28s, transform .28s, box-shadow .28s;
  opacity:0; transform:translateY(22px);
}
.bento-card.visible { opacity:1; transform:translateY(0); }
.bento-card:hover { border-color:rgba(168,85,247,.35); transform:translateY(-4px); box-shadow:0 20px 48px rgba(124,58,237,.16); }

/* tall: يمتد صفّين — العمود الأول */
.bento-tall {
  grid-column:1;
  grid-row:1 / 3;
  justify-content:flex-end;
}
.bento-tall .bento-icon-box { margin-bottom:auto; }

/* wide: يمتد عمودين — الصف الثاني عمود 2+3 */
.bento-wide {
  grid-column:2 / 4;
  grid-row:2;
  flex-direction:row;
  align-items:center;
  gap:24px;
}
.bento-wide .bento-text { flex:1; }
.bento-devices { font-size:2rem; opacity:.55; flex-shrink:0; letter-spacing:6px; }

/* ألوان accent */
.bento-yellow { background:linear-gradient(145deg,rgba(250,204,21,.07) 0%,rgba(255,255,255,.02) 60%); border-color:rgba(250,204,21,.15); }
.bento-gold   { background:linear-gradient(145deg,rgba(251,191,36,.06) 0%,rgba(255,255,255,.02) 60%); border-color:rgba(251,191,36,.12); }

/* رقم خلفية */
.bento-num {
  position:absolute; bottom:14px; left:18px;
  font-family:'Thmanyah',sans-serif; font-weight:900;
  font-size:5.5rem; color:rgba(255,255,255,.03);
  line-height:1; pointer-events:none; user-select:none; direction:ltr;
}

/* blob glow */
.bento-blob {
  position:absolute; width:200px; height:200px; border-radius:50%;
  filter:blur(65px); pointer-events:none;
  top:-50px; left:-50px; opacity:.45; transition:opacity .3s;
}
.bento-card:hover .bento-blob { opacity:.75; }
.blob-yellow { background:rgba(250,204,21,.2); }
.blob-purple { background:rgba(167,139,250,.2); }
.blob-red    { background:rgba(248,113,113,.2); }
.blob-blue   { background:rgba(96,165,250,.2); }
.blob-gold   { background:rgba(251,191,36,.2); }

/* أيقونة */
.bento-icon-box {
  width:56px; height:56px; border-radius:15px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative; z-index:1;
  transition:transform .3s; margin-bottom:0;
}
.bento-card:hover .bento-icon-box { transform:scale(1.08) rotate(-4deg); }

.icon-yellow { background:rgba(250,204,21,.12);  border:1px solid rgba(250,204,21,.22);  box-shadow:0 4px 16px rgba(250,204,21,.15); }
.icon-purple { background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.22); box-shadow:0 4px 16px rgba(167,139,250,.15); }
.icon-red    { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.22); box-shadow:0 4px 16px rgba(248,113,113,.15); }
.icon-blue   { background:rgba(96,165,250,.12);  border:1px solid rgba(96,165,250,.22);  box-shadow:0 4px 16px rgba(96,165,250,.15); }
.icon-gold   { background:rgba(251,191,36,.12);  border:1px solid rgba(251,191,36,.22);  box-shadow:0 4px 16px rgba(251,191,36,.15); }

/* نص */
.bento-text { position:relative; z-index:1; }
.bento-title { font-family:'Thmanyah',sans-serif; font-weight:700; font-size:1.08rem; color:#fff; margin-bottom:10px; margin-top:18px; }
.bento-tall .bento-title { font-size:1.3rem; }
.bento-desc  { font-family:'Thmanyah',sans-serif; font-size:.87rem; color:rgba(255,255,255,.44); line-height:1.8; }
.bento-tall .bento-desc { font-size:.93rem; color:rgba(255,255,255,.5); }

/* ═══════════════════════════════════
   FAQ
═══════════════════════════════════ */
.section-faq {
  padding:110px 0; text-align:center;
  background:radial-gradient(ellipse 55% 50% at 85% 50%,rgba(79,15,143,.28) 0%,transparent 60%),linear-gradient(180deg,#0e0120 0%,#130321 100%);
}
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; text-align:right; }
.faq-item { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:16px; overflow:hidden; transition:border-color .25s; opacity:0; transform:translateY(18px); }
.faq-item.visible { opacity:1; transform:translateY(0); }
.faq-item.open { border-color:rgba(168,85,247,.35); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 24px; gap:16px; background:transparent; border:none; cursor:pointer; font-family:'Thmanyah',sans-serif; font-size:.97rem; font-weight:600; color:#fff; text-align:right; transition:background .2s; }
.faq-q:hover { background:rgba(255,255,255,.03); }
.faq-arrow { flex-shrink:0; font-size:1rem; color:rgba(255,255,255,.4); transition:transform .28s,color .28s; display:inline-block; }
.faq-item.open .faq-arrow { transform:rotate(180deg); color:#c084fc; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a { max-height:200px; }
.faq-a p { padding:0 24px 22px; font-family:'Thmanyah',sans-serif; font-size:.9rem; color:rgba(255,255,255,.5); line-height:1.85; }

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
.site-footer { position:relative; background:#0a0118; padding:70px 0 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.06); }
.footer-glow { position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:200px; background:radial-gradient(ellipse,rgba(147,51,234,.2) 0%,transparent 70%); filter:blur(40px); pointer-events:none; }
.footer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:48px; padding-bottom:52px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-brand .logo-mark { margin-bottom:18px; }
.footer-tagline { font-family:'Thmanyah',sans-serif; font-size:.9rem; color:rgba(255,255,255,.38); line-height:1.8; }
.footer-links { display:flex; gap:60px; }
.footer-col { display:flex; flex-direction:column; gap:12px; }
.footer-col h4 { font-family:'Thmanyah',sans-serif; font-weight:700; font-size:.88rem; color:rgba(255,255,255,.7); margin-bottom:4px; }
.footer-col a { font-family:'Thmanyah',sans-serif; font-size:.9rem; color:rgba(255,255,255,.38); text-decoration:none; transition:color .2s; }
.footer-col a:hover { color:#c084fc; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.footer-bottom p { font-family:'Thmanyah',sans-serif; font-size:.85rem; color:rgba(255,255,255,.25); }
.footer-dots { display:flex; gap:6px; }
.footer-dots span { width:6px; height:6px; border-radius:50%; background:rgba(168,85,247,.4); }
.footer-dots span:first-child { background:#a855f7; }

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (max-width:1024px) {
  .bento-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .bento-tall { grid-column:1; grid-row:1; }
  .bento-wide { grid-column:1 / 3; grid-row:auto; }
}
@media (max-width:900px) {
  .hero-inner { padding:0 32px; }
  .hero-visual { width:300px; height:300px; }
  .fanjan-img { width:280px; }
}
@media (max-width:720px) {
  .client-header { padding:16px 20px; }
  .client-nav { display:none; }
  .hero-inner { flex-direction:column-reverse; padding:0 24px; text-align:center; padding-top:60px; gap:24px; }
  .hero-content { align-items:center; max-width:100%; }
  .hero-title,.hero-sub { text-align:center; }
  .hero-visual { width:240px; height:240px; margin-top:80px; }
  .fanjan-img { width:220px; }
  .hero-input-wrap { flex-direction:column; }
  .hero-btn { width:100%; justify-content:center; }
  .hero-form { max-width:100%; }
  .container { padding:0 20px; }
  .games-reveal-inner { padding:0 20px; }
  .section-how,.section-features,.section-faq { padding:70px 0; }
  .steps-grid { flex-direction:column; align-items:center; gap:16px; }
  .step-card { max-width:100%; }
  .bento-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .bento-tall,.bento-wide { grid-column:1; grid-row:auto; }
  .bento-wide { flex-direction:column; align-items:flex-start; }
  .bento-devices { display:none; }
  .footer-top { flex-direction:column; gap:32px; }
  .footer-links { gap:32px; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
}