/* علام Portfolio — Arabic Bento Static Site */
:root{
  --bg:#0a0a0a;
  --panel:#0a0a0a;
  --panel-soft:rgba(255,255,255,.035);
  --panel-strong:rgba(255,255,255,.06);
  --text:#fff;
  --muted:#a1a1aa;
  --faint:#71717a;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --primary:#F9A474;
  --primary-2:#F7B38E;
  --violet:#c3a3ff;
  --success:#59d9a6;
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --container:1240px;
  --shadow-xs:0 2px 10px rgba(0,0,0,.22);
  --shadow-md:0 18px 40px rgba(2,6,14,.42);
  --glow:0 0 0 1px rgba(249,164,116,.12),0 0 34px rgba(249,164,116,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;font-family:"IBM Plex Sans Arabic","Cairo","Tajawal",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:
  radial-gradient(circle at 18% 0%,rgba(249,164,116,.08),transparent 30%),
  radial-gradient(circle at 90% 20%,rgba(195,163,255,.06),transparent 28%),
  var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
::selection{background:rgba(249,164,116,.35);color:#fff}
.skip-link{position:fixed;right:16px;top:-80px;z-index:1000;background:#fff;color:#111;padding:10px 14px;border-radius:999px;transition:top .2s ease}
.skip-link:focus{top:16px}
.section{width:min(var(--container),calc(100% - 48px));margin-inline:auto;padding-block:108px;position:relative}
.eyebrow,.card-label{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.eyebrow::before,.card-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 18px rgba(249,164,116,.55)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(42px,6vw,84px);line-height:1.03;letter-spacing:-.045em;margin-bottom:24px;max-width:980px;background:linear-gradient(180deg,#fff 0%,#fff 54%,#a1a1aa 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(30px,4vw,54px);line-height:1.12;letter-spacing:-.035em;margin-bottom:18px}
h3{font-size:clamp(21px,2vw,28px);line-height:1.25;letter-spacing:-.02em;margin-bottom:10px}
p{color:var(--muted);font-size:17px;line-height:1.85}.lead{font-size:clamp(18px,2.1vw,23px);max-width:820px;color:#d4d4d8}.section-note{max-width:520px;margin:0;color:var(--muted)}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(var(--container),calc(100% - 32px));margin:14px auto 0;padding:10px 12px;border:1px solid var(--line);background:rgba(10,10,10,.72);backdrop-filter:blur(18px);border-radius:999px;transition:border-color .2s ease,background .2s ease}.topbar.is-scrolled{background:rgba(10,10,10,.88);border-color:var(--line-strong)}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:max-content}.brand-mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#fcd2b7);color:#1a120d;font-weight:900;box-shadow:var(--glow)}.brand-copy{display:grid;gap:0}.brand-copy b{font-size:16px;line-height:1.1}.brand-copy small{color:var(--muted);font-size:11px;line-height:1.1}.nav{display:flex;align-items:center;gap:2px}.nav a{padding:9px 12px;border-radius:999px;color:#d4d4d8;font-size:14px;transition:.2s ease}.nav a:hover,.nav a.active{background:rgba(255,255,255,.07);color:#fff}.top-actions{display:flex;gap:8px;align-items:center}.menu-btn{display:none;border:1px solid var(--line);background:transparent;color:#fff;border-radius:999px;padding:9px 13px;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid transparent;padding:11px 18px;font-weight:800;font-size:14px;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn:focus-visible{outline:3px solid rgba(249,164,116,.45);outline-offset:3px}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 55%,#fcd2b7 100%);color:#1a120d;box-shadow:var(--shadow-xs),inset rgba(255,255,255,.52) 0 7px 0 -6px,0 9px 28px rgba(249,164,116,.18)}.btn-primary:hover{box-shadow:var(--shadow-xs),0 12px 34px rgba(249,164,116,.25)}.btn-secondary{background:rgba(255,255,255,.045);border-color:var(--line);color:#fff}.btn-secondary:hover,.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--line-strong)}.btn-ghost{background:transparent;border-color:transparent;color:#d4d4d8}
.hero{min-height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:36px;align-items:center;padding-top:88px}.ambient{position:absolute;pointer-events:none;border-radius:999px;filter:blur(90px);opacity:.16}.ambient-one{width:620px;height:620px;background:var(--primary);inset:5% auto auto 48%;transform:translateX(-50%)}.ambient-two{width:420px;height:420px;background:var(--violet);left:2%;bottom:8%;opacity:.11}.hero-pattern{position:absolute;inset:54px -8%;opacity:.9;pointer-events:none;background:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
  radial-gradient(circle at center,transparent 0 180px,rgba(255,255,255,.08) 181px 182px,transparent 183px 330px,rgba(255,255,255,.045) 331px 332px,transparent 333px 520px,rgba(255,255,255,.03) 521px 522px,transparent 523px);
  background-size:60px 60px,60px 60px,100% 100%;mask-image:radial-gradient(ellipse at center,black 30%,transparent 76%)}.hero-copy,.hero-board{position:relative;z-index:2}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 24px}.proof-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0 0}.proof-strip div{border:1px solid var(--line);border-radius:var(--radius-lg);padding:15px;background:rgba(255,255,255,.03)}.proof-strip dt{color:var(--faint);font-size:13px}.proof-strip dd{margin:4px 0 0;font-size:14px;color:#fff;font-weight:750}.hero-board{display:grid;grid-template-columns:1fr 1fr;gap:14px}.board-card,.hero-media,.board-stats{border:1px solid var(--line);border-radius:var(--radius-xl);background:rgba(255,255,255,.035);overflow:hidden}.main-proof{grid-column:1/-1;padding:30px;min-height:178px;display:grid;align-content:end;position:relative;box-shadow:var(--glow)}.main-proof::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(249,164,116,.23),transparent 40%);pointer-events:none}.main-proof span{color:var(--primary);font-size:14px;font-weight:900}.main-proof strong{font-size:clamp(46px,6vw,74px);line-height:1;letter-spacing:-.05em}.main-proof small{color:var(--muted);font-size:15px}.hero-media{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;height:260px}.hero-media figure{margin:0;position:relative;overflow:hidden}.hero-media figure:first-child{grid-row:span 2}.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.02)}.hero-media figcaption{position:absolute;inset:auto 10px 10px 10px;border:1px solid var(--line);background:rgba(0,0,0,.55);backdrop-filter:blur(12px);border-radius:999px;padding:6px 10px;font-size:12px;color:#fff}.board-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr)}.board-stats div{padding:18px;border-left:1px solid var(--line)}.board-stats div:last-child{border-left:0}.board-stats b{display:block;font-size:22px}.board-stats span{font-size:12px;color:var(--muted)}
.bento-intro{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}.bento-card{border:1px solid var(--line);border-radius:var(--radius-xl);background:rgba(255,255,255,.032);padding:28px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.bento-card:hover,.work-card:hover,.result-card:hover,.case-card:hover,.service-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--glow)}.bento-large{grid-row:span 2;min-height:420px;display:grid;align-content:end}.bento-large p{font-size:18px}.metric-card{min-height:200px;display:grid;align-content:space-between}.metric-card span{font-size:58px;font-weight:900;line-height:1;letter-spacing:-.05em;color:var(--primary)}.metric-card b{font-size:20px}.metric-card p{font-size:14px;margin:0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service-card{border:1px solid var(--line);background:rgba(255,255,255,.032);border-radius:var(--radius-xl);padding:24px;min-height:245px;display:grid;align-content:space-between;transition:.25s ease}.icon-shape{width:44px;height:44px;border-radius:16px;border:1px solid var(--line);display:grid;place-items:center;background:linear-gradient(135deg,rgba(249,164,116,.14),rgba(195,163,255,.08));color:var(--primary);font-weight:900}.service-card p{font-size:15px;margin:0}.service-card ul{margin:16px 0 0;padding:0;list-style:none;color:#d4d4d8;font-size:14px}.service-card li{display:flex;gap:8px;margin-top:8px}.service-card li::before{content:"•";color:var(--primary)}
.results-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.result-card{grid-column:span 4;border:1px solid var(--line);border-radius:var(--radius-xl);padding:22px;background:rgba(255,255,255,.032);transition:.25s ease}.result-card:first-child{grid-column:span 6}.result-card:nth-child(2){grid-column:span 6}.metric-row{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:12px}.result-title{font-size:15px;color:#fff;font-weight:850}.metric{display:block;font-size:clamp(38px,4vw,56px);line-height:1;letter-spacing:-.05em;color:var(--primary);margin-top:7px}.pill{display:inline-flex;align-items:center;justify-content:center;min-height:25px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;padding:4px 10px;color:#d4d4d8;font-size:12px;font-weight:750}.meta-row{display:flex;flex-wrap:wrap;gap:7px}.result-card p{font-size:14px;margin:14px 0}.image-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#111}.proof-frame{aspect-ratio:16/10}.cover-frame{aspect-ratio:4/3}.grid-frame{aspect-ratio:3/4}.gallery-frame{aspect-ratio:1/1}.image-frame img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.image-frame:hover img{transform:scale(1.035)}.image-frame.is-broken{display:grid;place-items:center;min-height:160px;color:var(--muted);font-size:13px}.image-frame.is-broken::before{content:"الصورة غير متاحة"}
.filters-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;border:1px solid var(--line);border-radius:var(--radius-xl);padding:18px;background:rgba(255,255,255,.025)}.filters-panel b{display:block;margin-bottom:10px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter-btn{border:1px solid var(--line);background:rgba(255,255,255,.035);color:#d4d4d8;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:750;font-size:13px;transition:.2s ease}.filter-btn:hover,.filter-btn.active{background:rgba(249,164,116,.14);border-color:rgba(249,164,116,.45);color:#fff}.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.work-card{grid-column:span 4;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;background:rgba(255,255,255,.032);cursor:pointer;transition:.25s ease}.work-card.featured{grid-column:span 6}.work-card .body{padding:20px}.work-card h3{margin-top:12px}.work-card p{font-size:14px;margin-bottom:20px}.count-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px}.count-row strong{color:var(--primary)}.empty-state{border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;color:var(--muted)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.case-card{border:1px solid var(--line);border-radius:var(--radius-xl);padding:18px;background:rgba(255,255,255,.032);cursor:pointer;transition:.25s ease}.case-media{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.case-card .body p{font-size:14px}.case-steps{display:grid;gap:8px;margin:14px 0}.case-steps span{display:block;border:1px solid var(--line);border-radius:16px;padding:10px;color:#d4d4d8;font-size:13px}.case-steps b{color:#fff;margin-left:5px}.visual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.visual-item{border:1px solid var(--line);border-radius:var(--radius-xl);background:rgba(255,255,255,.032);padding:12px}.visual-item figcaption{font-size:13px;color:var(--muted);padding:10px 4px 4px}.contact{border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(249,164,116,.09),rgba(255,255,255,.025) 38%,rgba(195,163,255,.06));padding:44px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-bottom:48px}.contact h2{margin-bottom:10px}.contact p{margin:0}.contact-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.gallery-modal{width:min(1120px,calc(100% - 28px));max-height:88vh;border:1px solid var(--line-strong);border-radius:28px;background:#0b0b0b;color:#fff;padding:0;box-shadow:var(--shadow-md)}.gallery-modal::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}.modal-shell{padding:18px}.modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);background:rgba(11,11,11,.9);backdrop-filter:blur(14px);padding:6px 0 16px;margin-bottom:16px}.modal-head small{color:var(--primary);font-weight:850}.modal-head h3{margin:4px 0 0}.modal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-height:calc(88vh - 112px);overflow:auto;padding-left:4px}.modal-item{display:grid;gap:7px}.open-image{font-size:12px;color:var(--muted);padding-inline:4px}.open-image:hover{color:#fff}.reveal{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
@media (max-width:1060px){.topbar{border-radius:28px;align-items:flex-start;flex-wrap:wrap}.menu-btn{display:inline-flex}.nav{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;padding-top:8px}.nav.open{display:flex}.nav a{padding:12px 14px}.top-actions{margin-right:auto}.hero{grid-template-columns:1fr;min-height:auto}.proof-strip,.board-stats{grid-template-columns:1fr 1fr}.bento-intro{grid-template-columns:1fr 1fr}.bento-large{grid-column:1/-1}.service-grid{grid-template-columns:1fr 1fr}.result-card,.result-card:first-child,.result-card:nth-child(2),.work-card,.work-card.featured{grid-column:span 6}.case-grid{grid-template-columns:1fr}.visual-grid{grid-template-columns:1fr 1fr}.modal-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.section{width:min(100% - 32px, var(--container));padding-block:68px}.topbar{width:calc(100% - 24px);margin-top:10px}.brand-copy small{display:none}.top-actions .btn-ghost{display:none}h1{font-size:44px}.hero{padding-top:58px}.hero-media{height:220px}.proof-strip,.bento-intro,.service-grid,.filters-panel,.contact{grid-template-columns:1fr}.board-stats{grid-template-columns:1fr 1fr}.section-head{display:block}.section-note{margin-top:8px}.result-card,.result-card:first-child,.result-card:nth-child(2),.work-card,.work-card.featured{grid-column:span 12}.work-grid,.results-grid{gap:14px}.visual-grid{grid-template-columns:1fr}.modal-grid{grid-template-columns:1fr 1fr}.contact{padding:28px}.contact-actions{justify-content:flex-start}.filters{flex-wrap:nowrap;overflow:auto;padding-bottom:4px}.filter-btn{min-width:max-content}}
@media (max-width:460px){.top-actions .btn-primary{padding-inline:13px}.hero-media{grid-template-columns:1fr}.hero-media figure:not(:first-child){display:none}.board-stats{grid-template-columns:1fr}.board-stats div{border-left:0;border-bottom:1px solid var(--line)}.modal-grid{grid-template-columns:1fr}.case-media{grid-template-columns:1fr}}
@media print{.topbar,.hero-actions,.filters-panel,.gallery-modal{display:none!important}body{background:#fff;color:#111}.section{padding-block:30px}.bento-card,.result-card,.work-card,.case-card,.contact{break-inside:avoid;border-color:#ddd;background:#fff;color:#111}h1,h2,h3,p,.lead,.section-note{color:#111!important}.image-frame{max-height:260px}}