/* =========================================================
   Ali Mohamed Isak Haji (Ali Shidane) — Digital Business Card
   Design tokens — indigo + cyan (data / connectivity theme)
   ========================================================= */
:root{
  --indigo-900:#1E1B4B;
  --indigo-800:#272258;
  --indigo-700:#3730A3;
  --indigo-500:#4F46C7;

  --cyan-600:#0891B2;
  --cyan-500:#06B6D4;
  --cyan-400:#22D3EE;
  --cyan-100:#E1FAFE;

  --ink-900:#151329;
  --ink-700:#40405C;
  --ink-500:#6E6E8C;

  --paper:#F6F6FB;
  --white:#FFFFFF;

  --glass-bg: rgba(255,255,255,.6);
  --glass-bg-strong: rgba(255,255,255,.8);
  --glass-border: rgba(255,255,255,.7);
  --glass-shadow: 0 20px 45px -18px rgba(30,27,75,.28);

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  --gradient-brand: linear-gradient(150deg, var(--indigo-900) 0%, var(--indigo-700) 55%, var(--cyan-600) 100%);

  --ease: cubic-bezier(.16,.8,.24,1);
  --font-display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
button{ font:inherit; }
a{ color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   Loader
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:999;
  background:var(--gradient-brand);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ position:relative; width:120px; height:120px; }
.loader-logo{
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  position:absolute; inset:0; margin:auto; z-index:2;
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  animation:pop .7s var(--ease);
}
.loader-waves{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.wave{
  position:absolute; width:88px; height:88px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  opacity:0;
  animation:wave-ripple 2.4s ease-out infinite;
}
.wave:nth-child(2){ animation-delay:.8s; }
.wave:nth-child(3){ animation-delay:1.6s; }
@keyframes wave-ripple{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(2.4); opacity:0; }
}
.loader-caption{
  margin:26px 0 0; padding:0 30px;
  text-align:center; color:#fff; font-weight:700; font-size:.86rem; line-height:1.5;
  letter-spacing:.02em;
  opacity:0;
  animation:caption-in .6s var(--ease) .5s forwards;
}
.loader-caption span{
  display:block; margin-top:6px;
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  opacity:.85;
}
@keyframes caption-in{ to{ opacity:.94; } }
@keyframes pop{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* =========================================================
   Top identity bar
   ========================================================= */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:center;
  padding:10px 16px;
  opacity:0; transform:translateY(-100%);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.topbar.is-visible{ opacity:1; transform:translateY(0); }
.topbar-inner{
  display:flex; align-items:center; gap:10px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-border);
  padding:6px 18px 6px 6px;
  border-radius:var(--radius-pill);
  box-shadow:var(--glass-shadow);
}
.topbar-logo{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.topbar-name{ font-weight:700; font-size:.92rem; letter-spacing:.01em; color:var(--indigo-800); }

/* =========================================================
   Layout helpers
   ========================================================= */
main{ position:relative; z-index:1; }
.section{
  max-width:560px; margin:0 auto; padding:48px 22px 8px;
}
.section-eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700;
  color:var(--cyan-600); margin:0 0 8px; text-align:center;
}
.section-title{
  font-family:var(--font-display); font-size:1.4rem; font-weight:800; letter-spacing:-.01em;
  margin:0 0 22px; color:var(--ink-900); line-height:1.25; text-align:center;
}

.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
  padding:8px 16px;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:88px 24px 56px;
  background:var(--gradient-brand);
  color:var(--white);
  overflow:hidden;
  border-radius:0 0 40px 40px;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(480px 480px at 88% -10%, rgba(34,211,238,.28), transparent 60%),
    radial-gradient(520px 520px at -10% 106%, rgba(55,48,163,.55), transparent 60%);
}

.hero-brand{
  position:absolute; top:20px; left:20px;
  display:flex; align-items:center; gap:10px;
  z-index:2;
}
.hero-brand-logo{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.7); box-shadow:0 6px 16px rgba(0,0,0,.2); }
.hero-brand-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.hero-brand-name{ font-weight:700; font-size:.78rem; }
.hero-brand-sub{ font-size:.62rem; opacity:.8; }

.hero-photo-wrap{ position:relative; z-index:2; margin-top:18px; }
.photo-ring{
  position:absolute; inset:-10px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--cyan-400), var(--indigo-500), var(--cyan-400));
  animation:spin 8s linear infinite;
  filter:blur(.3px);
}
.hero-photo{
  position:relative; width:148px; height:148px; border-radius:50%;
  border:4px solid rgba(255,255,255,.9);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.35);
  object-fit:cover;
}
.status-dot{
  position:absolute; right:6px; bottom:8px; width:18px; height:18px; border-radius:50%;
  background:#3ddc84; border:3px solid var(--white); z-index:3;
  box-shadow:0 0 0 0 rgba(61,220,132,.6);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(61,220,132,.5);} 70%{ box-shadow:0 0 0 10px rgba(61,220,132,0);} 100%{ box-shadow:0 0 0 0 rgba(61,220,132,0);} }

.eyebrow{
  margin:22px 0 4px; text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; font-weight:700; color:var(--cyan-400);
  position:relative; z-index:2;
}
.hero-name{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem, 6.4vw, 2.1rem);
  letter-spacing:-.01em; margin:2px 0; position:relative; z-index:2;
}
.hero-role{
  margin:10px 0 0; font-size:.94rem; font-weight:700; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.hero-dot{ opacity:.6; }
.hero-company{ color:var(--cyan-400); }

.hero-bio{
  position:relative; z-index:2;
  max-width:360px;
  margin:12px auto 0;
  font-size:.86rem; line-height:1.55;
  color:rgba(255,255,255,.88);
}

/* =========================================================
   Network logos grid — uniform square tiles, full image shown
   ========================================================= */
.network-grid{
  position:relative; z-index:2;
  width:100%; max-width:340px;
  margin:22px auto 0;
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.network-tile{
  aspect-ratio:1/1;
  background:#fff;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.35);
}
.network-tile img{
  width:100%; height:100%; object-fit:contain;
}

.hero-contact{
  position:relative; z-index:2;
  width:100%; max-width:400px;
  margin:22px auto 0;
  display:flex; gap:12px;
}
.hero-contact .btn{ flex:1; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:.94rem; letter-spacing:.01em;
  padding:15px 20px; border-radius:var(--radius-pill);
  border:none; cursor:pointer; width:100%;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease), background .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.97); }
.btn .icon{ width:19px; height:19px; flex-shrink:0; }

.btn-glass{
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.35);
  color:var(--white);
}
.btn-glass:hover{ background:rgba(255,255,255,.22); }

.btn-whatsapp{
  background:#22c55e; color:#fff;
  box-shadow:0 14px 26px -10px rgba(0,0,0,.35);
}
.btn-whatsapp:hover{ filter:brightness(1.05); }

/* Compact contact detail card sitting on the dark hero */
.hero-detail-card{
  position:relative; z-index:2;
  width:100%; max-width:400px;
  margin:18px auto 0;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius-md);
  padding:6px 14px;
  text-align:left;
}
.detail-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.detail-row{ display:flex; align-items:center; gap:10px; padding:4px 0; }
.detail-row + .detail-row{ border-top:1px solid rgba(255,255,255,.16); }
.detail-row-link{
  display:flex; align-items:center; gap:12px;
  flex:1; min-width:0;
  padding:9px 6px 9px 4px;
  border-radius:var(--radius-sm);
  transition:background .18s var(--ease);
}
.detail-row-link:hover{ background:rgba(255,255,255,.08); }
.detail-icon{
  width:36px; height:36px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); color:#fff;
}
.detail-icon.tile-whatsapp{ background:#22c55e; }
.detail-icon svg{ width:17px; height:17px; }
.detail-text{ display:flex; flex-direction:column; min-width:0; flex:1; text-align:left; }
.detail-label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.65); font-weight:700; }
.detail-value{ font-size:.84rem; font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-copy{
  flex-shrink:0; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff;
  font-size:.72rem; font-weight:700; padding:7px 12px; border-radius:var(--radius-pill); cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.detail-copy:hover{ background:#fff; color:var(--indigo-800); }
.detail-copy:active{ transform:scale(.94); }

.save-link{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  margin:18px auto 0;
  background:none; border:none; cursor:pointer;
  font-size:.84rem; font-weight:700; color:rgba(255,255,255,.9);
  padding:8px 14px; border-radius:var(--radius-pill);
  transition:background .18s var(--ease);
}
.save-link .icon{ width:16px; height:16px; }
.save-link:hover{ background:rgba(255,255,255,.16); }

.scroll-cue{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  width:26px; height:40px; border:2px solid rgba(255,255,255,.55); border-radius:14px;
  display:flex; align-items:flex-start; justify-content:center; padding-top:6px; z-index:2;
}
.scroll-cue span{ width:4px; height:8px; border-radius:2px; background:#fff; animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(10px);} 100%{ opacity:0;} }

/* =========================================================
   Reveal-on-load / on-scroll animation
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(16px);
  animation:reveal .7s var(--ease) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes reveal{ to{ opacity:1; transform:translateY(0); } }

.section .glass-card,
.section .social-stack,
.section-eyebrow,
.section-title{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.section.in-view .section-eyebrow{ opacity:1; transform:none; transition-delay:.02s; }
.section.in-view .section-title{ opacity:1; transform:none; transition-delay:.08s; }
.section.in-view .glass-card{ opacity:1; transform:none; transition-delay:.14s; }
.section.in-view .social-stack{ opacity:1; transform:none; transition-delay:.14s; }

/* =========================================================
   Social card
   ========================================================= */
.social-stack{ display:flex; flex-direction:column; gap:14px; }
.social-card{
  display:flex; align-items:center; gap:14px;
  padding:16px 16px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.social-card:hover{ transform:translateY(-2px); box-shadow:0 24px 45px -18px rgba(30,27,75,.3); }
.social-icon{
  width:44px; height:44px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--gradient-brand); color:#fff;
}
.social-icon svg{ width:21px; height:21px; }
.social-text{ display:flex; flex-direction:column; min-width:0; flex:1; text-align:left; }
.social-arrow{ color:var(--cyan-600); flex-shrink:0; }
.social-arrow svg{ width:20px; height:20px; }

.detail-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-500); font-weight:700; }
.detail-value{ font-size:.88rem; font-weight:600; color:var(--ink-900); }

/* =========================================================
   QR card
   ========================================================= */
.qr-card{ text-align:center; padding:26px 24px; }
.qr-box{
  width:196px; height:196px; margin:0 auto 18px; padding:12px;
  background:#fff; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -14px rgba(30,27,75,.3);
}
.qr-box img{ width:100%; height:100%; border-radius:8px; }
.qr-hint{ font-size:.88rem; color:var(--ink-500); margin:0; line-height:1.6; }

/* =========================================================
   Footer
   ========================================================= */
.footer{
  position:relative; z-index:1;
  text-align:center; padding:52px 24px 40px;
  color:var(--ink-500);
}
.footer-logo{ width:44px; height:44px; border-radius:50%; object-fit:cover; margin:0 auto 14px; }
.footer-name{ font-weight:700; color:var(--ink-900); margin:0 0 4px; font-size:.92rem; }
.footer-role{ font-size:.8rem; margin:0 0 14px; }
.footer-copy{ font-size:.75rem; margin:0; opacity:.8; }

/* =========================================================
   Made-by credit — equal-margin square logo, white tile with shadow
   ========================================================= */
.credit-bar{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:10px 24px 130px;
  background:var(--paper);
  transition:opacity .18s var(--ease);
}
.credit-bar:hover{ opacity:.8; }
.credit-tile{
  width:64px; height:64px;
  background:#fff;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  padding:10px;
  box-shadow:0 10px 24px -10px rgba(30,27,75,.35);
  border:1px solid rgba(30,27,75,.06);
}
.credit-tile img{ width:100%; height:100%; object-fit:contain; }
.credit-caption{ font-size:.72rem; color:var(--ink-500); font-weight:600; letter-spacing:.02em; }

/* =========================================================
   Floating action buttons — WhatsApp + Call stacked
   ========================================================= */
.fab-stack{
  position:fixed; right:18px; bottom:18px; z-index:50;
  display:flex; flex-direction:column; gap:14px;
}
.fab{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.35);
  border:none; cursor:pointer;
  transition:transform .2s var(--ease), opacity .25s var(--ease), box-shadow .2s var(--ease);
}
.fab:active{ transform:scale(.93); }
.fab svg{ width:24px; height:24px; }

.fab-whatsapp{ background:#22c55e; color:#fff; }
.fab-call{ background:var(--gradient-brand); color:#fff; }

.fab-top{
  position:fixed; left:18px; bottom:18px; z-index:50;
  background:var(--white); color:var(--indigo-800);
  opacity:0; pointer-events:none; transform:translateY(10px);
}
.fab-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* =========================================================
   Toast
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:150px; transform:translate(-50%, 16px);
  background:rgba(21,19,41,.94); color:#fff; font-size:.86rem; font-weight:600;
  padding:12px 20px; border-radius:var(--radius-pill); z-index:60;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width:640px){
  .hero{ border-radius:0 0 56px 56px; padding-top:100px; }
  .section{ max-width:600px; }
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--cyan-500); outline-offset:3px; border-radius:10px;
}