/* SBG Links - Brand System v1.0
   All tokens live in :root. Never hardcode a colour or spacing value. */

:root{
  --ind:#4F46E5; --ind7:#4338CA; --ind8:#3730A3;
  --ind1:#E0E7FF; --ind3:#A5B4FC;
  --s900:#0F172A; --s800:#16203A; --s700:#334155; --s400:#94A3B8;
  --line:rgba(148,163,184,.16);
  --line-hi:rgba(79,70,229,.55);
  --display:'Sora',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  /* 4px spacing ladder */
  --xxs:4px; --xs:8px; --sm:12px; --md:16px; --lg:24px; --xl:32px; --xxl:48px; --xxxl:64px;
}
html[lang="ar"]{ --display:'Cairo',sans-serif; --body:'IBM Plex Sans Arabic',sans-serif; }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--s900); color:#fff;
  font-family:var(--body); font-size:16px; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
  overflow-x:hidden;
}

/* ---- molecular lattice backdrop ---- */
#lattice{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.55;pointer-events:none}
body::after{ /* grain */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
.glow.a{width:420px;height:420px;background:rgba(79,70,229,.20);top:-140px;inset-inline-start:-120px}
.glow.b{width:360px;height:360px;background:rgba(6,182,212,.10);bottom:-140px;inset-inline-end:-110px}

.wrap{position:relative;z-index:2;width:100%;max-width:560px;margin:0 auto;padding:var(--xxl) var(--lg) var(--xl);flex:1}

/* ---- header ---- */
.top{display:flex;justify-content:center;margin-bottom:var(--xl)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.03)}
.lang button{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;
  min-height:44px;min-width:52px;padding:0 var(--md);background:none;border:0;color:var(--s400);cursor:pointer;
  transition:color 150ms ease-out,background 150ms ease-out;
}
.lang button[aria-pressed="true"]{background:var(--ind);color:#fff}
.lang button:hover{color:#fff}

.brand{text-align:center;margin-bottom:var(--lg)}
.brand a{display:inline-block;color:#fff;transition:transform 150ms ease-out}
.brand a:hover{transform:translateY(-2px)}
.mark{width:236px;height:auto;display:block;margin:0 auto}
.name{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--ind3);margin-top:var(--md);text-transform:uppercase}
html[lang="ar"] .name{letter-spacing:0;font-size:15px}
.tag{font-size:14px;color:var(--s400);margin-top:var(--xs);line-height:1.45;padding:0 var(--md)}

/* ---- sections ---- */
.sec{margin-bottom:var(--xl)}
.sec h2{
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--s400);margin-bottom:var(--sm);
  display:flex;align-items:center;gap:var(--sm);
}
html[lang="ar"] .sec h2{letter-spacing:0;font-size:13px}
.sec h2::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ind);flex:none}
.sec h2::after{content:"";height:1px;flex:1;background:var(--line)}

.rows{display:flex;flex-direction:column;gap:var(--xs)}
.row{
  display:flex;align-items:center;gap:var(--md);
  min-height:64px;padding:var(--sm) var(--md);
  border:1px solid var(--line);border-radius:8px;
  background:rgba(255,255,255,.02);
  color:#fff;text-decoration:none;
  transition:border-color 150ms ease-out,background 150ms ease-out,transform 150ms ease-out;
}
.row:hover,.row:focus-visible{
  border-color:var(--line-hi);background:rgba(79,70,229,.10);transform:translateY(-1px);outline:none;
}
.row:focus-visible{box-shadow:0 0 0 2px var(--ind3)}
.node{
  width:36px;height:36px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(79,70,229,.12);
  transition:background 150ms ease-out,border-color 150ms ease-out;
}
.row:hover .node{background:var(--ind);border-color:var(--ind)}
.node svg{width:18px;height:18px;stroke:var(--ind3);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke 150ms ease-out}
.row:hover .node svg{stroke:#fff}
.txt{flex:1;min-width:0}
.txt b{display:block;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em}
html[lang="ar"] .txt b{font-size:16px}
.txt span{display:block;font-size:13px;color:var(--s400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:start}
html[lang="ar"] .txt span{text-align:right}
.chev{flex:none;color:var(--s700);transition:color 150ms ease-out,transform 150ms ease-out}
.row:hover .chev{color:var(--ind3);transform:translateX(3px)}
html[dir="rtl"] .chev{transform:scaleX(-1)}
html[dir="rtl"] .row:hover .chev{transform:scaleX(-1) translateX(3px)}

/* ---- social grid ---- */
.social{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--xs)}
@media (min-width:460px){.social{grid-template-columns:repeat(6,1fr)}}
.social a{
  min-height:56px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);
  color:var(--s400);
  transition:color 150ms ease-out,border-color 150ms ease-out,background 150ms ease-out,transform 150ms ease-out;
}
.social a:hover,.social a:focus-visible{color:#fff;border-color:var(--line-hi);background:rgba(79,70,229,.14);transform:translateY(-2px);outline:none}
.social a:focus-visible{box-shadow:0 0 0 2px var(--ind3)}
.social svg{width:20px;height:20px;fill:currentColor}


/* ---- legal ---- */
.legal{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);overflow:hidden}
.legal>div{display:flex;flex-direction:column;gap:2px;padding:var(--sm) var(--md);border-bottom:1px solid var(--line)}
.legal>div:last-child{border-bottom:0}
.legal dt{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--s400)}
html[lang="ar"] .legal dt{letter-spacing:0;font-size:12px;text-transform:none}
.legal dd{font-size:13.5px;color:#fff;line-height:1.5}
.legal dd.ar-val{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:14px}
.acts{margin-top:var(--xs);border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02);overflow:hidden}
.acts summary{
  display:flex;align-items:center;gap:var(--sm);min-height:52px;padding:0 var(--md);
  cursor:pointer;list-style:none;font-family:var(--display);font-size:13.5px;font-weight:600;color:#fff;
  transition:background 150ms ease-out;
}
.acts summary::-webkit-details-marker{display:none}
.acts summary:hover{background:rgba(79,70,229,.10)}
.acts summary>span{flex:1}
.acts summary::after{
  content:"";width:8px;height:8px;flex:none;border-right:2px solid var(--ind3);border-bottom:2px solid var(--ind3);
  transform:rotate(45deg);margin-bottom:4px;transition:transform 150ms ease-out;
}
.acts[open] summary::after{transform:rotate(-135deg);margin:4px 0 0}
.count{
  flex:none;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--ind);
  color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;
}
.actlist{list-style:none;padding:0 var(--md) var(--sm);margin:0;display:flex;flex-direction:column;gap:var(--sm)}
.actlist li{display:flex;gap:var(--sm);align-items:flex-start;font-size:13px;color:var(--s400);line-height:1.5}
.actlist code{
  flex:none;font-family:'IBM Plex Sans',monospace;font-size:11px;color:var(--ind3);
  background:rgba(79,70,229,.14);border-radius:4px;padding:2px 6px;margin-block-start:1px;direction:ltr;
}
.addendum{padding:var(--sm) var(--md) var(--md);margin:0;font-size:12px;color:var(--s400);line-height:1.6;border-block-start:1px solid var(--line)}

/* ---- cta + footer ---- */
.cta{
  display:flex;align-items:center;justify-content:center;gap:var(--xs);
  min-height:52px;border-radius:999px;background:var(--ind);color:#fff;
  font-family:var(--display);font-weight:600;font-size:14px;text-decoration:none;
  transition:background 150ms ease-out,transform 150ms ease-out;
}
.cta:hover{background:var(--ind7);transform:translateY(-1px)}
.cta:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ind3)}
.cta .arw{transition:transform 150ms ease-out}
.cta:hover .arw{transform:translateX(3px)}
html[dir="rtl"] .cta .arw{transform:scaleX(-1)}
html[dir="rtl"] .cta:hover .arw{transform:scaleX(-1) translateX(3px)}

footer{position:relative;z-index:2;text-align:center;padding:var(--lg);font-size:12px;color:var(--s400);line-height:1.7}
footer .ar-name{display:block;color:var(--s400);margin-bottom:var(--xxs);font-family:'IBM Plex Sans Arabic',sans-serif}

/* ---- entrance ---- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.anim{animation:rise 340ms ease-out both}
@media (prefers-reduced-motion:reduce){
  .anim{animation:none}
  #lattice{display:none}
  *{transition-duration:1ms!important}
}
@media (max-width:400px){
  .wrap{padding:var(--xl) var(--md) var(--lg)}
  .mark{width:200px}
}