*{box-sizing:border-box}
:root{
  --bg-0:#070b12;
  --bg-1:#0a1413;
  --card:rgba(255,255,255,.075);
  --card-strong:rgba(255,255,255,.12);
  --ink:#f7f4e9;
  --muted:rgba(247,244,233,.68);
  --soft:rgba(247,244,233,.48);
  --accent:#30e6b1;
  --accent-2:#47a8ff;
  --gold:#f5c86a;
  --border:rgba(255,255,255,.16);
  --border-strong:rgba(245,200,106,.34);
  --shadow:0 28px 90px rgba(0,0,0,.42);
  --radius:34px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 14% 10%,rgba(48,230,177,.22),transparent 26%),
    radial-gradient(circle at 82% 18%,rgba(71,168,255,.18),transparent 28%),
    radial-gradient(circle at 50% 92%,rgba(245,200,106,.13),transparent 34%),
    linear-gradient(135deg,var(--bg-0),var(--bg-1) 54%,#09101b);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,transparent,black 8%,black 82%,transparent);
}
button,a{font:inherit}
a{color:inherit}
code{
  direction:ltr;
  unicode-bidi:embed;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.09rem .42rem;
  color:#d7fff4;
}
.page-shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:34px 0 62px;position:relative;z-index:1}
.hero{
  position:relative;
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:22px;
  align-items:stretch;
  margin:8px 0 28px;
}
.orb{position:absolute;border-radius:999px;filter:blur(8px);pointer-events:none;z-index:-1}
.orb-one{width:260px;height:260px;right:-80px;top:70px;background:radial-gradient(circle,rgba(48,230,177,.38),transparent 68%)}
.orb-two{width:320px;height:320px;left:-110px;bottom:-40px;background:radial-gradient(circle,rgba(245,200,106,.24),transparent 66%)}
.hero-copy,.hero-visual,.section,.quran-widget{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.055));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.hero-copy{padding:42px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.hero-copy:before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:calc(var(--radius) - 1px);
  background:radial-gradient(circle at 80% 12%,rgba(48,230,177,.13),transparent 34%),radial-gradient(circle at 6% 88%,rgba(245,200,106,.12),transparent 30%);
  pointer-events:none;
}
.hero-copy>*{position:relative;z-index:1}
.source-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--border-strong);
  background:linear-gradient(135deg,rgba(245,200,106,.18),rgba(48,230,177,.10));
  border-radius:999px;
  padding:9px 12px 9px 16px;
  box-shadow:0 10px 30px rgba(245,200,106,.08);
}
.source-pill span{color:var(--muted);font-size:.88rem}
.source-pill b{color:#10140f;background:var(--gold);border-radius:999px;padding:4px 10px;font-size:.88rem}
.top-source{margin-bottom:28px}
.eyebrow{margin:0 0 12px;color:var(--accent);font-weight:700;letter-spacing:.04em;direction:ltr;text-align:right}
h1{font-size:clamp(2.55rem,6vw,5.65rem);line-height:1.03;margin:0 0 20px;letter-spacing:-.07em;max-width:780px}
.lead{font-size:1.14rem;line-height:2.08;color:var(--muted);margin:0 0 28px;max-width:760px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;padding:13px 21px;border:1px solid var(--border);font-weight:800;transition:.2s ease;
}
.btn.primary{background:linear-gradient(135deg,var(--accent),#87ffd9);color:#041311;border-color:transparent;box-shadow:0 16px 42px rgba(48,230,177,.22)}
.btn.ghost{color:var(--ink);background:rgba(255,255,255,.075)}
.btn:hover,.refresh:hover{transform:translateY(-1px);filter:brightness(1.02)}
.hero-visual{position:relative;display:grid;place-items:center;overflow:hidden;min-height:460px}
.hero-visual:before{
  content:"";position:absolute;inset:40px;border-radius:50%;background:conic-gradient(from 30deg,rgba(245,200,106,.22),rgba(48,230,177,.14),rgba(71,168,255,.16),rgba(245,200,106,.22));filter:blur(16px);opacity:.78
}
.geo-ring{
  position:absolute;width:min(78%,420px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(245,200,106,.28);
  box-shadow:inset 0 0 0 22px rgba(255,255,255,.02), inset 0 0 0 44px rgba(48,230,177,.025), 0 0 80px rgba(48,230,177,.12);
}
.geo-ring:before,.geo-ring:after{content:"";position:absolute;inset:13%;border-radius:32px;border:1px solid rgba(255,255,255,.14);transform:rotate(45deg)}
.geo-ring:after{inset:25%;border-color:rgba(245,200,106,.24);transform:rotate(0deg)}
.glass-tile{
  position:relative;width:min(82%,390px);min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;
  background:linear-gradient(155deg,rgba(8,15,23,.86),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.2);border-radius:34px;box-shadow:0 30px 90px rgba(0,0,0,.44);
}
.tile-mark{font-size:5rem;line-height:1;color:var(--gold);text-shadow:0 0 34px rgba(245,200,106,.35)}
.glass-tile p{font-size:1.32rem;line-height:2.1;margin:18px 0;color:#fff8df}
.glass-tile small{color:var(--soft)}
.section{padding:30px;margin:22px 0;position:relative;overflow:hidden}
.section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 95% 0%,rgba(71,168,255,.11),transparent 30%);pointer-events:none}
.section>*{position:relative;z-index:1}
.section-title h2{margin:0 0 20px;font-size:clamp(1.6rem,3vw,2.35rem);letter-spacing:-.04em}
.demo-section{padding-top:34px}
.quran-widget{max-width:900px;margin:auto;padding:18px;border-color:rgba(245,200,106,.22);background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.055))}
.quran-widget-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.badge{
  background:linear-gradient(135deg,rgba(245,200,106,.26),rgba(48,230,177,.12));
  color:#fff6d5;border:1px solid rgba(245,200,106,.32);border-radius:999px;padding:8px 14px;font-weight:800;white-space:nowrap;
}
.refresh{
  border:0;background:linear-gradient(135deg,var(--accent),#8fffe0);color:#041311;border-radius:999px;padding:11px 16px;cursor:pointer;font-weight:900;box-shadow:0 16px 34px rgba(48,230,177,.2);transition:.2s ease;
}
.image-wrap{
  min-height:270px;border-radius:28px;border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),
    radial-gradient(circle at 50% 0%,rgba(245,200,106,.11),transparent 50%),
    #071018;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px;position:relative;
}
.image-wrap:before{content:"";position:absolute;inset:10px;border-radius:22px;border:1px dashed rgba(245,200,106,.18);pointer-events:none}
.image-wrap img{display:block;max-width:100%;height:auto;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.34);position:relative;z-index:1}
.loader{color:var(--muted);text-align:center;line-height:2;position:relative;z-index:1}
.widget-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 4px 0}
.meta{margin:0;color:var(--muted);font-size:.92rem;text-align:right;direction:rtl}
.source-link{font-size:.9rem;color:#ffe5a3;text-decoration:none;border:1px solid rgba(245,200,106,.25);border-radius:999px;padding:7px 12px;background:rgba(245,200,106,.08)}
.source-link:hover{background:rgba(245,200,106,.13)}
.help{color:var(--muted);line-height:2;margin-top:-4px}
.code-card{position:relative;background:rgba(3,9,14,.82);color:#e9fff8;border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:20px;margin:14px 0;overflow:auto;direction:ltr;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
pre{margin:0;white-space:pre-wrap;word-break:break-word;padding-left:8px}
.copy{position:absolute;top:10px;right:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:7px 12px;cursor:pointer}
details{margin-top:16px;border:1px solid var(--border);border-radius:20px;padding:15px;background:rgba(255,255,255,.055)}
summary{cursor:pointer;font-weight:800;color:#d9fff4}
.error{color:#ffb3b3}
@media (max-width:880px){
  .page-shell{width:min(100% - 22px,1180px);padding-top:18px}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-copy{padding:28px}
  .hero-visual{min-height:360px}
  h1{font-size:clamp(2.35rem,13vw,4rem)}
  .lead{font-size:1.02rem}
  .section{padding:20px}
  .quran-widget-top{align-items:stretch;flex-direction:column}
  .refresh{width:100%}
  .widget-footer{align-items:stretch;flex-direction:column}
  .source-link{text-align:center}
}