:root{
  /* ===== SmartEsim Dark Purple Theme ===== */
  --bg:#0d0b18;              /* page background */
  --surface:#141126;         /* cards / panels */
  --surface-2:#1a1733;       /* elevated surfaces */
  --surface-3:#201c3d;       /* slightly brighter for contrast */
  --ink:#f4f4ff;             /* primary text */
  --muted:#b7b4c9;           /* secondary text */

  --primary:#7f6cff;         /* SmartEsim purple */
  --primary-2:#917cff;       
  --accent:#3b5bff;          /* blue accent */

  --border:rgba(255,255,255,.08);

  --shadow-1: 0 10px 28px rgba(0,0,0,.28);
  --shadow-1p:0 12px 30px rgba(127,108,255,.18);
  --shadow-2: 0 22px 60px rgba(0,0,0,.38);
  --shadow-2p:0 20px 60px rgba(59,91,255,.18);

  --radius-1: 12px;
  --radius-2: 18px;
  --radius-3: 26px;
  --container: 1180px;

  --grad-hero:
    radial-gradient(900px 500px at 10% 20%, rgba(127,108,255,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(59,91,255,.22), transparent 60%),
    linear-gradient(135deg, #1a132e, #0e0b22);

  --grad-soft:
    linear-gradient(135deg, rgba(127,108,255,.15), rgba(59,91,255,.12), rgba(127,108,255,.15));

  --grad-card:
    radial-gradient(420px 240px at 20% 20%, rgba(127,108,255,.10), transparent 60%),
    radial-gradient(420px 240px at 80% 25%, rgba(59,91,255,.10), transparent 60%),
    linear-gradient(135deg, #15112e, #0f0d22);

  --focus: 0 0 0 3px rgba(127,108,255,.25);
}

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

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(127,108,255,.16), transparent 60%),
    radial-gradient(1200px 600px at 90% 10%, rgba(59,91,255,.12), transparent 60%),
    var(--bg);
}

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

.container{
  width:min(100% - 32px, var(--container));
  margin-inline:auto;
}

/* ================= HEADER ================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(20,17,38,.75);
  border-bottom: 1px solid var(--border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight:800;
  letter-spacing:.2px;
}

.brand-badge{
  width:34px; height:34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 35%),
    linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 6px 16px rgba(127,108,255,.25);
}

.brand span{
  font-size: 18px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}

.nav-links a{
  font-size: 13px;
  font-weight: 500;
  color: #d6d3ea;
  padding: 8px 12px;
  border-radius: 999px;
}

.nav-links a.active,
.nav-links a:hover{
  background: rgba(127,108,255,.18);
  color: #ffffff;
}

.nav-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.lang-pill{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  color:#dcd9ef;
}

.lang-dot{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0b0b18, #2a2448);
  display:inline-block;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.lang-dot::after{
  content:"";
  position:absolute; inset: 30% 30%;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

.btn{
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  font-weight:600;
  font-size: 12.5px;
  padding: 9px 14px;
  border-radius: 999px;
  cursor:pointer;
  transition: .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-1p);
}

.btn.primary{
  border-color: transparent;
  color:white;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 8px 22px rgba(127,108,255,.28);
}

.btn.ghost{
  background: rgba(255,255,255,.04);
}

.hamburger{
  display:none;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  align-items:center; justify-content:center;
  gap: 4px;
  flex-direction: column;
  cursor: pointer;
}
.hamburger span{
  width: 18px; height: 2px;
  background: #f2efff;
  border-radius: 2px;
  display:block;
}

/* ================= HERO ================= */
.hero-wrap{
  padding: 28px 0 10px;
}

.hero{
  position: relative;
  border-radius: var(--radius-3);
  background: var(--grad-hero);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  padding: 34px 34px 26px;
  align-items:center;
}

/* Decorative background “photo-like” block */
.hero-visual{
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-2);
  background:
    radial-gradient(380px 180px at 20% 30%, rgba(59,91,255,.16), transparent 55%),
    radial-gradient(380px 180px at 80% 40%, rgba(127,108,255,.18), transparent 55%),
    linear-gradient(135deg, #171333, #0f0d22);
  border: 1px solid var(--border);
  overflow:hidden;
}
.hero-visual::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(380px 180px at 20% 30%, rgba(59,91,255,.18), transparent 55%),
    radial-gradient(380px 180px at 80% 40%, rgba(127,108,255,.20), transparent 55%),
    linear-gradient(135deg, rgba(59,91,255,.08), rgba(127,108,255,.10));
  opacity:.7;
}
.hero-visual::after{
  content:"";
  position:absolute; inset: 12% 8% auto auto;
  width: 180px; height: 180px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    linear-gradient(135deg, var(--accent), var(--primary));
  transform: rotate(-8deg);
  opacity:.25;
}

.badge-row{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.badge{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color:#d9d6ee;
}

.rating{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 11px;
  color:#cfcbe6;
  font-weight:600;
}
.stars{
  letter-spacing: 1px;
  color: #fbbf24;
  font-size: 12px;
}

.hero h1{
  margin: 10px 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -.6px;
  color:#ffffff;
}
.hero p{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 52ch;
}

/* Search */
.search-card{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px;
  display:flex;
  align-items:center;
  gap: 8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  width: min(100%, 520px);
}

.search-icon{
  width: 36px; height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(127,108,255,.22), rgba(59,91,255,.18));
  display:grid; place-items:center;
  font-size: 16px;
  color:#fff;
  border: 1px solid rgba(255,255,255,.08);
}
#searchInput{
  outline: none;
}

.search-card input{
  border: none;
  outline: none;
  flex: 1;
  font-size: 13.5px;
  padding: 0 6px;
  color: var(--ink);
  background: transparent;
}
.search-card input::placeholder{
  color: rgba(244,244,255,.55);
}

.search-card select{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  font-size: 11.5px;
  padding: 6px 10px;
  color:#dddaf0;
  outline:none;
}

.search-card input:focus,
.search-card select:focus{
  box-shadow: var(--focus);
}

.hero-meta{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
  color:#d7d3ea;
  font-size: 11.5px;
  font-weight: 600;
}
.meta-pill{
  display:flex; align-items:center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(127,108,255,.10);
  border: 1px solid rgba(127,108,255,.18);
}

/* ================= LOGO STRIP ================= */
.logo-strip{
  margin-top: 18px;
  padding: 14px 0 8px;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap: 10px;
  align-items:center;
  opacity: .6;
}
.logo-pill{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  text-align:center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color:#c9c6dc;
}

/* ================= SECTION TITLES ================= */
.section{
  padding: 38px 0;
}

.section-title-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.section h2{
  margin: 0;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -.3px;
  color:#ffffff;
}
.section-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13.5px;
}

.filters{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color:#d9d6ee;
  cursor:pointer;
  transition: .18s ease;
}
.filter-btn.active,
.filter-btn:hover{
  border-color: rgba(127,108,255,.35);
  background: rgba(127,108,255,.16);
  color:#ffffff;
}

/* ================= COUNTRY GRID ================= */
.country-grid{
display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.packages{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
 gap: 14px;
  display: flex;
  flex-wrap: wrap;
}
.country-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 14px 14px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: .18s ease;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

}
.country-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(127,108,255,.14);
  border-color: rgba(127,108,255,.25);
}

.country-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.flag{
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--grad-soft);
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.08);
  font-size: 18px;
}

.country-name{
  font-size: 12.5px;
  font-weight: 800;
  color:#ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.country-type{
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #c8c3de;
}
.country-price{
  font-size: 10.5px;
  color:#c8c3de;
  margin-top: 2px;
}
.country-price b{
  font-size: 12.5px;
  color:#ffffff;
}

.go{
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display:grid; place-items:center;
  font-weight: 900;
  color:#ffffff;
  box-shadow: 0 8px 18px rgba(127,108,255,.28);
  flex: 0 0 auto;
}

/* ================= VIDEO DEMO ================= */
.video-box{
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 26px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  box-shadow: var(--shadow-1);
}

.video-title{
  text-align:center;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 24px);
  margin-bottom: 2px;
  color:#ffffff;
}
.video-sub{
  text-align:center;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 0;
}

.video-frame{
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  background:
    radial-gradient(300px 200px at 20% 20%, rgba(127,108,255,.18), transparent 60%),
    radial-gradient(300px 200px at 80% 30%, rgba(59,91,255,.18), transparent 60%),
    linear-gradient(135deg, #0b1022, #111833, #0c1228);
  min-height: 260px;
  position: relative;
  overflow:hidden;
}

.play{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
}
.play-btn{
  width: 74px; height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 18px 40px rgba(127,108,255,.35);
  display:grid; place-items:center;
  color:#fff;
  font-size: 26px;
  border: 6px solid rgba(255,255,255,.12);
  cursor:pointer;
  transition: .18s ease;
}
.play-btn:hover{transform: scale(1.04)}

/* ================= STEPS ================= */
.steps-wrap{
  display:grid;
  grid-template-columns: 1fr .9fr;
  gap: 22px;
  align-items:center;

  display: flex;
  justify-content: center;
}

/* card */
.steps-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 24px;
  box-shadow: var(--shadow-1);
}
.steps-card h3{
  margin: 0 0 6px;
  font-size: clamp(18px, 1.8vw, 22px);
  color:#ffffff;
}
.steps-card p{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12.8px;
}

/* accordion */
.accordion{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.acc-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  overflow:hidden;
  background: rgba(255,255,255,.03);
  transition:.18s ease;
}
.acc-head{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  cursor:pointer;
}
.acc-index{
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(127,108,255,.16);
  border: 1px solid rgba(127,108,255,.24);
  font-size: 11px;
  font-weight: 800;
  display:grid; place-items:center;
  color:#ffffff;
  flex: 0 0 auto;
}
.acc-title{
  font-size: 12.8px;
  font-weight: 800;
  color:#ffffff;
}
.acc-body{
  display:none;
  padding: 0 12px 12px 48px;
  color:#cfcbe6;
  font-size: 12px;
  line-height: 1.5;
}
.acc-item.active{
  border-color: rgba(127,108,255,.30);
  box-shadow: 0 10px 22px rgba(127,108,255,.10);
  background: rgba(127,108,255,.06);
}
.acc-item.active .acc-body{display:block}

/* phone mock (already dark-friendly) */
.phone-mock{
  background:
    radial-gradient(420px 240px at 20% 20%, rgba(59,91,255,.18), transparent 60%),
    radial-gradient(420px 240px at 80% 25%, rgba(127,108,255,.20), transparent 60%),
    linear-gradient(135deg, #0b1022, #111a3a, #0b0f22);
  border-radius: var(--radius-3);
  border: 1px solid var(--border);
  min-height: 360px;
  position: relative;
  padding: 26px;
  display:grid;
  place-items:center;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.phone-glass{
  width: min(88%, 290px);
  aspect-ratio: 9/16;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%),
    #0f172a;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 18px 50px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}
.phone-notch{
  position:absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 16px;
  border-radius: 0 0 12px 12px;
  background: rgba(255,255,255,.08);
}
.phone-ui{
  position:absolute; inset: 40px 14px 14px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(59,91,255,.10), rgba(127,108,255,.12)),
    #0b1224;
  border: 1px solid rgba(255,255,255,.06);
  padding: 12px;
  color: #e5edff;
  font-size: 10.5px;
}
.ui-pill{
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
  display:flex; align-items:center; justify-content: space-between;
  padding: 0 10px;
}
.ui-tag{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(59,91,255,.22);
  border: 1px solid rgba(127,108,255,.25);
  font-weight: 700;
}

/* ================= TESTIMONIALS ================= */
.testi-wrap{
  display:grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 20px;
  align-items:start;
}

.score-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 22px;
  box-shadow: var(--shadow-1);
}
.score-big{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.6px;
  margin: 0 0 8px;
  color:#ffffff;
}
.score-sub{
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 14px;
}

.trust-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(127,108,255,.14);
  border: 1px solid rgba(127,108,255,.28);
  font-size: 11px;
  font-weight: 700;
  color:#ffffff;
}

.testi-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.testi-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  min-height: 140px;
}
.testi-stars{
  color:#fbbf24;
  font-size: 12px;
  letter-spacing: 1px;
}
.testi-text{
  margin: 8px 0 10px;
  font-size: 12.2px;
  color:#d9d6ee;
  line-height: 1.55;
}
.testi-name{
  font-size: 11.5px;
  font-weight: 800;
  color:#ffffff;
}
.testi-role{
  font-size: 10.5px;
  color:#bfbad7;
}

/* ================= APP CTA ================= */
.app-cta{
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 40px 24px;
  text-align:center;
  box-shadow: var(--shadow-1);
}
.app-cta h3{
  margin: 0 0 8px;
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 800;
  color:#ffffff;
}
.app-cta p{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12.8px;
}
.store-row{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}
.store-badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(127,108,255,.18), rgba(59,91,255,.14)),
    #0b1022;
  color:white;
  border: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 600;
  min-width: 170px;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.store-badge span{
  font-weight: 800;
  font-size: 12.5px;
}

/* ================= FOOTER ================= */
footer{
  margin-top: 36px;
  padding: 30px 0 46px;
}

.footer-box{
  background:
    radial-gradient(600px 300px at 10% 10%, rgba(127,108,255,.18), transparent 60%),
    radial-gradient(600px 300px at 90% 20%, rgba(59,91,255,.18), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  padding: 28px;
  box-shadow: var(--shadow-1);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 18px;
}

.f-title{
  font-size: 12.5px;
  font-weight: 800;
  margin: 0 0 10px;
  color:#ffffff;
}
.f-text{
  font-size: 11.8px;
  color:#c9c6dc;
  line-height: 1.55;
  margin: 0 0 12px;
}
.f-links{
  display:flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.8px;
  color:#cfcbe6;
  font-weight: 500;
}
.f-links a:hover{color:#ffffff}

.qr-box{
  border: 1px dashed rgba(127,108,255,.35);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px;
  display:grid;
  place-items:center;
  min-height: 120px;
  font-size: 10.5px;
  color:#cfcbe6;
  text-align:center;
  font-weight: 700;
}

.payments{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.pay-row{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pay-pill{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  color:#c9c6dc;
}
.copyright{
  font-size: 10.5px;
  color:#bdb8d6;
  font-weight: 600;
}

/* ================= MOBILE MENU PANEL ================= */
.mobile-panel{
  display:none;
  border-top: 1px solid var(--border);
  background: rgba(20,17,38,.95);
}
.mobile-panel.open{display:block}

.mobile-links{
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 18px;
}
.mobile-links a{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  font-size: 12.5px;
  font-weight: 600;
  color:#e7e4f7;
}

/* ================= PHONE VIDEO (your add-on) ================= */
.phone-video-frame{
  position: relative;
  width: 345px;
  aspect-ratio: 4/5;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(300px 200px at 20% 20%, rgba(127,108,255,.22), transparent 60%),
    radial-gradient(300px 200px at 80% 30%, rgba(59,91,255,.22), transparent 60%),
    linear-gradient(135deg, #120f2b, #0c0b1f);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

.phone-video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* overlay buttons */
.vid-btn{
  position: absolute;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(127,108,255,.85), rgba(59,91,255,.85));
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(127,108,255,.30);
  transition:.18s ease;
}

/* ===== Search Icon Loader ===== */
.search-icon{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
  position: relative;
  overflow: hidden;

  /* خليها تمشي ويا ثيمك البنفسجي */
  background:
    linear-gradient(135deg, rgba(127,108,255,.22), rgba(59,91,255,.18));
  border: 1px solid rgba(255,255,255,.08);
}

/* النص داخل الأيقونة */
.search-icon .icon-text{
  transition: .15s ease;
}

/* حالة اللودنك */
.search-icon.loading .icon-text{
  opacity: 0;
  transform: scale(.85);
}

/* دائرة اللودنك */
.search-icon.loading::after{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;

  /* سبينر خفيف */
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.95);

  animation: searchSpin .75s linear infinite;
}
/* Dropdown glued to the input */
#countryGrid{
  position: fixed;  /* مهم جداً */
  z-index: 9999;

  display: none;
  flex-direction: column;
  gap: 8px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 10px;
  box-shadow: var(--shadow-2);

  max-height: 320px;
  overflow: auto;
}

#countryGrid.open{
  display: flex;
}

/* أنميشن الدوران */
@keyframes searchSpin{
  to { transform: rotate(360deg); }
}

.vid-btn:hover{transform: translateY(-1px)}
.sound-btn{ bottom: 10px; }
.pause-btn{ bottom: 58px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1020px){
  .hero-inner{ grid-template-columns: 1fr; }
  .logo-strip{ grid-template-columns: repeat(3,1fr); }
  .country-grid{ grid-template-columns: repeat(3, 1fr); }
  .steps-wrap{ grid-template-columns: 1fr; }
  .testi-wrap{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 760px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .country-grid{grid-template-columns: repeat(2,1fr)}
  .testi-grid{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr 1fr}
  .search-card{
    border-radius: 18px;
    flex-wrap: wrap;
    padding: 10px;
  }
  .search-card select{flex: 1}
}

/* dropdown list container */
#countryGrid{
  position: fixed;
  z-index: 9999;
  display: none;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 10px;
  box-shadow: var(--shadow-2);
  max-height: 320px;
  overflow: auto;
}
#countryGrid.open{ display: flex; }

/* card خاص للدول */
#countryGrid .country-suggest-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 12px 12px;
  box-shadow: 0 6px 18px rgba(16,24,40,.04);
  transition: .18s ease;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

#countryGrid .country-suggest-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(16,24,40,.08);
  border-color: rgba(127,108,255,.25);
}

/* SmartEsim Select */
.se-select-wrap{
  position: relative;
  width: min(100%, 260px);
}

/* السهم */
.se-select-wrap::after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  font-weight: 900;
  color: rgba(244,244,255,.75);
  text-shadow: 0 0 10px rgba(127,108,255,.25);
}

/* العنصر نفسه */
.se-select{
  width: 100%;
  height: 42px;
  padding: 0 36px 0 14px;

  border-radius: 12px;
  border: 1px solid var(--border);

  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .2px;

  background:
    linear-gradient(135deg, rgba(127,108,255,.08), rgba(59,91,255,.06)),
    var(--surface-2);

  box-shadow:
    0 8px 20px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.02);

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  outline: none;
  cursor: pointer;
  transition: .18s ease;
}

/* hover */
.se-select:hover{
  border-color: rgba(127,108,255,.28);
  box-shadow:
    0 12px 26px rgba(127,108,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

/* focus */
.se-select:focus{
  border-color: rgba(127,108,255,.45);
  box-shadow:
    0 0 0 3px rgba(127,108,255,.18),
    0 14px 30px rgba(59,91,255,.18);
}

/* option styling (محدود حسب المتصفح) */
.se-select option{
  background: #0f0c22;  /* خلفية قائمة الدروبداون */
  color: #f4f4ff;
}

@media (max-width: 520px){
  .footer-grid{grid-template-columns: 1fr}
  .country-grid{grid-template-columns: 1fr}
  .nav-right .btn.ghost{display:none}


 

}
.hamburger {
  display: none;
}

@media (max-width: 760px) {
  .hamburger {
    display: flex !important;
  }
 
.packages{
  justify-content: center;
}
}
.hamburger {
  display: none;
  width: 38px;
  height: 38px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.hamburger span {
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 2px;
}

@media (max-width: 760px) {
  .hamburger {
    display: flex !important;
  }
  .nav-links {
    display: none !important;
  }
 
   
}