:root{
  --teal:#0F7C82;
  --teal2:#0B5961;
  --green:#79B05B;
  --blue:#5A9FD6;

  --ink:#0b1b1c;
  --muted: rgba(11,27,28,.74);

  --card: rgba(255,255,255,.84);
  --stroke: rgba(15,124,130,.16);
  --shadow: 0 24px 60px rgba(0,0,0,.14);
  --radius: 22px;

  --padX: clamp(14px, 3vw, 22px);
  --padY: clamp(18px, 3.2vw, 28px);
}

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

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ink);
  overflow-x:hidden;

  background:
    radial-gradient(900px 520px at 20% 10%, rgba(15,124,130,.20), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, rgba(121,176,91,.16), transparent 58%),
    radial-gradient(900px 520px at 50% 100%, rgba(90,159,214,.18), transparent 55%),
    linear-gradient(135deg, #ECFAF7, #EDF3FF);
}

/* Canvas الخلفية */
.bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* تقليل الحركة لمن يفضل ذلك */
@media (prefers-reduced-motion: reduce){
  .bg{ display:none; }
  *{ animation: none !important; transition: none !important; }
}

/* ✅ توسيط صارم (عمودي/أفقي) */
.wrap{
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--padY) var(--padX);
}

.shell{
  width: min(960px, 100%);
}

.topbar{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--green) 45%, var(--blue) 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  margin: 0 auto 14px;
  transform: translateY(10px);
  opacity: 0;
  animation: dropIn .7s ease forwards;
}

.card{
  width: 100%;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow:hidden;
  backdrop-filter: blur(8px);
  transform: translateY(16px);
  opacity: 0;
  animation: riseIn .75s ease .05s forwards;
  position: relative;
}

/* لمعان لطيف فوق البطاقة */
.sheen{
  position:absolute;
  inset:-140px;
  background: radial-gradient(420px 300px at var(--sx, 35%) var(--sy, 20%),
    rgba(255,255,255,.75), rgba(255,255,255,0) 62%);
  opacity: .55;
  pointer-events:none;
  transition: opacity .25s ease;
}

.header{
  padding: calc(var(--padY) * 1.05) var(--padX) 10px;
  text-align:center;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: clamp(8px, 1.6vw, 12px);
}

/* إطار الشعار */
.logoFrame{
  width: min(780px, 96%);
  padding: clamp(10px, 2vw, 16px);
  border-radius: clamp(16px, 2vw, 20px);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  position: relative;
  overflow:hidden;
}

/* هالة بألوان الشعار */
.logoFrame::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg,
    rgba(15,124,130,.42),
    rgba(121,176,91,.30),
    rgba(90,159,214,.42)
  );
  filter: blur(12px);
  opacity: .55;
  pointer-events:none;
}

.logoFrame img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display:block;
  object-fit: contain;
  transform: translateZ(0);
  animation: pop .9s cubic-bezier(.2,1.2,.2,1) .1s both;
}

.title{
  margin: 2px 0 0;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 950;
  letter-spacing: .2px;
}

.subtitle{
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.9;
  max-width: 62ch;
}

.content{
  padding: 14px var(--padX) calc(var(--padY) * 0.9);
  display:flex;
  flex-direction: column;
  gap: 12px;
  align-items:center;
  text-align:center;
}

.btn{
  position: relative;
  overflow:hidden;
  width: min(620px, 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  text-decoration:none;
  padding: clamp(14px, 1.9vw, 18px);
  border-radius: clamp(14px, 1.8vw, 18px);
  font-weight: 950;
  font-size: clamp(15px, 1.8vw, 17px);
  user-select:none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .10s ease, box-shadow .20s ease, filter .20s ease;
}

.btn:active{ transform: translateY(1px) scale(.995); }

.btn-wa{
  color:#fff;
  background: linear-gradient(90deg, #25D366, #1fb257);
  box-shadow: 0 18px 34px rgba(37,211,102,.25);
}

/* hover فقط للأجهزة التي تدعم hover */
@media (hover:hover) and (pointer:fine){
  .btn-wa:hover{ filter: brightness(1.03); }
}

/* لمعان يمر على الزر */
.btn-wa::before{
  content:"";
  position:absolute;
  top:-65%;
  left:-45%;
  width: 70%;
  height: 240%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.30), rgba(255,255,255,0));
  transition: transform .65s ease;
  opacity: .9;
}
@media (hover:hover) and (pointer:fine){
  .btn-wa:hover::before{
    transform: translateX(260%) rotate(20deg);
  }
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.16);
}

.arrow{
  opacity:.9;
  font-weight: 900;
}

/* Ripple */
.ripple{
  position:absolute;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events:none;
  background: rgba(255,255,255,.35);
  animation: ripple .65s ease-out forwards;
}

.meta{
  font-size: 13px;
  color: rgba(11,27,28,.62);
}

/* شريط الرقم بشكل أجمل */
.meta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,124,130,.08);
  border: 1px solid rgba(15,124,130,.12);
}

.footer{
  padding: 12px var(--padX) 16px;
  border-top: 1px solid rgba(0,0,0,.06);
  color: rgba(11,27,28,.55);
  font-size: 12px;
  text-align:center;
}

/* ✅ تحسين تابلت */
@media (min-width: 600px) and (max-width: 1024px){
  .shell{ width: min(860px, 100%); }
  .logoFrame{ width: min(720px, 96%); }
  .btn{ width: min(520px, 100%); }
}

/* ✅ موبايل */
@media (max-width: 520px){
  .header{ padding: 18px 14px 8px; }
  .content{ padding: 12px 14px 16px; }
  .logoFrame{ width: 96%; }
}

/* ✅ شاشات كبيرة */
@media (min-width: 1280px){
  .shell{ width: 980px; }
}

@keyframes ripple{
  from{ width: 0; height:0; opacity:.55; }
  to{ width: 620px; height:620px; opacity:0; }
}
@keyframes riseIn{ to{ transform: translateY(0); opacity: 1; } }
@keyframes dropIn{ to{ transform: translateY(0); opacity: 1; } }
@keyframes pop{
  0%{ transform: scale(.97); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}