@font-face {
  font-family: Tanha-FD;
  src: url('https://shahidapp.com/assets/fonts/Tanha-FD.eot');
  src: url('https://shahidapp.com/assets/fonts/Tanha-FD.eot?#iefix') format('embedded-opentype'),
       url('https://shahidapp.com/assets/fonts/Tanha-FD.woff') format('woff'),
       url('https://shahidapp.com/assets/fonts/Tanha-FD.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ==============================
   Shahid Landing — Premium RTL Responsive
   Images used: bg.png, phone.png, logo.png
   ============================== */

:root{
  --text:#f3e7dc;
  --muted:rgba(243,231,220,.78);
  --glass:rgba(35,18,12,.38);
  --stroke:rgba(255,210,160,.22);
  --shadow: 0 24px 80px rgba(0,0,0,.45);
  --shadow2: 0 14px 40px rgba(0,0,0,.35);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  font-family: Tanha-FD, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#120906;
  overflow-x:hidden;
}

/* ==== Prevent ugly selection/drag on hero visuals ==== */
img{
  user-select:none;
  -webkit-user-drag:none;
}

/* =================
   HERO
   ================= */
.hero{
  min-height:100vh;
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden; /* no inner scrollbars */
}

/* modern mobile viewport */
@supports (height: 100dvh){
  .hero{ min-height:100dvh; }
}

.hero__bg{
  position:absolute;
  inset:0;
  background-image: url("assets/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  filter: saturate(1.05) contrast(1.05);
  transform: translateZ(0);
}

.hero__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 700px at 18% 52%, rgba(255,140,30,.42), rgba(255,140,30,0) 60%),
    radial-gradient(900px 650px at 34% 50%, rgba(255,190,95,.18), rgba(0,0,0,0) 55%),
    radial-gradient(1200px 900px at 78% 46%, rgba(0,0,0,.56), rgba(0,0,0,.12) 55%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.64));
  pointer-events:none;
}

/* container */
.hero__container{
  position:relative;
  z-index:5;
  width:100%;
  max-width:1400px;
  padding: clamp(48px, 7vh, 88px) 20px clamp(28px, 4vh, 52px);
}

/* grid */
.hero__grid{
  display:grid;
  direction:ltr; /* columns flow left->right even if page is RTL */
  grid-template-columns: 1.35fr .65fr; /* visual | copy (visual bigger) */
  align-items:center;
  gap: clamp(18px, 4vw, 44px);
}

/* =================
   VISUAL (phone + logo locked)
   ================= */
.visual{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  position:relative;
  min-height: clamp(360px, 52vh, 560px);
}

.visual__glow{
  position:absolute;
  inset: -22% -25% -22% -20%;
  background:
    radial-gradient(circle at 38% 56%, rgba(255,180,80,.55), rgba(255,140,30,.12) 35%, rgba(0,0,0,0) 62%),
    radial-gradient(circle at 38% 56%, rgba(255,120,25,.35), rgba(0,0,0,0) 60%);
  filter: blur(8px);
  opacity:.85;
  pointer-events:none;
}

/* wrap = anchor for absolute logo */
.visual__wrap{
  position:relative;
  width: clamp(700px, 58vw, 1200px); /* ~3x larger on desktop */
  max-width: 100%;
  margin: 0;
}

.visual__phone{
  width: 100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
}

.visual__logo{
  position:absolute;
  width: 86%;
  height:auto;
  left: 56%;               /* slight offset to sit on phone nicely */
  top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 28px 62px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(255,150,45,.28));
}

/* =================
   COPY
   ================= */
.copy{
  text-align:right;
  direction:rtl;
  justify-self:end;
}

.copy__title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.15;
  letter-spacing: .2px;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.copy__desc{
  margin: 0 0 22px;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 2.05;
  color: var(--muted);
  text-shadow: 0 10px 24px rgba(0,0,0,.45);
}

/* buttons */
.actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  justify-content: end;
  align-items: stretch;
  direction: rtl;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 0;
  width: 100%;
justify-content:center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  white-space:nowrap;
}

.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,200,140,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
}
.btn:active{transform: translateY(0)}

.btn__icon{
  width: 22px;
  height: 22px;
  display:inline-grid;
  place-items:center;
  font-size: 18px;
  line-height: 1;
}

/* Bazaar icon (bag) */
.btn--bazaar .btn__icon{
  position:relative;
  border-radius: 6px;
  background: rgba(75, 210, 120, .18);
  border: 1px solid rgba(75, 210, 120, .55);
}
.btn--bazaar .btn__icon::before{
  content:"";
  position:absolute;
  width: 10px;
  height: 6px;
  border: 2px solid rgba(210,255,224,.9);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  top: -4px;
}

/* Myket icon (M badge) */
.btn--myket .btn__icon{
  position:relative;
  border-radius: 6px;
  background: rgba(60, 220, 170, .12);
  border: 1px solid rgba(90, 255, 210, .42);
  font-weight: 900;
}
.btn--myket .btn__icon::before{
  content:"M";
  font-size: 15px;
  color: rgba(210, 255, 245, .92);
  transform: translateY(-.5px);
}

/* Direct download icon (arrow) */
.btn--direct .btn__icon{
  position:relative;
  border-radius: 6px;
  background: rgba(80, 150, 255, .12);
  border: 1px solid rgba(120, 180, 255, .45);
}
.btn--direct .btn__icon::before{
  content:"";
  position:absolute;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(215,235,255,.95);
  border-bottom: 2px solid rgba(215,235,255,.95);
  transform: rotate(45deg);
  margin-top: -2px;
}
.btn--direct .btn__icon::after{
  content:"";
  position:absolute;
  width: 2px;
  height: 12px;
  background: rgba(215,235,255,.95);
  transform: translateY(-1px);
}

/* SibApp / iOS store icon */
.btn--sibapp .btn__icon{
  width:auto;
  height:auto;
  font-size: 20px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.btn--sibapp .btn__icon::before{
  content:"?";
}

/* Optional Apple App Store icon (if you keep it) */
.btn--appstore .btn__icon{
  width:auto;
  height:auto;
  font-size: 20px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.btn--appstore .btn__icon::before{
  content:"A";
  font-weight: 900;
  opacity:.9;
}

/* Trust seal container */
.trust{
  margin-top: 18px;
  display:flex;
  justify-content:flex-end;
}
.trust a{
  display:inline-flex;
  background:#fff;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
}
.trust img{
  width: 130px;
  height:auto;
  display:block;
}

/* =================
   RESPONSIVE
   ================= */
@media (max-width: 980px){
  .hero__grid{
    grid-template-columns: 1fr;
    text-align:center;
    direction:rtl; /* normal on stack */
  }
  .visual{
    justify-content:center;
    min-height: clamp(320px, 48vh, 520px);
  }
  .visual__wrap{
    margin: 0 auto;
    width: min(90vw, 520px);
  }
  .copy{ text-align:center; }
  .actions{
    justify-content: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(720px, 100%);
    margin: 0 auto;
  }
  .trust{ justify-content:center; }
}

@media (max-width: 520px){
  /* allow vertical scroll ONLY on mobile */
  body{
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  /* prevent zoom + side drag on modern browsers */
  html, body{
    touch-action: pan-y;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
  }

  .hero__container{
    padding: 28px 16px 26px;
  }

  .visual{
    min-height: 56vh;
  }

  .visual__wrap{
    width: min(100vw, 560px);
  }

  .actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .btn{
    padding: 11px 12px;
    font-size: 14px;
  }

  .trust img{
    width: 120px;
  }


/* ??????: ???? ? ????? ??????? */
.visual__logo{
  width: 92%;
}
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}

/* =========================
   PREMIUM FIX v4 (buttons 2-col desktop + bigger mobile visual)
   ========================= */

/* Ensure copy column has enough width so 2 columns fit */
.copy{
  width: 100%;
  max-width: 560px;
}

/* 2-column actions grid that stays 2 columns */
.actions{
  width: 100%;
  max-width: 560px;
  margin-inline-start: auto; /* stick to right in RTL */
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  justify-items: stretch;
}

/* Prevent ugly overlaps: allow wrapping if space is tight */
.btn{
  white-space: normal;
  line-height: 1.25;
  font-size: 15px;
}

/* Keep icon+text aligned nicely in RTL */
.btn__text{
  display: inline-block;
}

/* Tablet stack: keep centered, still 2 columns */
@media (max-width: 980px){
  .copy{
    max-width: none;
  }
  .actions{
    max-width: 720px;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(170px, 1fr));
padding-left: 50px;
  }
}

/* Mobile: make phone+logo noticeably bigger without causing horizontal scroll */
@media (max-width: 520px){
  .visual{
    min-height: 62vh;
  }
  .visual__wrap{
    transform: scale(1.18);
    transform-origin: center;
  }
  .visual__logo{
    width: 96%;
  }
  .btn{
    font-size: 14px;
  }
}