/* Abdalah.co.uk index.css — shared site styling */
:root{
  --bg:#0b1020; --bg2:#0f1430; --paper:#ffffff; --ink:#0f172a; --muted:#5b6b88;
  --brand:#3b82f6; --accent:#22c55e; --chip:#eef2ff; --stroke:#e6eaf4;
  --shadow:0 18px 40px rgba(2,6,23,.18); --radius:16px; --maxw:1120px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth}
body{font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);
  background:radial-gradient(1200px 600px at 10% -10%, #1b2350 0, transparent 60%),
  linear-gradient(180deg, var(--bg), var(--bg2)); min-height:100vh}
.wrap{max-width:var(--maxw); margin-inline:auto; padding:0 18px}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}

.site-header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(160%) blur(10px);
  background:rgba(11,16,32,.5); border-bottom:1px solid rgba(255,255,255,.06)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; color:#eaf0ff; letter-spacing:.2px}
.brand .mark{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(34,197,94,.18)}
.brand .dot{color:#a9b9ff}
.site-nav a{color:#eaf0ff; padding:.5rem .7rem; border:1px solid rgba(255,255,255,.1); border-radius:12px; margin-left:8px}
.site-nav a:hover{background:rgba(255,255,255,.1)}

.about-card{background:#fff; border:1px solid var(--stroke); border-radius:16px; box-shadow:var(--shadow); padding:18px}
.ticks{margin:8px 0 0; padding-left:18px} .ticks li{margin:.25rem 0}
.meta{color:#6c7a9a; font-size:.92rem}
.site-footer{margin-top:28px; background:#0a0f20; color:#d7e0ff; border-top:1px solid rgba(255,255,255,.06); position:relative}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding:18px 0}
.newsletter{display:flex; gap:8px; flex-wrap:wrap}
.newsletter input{flex:1 1 200px; padding:.75rem .8rem; border-radius:10px; border:1px solid #314070; background:#12193a; color:#e8eeff}
.copy{padding:12px 0 20px; color:#aeb9ff; border-top:1px solid rgba(255,255,255,.06)}
#back-to-top{position:fixed; right:16px; bottom:16px; opacity:0; pointer-events:none; transition:.12s ease; border:0; border-radius:10px; padding:.6rem .7rem; background:#5b7cff; color:#fff; box-shadow:0 12px 26px rgba(91,124,255,.4); cursor:pointer}
#back-to-top.show{opacity:1; pointer-events:auto}