/* ════════════════════════════════
   DESIGN SYSTEM — LIGHT / WHITE-GOLD
   Ground: warm ivory #FAF7F0
   Primary text: deep warm ink #2C2415
   Gold: #A0720A (dark) / #C9960E (mid) / #E8B830 (bright)
   Teal: #0D6B52 (dark) / #1A9B76 (mid)
   ════════════════════════════════ */

:root {
  --ivory:       #FAF7F0;
  --ivory2:      #F3EEE3;
  --ivory3:      #EBE4D5;
  --ivory4:      #E0D8C8;
  --ink:         #2C2415;
  --ink2:        #4A3C22;
  --ink3:        #6B5838;
  --gold-bright: #E8B830;
  --gold:        #C9960E;
  --gold-deep:   #A0720A;
  --gold-darker: #7A5408;
  --gold-dim:    rgba(169,120,15,0.12);
  --gold-line:   rgba(169,120,15,0.28);
  --gold-line2:  rgba(169,120,15,0.18);
  --teal:        #1D9E75;
  --teal-dark:   #0F6E56;
  --teal-dim:    rgba(29,158,117,0.15);
  --serif:       'Cormorant Garamond','Palatino Linotype',serif;
  --serif2:      'EB Garamond','Georgia',serif;
  --display:     'Cinzel','Trajan Pro',serif;
  --arabic:      'Traditional Arabic','Scheherazade New','Arabic Typesetting',serif;
}

/* ════════════════════════════════
   DARK MODE COLOR SCHEME
   ════════════════════════════════ */
[data-theme="dark"] {
  --ivory:       #080808;
  --ivory2:      #0f0f0f;
  --ivory3:      #161616;
  --ivory4:      rgba(212,169,64,0.1);
  --ink:         #F2D98A;
  --ink2:        rgba(212,169,64,0.8);
  --ink3:        rgba(212,169,64,0.55);
  --gold-bright: #F2D98A;
  --gold:        #D4A940;
  --gold-deep:   #D4A940;
  --gold-darker: #8A6A10;
  --gold-dim:    rgba(212,169,64,0.18);
  --gold-line:   rgba(212,169,64,0.35);
  --gold-line2:  rgba(212,169,64,0.15);
  --teal:        #1D9E75;
  --teal-dark:   #0F6E56;
  --teal-dim:    rgba(29,158,117,0.15);
}

[data-theme="dark"] body {
  background: #080808;
  color: #F2D98A;
}

[data-theme="dark"] ::-webkit-scrollbar-track { background: #080808; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #8A6A10; }

[data-theme="dark"] nav {
  background: rgba(8,8,8,0.92);
}

[data-theme="dark"] .nav-links a {
  color: rgba(212,169,64,0.65);
}

[data-theme="dark"] .nav-cta {
  color: #080808 !important;
  background: #D4A940;
}

[data-theme="dark"] .nav-cta:hover { background: #F2D98A !important; }

[data-theme="dark"] body::before {
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(212,169,64,0.04) 80px),
    repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(212,169,64,0.04) 80px);
  background-size: 80px 80px;
}

[data-theme="dark"] .hero-wash {
  background: radial-gradient(ellipse, rgba(212,169,64,0.07) 0%, transparent 70%);
}

[data-theme="dark"] .btn-primary {
  color: #080808;
  background: #D4A940;
}

[data-theme="dark"] .btn-primary:hover { background: #F2D98A; }

[data-theme="dark"] .btn-ghost {
  color: #D4A940;
  border-color: rgba(212,169,64,0.35);
}

[data-theme="dark"] .btn-ghost:hover { border-color: #D4A940; color: #F2D98A; background: rgba(212,169,64,0.05); }

[data-theme="dark"] .stats-bar {
  background: #0f0f0f;
}

[data-theme="dark"] .stat-label { color: rgba(212,169,64,0.55); }

[data-theme="dark"] .about-card { background: #0f0f0f; }
[data-theme="dark"] .about-card:hover { background: #161616; }

[data-theme="dark"] .quote-block {
  background: #0f0f0f;
  border-left-color: #D4A940;
}

[data-theme="dark"] .quote-arabic-bg { color: rgba(212,169,64,0.06); }
[data-theme="dark"] .quote-text { color: rgba(212,169,64,0.8); }
[data-theme="dark"] .quote-attr { color: rgba(212,169,64,0.55); }

[data-theme="dark"] .why-card { background: #0f0f0f; }
[data-theme="dark"] .why-card:hover { border-color: #D4A940; box-shadow: none; }

[data-theme="dark"] .alt-bg { background: #0f0f0f; }

[data-theme="dark"] .stage-card { background: #0f0f0f; }
[data-theme="dark"] .stage-card:hover { background: #161616; }

[data-theme="dark"] .sb-1 { color: #7CBA5A; border-color: #3d6e2a; background: rgba(124,186,90,0.1); }
[data-theme="dark"] .sb-2 { color: #5A9BDA; border-color: #2a5a8a; background: rgba(90,155,218,0.1); }
[data-theme="dark"] .sb-3 { color: #DA5A5A; border-color: #8a2a2a; background: rgba(218,90,90,0.1); }

[data-theme="dark"] .arena-card { background: #080808; }
[data-theme="dark"] .arena-card:hover { background: #161616; }
[data-theme="dark"] .arena-card.featured { background: linear-gradient(180deg, rgba(212,169,64,0.06) 0%, transparent 100%); }
[data-theme="dark"] .arena-card.featured::before { color: #080808; background: #D4A940; }

[data-theme="dark"] .grand-band {
  background: #0f0f0f;
  border-top: 0.5px solid rgba(212,169,64,0.35);
  border-bottom: 0.5px solid rgba(212,169,64,0.35);
}
[data-theme="dark"] .grand-band::before { display: none; }
[data-theme="dark"] .grand-band-pattern { display: none; }
[data-theme="dark"] .grand-headline { color: #F2D98A; }
[data-theme="dark"] .format-label { color: #D4A940; }
[data-theme="dark"] .format-sub { color: rgba(212,169,64,0.55); }
[data-theme="dark"] .format-sep { background: rgba(212,169,64,0.35); }

[data-theme="dark"] .study-card-header { background: #0f0f0f; }
[data-theme="dark"] .study-card-body { background: #080808; }
[data-theme="dark"] .flashcard-demo { background: #0f0f0f; }

[data-theme="dark"] .method-card { background: #080808; }
[data-theme="dark"] .method-card:hover { background: #161616; }

[data-theme="dark"] .difficulty-bar { background: #0f0f0f; }
[data-theme="dark"] .diff-bar-wrap { background: rgba(212,169,64,0.1); }
[data-theme="dark"] .dn-1 { color: #7CBA5A; }
[data-theme="dark"] .dn-2 { color: #5A9BDA; }
[data-theme="dark"] .dn-3 { color: #DA5A5A; }
[data-theme="dark"] .dbf-1 { background: #7CBA5A; }
[data-theme="dark"] .dbf-2 { background: #5A9BDA; }
[data-theme="dark"] .dbf-3 { background: #DA5A5A; }

[data-theme="dark"] .step-card { background: #0f0f0f; }
[data-theme="dark"] .step-card:hover { background: #161616; }
[data-theme="dark"] .step-num { color: rgba(212,169,64,0.15); }

[data-theme="dark"] .faq-list { border-color: rgba(212,169,64,0.35); }
[data-theme="dark"] .faq-item { border-color: rgba(212,169,64,0.15); }
[data-theme="dark"] .faq-q { background: #080808; }
[data-theme="dark"] .faq-q:hover { background: #161616; }
[data-theme="dark"] .faq-a { background: #0f0f0f; }

[data-theme="dark"] .cta-section { background: #080808; }
[data-theme="dark"] .cta-section::before {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212,169,64,0.05) 0%, transparent 70%);
}
[data-theme="dark"] .cta-arabic { color: rgba(212,169,64,0.3); }

[data-theme="dark"] footer {
  background: #0f0f0f;
  border-top: 0.5px solid rgba(212,169,64,0.35);
}
[data-theme="dark"] .footer-top { border-color: rgba(212,169,64,0.15); }
[data-theme="dark"] .footer-brand-desc { color: rgba(212,169,64,0.4); }
[data-theme="dark"] .footer-col-title { color: rgba(212,169,64,0.55); }
[data-theme="dark"] .footer-links a { color: rgba(212,169,64,0.45); }
[data-theme="dark"] .footer-bottom a { color: rgba(212,169,64,0.45); }
[data-theme="dark"] .footer-copy { color: rgba(212,169,64,0.6); }
[data-theme="dark"] .dl-store-btn { background:#0f0f0f; border-color:rgba(212,169,64,0.35); color:#F2D98A; }
[data-theme="dark"] .dl-store-btn:hover { background:#161616; border-color:#D4A940; }
[data-theme="dark"] .dl-store-btn .dsb-label { color:rgba(212,169,64,0.55); }
[data-theme="dark"] .dl-store-btn .dsb-name { color:#F2D98A; }


/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  height: 70px;
  background: rgba(250, 247, 240, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gold-line);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.nav-logo-mark {
  width: 42px;
  height: 42px;
}

.nav-brand-main {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
  line-height: 1;
}

.nav-brand-sub {
  font-family: var(--serif2);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--teal);
  line-height: 1;
  margin-top: 3px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: var(--serif2);
  font-family: sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink3);
  text-decoration: none;
  transition: color .2s;
}

.nav-links a:hover {
  color: var(--gold-deep);
}

.nav-cta {
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ivory) !important;
  background: var(--gold-deep);
  padding: 9px 22px;
  border-radius: 1px;
  transition: background .2s !important;
}

.nav-cta:hover {
  background: var(--gold) !important;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--gold-line);
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 1px;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.theme-toggle-icon {
  font-size: 14px;
  line-height: 1;
  transition: transform .4s ease;
}
.theme-toggle-label {
  /* font-family: var(--serif2); */
  font-family: sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink3);
  text-transform: uppercase;
  white-space: nowrap;
}
[data-theme="dark"] .theme-toggle {
  border-color: rgba(212,169,64,0.35);
}
[data-theme="dark"] .theme-toggle:hover {
  border-color: #D4A940;
  background: rgba(212,169,64,0.08);
}
[data-theme="dark"] .theme-toggle-label {
  color: rgba(212,169,64,0.65);
}


/* ── HAMBURGER ── */
.nav-hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:38px; height:38px;
  background:none; border:1px solid var(--gold-line);
  border-radius:1px; cursor:pointer; padding:0; flex-shrink:0;
  transition:border-color .2s,background .2s;
}
.nav-hamburger:hover { border-color:var(--gold); background:var(--gold-dim); }
.nav-hamburger span {
  display:block; width:18px; height:1.2px;
  background:var(--gold-deep); border-radius:1px;
  transition:transform .3s ease,opacity .3s ease,width .3s ease;
  transform-origin:center;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6.2px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; width:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6.2px) rotate(-45deg); }
[data-theme="dark"] .nav-hamburger { border-color:rgba(212,169,64,0.35); }
[data-theme="dark"] .nav-hamburger:hover { border-color:#D4A940; background:rgba(212,169,64,0.08); }
[data-theme="dark"] .nav-hamburger span { background:#D4A940; }

/* ── MOBILE DRAWER ── */
.nav-drawer {
  position:fixed; top:70px; left:0; right:0; z-index:99;
  background:rgba(250,247,240,0.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gold-line);
  transform:translateY(-8px);
  opacity:0; pointer-events:none;
  transition:transform .3s ease,opacity .3s ease;
}
.nav-drawer.open { transform:translateY(0); opacity:1; pointer-events:all; }
.nav-drawer-inner { display:flex; flex-direction:column; padding:20px 28px 28px; gap:2px; }
.nav-drawer a {
  font-family:var(--serif2); font-size:15px; letter-spacing:0.1em;
  color:var(--ink3); text-decoration:none;
  padding:13px 4px; border-bottom:1px solid var(--gold-line2);
  transition:color .2s,padding-left .2s; display:block;
}
.nav-drawer a:last-child { border-bottom:none; }
.nav-drawer a:hover { color:var(--gold-deep); padding-left:8px; }
.nav-drawer .drawer-cta {
  margin-top:14px;
  font-family:var(--display); font-size:11px; letter-spacing:0.18em;
  color:var(--ivory) !important; background:var(--gold-deep);
  padding:13px 28px; text-align:center; border-bottom:none !important;
  border-radius:1px; transition:background .2s !important;
}
.nav-drawer .drawer-cta:hover { background:var(--gold) !important; padding-left:28px !important; }
[data-theme="dark"] .nav-drawer { background:rgba(8,8,8,0.97); border-color:rgba(212,169,64,0.35); }
[data-theme="dark"] .nav-drawer a { color:rgba(212,169,64,0.65); border-color:rgba(212,169,64,0.1); }
[data-theme="dark"] .nav-drawer a:hover { color:#D4A940; }
[data-theme="dark"] .nav-drawer .drawer-cta { color:#080808 !important; background:#D4A940; }
[data-theme="dark"] .nav-drawer .drawer-cta:hover { background:#F2D98A !important; }
 
@media(max-width:900px){
  .nav-hamburger { display:flex; }
}


.dl-store-btns { display:flex; gap:16px; flex-wrap:wrap; }
.dl-store-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ivory);
  border: 1px solid var(--gold-line);
  padding: 14px 24px;
  border-radius: 2px;
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
  min-width: 180px;
}
.dl-store-btn:hover { border-color:var(--gold); background:var(--ivory2); transform:translateY(-2px); }
.dl-store-btn svg { width:26px; height:26px; flex-shrink:0; }
.dsb-text { display:flex; flex-direction:column; }
.dsb-label { font-family:var(--display); font-size:8px; letter-spacing:0.2em; color:var(--ink3); line-height:1; margin-bottom:3px; }
.dsb-name { font-family:var(--display); font-size:15px; letter-spacing:0.08em; color:var(--ink); line-height:1; }


/* ── FOOTER ── */
footer {
  background: var(--ink);
  color: var(--ivory2);
  padding: 64px 60px 40px;
  border-top: 4px solid var(--gold-deep);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250, 247, 240, 0.1);
  margin-bottom: 32px;
}

.footer-brand-name {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 4px;
}

.footer-brand-sub {
  font-family: var(--serif2);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--teal);
  margin-bottom: 14px;
}

.footer-brand-desc {
  font-family: var(--serif2);
  font-size: 13px;
  color: rgba(250, 247, 240, 0.4);
  line-height: 1.75;
}

.footer-col-title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(250, 247, 240, 0.35);
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-links a {
  font-family: var(--serif2);
  font-size: 14px;
  color: rgba(250, 247, 240, 0.6);
  text-decoration: none;
  transition: color .2s;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-family: var(--serif2);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(250, 247, 240, 0.2);
}

.footer-bottom a {
  font-size: 14px;
  color: rgba(250, 247, 240, 0.6);
  text-decoration: none;
  margin-left: 15px;
}

.footer-bottom a:hover {
  color: var(--gold);
}


.footer-bottom a {
  font-size: 14px;
  color: rgba(250, 247, 240, 0.6);
  text-decoration: none;
  margin-left: 15px;
}

.footer-bottom a:hover {
  color: var(--gold);
}


.social-links {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-link {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #000;
}

.social-link:hover {
  background: var(--gold-bright);
  color: var(--ink2);
}

[data-theme="dark"] .social-link:hover {
  color: var(--ivory2);
}