@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#080a09;
  --bg-2:#0b0e0c;
  --text:#f6f7f6;
  --muted:#aab1ac;
  --line:rgba(255,255,255,.10);
  --green:#00a201;
  --green-2:#37d43a;
  --grid:rgba(255,255,255,.035);
  --ring:rgba(0,162,1,.45);
  --card-shadow:rgba(0,0,0,.14);
  --card-hover-shadow:rgba(0,0,0,.28);
  --radius:22px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html[data-theme="light"]{
  --bg:#f1f4f1;
  --bg-2:#e7ece8;
  --text:#172019;
  --muted:#687269;
  --line:rgba(19,32,23,.12);
  --grid:rgba(19,32,23,.045);
  --ring:rgba(0,130,1,.35);
  --card-shadow:rgba(24,40,28,.09);
  --card-hover-shadow:rgba(24,40,28,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:'Cairo',system-ui,sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(0,162,1,.13), transparent 35%),
    linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);
  overflow-x:hidden;
  transition:background .45s ease,color .45s ease;
}
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 50% -10%, rgba(0,162,1,.10), transparent 35%),
    linear-gradient(180deg,#f8fbf8 0%,var(--bg) 100%);
}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}

.page{
  position:relative;
  width:min(720px, calc(100% - 32px));
  margin:0 auto;
  padding:24px 0 24px;
  z-index:2;
}
.topbar{display:flex;justify-content:flex-end;margin-bottom:6px}
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  cursor:pointer;
  box-shadow:0 8px 24px var(--card-shadow);
  backdrop-filter:blur(14px);
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
html[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.78)}
.theme-toggle:hover{transform:translateY(-2px);border-color:rgba(0,162,1,.38)}
.theme-icon{display:grid;place-items:center;width:17px;height:17px;font-size:15px;line-height:1}
.theme-icon-sun{display:none}
html[data-theme="light"] .theme-icon-sun{display:grid}
html[data-theme="light"] .theme-icon-moon{display:none}
.theme-label{font-size:11px;font-weight:800}

.grid-overlay{
  position:fixed;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,black 0%,transparent 78%);
}
.noise{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.ambient{position:fixed;width:320px;height:320px;border-radius:50%;filter:blur(70px);opacity:.13;pointer-events:none}
.ambient-a{background:#00a201;top:4%;left:-120px;animation:driftA 12s ease-in-out infinite alternate}
.ambient-b{background:#fff;bottom:0;right:-160px;opacity:.045;animation:driftB 16s ease-in-out infinite alternate}
html[data-theme="light"] .ambient-a{opacity:.08} html[data-theme="light"] .ambient-b{background:#00a201;opacity:.04}
@keyframes driftA{to{transform:translate(70px,50px) scale(1.15)}} @keyframes driftB{to{transform:translate(-60px,-90px) scale(1.1)}}

.profile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:24px}
.logo-shell{position:relative;width:148px;height:148px;display:grid;place-items:center;animation:logoIn .9s var(--ease) both}
.logo{width:114px;height:114px;object-fit:cover;border-radius:50%;position:relative;z-index:3;filter:drop-shadow(0 14px 32px rgba(0,162,1,.18))}
.logo-ring,.logo-ring-2{position:absolute;inset:8px;border:1px solid var(--ring);border-radius:50%;animation:spin 14s linear infinite}
.logo-ring:before,.logo-ring:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--green-2);box-shadow:0 0 14px rgba(55,212,58,.9)}
.logo-ring:before{top:-3px;left:34px}.logo-ring:after{bottom:-3px;right:28px}
.logo-ring-2{inset:-2px;border-color:rgba(127,141,130,.20);border-style:dashed;animation-direction:reverse;animation-duration:20s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes logoIn{from{opacity:0;transform:translateY(22px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}
.brand-copy{animation:copyIn .9s .1s var(--ease) both}
@keyframes copyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--green-2);box-shadow:0 0 18px rgba(55,212,58,.8)}
h1{margin:8px 0 4px;font-size:clamp(26px,5vw,39px);line-height:1.25;font-weight:900;letter-spacing:-.03em}
.brand-copy p{margin:0;color:var(--muted);font-size:13px;font-weight:500}

.links{display:grid;gap:14px;perspective:1000px}
.link-card{--mx:50%;--my:50%;position:relative;min-height:78px;display:grid;grid-template-columns:54px 1fr 24px;align-items:center;gap:14px;padding:11px 16px;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(250px circle at var(--mx) var(--my),rgba(255,255,255,.07),transparent 40%),linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:0 10px 30px var(--card-shadow);overflow:hidden;transform-style:preserve-3d;transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);opacity:0;animation:cardIn .75s var(--ease) forwards}
html[data-theme="light"] .link-card{background:radial-gradient(250px circle at var(--mx) var(--my),rgba(0,162,1,.055),transparent 40%),linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.72))}
.link-card:nth-child(1){animation-delay:.12s}.link-card:nth-child(2){animation-delay:.19s}.link-card:nth-child(3){animation-delay:.26s}.link-card:nth-child(4){animation-delay:.33s}.link-card:nth-child(5){animation-delay:.40s}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.link-card:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.10) 50%,transparent 75%);transform:translateX(120%);transition:transform .9s var(--ease)}
.link-card:hover:before{transform:translateX(-120%)}
.link-card:hover{transform:translateY(-5px) rotateX(1.5deg) rotateY(-1.5deg);border-color:rgba(0,162,1,.40);box-shadow:0 22px 50px var(--card-hover-shadow),0 0 0 1px rgba(0,162,1,.06) inset}
.link-card:active{transform:translateY(-1px) scale(.992)}
.card-icon{position:relative;width:54px;height:54px;display:grid;place-items:center;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035));color:#f4f7f4;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .45s var(--ease),background .45s var(--ease);overflow:hidden}
.card-icon img{width:27px;height:27px;display:block;object-fit:contain}
.link-card:hover .card-icon{transform:translateZ(18px) rotate(-4deg) scale(1.06)}
.icon-whatsapp{background:linear-gradient(145deg,rgba(0,162,1,.95),rgba(0,100,1,.78));border-color:rgba(55,212,58,.45)}
.icon-facebook{background:linear-gradient(145deg,#1877f2,#0d57c7)}
.icon-instagram{background:linear-gradient(145deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.icon-tiktok{background:linear-gradient(145deg,#111,#252525)}
.icon-linkedin{background:linear-gradient(145deg,#0a66c2,#004182)}
.card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.card-text strong{font-size:15px;font-weight:800;line-height:1.35}.card-text small{font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrow{color:#8f9891;font-size:21px;transform:translateZ(10px);transition:transform .4s var(--ease),color .4s var(--ease)}
.link-card:hover .arrow{transform:translateX(-5px) translateZ(10px);color:var(--text)}
.featured{border-color:rgba(0,162,1,.34);background:radial-gradient(350px circle at 75% 10%,rgba(0,162,1,.18),transparent 45%),linear-gradient(135deg,rgba(0,162,1,.13),rgba(255,255,255,.03))}
html[data-theme="light"] .featured{background:radial-gradient(350px circle at 75% 10%,rgba(0,162,1,.13),transparent 45%),linear-gradient(135deg,rgba(0,162,1,.08),rgba(255,255,255,.78))}
.featured .card-glow{position:absolute;inset:auto 10% -80px auto;width:220px;height:130px;border-radius:50%;background:rgba(0,162,1,.22);filter:blur(45px);pointer-events:none}
.featured:after{content:"الأكثر استخدامًا";position:absolute;top:10px;left:14px;padding:3px 8px;border-radius:999px;border:1px solid rgba(55,212,58,.22);background:rgba(0,162,1,.08);color:#90ef91;font-size:8px;font-weight:800;opacity:.95}
html[data-theme="light"] .featured:after{color:#118a19}

.trust-strip{margin:24px 0 4px;display:flex;justify-content:center;align-items:center;gap:22px;color:var(--text);opacity:.92}
.trust-strip div{display:flex;flex-direction:column;align-items:center;gap:1px}.trust-strip b{font-size:12px;font-weight:900}.trust-strip span{font-size:9px;color:var(--muted)}.trust-strip i{width:1px;height:25px;background:var(--line)}
footer{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;transition:border-color .5s ease,color .5s ease}.footer-mark{color:var(--text);font-weight:900;letter-spacing:.18em;transition:color .5s ease}
.wasm-credit{margin:20px auto 0;padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:lowercase;transition:color .5s ease}.wasm-credit-line{width:84px;height:1px;background:var(--line);margin-bottom:1px;transition:background .5s ease,width .5s ease}.wasm-logo-link{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:transform .45s var(--ease),filter .45s var(--ease)}.wasm-logo{width:64px;height:64px;object-fit:cover;border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.16);display:block;transition:transform .45s var(--ease),box-shadow .45s ease,filter .45s ease}.wasm-logo-link:hover{transform:translateY(-3px)}.wasm-logo-link:hover .wasm-logo{transform:scale(1.045);box-shadow:0 16px 34px rgba(0,0,0,.22)}.wasm-credit-text{transition:transform .45s var(--ease),color .5s ease;letter-spacing:.17em}.wasm-logo-link:focus-visible{outline:2px solid var(--green-2);outline-offset:4px}

/* Smooth light/dark theme transition */
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation-name:themeOldRoot}
::view-transition-new(root){animation-name:themeNewRoot}
@keyframes themeOldRoot{to{opacity:0;filter:brightness(.98)}}
@keyframes themeNewRoot{from{opacity:0;filter:brightness(1.08)}}
@supports not (view-transition-name:root){html.theme-switching body{transition:background .55s ease,color .55s ease}}
.theme-ripple{position:fixed;inset:0;z-index:9999;pointer-events:none;background:var(--next-bg,#080a09);clip-path:circle(0 at var(--ripple-x,50%) var(--ripple-y,50%));opacity:0;transition:none}
.theme-ripple.is-active{opacity:1;animation:themeRipple .65s cubic-bezier(.22,1,.36,1) forwards}
@keyframes themeRipple{0%{clip-path:circle(0 at var(--ripple-x,50%) var(--ripple-y,50%));opacity:1}100%{clip-path:circle(150% at var(--ripple-x,50%) var(--ripple-y,50%));opacity:1}}

@media (max-width:600px){.page{width:min(100% - 20px,720px);padding-top:16px}.topbar{margin-bottom:4px}.theme-toggle{padding:8px 11px}.theme-label{font-size:10px}.logo-shell{width:132px;height:132px}.logo{width:101px;height:101px}h1{font-size:28px}.brand-copy p{font-size:12px}.link-card{min-height:74px;border-radius:19px;grid-template-columns:50px 1fr 19px;padding:10px 12px;gap:11px}.card-icon{width:50px;height:50px;border-radius:15px}.card-icon img{width:25px;height:25px}.card-text strong{font-size:13px}.card-text small{font-size:10px}.featured:after{display:none}.trust-strip{gap:15px}footer{font-size:9px}.wasm-logo{width:56px;height:56px}.wasm-credit{margin-top:18px;padding-top:14px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.link-card.is-disabled{cursor:default;opacity:.56}.link-card.is-disabled:hover{transform:none;border-color:var(--line);box-shadow:0 10px 30px var(--card-shadow)}.link-card.is-disabled:before{display:none}.link-card.is-disabled .arrow{opacity:.35}.link-card.is-disabled .card-icon{filter:grayscale(.3)}