:root{
      --bg:#1e1e1e;
      --text:#f3f5f7;
      --muted:#9aa4af;
      --gold:#c9a227;

      --r:18px;
      --r2:26px;

      --max:1240px;
      --app:430px;

      --line:rgba(255,255,255,.10);
      --soft:rgba(255,255,255,.06);
      --soft2:rgba(255,255,255,.03);

      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --shadow2: 0 10px 34px rgba(0,0,0,.42);
      --shadow3: 0 8px 24px rgba(0,0,0,.36);
    }

 /* Croogla 4F (ضع ملفك هنا إن موجود) */
@font-face{
  font-family:"Croogla 4F";
  src:url("Croogla4F.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:"Croogla 4F", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button{font-family:inherit}
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); border:0;
    }

    /* Subtle noise overlay for luxury-tech */
    .noise{
      pointer-events:none;
      position:fixed; inset:0;
      opacity:.10;
      mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      background-size:180px 180px;
      z-index:2;
    }

    /* Layout container */
    .wrap{
      width:min(100%, var(--max));
      margin:0 auto;
      padding:0 18px;
    }

    /* Mobile App frame (Flutter vibe) */
    .appFrame{
      min-height:100%;
      position:relative;
      isolation:isolate;
    }
    @media (max-width: 900px){
      body{background:#141414;}
      .appFrame{
        width:min(100%, var(--app));
        margin:0 auto;
        background:var(--bg);
        box-shadow: var(--shadow);
        border-left:1px solid rgba(255,255,255,.08);
        border-right:1px solid rgba(255,255,255,.08);
      }
      .wrap{padding:0 14px;}
    }

    /* ===== Header ===== */
    .header{
      position:sticky; top:0;
      z-index:50;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: linear-gradient(to bottom, rgba(30,30,30,.88), rgba(30,30,30,.38));
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .headerRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:14px 0;
    }

    .leftHead{
      display:flex; align-items:center; gap:12px;
      min-width: 210px;
    }

    /* Animated menu icon */
    .menuBtn{
      width:44px; height:44px;
      display:grid; place-items:center;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: 0 10px 26px rgba(0,0,0,.40);
      cursor:pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .menuBtn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.35); }
    .menuIcon{
      position:relative;
      width:18px; height:14px;
    }
    .menuIcon span{
      position:absolute; left:0; right:0;
      height:2px;
      background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(154,164,175,.85));
      border-radius:999px;
      transform-origin:center;
      transition: transform .28s ease, top .28s ease, opacity .2s ease, background .25s ease;
      box-shadow: 0 0 18px rgba(201,162,39,.12);
    }
    .menuIcon span:nth-child(1){ top:0; }
    .menuIcon span:nth-child(2){ top:6px; }
    .menuIcon span:nth-child(3){ top:12px; }
    .menuBtn.isOpen .menuIcon span{ background: linear-gradient(90deg, rgba(201,162,39,.95), rgba(255,255,255,.90)); }
    .menuBtn.isOpen .menuIcon span:nth-child(1){ top:6px; transform: rotate(45deg); }
    .menuBtn.isOpen .menuIcon span:nth-child(2){ opacity:0; }
    .menuBtn.isOpen .menuIcon span:nth-child(3){ top:6px; transform: rotate(-45deg); }

    /* Logo slot 130x31 */
    .brand{
      display:flex; align-items:center; gap:10px;
    }
    .brandMark{
      width:130px; height:31px;
      display:block;
      object-fit:contain;
      filter: drop-shadow(0 12px 20px rgba(0,0,0,.55));
    }
    .brandFallback{
      width:130px; height:31px;
      display:flex; align-items:center;
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:22px;
      color:var(--text);
    }
    .brandFallback b{ color:var(--gold); font-weight:400; }

    .rightHead{
      display:flex; align-items:center; gap:10px;
      min-width: 210px;
      justify-content:flex-end;
    }
    .iconBtn{
      width:44px; height:44px;
      display:grid; place-items:center;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: 0 10px 26px rgba(0,0,0,.40);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .iconBtn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.35); }
    .iconBtn .lucide{ width:18px; height:18px; color: rgba(243,245,247,.95); }

    /* ===== Overlay Menu ===== */
    .menuOverlay{
      position:fixed; inset:0;
      z-index:60;
      display:none;
      background: rgba(0,0,0,.58);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .menuOverlay.show{ display:block; }

    .menuPanel{
      position:absolute;
      top:78px;
      left:50%;
      transform:translateX(-50%);
      width:min(980px, calc(100% - 28px));
      border-radius: var(--r2);
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(1200px 500px at 20% 0%, rgba(201,162,39,.10), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .menuGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:0;
    }
    .menuLeft{ padding:18px; border-right:1px solid rgba(255,255,255,.08); }
    .menuRight{ padding:18px; }
    .menuTitle{
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.12em;
      font-size:18px;
      color: rgba(243,245,247,.92);
      margin:2px 0 10px;
      text-transform:uppercase;
    }
    .menuLinks{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px;
    }
    .menuLink{
      border-radius:18px;
      padding:12px 12px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.12);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .menuLink:hover{
      transform: translateY(-2px);
      border-color: rgba(201,162,39,.30);
      background: rgba(0,0,0,.18);
    }
    .menuLink .k{
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:15px;
      color: rgba(243,245,247,.94);
      display:flex; align-items:center; gap:8px;
      margin-bottom:4px;
    }
    .menuLink .d{
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.35;
    }
    .menuMeta{
      border-radius:18px;
      padding:14px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.14);
    }
    .menuMeta .slogan{
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(243,245,247,.95);
      font-size:16px;
      margin-bottom:8px;
    }
    .menuMeta p{
      margin:0;
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.45;
    }

    @media (max-width: 900px){
      .menuPanel{ top:auto; bottom:14px; border-radius: 22px; }
      .menuGrid{ grid-template-columns:1fr; }
      .menuLeft{ border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
      .menuLinks{ grid-template-columns:1fr; }
    }

    /* ===== Hero ===== */
    .hero{
      position:relative;
      padding:34px 0 18px;
      isolation:isolate;
    }
    .heroBack{
      position:absolute; inset:-20px -20px 0 -20px;
      z-index:-2;
      overflow:hidden;
    }
    .heroVideo{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      filter: blur(10px) saturate(.9) contrast(1.05);
      opacity:.22; /* ~20% visibility */
      transform: scale(1.08);
    }
    .heroShade{
      position:absolute; inset:0;
      background:
        radial-gradient(900px 520px at 22% 10%, rgba(201,162,39,.18), transparent 60%),
        radial-gradient(900px 520px at 78% 14%, rgba(154,164,175,.16), transparent 55%),
        linear-gradient(180deg, rgba(30,30,30,.92), rgba(30,30,30,.92));
      z-index:1;
    }
    .heroGlowLine{
      position:absolute; left:0; right:0; bottom:-1px; height:1px;
      background: linear-gradient(90deg, transparent, rgba(201,162,39,.55), transparent);
      opacity:.55;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:18px;
      align-items:stretch;
    }
    .heroCard{
      border-radius: var(--r2);
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(1200px 500px at 18% 0%, rgba(201,162,39,.10), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      box-shadow: var(--shadow2);
      overflow:hidden;
      position:relative;
    }
    .heroCard::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(800px 340px at 70% 10%, rgba(201,162,39,.12), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }
    .heroMain{ padding:22px 20px 18px; }
    .kicker{
      display:flex; align-items:center; gap:10px;
      color: rgba(154,164,175,.92);
      font-size:13px;
      letter-spacing:.08em;
      text-transform:uppercase;
      margin-bottom:12px;
    }
    .kDot{
      width:8px; height:8px; border-radius:999px;
      background: var(--gold);
      box-shadow: 0 0 0 6px rgba(201,162,39,.12);
    }
    .h1{
      margin:0;
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.02em;
      font-size: clamp(42px, 5.3vw, 76px);
      line-height:.95;
      text-transform:uppercase;
    }
    .h1 .muted{ color: rgba(154,164,175,.92); }
    .rotateWrap{ display:inline-block; position:relative; padding:0 .08em; margin-left:.08em; }
    .rotateWord{
      display:inline-block;
      font-weight:400;
      color: var(--gold);
      text-shadow: 0 18px 40px rgba(201,162,39,.10);
      will-change: transform, opacity, filter;
    }
    .sub{
      margin:12px 0 0;
      color: rgba(154,164,175,.92);
      font-size: 15px;
      line-height:1.55;
      max-width: 62ch;
    }
    .ctaRow{
      margin-top:16px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      border-radius: 16px;
      padding:12px 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      color: rgba(243,245,247,.95);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
      user-select:none;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.32); background: rgba(0,0,0,.20); }
    .btn.primary{
      background: linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.06));
      border-color: rgba(201,162,39,.35);
    }
    .btn .lucide{ width:18px; height:18px; color: rgba(243,245,247,.95); }

    /* Hero right rail */
    .heroRail{ padding:18px; display:flex; flex-direction:column; gap:12px; }
    .railCard{
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.14);
      padding:14px;
      position:relative;
      overflow:hidden;
      transition: transform .18s ease, border-color .18s ease;
    }
    .railCard:hover{ transform: translateY(-2px); border-color: rgba(201,162,39,.22); }
    .railCard .t{
      display:flex; align-items:center; gap:10px;
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:16px;
      color: rgba(243,245,247,.94);
      margin-bottom:6px;
    }
    .railCard .t .lucide{ width:18px; height:18px; color: rgba(201,162,39,.92); }
    .railCard .p{ margin:0; color: rgba(154,164,175,.92); font-size:13px; line-height:1.45; }

    @media (max-width: 900px){
      .hero{ padding-top:18px; }
      .heroGrid{ grid-template-columns:1fr; }
      .heroMain{ padding:18px 16px 16px; }
      .heroRail{ padding:14px 14px 18px; }
      .sub{ font-size:14px; }
    }

    /* ===== Sections ===== */
    section{ padding:18px 0; }
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:12px; margin:4px 0 12px;
    }
    .sectionTitle{
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:22px;
      margin:0;
    }
    .sectionTitle span{ color: var(--muted); }
    .sectionNote{
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.4;
      margin:0;
      max-width: 66ch;
    }

    /* ===== Universal cards (animated) ===== */
    .revealUp{
      transform: translateY(10px);
      opacity:0;
      transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .65s ease;
    }
    .revealUp.revealed{ transform: translateY(0); opacity:1; }

    .panel{
      border-radius: var(--r2);
      border:1px solid rgba(255,255,255,.09);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow3);
      padding:16px;
      overflow:hidden;
    }

    /* ===== Services (Full, Final) ===== */
    .servicesGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      align-items:start;
    }
    @media (max-width: 900px){
      .servicesGrid{ grid-template-columns:1fr; }
    }

    .pillar{
      position:relative;
    }
    .pillarHead{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      margin-bottom:12px;
    }
    .pillarTitle{
      display:flex; align-items:center; gap:10px;
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:18px;
      margin:0;
    }
    .pillarTitle .lucide{
      width:18px; height:18px;
      color: rgba(201,162,39,.92);
    }
    .pillarIntro{
      margin:0 0 14px;
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.55;
      max-width: 72ch;
    }

    .svcList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .svcItem{
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.14);
      padding:14px;
      transition: transform .18s ease, border-color .18s ease;
      position:relative;
      overflow:hidden;
    }
    .svcItem:hover{
      transform: translateY(-2px);
      border-color: rgba(201,162,39,.22);
    }
    .svcTop{
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:12px;
      margin-bottom:6px;
    }
    .svcName{
      margin:0;
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:17px;
      line-height:1.05;
      color: rgba(243,245,247,.95);
    }
    .svcIcon{
      width:38px; height:38px;
      display:grid; place-items:center;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      flex:0 0 auto;
    }
    .svcIcon .lucide{ width:18px; height:18px; color: rgba(243,245,247,.92); }
    .svcDesc{
      margin:0;
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.55;
    }

    /* ===== Case Studies (Different style: Records Timeline) ===== */
    .records{
      border-radius: var(--r2);
      border:1px solid rgba(255,255,255,.09);
      background:
        radial-gradient(1200px 480px at 10% 0%, rgba(201,162,39,.08), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow3);
      overflow:hidden;
    }
    .recordsHead{
      padding:16px;
      border-bottom:1px solid rgba(255,255,255,.08);
      display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    }
    .recordsHead .l{
      display:flex; flex-direction:column; gap:6px;
    }
    .recordsHead .t{
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:20px;
      margin:0;
    }
    .recordsHead .p{
      margin:0;
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.45;
      max-width: 70ch;
    }
    .recordsCTA{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    }
    .recordsBody{ padding:10px 16px 16px; }

    .record{
      display:grid;
      grid-template-columns: 200px 1fr;
      gap:12px;
      padding:14px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .record:last-child{ border-bottom:none; }
    .recordMeta{
      display:flex; flex-direction:column; gap:10px;
      padding-right:10px;
      border-right:1px solid rgba(255,255,255,.08);
    }
    .stamp{
      display:inline-flex; align-items:center; gap:8px;
      border-radius:999px;
      padding:8px 10px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      color: rgba(154,164,175,.92);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      width: fit-content;
    }
    .stamp .dot{
      width:7px; height:7px; border-radius:999px;
      background: var(--gold);
      box-shadow: 0 0 0 6px rgba(201,162,39,.10);
    }
    .metricBox{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.14);
      padding:12px;
    }
    .metricRow{
      display:flex; justify-content:space-between; gap:10px;
      color: rgba(154,164,175,.92);
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .metricRow b{
      color: rgba(243,245,247,.92);
      font-weight:700;
      letter-spacing:.10em;
    }
    .tags{
      display:flex; flex-wrap:wrap; gap:8px;
    }
    .tag{
      border-radius:999px;
      padding:7px 10px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.12);
      color: rgba(154,164,175,.92);
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .recordMain{
      padding-left:6px;
      display:flex; flex-direction:column; gap:8px;
    }
    .recordTitle{
      margin:0;
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:18px;
      line-height:1.1;
    }
    .recordText{
      margin:0;
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.55;
      max-width: 90ch;
    }
    .recordLink{
      display:inline-flex; align-items:center; gap:8px;
      color: rgba(243,245,247,.92);
      font-size:13px;
      opacity:.92;
      width: fit-content;
      transition: transform .2s ease, opacity .2s ease;
    }
    .recordLink:hover{ transform: translateX(2px); opacity:1; }
    .recordLink .lucide{ width:16px; height:16px; color: rgba(201,162,39,.92); }

    @media (max-width: 900px){
      .record{ grid-template-columns:1fr; }
      .recordMeta{ border-right:none; padding-right:0; }
      .recordMain{ padding-left:0; }
    }

    /* ================= BLOG (SCOPED) ================= */
.blogSec{ padding:18px 0; }
.blogSec .blogGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:12px;
  align-items:start;
}

/* Featured = نفس روح panel/records */
.blogSec .blogFeatured{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(1200px 480px at 10% 0%, rgba(201,162,39,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow3);
  overflow:hidden;
}
.blogSec .blogCover{
  position:relative;
  display:block;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.14);
  overflow:hidden;
}
.blogSec .blogCover img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.03);
  opacity:.9;
  transition: transform .35s ease, opacity .35s ease;
  filter: saturate(1.05) contrast(1.05);
}
.blogSec .blogCover:hover img{ transform: scale(1.08); opacity:1; }

.blogSec .blogBadges{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex; flex-wrap:wrap; gap:8px;
}
.blogSec .blogBadge{
  border-radius:999px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(243,245,247,.94);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.blogSec .blogBadge.ghost{
  background: rgba(201,162,39,.12);
  border-color: rgba(201,162,39,.25);
}

.blogSec .blogBody{ padding:16px; }
.blogSec .blogTitle{
  margin:0 0 8px;
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:22px;
  line-height:1.05;
}
.blogSec .blogTitle a{ color: rgba(243,245,247,.95); }
.blogSec .blogTitle a:hover{ color: rgba(201,162,39,.95); }

.blogSec .blogExcerpt{
  margin:0 0 14px;
  color: rgba(154,164,175,.92);
  font-size:13px;
  line-height:1.55;
  max-width: 80ch;
}

.blogSec .blogMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.blogSec .blogAuthor{
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.blogSec .blogAvatar{
  width:42px; height:42px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.blogSec .blogAuthorTxt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.blogSec .blogAuthorTxt b{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(243,245,247,.94);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.blogSec .blogAuthorTxt span{
  font-size:12px;
  color: rgba(154,164,175,.92);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.blogSec .blogInfo{
  display:flex; align-items:center; gap:10px;
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.blogSec .sep{
  width:5px; height:5px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,162,39,.10);
  display:inline-block;
}

/* List items = نفس روح svcItem/railCard */
.blogSec .blogList{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.blogSec .blogItem{
  display:grid;
  grid-template-columns: 122px 1fr;
  gap:12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.14);
  padding:12px;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.blogSec .blogItem:hover{
  transform: translateY(-2px);
  border-color: rgba(201,162,39,.22);
  background: rgba(0,0,0,.16);
}
.blogSec .blogThumb{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  aspect-ratio: 4/3;
}
.blogSec .blogThumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:.92;
  transform: scale(1.02);
  transition: transform .35s ease, opacity .35s ease;
}
.blogSec .blogItem:hover .blogThumb img{ transform: scale(1.06); opacity:1; }

.blogSec .blogItemBody{ min-width:0; }
.blogSec .blogItemTop{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:6px;
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.blogSec .blogPill{
  border-radius:999px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  color: rgba(243,245,247,.92);
}

.blogSec .blogItemTitle{
  margin:0 0 6px;
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:18px;
  line-height:1.05;
}
.blogSec .blogItemTitle a{ color: rgba(243,245,247,.94); }
.blogSec .blogItemTitle a:hover{ color: rgba(201,162,39,.95); }

.blogSec .blogItemExcerpt{
  margin:0 0 10px;
  color: rgba(154,164,175,.92);
  font-size:13px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.blogSec .blogItemMeta{
  display:flex; align-items:center; gap:10px;
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.blogSec .miniAvatar{
  width:22px; height:22px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.blogSec .by{
  color: rgba(243,245,247,.92);
  max-width: 140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Responsive */
@media (max-width: 900px){
  .blogSec .blogGrid{ grid-template-columns: 1fr; }
  .blogSec .blogItem{ grid-template-columns: 108px 1fr; }
  .blogSec .blogBody{ padding:14px; }
}
   
    /* ===== Mobile Bottom Nav (App-like) ===== */
    .bottomNav{ display:none; }
    @media (max-width: 900px){
      .bottomNav{
        display:flex;
        position:sticky;
        bottom:0;
        z-index:55;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(30,30,30,.25), rgba(30,30,30,.92));
        border-top:1px solid rgba(255,255,255,.08);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }
      .navBar{
        width:100%;
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        gap:8px;
      }
      .navItem{
        border-radius:16px;
        border:1px solid rgba(255,255,255,.10);
        background: rgba(0,0,0,.14);
        padding:10px 6px;
        display:grid;
        place-items:center;
        gap:6px;
        transition: transform .18s ease, border-color .18s ease;
      }
      .navItem:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.22); }
      .navItem .lucide{ width:18px; height:18px; color: rgba(243,245,247,.92); }
      .navItem span{
        font-size:11px;
        color: rgba(154,164,175,.92);
        letter-spacing:.08em;
        text-transform:uppercase;
      }
    }

    /* ===== Footer (New, premium) ===== */
    footer{
      margin-top:14px;
      border-top:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(900px 360px at 18% 0%, rgba(201,162,39,.06), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
    }
    .footerTop{
      padding:22px 0 14px;
    }
    .footGrid{
      display:grid;
      grid-template-columns: 1.1fr .7fr .7fr .9fr;
      gap:14px;
      align-items:start;
    }
    @media (max-width: 900px){
      .footGrid{ grid-template-columns:1fr; }
    }
    .footBrand{
      border-radius: var(--r2);
      border:1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.14);
      padding:16px;
    }
    .footBrand .logoRow{
      display:flex; align-items:center; gap:10px;
      margin-bottom:10px;
    }
    .footBrand .logoRow img{ width:130px; height:31px; object-fit:contain; }
    .footBrand .logoRow .brandFallback{ height:auto; }
    .footBrand .tagline{
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.10em;
      text-transform:uppercase;
      font-size:16px;
      margin:0 0 8px;
      color: rgba(243,245,247,.94);
    }
    .footBrand p{
      margin:0;
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.55;
    }

    .footCol{
      border-radius: var(--r2);
      border:1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.14);
      padding:16px;
    }
    .footCol h5{
      margin:0 0 10px;
      font-family:"Bebas Neue", sans-serif;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:16px;
      color: rgba(243,245,247,.94);
    }
    .footLinks{
      display:flex; flex-direction:column; gap:10px;
    }
    .footLinks a{
      color: rgba(154,164,175,.92);
      font-size:13px;
      display:inline-flex; align-items:center; gap:8px;
      transition: color .18s ease, transform .18s ease;
    }
    .footLinks a:hover{ color: rgba(243,245,247,.95); transform: translateX(2px); }
    .footLinks .lucide{ width:16px; height:16px; color: rgba(201,162,39,.92); }

    .footContact{
      display:flex; flex-direction:column; gap:10px;
      color: rgba(154,164,175,.92);
      font-size:13px;
    }
    .footContact a{ color: rgba(154,164,175,.92); }
    .footContact a:hover{ color: rgba(243,245,247,.95); }

    .footBottom{
      padding:12px 0 18px;
      border-top:1px solid rgba(255,255,255,.08);
      color: rgba(154,164,175,.90);
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .footBottomRow{
      display:flex; justify-content:space-between; gap:12px;
      flex-wrap:wrap;
    }
    .miniSocial{
      display:flex; gap:10px; align-items:center;
    }
    .miniSocial a{
      width:40px; height:40px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      display:grid; place-items:center;
      transition: transform .18s ease, border-color .18s ease;
    }
    .miniSocial a:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.25); }
    .miniSocial .lucide{ width:18px; height:18px; color: rgba(243,245,247,.92); }
    /* ===== Minimal CTA ===== */
.ctaSimple{ padding: 18px 0 6px; }
.ctaBox{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(1000px 420px at 18% 0%, rgba(201,162,39,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow3);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  overflow:hidden;
}
.ctaText h3{
  margin:0 0 6px;
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:18px;
  line-height:1.1;
}
.ctaText p{
  margin:0;
  color: rgba(154,164,175,.92);
  font-size:13px;
  line-height:1.55;
  max-width: 78ch;
}
.ctaBtn{ white-space:nowrap; }

@media (max-width: 900px){
  .ctaBox{ flex-direction:column; align-items:stretch; }
  .ctaBtn{ width:100%; justify-content:center; }
}

/* ✅ Mobile header fix: prevent icons from going خارج الشاشة */
@media (max-width: 520px){

  .headerRow{
    gap:10px;
    padding:12px 0;
  }

  /* أهم سطرين */
  .leftHead,
  .rightHead{
    min-width: 0;          /* بدل 210px */
    flex: 0 1 auto;        /* يخليهم يقدروا يصغروا */
  }

  /* خلّي اللوجو مرن ومش بيزقّ */
  .brand{
    min-width:0;
    flex: 1 1 auto;
    justify-content:center;
  }

  /* صغّر مساحة اللوجو شوية */
  .brandMark,
  .brandFallback{
    width: 104px;
    height: 26px;
  }

  /* صغّر الأزرار شوية عشان تسع */
  .menuBtn,
  .iconBtn{
    width:40px;
    height:40px;
    border-radius:12px;
  }

  .iconBtn .lucide{
    width:17px;
    height:17px;
  }
}

/* ================================
   ✅ HARD STOP: No Horizontal Scroll
   ضع هذا في آخر ملف الـ CSS
================================ */

/* 1) امنع أي overflow أفقي على الصفحة كلها */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* 2) خلي كل العناصر تحترم عرض الشاشة */
*,
*::before,
*::after{
  box-sizing:border-box;
  max-width:100%;
}

/* 3) الصور/الفيديو/SVG ما تطلعش برا */
img, svg, video, canvas{
  max-width:100%;
  height:auto;
  display:block;
}

/* 4) أي عنصر flex/grid ممكن يسبب تمدد — اسمحله يصغر */
.headerRow,
.wrap,
.appFrame,
.menuPanel,
.menuGrid,
.leftHead,
.rightHead,
.brand{
  min-width:0;
}

/* 5) الكلمات/اللينكات الطويلة ما تعملش overflow */
a, p, h1, h2, h3, h4, h5, h6, span, div{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 6) لو في عناصر بتتحرك/تعمل transform وتزق العرض */
.noise,
.menuOverlay{
  width:100%;
}

/* 7) الفريم على الموبايل ما يزودش عرض بسبب border */
@media (max-width: 900px){
  .appFrame{
    width:min(100%, var(--app));
    max-width:100%;
    overflow-x:hidden;
  }
}

/* =========================================
   BRIVOX — Partners + Latest Work (2 sections)
   Drop-in, scoped, matches your system
========================================= */

.bxSlider{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(1200px 520px at 12% 0%, rgba(201,162,39,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow3);
  padding:14px;
  overflow:hidden;
}

.bxSliderTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:12px;
}

.bxSliderHint{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  min-width:0;
}
.bxSliderHint span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.bxSliderActions{
  display:flex;
  gap:10px;
  align-items:center;
}

.bxTrack{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:4px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.bxTrack::-webkit-scrollbar{ height:8px; }
.bxTrack::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius:999px;
}
.bxTrack::-webkit-scrollbar-track{
  background: rgba(0,0,0,.10);
  border-radius:999px;
}

/* HUD */
.bxHud{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.bxDots{ display:flex; gap:8px; align-items:center; }
.bxDotBtn{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  cursor:pointer;
}
.bxDotBtn.isActive{
  background: rgba(201,162,39,.22);
  border-color: rgba(201,162,39,.35);
  transform: scale(1.08);
}
.bxCounter{
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- Partners cards ---------- */
.bxPCard{
  scroll-snap-align:start;
  flex:0 0 86%;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.14);
  padding:14px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.bxPCard:hover{
  transform: translateY(-2px);
  border-color: rgba(201,162,39,.22);
  background: rgba(0,0,0,.16);
}

.bxPCard::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(780px 300px at 70% 10%, rgba(201,162,39,.10), transparent 60%);
  opacity:.9;
  pointer-events:none;
}

.bxPTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  position:relative;
  z-index:1;
}

.bxPLogo{
  width:48px; height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.bxPLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
  opacity:.96;
}
.bxPLogo.noImg .bxPLogoFallback{ display:flex; }
.bxPLogoFallback{
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.10em;
  font-size:16px;
  color: rgba(243,245,247,.94);
}
.bxPLogoFallback{ color: rgba(243,245,247,.95); }
.bxPLogoFallback::first-letter{ color: var(--gold); }

.bxPBadge{
  border-radius:999px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(154,164,175,.92);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* =========================================
   BRIVOX — Partners (Compact Strip)
   (Now: Modern Engineering Stack)
========================================= */
.bxPartnerStrip{ padding: 14px 0 6px; }

.bxPSCard{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(900px 360px at 16% 0%, rgba(201,162,39,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow3);
  padding:14px;
  overflow:hidden;
}

.bxPSHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:12px;
}

.bxPSTitle{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.bxPSDot{
  width:8px;height:8px;border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,162,39,.10);
}
.bxPSTitle h3{
  margin:0;
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:18px;
  color: rgba(243,245,247,.94);
  white-space:nowrap;
}

.bxPSNote{
  margin:0;
  color: rgba(154,164,175,.92);
  font-size:13px;
  line-height:1.45;
  max-width: 60ch;
  text-align:right;
}

/* Logos row */
.bxPSLogos{
  display:flex;
  align-items:stretch;
  gap:10px;
  overflow-x:auto;
  padding:2px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.bxPSLogos::-webkit-scrollbar{ height:8px; }
.bxPSLogos::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius:999px;
}
.bxPSLogos::-webkit-scrollbar-track{
  background: rgba(0,0,0,.10);
  border-radius:999px;
}

.bxPSLogo{
  flex:0 0 auto;
  scroll-snap-align:start;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  padding:12px 14px;

  /* UPDATED: allow icon + label vertical */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-width: 150px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

/* Icon */
.bxPSLogo img{
  height:28px;
  width:auto;
  max-width:160px;
  display:block;
  opacity:.88;
  filter: grayscale(1) contrast(1.08);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

/* Label under icon */
.bxPSLabel{
  display:block;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(154,164,175,.92);
  white-space:nowrap;
  line-height:1;
  user-select:none;
}

.bxPSLogo:hover{
  transform: translateY(-2px);
  border-color: rgba(201,162,39,.25);
  background: rgba(0,0,0,.16);
}
.bxPSLogo:hover img{
  opacity:1;
  filter: grayscale(0) contrast(1.05);
  transform: translateY(-1px);
}
.bxPSLogo:hover .bxPSLabel{
  color: rgba(243,245,247,.92);
}

/* Desktop: خلّيها صف ثابت بدون سكرول */
@media (min-width: 901px){
  .bxPSLogos{
    overflow:visible;
    justify-content:space-between;
  }
  .bxPSLogo{
    min-width: 0;
    flex: 1 1 auto;
  }
  .bxPSLogo img{ max-width: 180px; }
}

/* Mobile: خلي النص تحت العنوان عشان يبقى أصغر */
@media (max-width: 520px){
  .bxPSHead{ flex-direction:column; align-items:flex-start; }
  .bxPSNote{ text-align:left; max-width: 52ch; }
  .bxPSLogo{ min-width: 168px; }
  .bxPSLogo img{ height:26px; }
  .bxPSLabel{ font-size:11px; letter-spacing:.12em; }
}

/* =========================================
   BRIVOX — Latest Work Projects (Easy to extend)
========================================= */

.bxLatestWork{ padding: 18px 0; }

.bxLWGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
}

/* Card */
.bxLWCard{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.14);
  overflow:hidden;
  position:relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  min-width:0;
}
.bxLWCard:hover{
  transform: translateY(-2px);
  border-color: rgba(201,162,39,.22);
  background: rgba(0,0,0,.16);
}

/* Media */
.bxLWMedia{
  position:relative;
  aspect-ratio: 16/10;
  background: rgba(0,0,0,.14);
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bxLWMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.03);
  opacity:.92;
  filter: saturate(1.05) contrast(1.05);
  transition: transform .35s ease, opacity .35s ease;
}
.bxLWCard:hover .bxLWMedia img{ transform: scale(1.08); opacity:1; }

.bxLWShade{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.52));
  pointer-events:none;
}

/* No image placeholder */
.bxLWMedia.noImg{
  display:grid;
  place-items:center;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(201,162,39,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.bxLWMedia.noImg::after{
  content:"ADD PREVIEW IMAGE";
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:16px;
  color: rgba(243,245,247,.90);
  opacity:.75;
}

/* Badges */
.bxLWBadges{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index:2;
}
.bxLWPill{
  border-radius:999px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(243,245,247,.94);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Body */
.bxLWBody{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.bxLWTitle{
  margin:0;
  font-family:"Bebas Neue", sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:20px;
  line-height:1.05;
}
.bxLWText{
  margin:0;
  color: rgba(154,164,175,.92);
  font-size:13px;
  line-height:1.55;
  max-width: 90ch;
}
.bxLWTags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}

/* Footer link */
.bxLWFoot{
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: rgba(243,245,247,.92);
  font-size:13px;
  opacity:.92;
}
.bxLWFoot .lucide{ width:16px; height:16px; color: rgba(201,162,39,.92); }

/* Responsive */
@media (max-width: 900px){
  .bxLWGrid{ grid-template-columns: 1fr; }
  .bxLWTitle{ font-size:19px; }
}

/* ---------- Desktop layout: becomes grid (no slider) ---------- */
@media (min-width: 901px){
  .bxTrack{
    overflow:visible;
    scroll-snap-type:none;
    flex-wrap:wrap;
    padding:0;
  }
  /* Partners: 4 cards */
  .bxPCard{
    flex: 1 1 calc(25% - 12px);
    min-width: 240px;
  }
  /* Work: 3 cards row */
  .bxWCard{
    flex: 1 1 calc(33.333% - 12px);
    min-width: 280px;
  }
}

/* Mobile sizes tune */
@media (max-width: 520px){
  .bxPCard{ flex-basis: 92%; }
  .bxWCard{ flex-basis: 92%; }
}