/* ==========================================================================
   Shefae — Digital Business Card
   Palette: teal #45BF97 → blue #2E7ABF (drawn from brand mark), ink #163247
   Type: 'Cairo' (Arabic + display), 'Inter' (Latin body/data)
   ========================================================================== */

:root{
  --teal:#3FBF93;
  --teal-deep:#2FA57C;
  --blue:#2E7ABF;
  --blue-deep:#1F5D96;
  --ink:#123048;
  --ink-soft:#4C6A80;
  --bg:#F5FAF8;
  --card:#FFFFFF;
  --line:#E3EEEA;
  --red:#397dc1;
  --shadow: 0 12px 30px -14px rgba(18,48,72,.28);
  --grad: linear-gradient(120deg,var(--teal) 0%, var(--blue) 100%);
  --header-h: 118px;
  --footer-h: 78px;
  --pc-footer-h: 40px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--header-h);
  padding-bottom:calc(var(--footer-h) + env(safe-area-inset-bottom));
}
.ar{font-family:'Cairo',sans-serif;direction:rtl;unicode-bidi:isolate;}
h1,h2,h3,.brand{font-family:'Cairo',sans-serif;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
img{max-width:100%;display:block;}
.container{max-width:640px;margin:0 auto;padding:0 20px;}

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

/* ---------------- Header (fixed) ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--card);
  box-shadow:0 2px 18px -8px rgba(18,48,72,.25);
}
.header-top{
  display:flex; align-items:center; gap:12px;
  padding:10px 18px 8px;
  max-width:640px; margin:0 auto;
}
.header-logo{height:38px; width:38px; flex-shrink:0; animation:logoPop .7s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes logoPop{0%{transform:scale(.4) rotate(-8deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;}}
.header-titles{display:flex; flex-direction:column; line-height:1.15; overflow:hidden;}
.header-titles .brand-name{font-weight:800; font-size:1.05rem; color:var(--ink); letter-spacing:.2px;}
.header-titles .brand-slogan{font-size:.72rem; color:var(--ink-soft); font-weight:600;}
.header-hotline{
  margin-left:auto; flex-shrink:0; display:block;
  transition:transform .25s ease, filter .25s ease;
}
.header-hotline img{height:30px; width:auto;}
.header-hotline:hover{transform:translateY(-2px) scale(1.04);}
.header-hotline:active{transform:scale(.96);}

.eyebrow-bar{
  height:4px; width:100%;
  background:var(--grad);
  background-size:200% 100%;
  animation:flow 4s linear infinite;
}
@keyframes flow{0%{background-position:0% 0;}100%{background-position:200% 0;}}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  padding:38px 20px 30px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(63,191,147,.16), transparent 60%),
    radial-gradient(120% 90% at 50% 110%, rgba(46,122,191,.14), transparent 60%);
}
.pulse-line{
  width:100%; max-width:420px; height:34px; margin:0 auto 6px;
  opacity:.85;
}
.pulse-line path{
  fill:none; stroke:url(#pulseGrad); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:draw 2.6s ease-out .3s forwards, glow 2.4s ease-in-out 3s infinite;
}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes glow{0%,100%{opacity:.55;}50%{opacity:1;}}

.avatar-wrap{
  width:112px; height:112px; margin:2px auto 16px; position:relative;
}
.avatar-ring{
  position:absolute; inset:0; border-radius:50%;
  background:var(--grad);
  animation:ringPulse 2.8s ease-in-out infinite;
}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(63,191,147,.35);}50%{box-shadow:0 0 0 14px rgba(63,191,147,0);}}
.avatar-inner{
  position:absolute; inset:5px; border-radius:50%;
  background:var(--card);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.avatar-inner img{width:100%; height:100%; object-fit:cover;  animation:heartbeat 2.6s ease-in-out infinite;}
@keyframes heartbeat{0%,100%{transform:scale(1);}15%{transform:scale(1.05);}30%{transform:scale(1);}45%{transform:scale(1.03);}60%{transform:scale(1);}}

.doc-name{font-size:1.5rem; font-weight:800; margin:0 0 2px; color:var(--ink); animation:fadeUp .6s ease .1s both;}
.doc-title{font-size:.95rem; font-weight:700; color:var(--blue-deep); margin:0 0 10px; animation:fadeUp .6s ease .2s both;}
.doc-slogan{font-size:1rem; font-weight:700; color:var(--teal-deep); margin:0; animation:fadeUp .6s ease .3s both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

/* Quick actions row — 3 animated icons */
.quick-actions{
  display:flex; justify-content:center; gap:22px;
  margin-top:26px;
}
.qa-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:84px;
  background:none; border:none; cursor:pointer;
  color:var(--ink);
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.qa-btn:nth-child(1){animation-delay:.25s;}
.qa-btn:nth-child(2){animation-delay:.35s;}
.qa-btn:nth-child(3){animation-delay:.45s;}
@keyframes popIn{from{opacity:0; transform:translateY(14px) scale(.85);} to{opacity:1; transform:translateY(0) scale(1);}}
.qa-circle{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad);
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.qa-circle svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:2;}
.qa-btn:hover .qa-circle{transform:translateY(-4px) scale(1.08); box-shadow:0 16px 28px -12px rgba(46,122,191,.5);}
.qa-btn:active .qa-circle{transform:scale(.94);}
.qa-label{font-size:.72rem; font-weight:700; color:var(--ink-soft);}

/* ---------------- Sections ---------------- */
.section{padding:28px 20px;}
.section-title{
  display:flex; align-items:center; gap:10px;
  font-size:1.02rem; font-weight:800; color:var(--ink);
  margin:0 0 14px;
  opacity:0; transform:translateY(14px);
  animation:revealSection .6s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 20%;
}
.section-title .dot{width:8px; height:8px; border-radius:50%; background:var(--grad);}
@keyframes revealSection{to{opacity:1; transform:translateY(0);}}

.reveal{
  opacity:0; transform:translateY(16px);
  animation:revealSection .6s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 22%;
}
@supports not (animation-timeline: view()){
  .reveal, .section-title{opacity:1; transform:none; animation:none;}
}

.info-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.info-card{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:13px 16px;
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease;
}
.info-card:hover{transform:translateX(-2px) translateY(-2px); border-color:transparent; box-shadow:0 16px 30px -14px rgba(46,122,191,.35);}
.info-icon{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, rgba(63,191,147,.14), rgba(46,122,191,.14));
  display:flex; align-items:center; justify-content:center;
}
.info-icon svg{width:19px; height:19px; stroke:var(--blue-deep); fill:none; stroke-width:2;}
.info-text{display:flex; flex-direction:column; min-width:0;}
.info-text .label{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700;}
.info-text .value{font-size:.92rem; font-weight:700; color:var(--ink); word-break:break-word;}

.map-wrap{
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.map-wrap iframe{width:100%; height:230px; border:0; display:block;}

.qr-card{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:22px; text-align:center; box-shadow:var(--shadow);
}
#qrcode{display:flex; justify-content:center; margin:14px auto;}
#qrcode img, #qrcode canvas{border-radius:10px;}
.qr-caption{font-size:.82rem; color:var(--ink-soft); font-weight:600; margin-top:4px;}
.qr-url{font-weight:800; color:var(--blue-deep);}

/* ---------------- Fixed Footer (mobile app bar) ---------------- */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--card);
  box-shadow:0 -4px 22px -10px rgba(18,48,72,.3);
  padding-bottom:env(safe-area-inset-bottom);
}
.footer-nav{
  display:flex; max-width:640px; margin:0 auto;
}
.fnav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:11px 4px 9px; background:none; border:none; cursor:pointer;
  color:var(--ink-soft); position:relative;
}
.fnav-btn .fi-circle{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .28s ease;
}
.fnav-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2;}
.fnav-btn .fi-label{font-size:.63rem; font-weight:700;}
.fnav-btn:hover .fi-circle{transform:translateY(-4px); background:linear-gradient(135deg, rgba(63,191,147,.15), rgba(46,122,191,.15));}
.fnav-btn:active .fi-circle{transform:scale(.9);}
.fnav-btn.is-hotline{color:var(--blue);}
.fnav-btn.is-hotline .fi-circle:hover, .fnav-btn.is-hotline:hover .fi-circle{background:rgba(200,32,46,.12);}

.pc-powered{
  display:none;
  text-align:center; font-size:.78rem; color:var(--ink-soft); font-weight:600;
  padding:8px 0 10px;
}
.pc-powered a{color:var(--blue-deep); font-weight:800;}
.pc-powered a:hover{text-decoration:underline;}

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,48,72,.5);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:100; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  backdrop-filter:blur(2px);
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-sheet{
  background:var(--card); width:100%; max-width:520px;
  border-radius:24px 24px 0 0;
  padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  max-height:82vh; overflow-y:auto;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -10px 40px rgba(18,48,72,.3);
}
.modal-overlay.open .modal-sheet{transform:translateY(0);}
@media (min-width:640px){
  .modal-overlay{align-items:center;}
  .modal-sheet{border-radius:24px; transform:translateY(24px) scale(.96); max-height:86vh;}
  .modal-overlay.open .modal-sheet{transform:translateY(0) scale(1);}
}
.modal-handle{width:40px; height:4px; background:var(--line); border-radius:3px; margin:0 auto 14px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.modal-head h3{margin:0; font-size:1.08rem; color:var(--ink);}
.modal-close{
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.modal-close svg{width:16px; height:16px; stroke:var(--ink); stroke-width:2.4;}
.modal-close:hover{background:var(--line); transform:rotate(90deg);}

/* Share grid */
.share-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px 8px;
  margin-bottom:8px;
}
.share-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer; color:var(--ink);
  animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
.share-icon{
  width:48px; height:48px; border-radius:14px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.share-icon svg{width:22px; height:22px; fill:#fff;}
.share-item:hover .share-icon{transform:translateY(-3px) scale(1.08) rotate(-4deg);}
.share-item:active .share-icon{transform:scale(.92);}
.share-item span{font-size:.68rem; font-weight:700; color:var(--ink-soft);}

.copy-link-row{
  display:flex; align-items:center; gap:8px;
  background:var(--bg); border:1px solid var(--line); border-radius:14px;
  padding:10px 8px 10px 14px; margin-top:14px;
}
.copy-link-row input{
  flex:1; border:none; background:none; font-size:.85rem; color:var(--ink-soft); font-weight:600;
  outline:none; min-width:0;
}
.copy-btn{
  background:var(--grad); color:#fff; border:none; border-radius:10px;
  padding:9px 16px; font-weight:800; font-size:.8rem; cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.copy-btn:hover{transform:scale(1.04);}
.copy-btn:active{transform:scale(.94);}
.copy-btn.copied{background:linear-gradient(120deg,#2FA57C,#2FA57C);}

/* Install modal tabs */
.install-tabs{display:flex; gap:8px; background:var(--bg); padding:4px; border-radius:14px; margin-bottom:18px;}
.install-tab{
  flex:1; border:none; background:none; padding:9px 6px; border-radius:11px;
  font-weight:800; font-size:.85rem; color:var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.install-tab svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2;}
.install-tab.active{background:var(--card); color:var(--blue-deep); box-shadow:0 4px 14px -6px rgba(18,48,72,.25);}
.install-panel{display:none; animation:fadeUp .4s ease both;}
.install-panel.active{display:block;}
.install-hero{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:18px; margin:4px auto 16px;
  background:var(--grad); box-shadow:var(--shadow);
}
.install-hero svg{width:30px; height:30px; stroke:#fff; fill:none; stroke-width:1.8;}
.install-steps{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px;}
.install-steps li{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg); border-radius:14px; padding:11px 14px; font-size:.86rem; color:var(--ink); font-weight:600;
}
.step-num{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--grad); color:#fff;
  font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.install-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; background:var(--grad); color:#fff; border:none; border-radius:14px;
  padding:14px; font-weight:800; font-size:.95rem; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.install-cta svg{width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2;}
.install-cta:hover{transform:translateY(-2px) scale(1.01);}
.install-cta:active{transform:scale(.97);}
.install-cta[hidden]{display:none;}
.install-note{font-size:.76rem; color:var(--ink-soft); text-align:center; margin-top:10px; font-weight:600;}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--footer-h) + 14px);
  transform:translate(-50%, 12px); z-index:200;
  background:var(--ink); color:#fff; font-size:.82rem; font-weight:700;
  padding:10px 18px; border-radius:30px; box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:all .28s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{opacity:1; transform:translate(-50%, 0);}

/* ---------------- Desktop / PC layout ---------------- */
.desktop-nav, .desktop-actions{display:none;}

@media (min-width:860px){
  :root{--header-h:76px;}
  body{
    padding-bottom:0;
    background:linear-gradient(180deg, #EAF3EE, var(--bg) 340px);
  }
  .container{max-width:1080px;}

  /* ---- Header becomes a full website nav bar ---- */
  .header-top{
    max-width:1200px; margin:0 auto; padding:14px 32px;
    gap:22px;
  }
  .header-logo{height:36px; width:36px;}
  .desktop-nav{
    display:flex; gap:26px; margin-inline-start:8px;
  }
  .desktop-nav a{
    font-size:.86rem; font-weight:700; color:var(--ink-soft);
    padding:6px 2px; position:relative;
    transition:color .2s ease;
  }
  .desktop-nav a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
    background:var(--grad); transition:right .25s ease;
  }
  .desktop-nav a:hover{color:var(--ink);}
  .desktop-nav a:hover::after{right:0;}

  .desktop-actions{
    display:flex; align-items:center; gap:10px; margin-inline-start:auto;
  }
  .dcta{
    display:flex; align-items:center; gap:7px;
    border:1px solid var(--line); background:var(--card);
    color:var(--ink); font-weight:700; font-size:.82rem;
    padding:9px 15px; border-radius:11px; cursor:pointer;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease;
  }
  .dcta svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2;}
  .dcta:hover{transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(18,48,72,.3); border-color:transparent;}
  .dcta:active{transform:scale(.96);}
  .dcta-primary{
    background:var(--grad); color:#fff; border-color:transparent;
  }
  .header-hotline img{height:32px;}

  /* ---- Hero: two-column split ---- */
  .hero{padding:56px 32px 46px;}
  .hero-inner{
    max-width:1080px; margin:0 auto;
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:40px; text-align:left;
  }
  .pulse-line{grid-column:1 / 2; grid-row:1; max-width:340px; margin:0 0 14px;}
  .avatar-wrap{grid-column:2 / 3; grid-row:1 / 5; width:170px; height:170px; margin:0;}
  .doc-name{grid-column:1/2; font-size:2.15rem;}
  .doc-title{grid-column:1/2; font-size:1.08rem;}
  .doc-slogan{grid-column:1/2; font-size:1.15rem;}
  .quick-actions{grid-column:1/2; justify-content:flex-start; margin-top:30px;}
  .qa-btn{width:auto; flex-direction:row; gap:10px; align-items:center;}
  .qa-circle{width:46px; height:46px;}
  .qa-label{font-size:.8rem;}

  /* ---- Sections use website-width container ---- */
  .section{padding:46px 32px; max-width:1080px; margin:0 auto;}
  .section-title{font-size:1.2rem;}

  .info-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}

  .duo-grid{
    max-width:1080px; margin:0 auto; padding:0 32px 10px;
    display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start;
  }
  .duo-grid .section{padding:0; max-width:none; margin:0;}
  .map-wrap iframe{height:300px;}
  .qr-card{height:100%; display:flex; flex-direction:column; justify-content:center;}

  /* ---- Footer: plain website footer, no app bar / no fixed position ---- */
  .site-footer{
    position:static; box-shadow:none; padding-bottom:0;
    border-top:1px solid var(--line); background:var(--bg);
    margin-top:10px;
  }
  .footer-nav{display:none;}
  .pc-powered{display:block; padding:16px 0;}

  section[id]{scroll-margin-top:96px;}
}

@media (min-width:860px) and (max-width:1080px){
  .header-top{padding-left:20px; padding-right:20px;}
  .desktop-nav{gap:16px;}
  .desktop-actions{gap:6px;}
  .dcta span, .dcta{font-size:.76rem;}
}