/* NazzilVideo shared styles — generated; mirrors index.html theme */
:root{
  --bg:#0e1a24; --bg2:#0a131b; --card:#14222e; --card2:#172a38;
  --line:#22323f; --line2:#2c4150; --ink:#eaf3f5; --muted:#90a6b4;
  --teal:#2dd4c4; --teal-soft:rgba(45,212,196,.12); --green:#46e08a; --orange:#fb7a1e;
  --accent:var(--teal); --r:14px; --r-pill:999px; --max:1180px;
  --font-en:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ar:"Cairo","Segoe UI Arabic","Tahoma",sans-serif; --font:var(--font-en);
}
html[lang="ar"]{ --font:var(--font-ar); }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
html[lang="ar"] body{ line-height:1.8; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:16px; }
.prose{ max-width:760px; color:var(--muted); font-size:16px; }
.prose p{ margin:0 0 14px; }
.brand{ font-weight:800; font-size:20px; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:8px; }
.brand .logo{ width:26px; height:26px; border:2.5px solid var(--teal); border-radius:7px; display:grid; place-items:center; }
.brand .logo svg{ width:12px; height:12px; }
.brand .b1{ color:var(--orange); } .brand .b2{ color:var(--green); }
.nav{ position:sticky; top:0; z-index:50; background:rgba(14,26,36,.82); backdrop-filter:blur(10px); border-block-end:1px solid var(--line); }
.nav .wrap{ display:flex; align-items:center; gap:16px; height:62px; }
.nav-links{ display:flex; gap:22px; align-items:center; margin-inline-start:auto; }
.nav-links a{ color:var(--muted); font-size:14px; font-weight:500; }
.nav-links a:hover{ color:var(--ink); }
.lang-btn{ font-size:13px; font-weight:600; color:var(--teal); background:var(--teal-soft); border:1px solid var(--line2); border-radius:var(--r-pill); padding:7px 15px; cursor:pointer; }
.crumb{ font-size:13px; color:var(--muted); margin-block-end:10px; }
.crumb a{ color:var(--teal); }
.hero{ text-align:center; padding-block:56px 36px; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset-inline:0; inset-block-start:-30%; height:420px; margin-inline:auto; max-width:760px; background:radial-gradient(closest-side, rgba(45,212,196,.16), rgba(70,224,138,.06), transparent); filter:blur(20px); pointer-events:none; }
h1{ font-size:clamp(30px,5.5vw,50px); font-weight:800; margin:8px 0 12px; letter-spacing:-.02em; }
html[lang="ar"] h1{ letter-spacing:0; }
.sub{ color:var(--muted); font-size:clamp(15px,2vw,18px); max-width:620px; margin-inline:auto; }
.urlbar{ display:flex; gap:8px; max-width:620px; margin:28px auto 0; background:var(--card); border:1px solid var(--line2); border-radius:var(--r-pill); padding:7px; box-shadow:0 10px 34px rgba(0,0,0,.35); }
.urlbar:focus-within{ border-color:var(--teal); box-shadow:0 0 0 4px rgba(45,212,196,.14); }
.urlbar input{ flex:1; border:0; outline:none; background:transparent; font-family:var(--font); font-size:15px; padding-inline:16px; color:var(--ink); }
.urlbar input::placeholder{ color:#6c8090; }
.btn{ font-family:var(--font); font-weight:700; font-size:15px; cursor:pointer; border:0; border-radius:var(--r-pill); padding:12px 26px; color:#06231f; white-space:nowrap; background:linear-gradient(135deg,var(--teal),var(--green)); transition:filter .15s, transform .15s; }
.btn:hover{ filter:brightness(1.08); } .btn:active{ transform:translateY(1px); }
.section{ padding-block:40px; }
h2{ font-size:clamp(22px,4vw,32px); font-weight:800; margin:0 0 24px; letter-spacing:-.02em; }
html[lang="ar"] h2{ letter-spacing:0; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.4); border-color:var(--teal); }
.card .ic{ width:46px; height:46px; border-radius:12px; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; margin-block-end:14px; }
.card .ic svg{ width:24px; height:24px; }
.card h3{ font-size:18px; font-weight:700; margin:0 0 6px; color:var(--ink); }
.card p{ color:var(--muted); font-size:14px; margin:0; }
.ad-zone{ max-width:var(--max); margin-inline:auto; padding-inline:16px; margin-block:28px; }
.ad-box{ border:1px dashed var(--line2); border-radius:12px; background:var(--bg2); min-height:100px; display:grid; place-items:center; overflow:hidden; }
.ad-box .label{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#5e7384; }
html[lang="ar"] .ad-box .label{ letter-spacing:0; text-transform:none; }
footer{ background:var(--bg2); border-block-start:1px solid var(--line); padding-block:40px; color:var(--muted); }
footer .cols{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
footer h4{ color:var(--ink); font-size:13px; margin:0 0 10px; letter-spacing:.08em; text-transform:uppercase; }
html[lang="ar"] footer h4{ letter-spacing:0; text-transform:none; }
footer a{ display:block; font-size:14px; margin-block:6px; color:var(--muted); }
footer a:hover{ color:var(--ink); }
.legal{ margin-block-start:24px; font-size:12px; color:#5e7384; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
@media(max-width:640px){ .nav-links a:not(.lang-btn){ display:none; } }