:root{
  --navy:#315A8A;
  --navy-deep:#1d3a5c;
  --navy-ink:#13273f;
  --grey:#666666;
  --white:#ffffff;
  --card: rgba(255,255,255,.07);
  --card-hover: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.16);
}
/* liquid-metal animated border */
@property --mtl{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spinmtl{to{--mtl:360deg}}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Almarai',system-ui,sans-serif;
  background:var(--navy-ink);
  color:var(--white);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
}

/* ===== Living gradient background ===== */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
    radial-gradient(130% 100% at 50% -10%, #3f71aa 0%, var(--navy) 34%, var(--navy-deep) 66%, var(--navy-ink) 100%);}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;will-change:transform}
.blob.b1{width:60vw;height:60vw;left:-15vw;top:-10vh;background:radial-gradient(circle,#4f86c6,transparent 65%);animation:drift1 22s ease-in-out infinite}
.blob.b2{width:55vw;height:55vw;right:-18vw;top:20vh;background:radial-gradient(circle,#27507e,transparent 65%);animation:drift2 27s ease-in-out infinite}
.blob.b3{width:45vw;height:45vw;left:20vw;bottom:-20vh;background:radial-gradient(circle,#5b93d1,transparent 68%);opacity:.4;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-5vh) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-8vh) scale(1.15)}}
/* cursor glow */
.cursor-glow{position:fixed;width:520px;height:520px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle, rgba(130,180,240,.14), transparent 60%);
  transform:translate(-50%,-50%);left:50%;top:30%;transition:opacity .4s;opacity:0}
/* soft dot grid */
.blueprint{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.85;
  background-image:radial-gradient(rgba(255,255,255,.26) 1.3px, transparent 1.5px);
  background-size:26px 26px;background-position:center;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 25%, #000 45%, transparent 100%);
          mask-image:radial-gradient(130% 95% at 50% 25%, #000 45%, transparent 100%)}

/* subtle grain */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== Layout ===== */
.wrap{position:relative;z-index:5;width:100%;max-width:480px;padding:clamp(34px,8vh,70px) 22px 40px;
  display:flex;flex-direction:column;align-items:center;gap:18px}

.logo{width:clamp(150px,42vw,190px);opacity:0;transform:translateY(16px);filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.tagline{font-size:clamp(14px,3.6vw,16px);font-weight:700;letter-spacing:.01em;color:rgba(255,255,255,.92);
  text-align:center;opacity:0;transform:translateY(16px)}

/* main CTA */
.cta{width:100%;margin-top:10px;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 22px;border-radius:18px;text-decoration:none;color:var(--navy-ink);font-weight:800;font-size:16px;
  background:linear-gradient(180deg,#ffffff,#e9f0f8);
  box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(16px);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.cta::before{opacity:.7;animation-duration:5s}
.cta:hover::before{opacity:1;animation-duration:2.6s}
.cta:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 16px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.9)}
.cta .shine{position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}75%,100%{left:130%}}

/* glass link cards */
.links{width:100%;display:flex;flex-direction:column;gap:13px;margin-top:4px}
.card{position:relative;display:flex;align-items:center;gap:15px;width:100%;
  padding:15px 17px;border-radius:16px;text-decoration:none;color:var(--white);
  background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px) saturate(145%) brightness(1.12);-webkit-backdrop-filter:blur(4px) saturate(145%) brightness(1.12);
  box-shadow:0 6px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 1px rgba(255,255,255,.08);
  opacity:0;transform:translateY(18px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s, box-shadow .3s}
/* metallic ring */
.card::before, .cta::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  background:conic-gradient(from var(--mtl),
    rgba(255,255,255,.04), #cfd9e6 10%, #ffffff 17%, #8ea6c4 27%, rgba(255,255,255,.05) 38%,
    #e8eef6 55%, #6f8bb0 68%, #ffffff 80%, #aebfd4 88%, rgba(255,255,255,.04));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.45;animation:spinmtl 7s linear infinite;pointer-events:none;transition:opacity .35s}
.card:hover::before{opacity:.9;animation-duration:3s}
.card:hover{transform:translateY(-3px);background:var(--card-hover);border-color:transparent;
  box-shadow:0 14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.3)}
.card .ic{flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.card .ic svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card .tx{display:flex;flex-direction:column;line-height:1.35}
.card .tx b{font-size:15px;font-weight:700}
.card .tx span{font-size:12px;color:rgba(255,255,255,.6);font-weight:400;direction:ltr;text-align:right}
.card .arrow{margin-right:auto;opacity:.45;transition:transform .3s,opacity .3s}
.card:hover .arrow{opacity:.9;transform:translateX(-4px)}
.card .arrow svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.socials{display:flex;gap:12px;margin-top:8px;opacity:0;transform:translateY(16px)}
.soc{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;text-decoration:none;
  background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px) saturate(145%) brightness(1.12);-webkit-backdrop-filter:blur(4px) saturate(145%) brightness(1.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
.soc:hover{transform:translateY(-3px) scale(1.05);background:var(--card-hover)}
.soc svg{width:22px;height:22px;fill:#fff}

.foot{margin-top:22px;font-size:11.5px;color:rgba(255,255,255,.4);text-align:center;letter-spacing:.03em;
  opacity:0;transform:translateY(12px)}
.foot .en{font-family:'Montserrat',sans-serif}

/* reveal */
.show{opacity:1 !important;transform:translateY(0) !important;transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}

@media (max-width:380px){
  .card .ic{flex-basis:38px;height:38px}
  .wrap{gap:15px}
}
@media (prefers-reduced-motion:reduce){
  .blob,.cta .shine{animation:none}
}