/* ==========================================================================
   First National Trust — Design System
   Ported from the approved preview. Royal-blue / cyan / emerald identity,
   glassmorphism, border-radius:0, app-like on mobile.
   ========================================================================== */

:root{
  --navy:#0A2E6E; --royal:#1D4ED8; --cyan:#0891B2; --emerald:#059669;
  --ice:#F4F9FF; --sky:#E8F3FF; --ink:#0d1b3e; --muted:#33518f;
}

/* ===== Color themes (client picks from admin; applied on <html data-theme="..."> ) ===== */
/* Navy (default) — deeper, richer than before to fix the "washed-out" look */
[data-theme="navy"]{
  --navy:#082255; --royal:#1746c8; --cyan:#0679a0; --emerald:#04835c;
  --ice:#eef4ff; --sky:#dce9ff; --ink:#0a1836; --muted:#2c477e;
}
/* Royal blue — vivid, energetic */
[data-theme="royal"]{
  --navy:#122b6b; --royal:#2563eb; --cyan:#0891b2; --emerald:#0d9488;
  --ice:#eef3ff; --sky:#dbe7ff; --ink:#101a3a; --muted:#33518f;
}
/* Emerald — professional green/teal, fresh */
[data-theme="emerald"]{
  --navy:#0b3b34; --royal:#0f766e; --cyan:#0891b2; --emerald:#059669;
  --ice:#eefbf6; --sky:#d5f5ea; --ink:#0a2b26; --muted:#2b6b5f;
}
/* Gold / luxury — navy + gold accents */
[data-theme="gold"]{
  --navy:#1a2340; --royal:#b8860b; --cyan:#caa53d; --emerald:#9c7a15;
  --ice:#fbf8f0; --sky:#f5edd8; --ink:#20232e; --muted:#6b5e3b;
}
/* Deep teal — modern, corporate */
[data-theme="teal"]{
  --navy:#0a3a45; --royal:#0e7490; --cyan:#0891b2; --emerald:#0d9488;
  --ice:#edfafd; --sky:#d3f1f8; --ink:#08242c; --muted:#256b78;
}
/* Charcoal / bold — dark elegant with blue accents */
[data-theme="charcoal"]{
  --navy:#1e293b; --royal:#3b82f6; --cyan:#0ea5e9; --emerald:#10b981;
  --ice:#f1f5f9; --sky:#e2e8f0; --ink:#0f172a; --muted:#475569;
}

*{ border-radius:0 !important; font-style:normal !important; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{
  font-family:'Almarai','Cairo',sans-serif; color:var(--ink);
  background:var(--ice); overflow-x:hidden; overflow-x:clip;
  max-width:100vw; position:relative; margin:0;
}
h1,h2,h3,h4,.font-head{ font-family:'Cairo',sans-serif; }
a{ text-decoration:none; color:inherit; }

/* Custom identity styles. Utility classes come from the compiled Tailwind file (css/tailwind.css). */

/* sheen headline */
.sheen-text{
  background:linear-gradient(110deg,#0A2E6E 20%,#1D4ED8 40%,#06B6D4 50%,#1D4ED8 60%,#0A2E6E 80%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:sheenMove 5s linear infinite;
}
@keyframes sheenMove{ to{ background-position:220% center; } }

/* light sweep */
.sweep{ position:relative; overflow:hidden; }
.sweep::after{
  content:""; position:absolute; top:0; bottom:0; width:45%; right:-60%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),rgba(56,189,248,.3),transparent);
  transform:skewX(-18deg); animation:sweepMove 6.5s ease-in-out infinite; pointer-events:none;
}
@keyframes sweepMove{ 0%,55%{ right:-60%; } 78%{ right:120%; } 100%{ right:120%; } }

/* HERO */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; }
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.02); }
.hero-slide.active{ opacity:1; }
.hero-slide.active img{ animation:kenburns 9s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1.02);} to{ transform:scale(1.14);} }
.hero-overlay{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,20,54,.45) 0%,rgba(6,20,54,.15) 40%,rgba(6,25,66,.65) 100%); }
.hero-content{ position:relative; z-index:5; margin-top:auto; }
.hero-dot{ width:30px; height:4px; background:rgba(255,255,255,.35); position:relative; overflow:hidden; cursor:pointer; }
.hero-dot span{ position:absolute; inset:0; background:#38BDF8; transform:scaleX(0); transform-origin:right; }
.hero-dot.active span{ animation:dotFill 6.5s linear forwards; }
@keyframes dotFill{ to{ transform:scaleX(1); } }

/* placeholder for media not yet uploaded */
.media-ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0A2E6E,#0891B2); color:rgba(255,255,255,.85);
  font-family:'Cairo'; font-weight:800; font-size:.8rem; text-align:center; padding:1rem;
}
.media-ph::before{ content:"📷"; font-size:1.6rem; margin-inline-end:.4rem; }
.media-ph.video::before{ content:"🎬"; }

/* GLASS cards — semi-transparent */
.glass{
  background:rgba(255,255,255,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -18px rgba(10,46,110,.35); transition:transform .4s ease, background .4s ease;
}
.glass:hover{ transform:translateY(-4px); background:rgba(255,255,255,.72); }

/* spin stat */
@keyframes spin360{ 0%{ transform:rotateY(0);} 10%{ transform:rotateY(360deg);} 100%{ transform:rotateY(360deg);} }
.stat-spin{ animation:spin360 10s ease-in-out infinite; transform-style:preserve-3d; }
.d1{animation-delay:1s;} .d2{animation-delay:2.5s;} .d3{animation-delay:4s;}
.d4{animation-delay:5.5s;} .d5{animation-delay:7s;} .d6{animation-delay:8.5s;}

/* marquee */
.marquee{ display:flex; overflow:hidden; user-select:none; }
.marquee-track{ display:flex; flex-shrink:0; align-items:center; gap:2rem;
  padding-inline-start:2rem; animation:marqueeMove 32s linear infinite; will-change:transform; }
.marquee.slow .marquee-track{ animation-duration:48s; }
.marquee.rev .marquee-track{ animation-direction:reverse; }
@keyframes marqueeMove{ to{ transform:translateX(50%); } }

/* particles */
.particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.particle{ position:absolute; bottom:-30px;
  background:radial-gradient(circle,rgba(29,78,216,.5),rgba(8,145,178,.15)); animation:floatUp linear infinite; }
@keyframes floatUp{ to{ transform:translateY(-110vh); opacity:0; } }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
.dl0{ transition-delay:0s; }
.dl1{ transition-delay:.1s; } .dl2{ transition-delay:.2s; } .dl3{ transition-delay:.3s; }

/* sector/photo card */
.fld-card{ position:relative; overflow:hidden; min-height:150px; display:flex; align-items:flex-end;
  box-shadow:0 16px 38px -20px rgba(10,46,110,.45); transition:transform .45s ease; }
.fld-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s ease; }
.fld-card:hover img{ transform:scale(1.12); }
.fld-card::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,46,110,.05) 25%,rgba(10,46,110,.85) 100%); z-index:1; }
.fld-card:hover{ transform:translateY(-5px); }
.fld-body{ position:relative; z-index:2; }

/* auto scroll strip */
.auto-scroll{ display:flex; gap:.8rem; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; }
.auto-scroll::-webkit-scrollbar{ display:none; }

/* sections never solid */
.sec-photo{ position:relative; overflow-x:clip; }
section,footer{ overflow-x:clip; }
.sec-photo>.bgimg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.07; pointer-events:none; }
.sec-photo>.bgfade{ position:absolute; inset:0;
  background:linear-gradient(180deg,var(--ice) 0%,rgba(244,249,255,.3) 15%,rgba(244,249,255,.3) 85%,var(--ice) 100%); pointer-events:none; }
.grad-soft{ background:linear-gradient(160deg,#F4F9FF 0%,#E8F3FF 35%,#E6FBF4 70%,#F4F9FF 100%); }
.grad-soft2{ background:linear-gradient(200deg,#F4F9FF 0%,#E9F1FF 40%,#E8F8FF 75%,#F4F9FF 100%); }
.blob{ position:absolute; filter:blur(70px); opacity:.45; pointer-events:none;
  animation:blobMove 14s ease-in-out infinite alternate; }
@keyframes blobMove{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(50px,-40px) scale(1.15);} }

/* nav */
.nav-glass{ backdrop-filter:blur(16px); background:rgba(255,255,255,.9); box-shadow:0 8px 30px -14px rgba(10,46,110,.28); }
.nav-link{ position:relative; font-weight:800; font-size:13.5px; color:var(--navy); white-space:nowrap; padding:6px 2px; }
.nav-link::after{ content:""; position:absolute; bottom:0; right:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--royal),var(--cyan)); transition:width .35s ease; }
.nav-link:hover::after,.has-dd:hover>.nav-link::after{ width:100%; }
.has-dd{ position:relative; }
.dd{ position:absolute; top:100%; right:0; min-width:260px; background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px); box-shadow:0 24px 50px -20px rgba(10,46,110,.4);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:all .3s ease; z-index:60; padding:6px 0; }
.has-dd:hover .dd{ opacity:1; visibility:visible; transform:translateY(0); }
.dd a{ display:block; padding:9px 16px; font-size:13px; font-weight:700; color:var(--ink); transition:all .25s; }
.dd a:hover{ background:linear-gradient(90deg,rgba(29,78,216,.08),transparent); color:var(--royal); padding-inline-start:22px; }

/* mobile drawer */
.drawer-bg{ position:fixed; inset:0; z-index:70; background:rgba(6,16,44,.5); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .3s; }
.drawer-bg.open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; bottom:0; right:0; width:min(320px,88vw); z-index:71;
  background:linear-gradient(180deg,#fff,#EEF6FF); box-shadow:-20px 0 60px -20px rgba(10,46,110,.5);
  transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.8,.3,1); overflow-y:auto; }
.drawer.open{ transform:none; }
[dir="ltr"] .drawer{ right:auto; left:0; transform:translateX(-100%); box-shadow:20px 0 60px -20px rgba(10,46,110,.5); }
[dir="ltr"] .drawer.open{ transform:none; }
.dr-link{ display:block; padding:13px 20px; font-weight:800; font-size:14.5px; color:var(--navy); border-bottom:1px solid rgba(29,78,216,.08); }
.dr-acc-head{ display:flex; justify-content:space-between; align-items:center; padding:13px 20px;
  font-weight:800; font-size:14.5px; color:var(--navy); cursor:pointer; border-bottom:1px solid rgba(29,78,216,.08); }
.dr-acc-head .arr{ transition:transform .3s; font-size:12px; color:var(--cyan); }
.dr-acc.open .arr{ transform:rotate(180deg); }
.dr-acc-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; background:rgba(232,243,255,.6); }
.dr-acc.open .dr-acc-body{ max-height:640px; }
.dr-acc-body a{ display:block; padding:10px 32px 10px 20px; font-size:13px; font-weight:700; color:var(--muted); border-bottom:1px solid rgba(29,78,216,.05); }

/* buttons */
.btn-grad{ background:linear-gradient(120deg,#1D4ED8,#0891B2 60%,#059669); background-size:180% auto;
  transition:background-position .5s ease, transform .3s ease; color:#fff; }
.btn-grad:hover{ background-position:100% center; transform:translateY(-2px); }
.chip{ white-space:nowrap; background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -14px rgba(10,46,110,.35); font-weight:700; }
.count-big{ font-family:'Cairo'; font-weight:900;
  background:linear-gradient(120deg,#1D4ED8,#06B6D4); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* whatsapp float */
.wa-float{ position:fixed; bottom:96px; inset-inline-start:16px; z-index:60;
  box-shadow:0 14px 34px -10px rgba(5,150,105,.6); animation:waPulse 2.4s ease-in-out infinite; }
@keyframes waPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }

/* bottom app bar */
.app-bar{ position:fixed; bottom:0; inset-inline:0; z-index:55; display:none;
  backdrop-filter:blur(16px); background:rgba(255,255,255,.92); box-shadow:0 -8px 30px -12px rgba(10,46,110,.25); }
.app-bar a{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px;
  font-weight:800; color:var(--muted); padding:8px 0 max(8px,env(safe-area-inset-bottom)); }
.app-bar a.on{ color:var(--royal); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(6,16,44,.9); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:92vw; max-height:78vh; object-fit:contain; box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  transform:scale(.85); transition:transform .4s cubic-bezier(.2,.9,.3,1.2); }
.lightbox.open img{ transform:scale(1); }
.lb-btn{ position:absolute; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; font-weight:900; background:rgba(255,255,255,.12); backdrop-filter:blur(6px); cursor:pointer; transition:background .3s; }
.lb-btn:hover{ background:rgba(56,189,248,.45); }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ===== responsive: app-like on tablet & mobile ===== */
.burger{ display:none; }
.nav-link{ font-size:15px; font-weight:800; }
@media (max-width:1100px){
  .desk-nav{ display:none !important; }
  .burger{ display:flex !important; }
  .app-bar{ display:grid !important; grid-template-columns:repeat(5,1fr); }
  body{ padding-bottom:60px; }
  .wa-float{ bottom:80px; }
}
@media (max-width:820px){
  .hero{ min-height:auto; }
  .hero-media{ position:relative; height:62svh; background:linear-gradient(160deg,#0A2E6E,#0891B2); }
  .hero-slide img{ object-fit:cover; object-position:center; transform:none !important; animation:none !important; }
  .hero-content{ margin-top:0; }
  .hero-overlay{ background:linear-gradient(180deg,rgba(6,20,54,.05) 55%,rgba(244,249,255,1) 100%); }
  .hero-content{ margin-top:0; background:linear-gradient(180deg,#F4F9FF,#E8F3FF); }
  .hero-content h1{ color:#0A2E6E !important; font-size:clamp(1.3rem,6.6vw,1.8rem) !important; line-height:1.35 !important; }
  .hero-content h1 .accent{ white-space:nowrap; }
  .hero-content .hero-sub{ color:#33518f !important; }
  .hero-dots-wrap{ position:absolute; z-index:6; bottom:10px; inset-inline:0; justify-content:center; }
}

/* ==========================================================================
   Sector detail — modern layouts (new identity, breaks old "image + text" grid)
   ========================================================================== */

/* split hero: content beside floating stat cards, not a full-bleed image */
.sec-hero{ position:relative; overflow:hidden; padding:6.5rem 0 3rem; background:linear-gradient(150deg,#0A2E6E 0%,#123c86 45%,#0891B2 120%); }
.sec-hero::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 85% 15%,rgba(56,189,248,.28),transparent 45%),
  radial-gradient(circle at 10% 90%,rgba(5,150,105,.22),transparent 45%); pointer-events:none; }
.sec-hero .wrap{ position:relative; z-index:2; }
.sec-hero-badge{ display:inline-block; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); color:#bae6fd; font-weight:800; font-size:12.5px; padding:5px 14px; }

/* diagonal accent panel behind hero image tile */
.hero-tile{ position:relative; overflow:hidden; box-shadow:0 30px 70px -25px rgba(0,0,0,.55); }
.hero-tile img,.hero-tile video,.hero-tile .media-ph{ width:100%; height:100%; object-fit:cover; }

/* service cards: numbered, staggered accent bar (not a plain grid) */
.svc{ position:relative; background:rgba(255,255,255,.6); backdrop-filter:blur(10px); padding:1.4rem 1.25rem 1.25rem; box-shadow:0 16px 38px -20px rgba(10,46,110,.3); transition:transform .4s ease, box-shadow .4s ease; overflow:hidden; }
.svc::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:4px; height:100%; background:linear-gradient(180deg,#1D4ED8,#0891B2,#059669); transform:scaleY(.35); transform-origin:top; transition:transform .45s ease; }
.svc:hover{ transform:translateY(-6px); box-shadow:0 26px 54px -22px rgba(10,46,110,.45); }
.svc:hover::before{ transform:scaleY(1); }
.svc-num{ font-family:'Cairo'; font-weight:900; font-size:2.2rem; line-height:1; background:linear-gradient(120deg,#1D4ED8,#06B6D4); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.55; }

/* horizontal projects rail */
.rail{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.75rem; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail-card{ scroll-snap-align:start; flex:0 0 auto; width:min(340px,82vw); position:relative; overflow:hidden; box-shadow:0 20px 46px -24px rgba(10,46,110,.5); }
.rail-card .ph{ height:190px; overflow:hidden; position:relative; }
.rail-card .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s ease; }
.rail-card:hover .ph img{ transform:scale(1.1); }
.rail-card .body{ background:rgba(255,255,255,.7); backdrop-filter:blur(10px); padding:1rem 1.1rem; }

/* vertical timeline for the project register */
.tl{ position:relative; padding-inline-start:0; }
.tl-year{ position:relative; margin-bottom:2.25rem; }
.tl-year:last-child{ margin-bottom:0; }
.tl-yhead{ display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; }
.tl-ynum{ font-family:'Cairo'; font-weight:900; font-size:2rem; line-height:1; background:linear-gradient(120deg,#1D4ED8,#06B6D4); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; }
.tl-yline{ flex:1; height:2px; background:linear-gradient(90deg,rgba(29,78,216,.35),transparent); }
.tl-items{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.75rem; }
.tl-item{ position:relative; background:rgba(255,255,255,.62); backdrop-filter:blur(10px); padding:1rem 1.1rem; box-shadow:0 14px 32px -20px rgba(10,46,110,.32); border-top:3px solid transparent; border-image:linear-gradient(90deg,#1D4ED8,#0891B2) 1; transition:transform .35s ease; }
.tl-item:hover{ transform:translateY(-4px); }
.tl-date{ font-size:10.5px; font-weight:800; color:#0891B2; }
.tl-hl{ font-family:'Cairo'; font-weight:900; background:linear-gradient(120deg,#1D4ED8,#06B6D4); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* stat ribbon */
.ribbon{ background:linear-gradient(120deg,#0A2E6E,#1D4ED8 55%,#0891B2); }

/* ==========================================================================
   Admin panel — responsive, app-like on mobile
   ========================================================================== */
.admin-shell{ min-height:100vh; background:#EEF4FF; }
.admin-side{ position:fixed; top:0; bottom:0; inset-inline-start:0; width:250px; z-index:40;
  background:linear-gradient(185deg,#0A2E6E,#123c86 70%,#0e3576); display:flex; flex-direction:column;
  box-shadow:6px 0 30px -12px rgba(10,46,110,.5); }
.admin-brand{ padding:1.1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-nav{ flex:1; padding:.75rem .5rem; overflow-y:auto; }
.admin-link{ display:flex; align-items:center; gap:.65rem; padding:.7rem .85rem; margin-bottom:.15rem;
  color:#cfe0ff; font-weight:800; font-size:13.5px; transition:all .25s; }
.admin-link:hover{ background:rgba(255,255,255,.1); color:#fff; }
.admin-link.active{ background:linear-gradient(90deg,rgba(56,189,248,.28),transparent); color:#fff; }
.admin-side-foot{ padding:1rem; border-top:1px solid rgba(255,255,255,.1); }
.admin-out{ display:block; text-align:center; padding:.55rem; background:rgba(255,255,255,.1); color:#fff;
  font-weight:800; font-size:12.5px; cursor:pointer; border:none; transition:background .25s; }
.admin-out:hover{ background:rgba(255,255,255,.2); }
.admin-main{ margin-inline-start:250px; min-height:100vh; }
.admin-topbar{ display:none; align-items:center; gap:.75rem; padding:.75rem 1rem; background:#fff;
  box-shadow:0 4px 18px -10px rgba(10,46,110,.25); position:sticky; top:0; z-index:30; }
.admin-burger{ font-size:22px; background:none; border:none; cursor:pointer; color:var(--navy); }
.admin-content{ padding:1.5rem; max-width:1200px; }

.admin-card{ background:#fff; box-shadow:0 14px 34px -20px rgba(10,46,110,.3); padding:1.25rem 1.4rem; }
.admin-h{ font-family:'Cairo'; font-weight:900; color:var(--navy); }
.admin-btn{ background:linear-gradient(120deg,#1D4ED8,#0891B2); color:#fff; font-weight:800; font-size:13.5px;
  padding:.6rem 1.2rem; border:none; cursor:pointer; transition:opacity .25s; }
.admin-btn:hover{ opacity:.9; }
.admin-btn.danger{ background:linear-gradient(120deg,#dc2626,#ef4444); }
.admin-btn.ghost{ background:#EEF4FF; color:var(--navy); }
.admin-input{ width:100%; padding:.6rem .8rem; border:1.5px solid #d6e2f5; background:#fff; font-weight:700;
  font-size:13.5px; color:var(--ink); }
.admin-input:focus{ outline:none; border-color:var(--royal); }
.admin-label{ display:block; font-weight:800; font-size:12.5px; color:var(--muted); margin-bottom:.35rem; }
.admin-table{ width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th{ text-align:start; padding:.6rem; font-weight:800; color:var(--muted); border-bottom:2px solid #e3ecf9; font-size:12px; }
.admin-table td{ padding:.6rem; border-bottom:1px solid #eef3fb; font-weight:700; color:var(--ink); }

.admin-alert{ padding:.7rem 1rem; font-weight:800; font-size:13px; margin-bottom:1rem; }
.admin-alert.ok{ background:#dcfce7; color:#166534; }
.admin-alert.err{ background:#fee2e2; color:#991b1b; }

.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.75rem; }
.gallery-item{ position:relative; overflow:hidden; background:#EEF4FF; box-shadow:0 10px 24px -16px rgba(10,46,110,.4); }
.gallery-item img,.gallery-item video{ width:100%; height:130px; object-fit:cover; display:block; }
.gallery-del{ position:absolute; top:5px; inset-inline-end:5px; width:28px; height:28px; background:rgba(220,38,38,.92);
  color:#fff; border:none; cursor:pointer; font-weight:900; display:flex; align-items:center; justify-content:center; }
.quota-bar{ height:8px; background:#e3ecf9; overflow:hidden; }
.quota-fill{ height:100%; background:linear-gradient(90deg,#1D4ED8,#06B6D4); }

.picker-overlay{ position:fixed; inset:0; z-index:90; background:rgba(6,16,44,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem; }
.picker-box{ background:#fff; width:min(760px,95vw); max-height:85vh; overflow-y:auto; padding:1.25rem; }

@media (max-width:960px){
  .admin-side{ transform:translateX(100%); transition:transform .3s; box-shadow:-8px 0 40px -8px rgba(0,0,0,.5); }
  [dir="ltr"] .admin-side{ transform:translateX(-100%); }
  .admin-side.open{ transform:none; }
  .admin-main{ margin-inline-start:0; }
  .admin-topbar{ display:flex; position:sticky; top:0; z-index:30; }
  .admin-content{ padding:1rem .85rem; }

  /* Tables scroll inside their own container, not the page */
  .admin-table{ font-size:12px; }
  .admin-table th, .admin-table td{ padding:.5rem .4rem; white-space:nowrap; }

  /* Multi-column form grids collapse to single column on phones (text inputs only) */
  .admin-card .grid.sm\:grid-cols-2,
  .admin-card .grid.sm\:grid-cols-3{ grid-template-columns:1fr !important; }

  /* Custom column templates in edit rows (projects, numbers, marquee) stack on phone */
  .admin-card .grid[class*="grid-cols-\["]{ grid-template-columns:1fr !important; gap:.4rem; }

  /* Bigger tap targets for buttons */
  .admin-btn{ padding:.6rem 1rem; font-size:13px; min-height:40px; }
  .admin-input{ font-size:15px; padding:.65rem .8rem; }  /* 15px avoids iOS zoom-on-focus */

  /* Cards a touch tighter */
  .admin-card{ padding:1rem; }
  .admin-h.text-2xl{ font-size:1.35rem; }

  /* Stack the header row (title + add button) */
  .admin-content > .flex.justify-between{ flex-wrap:wrap; gap:.5rem; }

  /* Image picker grids: 3 per row max on phone */
  .gallery-grid{ grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .picker-box{ width:96vw; max-height:88vh; padding:1rem; }
}

@media (max-width:420px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .admin-link{ font-size:14px; padding:.8rem .85rem; }  /* easier to tap */
}

/* ==========================================================================
   Lazy video with poster — loads the video only on click (perf + SEO)
   ========================================================================== */
.fnt-video{ position:relative; width:100%; height:100%; overflow:hidden; background:#0A2E6E; }
.fnt-video-poster{ position:absolute; inset:0; cursor:pointer; }
.fnt-video-poster img{ width:100%; height:100%; object-fit:cover; display:block; }

/* branded default poster when the client hasn't uploaded one */
.fnt-video-default{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem;
  background:
    radial-gradient(circle at 30% 25%,rgba(56,189,248,.35),transparent 55%),
    radial-gradient(circle at 80% 80%,rgba(5,150,105,.3),transparent 55%),
    linear-gradient(140deg,#0A2E6E,#123c86 55%,#0891B2); }
.fnt-video-default-label{ color:rgba(255,255,255,.9); font-family:'Cairo'; font-weight:900; font-size:1rem; max-width:80%; line-height:1.5; }

/* play button */
.fnt-video-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); color:#0A2E6E; border:none; cursor:pointer;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.6); transition:transform .3s ease, background .3s ease; z-index:3; }
.fnt-video-play svg{ width:34px; height:34px; margin-inline-start:3px; }
.fnt-video-poster:hover .fnt-video-play{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
.fnt-video-play::after{ content:""; position:absolute; inset:-8px; border:2px solid rgba(255,255,255,.5); animation:playPulse 2s ease-out infinite; }
@keyframes playPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }

.fnt-video-badge{ position:absolute; bottom:12px; inset-inline:0; text-align:center; color:rgba(255,255,255,.85);
  font-family:'Cairo'; font-weight:800; font-size:12.5px; z-index:3; }

.fnt-video video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:reduce){ .fnt-video-play::after{ animation:none; } }

/* professional footer */
.ft-link{ color:rgba(230,242,255,.95); font-weight:700; font-size:15px; transition:color .2s, padding-inline-start .2s; }
.ft-link:hover{ color:#7dd3fc; padding-inline-start:5px; }
.ft-social{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.12);
  color:#fff; font-weight:900; font-size:17px; transition:background .25s, transform .25s; }
.ft-social:hover{ background:linear-gradient(135deg,#1D4ED8,#0891B2); transform:translateY(-2px); }

/* background music toggle button */
.music-btn{ position:fixed; bottom:20px; inset-inline-start:16px; z-index:60; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; border:none;
  background:linear-gradient(135deg,#0A2E6E,#0891B2); color:#fff; box-shadow:0 10px 26px -8px rgba(10,46,110,.6);
  transition:transform .25s, box-shadow .25s; }
.music-btn:hover{ transform:scale(1.08); }
.music-btn.muted{ opacity:.65; }
@media (max-width:820px){ .music-btn{ bottom:74px; width:42px; height:42px; font-size:18px; } }

/* footer column heading */
.ft-head{ font-family:'Cairo'; font-weight:800; color:#fff; font-size:17px; margin-bottom:16px; position:relative; padding-bottom:9px; }
.ft-head::after{ content:""; position:absolute; bottom:0; inset-inline-start:0; width:36px; height:3px; background:linear-gradient(90deg,#38bdf8,#059669); }

/* admin sidebar close button (mobile only) */
.admin-close{ display:none; position:absolute; top:12px; inset-inline-end:12px; width:32px; height:32px;
  background:rgba(255,255,255,.12); color:#fff; border:none; font-size:16px; cursor:pointer; align-items:center; justify-content:center; }
.admin-brand{ position:relative; }
@media (max-width:960px){ .admin-close{ display:flex; } }

/* Performance: skip rendering off-screen heavy sections until near viewport */
#studio, #team, #listed, #portfolio, #news, #partners, #intro-video, #chairman, #opps{ content-visibility:auto; contain-intrinsic-size:auto 520px; }

/* success partners — continuous scrolling logo strip */
.partners-strip{ position:relative; overflow:hidden; padding:1.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.partners-track{ display:flex; gap:2.5rem; align-items:center; width:max-content; animation:partnersScroll 34s linear infinite; }
.partners-strip:hover .partners-track{ animation-play-state:paused; }
.partner-logo{ flex:0 0 auto; width:150px; height:80px; display:flex; align-items:center; justify-content:center;
  background:#fff; padding:.9rem 1.1rem; box-shadow:0 10px 26px -14px rgba(10,46,110,.28); }
.partner-logo img{ max-width:100%; max-height:100%; filter:grayscale(.15); transition:filter .3s; }
.partner-logo:hover img{ filter:grayscale(0); }
@keyframes partnersScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
[dir="ltr"] .partners-track{ animation-name:partnersScrollLtr; }
@keyframes partnersScrollLtr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:820px){ .partner-logo{ width:120px; height:64px; } .partners-track{ gap:1.5rem; animation-duration:26s; } }

/* section visibility toggles */
.sec-toggle{ display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem; background:#fff;
  border:1.5px solid #e6eefb; cursor:pointer; font-weight:800; font-size:12.5px; color:var(--navy); transition:border-color .2s, background .2s; }
.sec-toggle:hover{ border-color:#1D4ED8; }
.sec-toggle input{ width:18px; height:18px; accent-color:#1D4ED8; cursor:pointer; }
.sec-toggle:has(input:checked){ background:#f0f6ff; border-color:#1D4ED8; }
.sec-toggle:has(input:not(:checked)){ opacity:.6; }

/* footer main — strong padding + clear top separator */
.footer-main{
  background:linear-gradient(180deg,#0A2E6E,#0c3576);
  padding-top:4.5rem; padding-bottom:2rem; margin-top:0;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,#1D4ED8,#0891B2,#059669) 1;
}
@media (max-width:820px){ .footer-main{ padding-top:3rem; } }

/* theme picker cards */
.theme-card{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.7rem; cursor:pointer;
  background:#fff; border:2px solid #e6eefb; transition:border-color .2s, transform .2s; }
.theme-card:hover{ border-color:#1D4ED8; transform:translateY(-2px); }
.theme-card.sel{ border-color:#1D4ED8; background:#f0f6ff; }
.theme-card.sel::after{ content:"✓ محدّد"; font-size:10px; font-weight:800; color:#1D4ED8; }
.theme-swatch{ width:100%; height:48px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }

/* chairman photo — animated elegant rotating frame */
.chairman-frame{ position:relative; }
.chairman-ring{ position:absolute; inset:0; z-index:0;
  background:conic-gradient(from 0deg, #1D4ED8, #06B6D4, #059669, #caa53d, #1D4ED8);
  animation:chairmanSpin 5s linear infinite; }
.chairman-ring::after{ content:""; position:absolute; inset:5px; background:var(--ice); }
.chairman-frame > .relative{ z-index:1; }
@keyframes chairmanSpin{ to{ transform:rotate(360deg); } }

/* studio load-more: hidden items until "show more" */
.studio-item.studio-hidden{ display:none; }

/* listed company logo chip — logo fills the box */
.chip-logo{ display:inline-flex; align-items:center; justify-content:center; width:130px; height:64px;
  background:#fff; box-shadow:0 10px 26px -14px rgba(10,46,110,.28); padding:.5rem .75rem; margin-inline-end:.6rem; flex:0 0 auto; }
.chip-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:820px){ .chip-logo{ width:110px; height:56px; } }