/* ============ Home page ============ */
.hero { background:radial-gradient(1200px 500px at 85% -10%, rgba(47,106,153,.55), transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy-950)); color:#fff; overflow:hidden; position:relative; }
.hero::after { content:""; position:absolute; inset-inline-end:-140px; bottom:-220px; width:520px; height:520px; border-radius:50%; border:2px solid rgba(195,154,60,.28); pointer-events:none; }
.hero-inner { max-width:1040px; margin:0 auto; padding:clamp(28px,6vw,64px) clamp(14px,3vw,24px); display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center; }
.hero-text h2 { color:#fff; margin:0 0 14px; font-size:clamp(28px,4.4vw,46px); line-height:1.15; }
html[lang="ar"] .hero-text h2 { line-height:1.4; }
.lead { font-size:clamp(16px,2.2vw,19px); color:#d6e3ee; max-width:34em; margin:0 0 22px; }
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.hero-points { list-style:none; padding:0; margin:0; display:grid; gap:8px; color:#e6eef5; font-size:15px; }
.hero-points li { display:flex; gap:10px; align-items:center; }
.hero-points li::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--gold-400); }

/* the one animated moment: electrons orbiting the logo */
.orbit { position:relative; width:340px; height:340px; margin:0 auto; flex:none; }
.orbit-logo { position:absolute; inset:50% auto auto 50%; width:210px; height:210px; margin:-105px 0 0 -105px; border-radius:50%; box-shadow:0 0 0 3px var(--gold-500), 0 0 60px rgba(195,154,60,.35); background:#fff; }
.ring { position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--r)); }
.ring .path { position:absolute; width:320px; height:116px; left:-160px; top:-58px; border:1px solid rgba(213,177,90,.4); border-radius:50%; }
.ring .dx, .ring .dy { position:absolute; left:0; top:0; width:0; height:0; }
.ring .dx { animation:ox var(--t) cubic-bezier(.37,0,.63,1) infinite alternate; }
.ring .dy { animation:oy var(--t) cubic-bezier(.37,0,.63,1) infinite alternate; animation-delay:calc(var(--t) / -2); }
.ring .dot { position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%; background:var(--gold-300); box-shadow:0 0 14px 3px rgba(230,203,132,.7); }
@keyframes ox { from { transform:translateX(-160px); } to { transform:translateX(160px); } }
@keyframes oy { from { transform:translateY(-58px); } to { transform:translateY(58px); } }

/* ---------- sections ---------- */
.wrap { max-width:1040px; margin:0 auto; padding:0 clamp(12px,3vw,24px); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.section-head h2 { margin:0; font-size:clamp(22px,3.4vw,30px); }

.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:-34px auto 0; position:relative; z-index:2; }
.pillar { text-align:start; display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); font-weight:400; border-top:4px solid var(--k); }
.pillar:hover { background:var(--card); transform:translateY(-3px); box-shadow:0 10px 28px rgba(18,41,63,.16); }
.pillar h3 { margin:6px 0 0; font-size:19px; }
.pillar p { margin:0; font-size:14px; color:var(--muted); }
.pillar .count { margin-top:auto; padding-top:8px; font-size:13px; font-weight:700; color:var(--k-text); }
.ficon { width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--k-soft); color:var(--k-text); flex:none; }
.ficon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.k-notebook { --k:#2f6a99; --k-soft:#e4eef6; --k-text:#1c4670; }
.k-summary  { --k:#c39a3c; --k-soft:#faf1d9; --k-text:#8a6b1f; }
.k-test     { --k:#1f8c84; --k-soft:#dff3f1; --k-text:#116761; }

.catalog { padding:48px 0 20px; }
.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:16px; }
.toolbar .tabs { margin:0; }
.toolbar select { width:auto; min-width:150px; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.fcard { position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .18s, box-shadow .18s; }
.fcard::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--k); }
.fcard:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.fcard-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.fcard h3 { margin:0; font-size:17px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--sky-100); color:var(--navy-700); }
.chip.kind { background:var(--k-soft); color:var(--k-text); }
.fbadge { font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; }
.fbadge svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fbadge.free { background:var(--gold-500); color:var(--navy-950); }
.fbadge.lock { background:var(--sky-100); color:var(--navy-700); }
.fact { display:flex; gap:8px; margin-top:auto; padding-top:6px; }
.fact .btn, .fact button { flex:1 1 0; white-space:nowrap; padding-inline:10px; }
.fcard.is-locked .ficon { filter:saturate(.6); }
.skeleton { min-height:168px; border-radius:var(--r); background:linear-gradient(100deg,#e9f0f6 30%,#f6f9fc 50%,#e9f0f6 70%); background-size:300% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position:100% 0; } to { background-position:0 0; } }
.empty { grid-column:1/-1; text-align:center; padding:40px 16px; background:var(--card); border:1px dashed var(--navy-300); border-radius:var(--r); }
.empty .ficon { width:56px; height:56px; margin-bottom:8px; --k-soft:var(--sky-100); --k-text:var(--navy-700); }
.empty h3 { margin:6px 0; }

.steps { margin:34px 0 0; padding:36px 0 40px; background:var(--card); border-block:1px solid var(--line); }
.steps-list { list-style:none; margin:18px 0 22px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:s; }
.steps-list li { position:relative; padding-top:54px; }
.steps-list li::before { counter-increment:s; content:counter(s); position:absolute; top:0; inset-inline-start:0; width:40px; height:40px; border-radius:50%; background:var(--navy-700); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px var(--gold-100); }
.steps-list li::after { content:""; position:absolute; top:19px; inset-inline-start:50px; inset-inline-end:-10px; height:2px; background:repeating-linear-gradient(90deg, var(--gold-400) 0 6px, transparent 6px 12px); }
.steps-list li:last-child::after { display:none; }
.steps-list h3 { margin:0 0 4px; font-size:18px; }
.steps-list p { margin:0; color:var(--muted); font-size:15px; }

.site-footer { background:var(--navy-900); color:#d6e3ee; border-top:3px solid var(--gold-500); }
.foot-inner { max-width:1040px; margin:0 auto; padding:26px clamp(14px,3vw,24px); display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.foot-inner img { width:64px; height:64px; border-radius:50%; box-shadow:0 0 0 2px var(--gold-500); background:#fff; }
.foot-inner strong { display:block; color:#fff; font-size:17px; }
.foot-inner span { display:block; font-size:14px; opacity:.85; }
.foot-inner .btn { margin-inline-start:auto; }
.copy { text-align:center; font-size:12px; opacity:.6; padding:0 12px 18px; }

@media (max-width:820px) {
  .hero-inner { grid-template-columns:1fr; }
  .orbit { order:-1; transform:scale(.72); margin:-34px auto -50px; }
  .pillars { grid-template-columns:1fr; margin-top:-18px; }
  .steps-list { grid-template-columns:1fr; gap:6px; }
  .steps-list li { padding-top:0; padding-inline-start:56px; padding-bottom:14px; }
  .steps-list li::after { display:none; }
  .foot-inner .btn { margin-inline-start:0; }
}
@media (max-width:520px) {
  .bar .btn.ghost:not(:last-child) { display:none; }
}
#authBar.bar { margin-inline-start:0; }

/* about us */
.about { margin:46px 0 10px; padding:28px clamp(18px,4vw,34px); background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border-inline-start:5px solid var(--gold-500); }
.about h2 { margin:0 0 14px; font-size:clamp(24px,3.6vw,32px); }
.ab-list { display:grid; gap:16px; max-width:780px; }
.ab-block p { margin:0; font-size:17px; line-height:1.95; color:var(--ink); }
.ab-block:first-child p { font-weight:800; font-size:19px; }
.ab-block:last-child p { font-weight:800; color:var(--navy-500); border-top:1px dashed var(--gold-400); padding-top:14px; font-size:18px; }
html[data-theme="dark"] .ab-block:last-child p { color:var(--gold-300); }

/* appear gradually while scrolling */
.js-reveal .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0ms); }
.js-reveal .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .js-reveal .reveal { opacity:1; transform:none; transition:none; } }

/* night mode (home) */
html[data-theme="dark"] .skeleton { background:linear-gradient(100deg,#16304a 30%,#1d3b59 50%,#16304a 70%); background-size:300% 100%; }
html[data-theme="dark"] .k-notebook { --k-soft:#1b3550; --k-text:#9cc4e6; }
html[data-theme="dark"] .k-summary { --k-soft:#3a3016; --k-text:#e3c06c; }
html[data-theme="dark"] .k-test { --k-soft:#123a3a; --k-text:#6fd3c9; }
html[data-theme="dark"] .chip, html[data-theme="dark"] .fbadge.lock { color:#bcd3e6; }
html[data-theme="dark"] .chip.kind { color:var(--k-text); }
html[data-theme="dark"] .pillar:hover { box-shadow:0 10px 28px rgba(0,0,0,.45); }
html[data-theme="dark"] .steps-list li::before { background:var(--gold-500); color:var(--navy-950); box-shadow:0 0 0 4px #3a3016; }

/* background: soft navy and gold glow with a faint dotted grid, so the page is never plain white */

.home-bg { background:
  radial-gradient(700px 420px at 100% 520px, rgba(47,106,153,.16), transparent 65%),
  radial-gradient(650px 420px at 0 1100px, rgba(195,154,60,.16), transparent 65%),
  radial-gradient(700px 420px at 100% 1700px, rgba(31,140,132,.12), transparent 65%),
  radial-gradient(rgba(28,70,112,.10) 1.3px, transparent 1.6px) 0 0/28px 28px,
  linear-gradient(180deg, var(--sky-50), var(--bg)); }
html[data-theme="dark"] .home-bg { background:
  radial-gradient(700px 420px at 100% 520px, rgba(47,106,153,.28), transparent 65%),
  radial-gradient(650px 420px at 0 1100px, rgba(195,154,60,.14), transparent 65%),
  radial-gradient(700px 420px at 100% 1700px, rgba(31,140,132,.2), transparent 65%),
  radial-gradient(rgba(143,180,211,.12) 1.3px, transparent 1.6px) 0 0/28px 28px,
  var(--bg); }
.steps { background:linear-gradient(135deg, var(--navy-900), var(--navy-800)); border-block:0; color:#e6eef5; position:relative; overflow:hidden; }
.steps::before { content:""; position:absolute; inset:0; background:radial-gradient(rgba(230,203,132,.14) 1.3px, transparent 1.6px) 0 0/28px 28px; pointer-events:none; }
.steps .wrap { position:relative; }
.steps h2, .steps h3 { color:#fff !important; }
.steps p { color:#c9d9e6; }
.steps-list li::before { background:var(--gold-500); color:var(--navy-950); box-shadow:0 0 0 4px rgba(230,203,132,.25); }
.steps-list li::after { background:repeating-linear-gradient(90deg, rgba(230,203,132,.7) 0 6px, transparent 6px 12px); }

.live { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 16px; padding:14px 18px; border-radius:var(--r); background:linear-gradient(135deg,var(--navy-900),var(--navy-700)); color:#fff; border-inline-start:5px solid var(--gold-500); }
.live div { display:flex; flex-direction:column; gap:2px; } .live span { color:#d6e3ee; font-size:14px; }

/* Google button (white, official colors) */
.gbtn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:12px 16px; background:#fff; color:#3c4043; border:1px solid #dadce0; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); transition:box-shadow .15s, background .15s; }
.gbtn:hover { background:#f8f9fa; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.gbtn svg { flex:none; }
.or { display:flex; align-items:center; gap:12px; margin:0 0 12px; color:var(--muted); font-size:13px; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }