:root{
  --primary: #0f9fa3;
  --primary-700: #0b7e81;
  --secondary: #1a2d2e;
  --accent: #2EC4B6;
  --bg: #f6fbfb;
  --white: #fff;
  --muted: #eef6f6;
  --border: #d9ebeb;
  --shadow: 0 10px 30px rgba(15,159,163,.15);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--secondary);
  background:var(--bg);
  font-family:"Tajawal","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

/* Containers */
.container{width:min(1120px, 92%); margin-inline:auto}

/* HEADER */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border)}
.site-header .container{display:flex; align-items:center; gap:20px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand-logo{height:34px; width:auto; object-fit:contain}
.footer-logo{height:28px; width:auto; object-fit:contain}
.brand-text{font-weight:800; letter-spacing:.3px}
.nav{margin-inline:auto; display:flex; gap:22px}
.nav a{color:var(--secondary); text-decoration:none; font-weight:600; opacity:.9}
.nav a:hover{opacity:1; color:var(--primary)}
.header-actions{display:flex; gap:10px; align-items:center}

.btn{--pad: 10px 16px; padding:var(--pad); border-radius:999px; border:1px solid transparent; font-weight:700; cursor:pointer; text-decoration:none; font-size:14px; display:inline-block; line-height:normal}
.btn.primary{background:var(--primary); color:#fff; box-shadow:var(--shadow); border:none}
.btn.primary:hover{background:var(--primary-700)}
.btn.ghost{background:transparent; border-color:var(--border); color:var(--secondary)}
.btn.ghost:hover{border-color:var(--primary); color:var(--primary)}

.hamburger{display:none; flex-direction:column; gap:4px; background:transparent; border:0; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:var(--secondary)}

/* HERO */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 300px at 50% 0, rgba(46,196,182,.20), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f3fbfb 100%);
}
.pattern{position:absolute; inset:0; opacity:.15; pointer-events:none;
  background-image:
    radial-gradient(circle at 25px 25px, rgba(15,159,163,.25) 2px, transparent 2px),
    radial-gradient(circle at 75px 75px, rgba(15,159,163,.25) 2px, transparent 2px);
  background-size:100px 100px;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:36px; padding:64px 0 40px}
.hero-title{margin:0 0 8px; font-size:clamp(28px,4vw,46px); font-weight:800; line-height:1.1}
.hero-title .accent{color:var(--primary)}
.hero-sub{font-size:clamp(15px,1.8vw,18px); opacity:.9; margin:0 0 22px}
.hero-cta{display:flex; flex-direction:column; gap:10px}
.notify-form{display:flex; gap:10px; background:#fff; padding:8px; border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow)}
.notify-form input{flex:1; border:0; outline:0; padding:12px 14px; font-size:15px; background:transparent; direction:ltr !important}
.helper{font-size:12.5px; opacity:.8; margin-top:-2px}
.notify-msg{min-height:22px; font-size:14px}
.store-badges{display:flex; gap:10px}
.store-badge{display:inline-flex; align-items:center; padding:10px 16px; border-radius:12px; border:1px solid var(--border); text-decoration:none; color:var(--secondary); font-weight:700; user-select:none}
.store-badge:hover{border-color:var(--primary); color:var(--primary)}
.countdown{display:flex; gap:14px; margin-top:14px}
.cd-box{background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow); padding:10px 14px; border-radius:12px; text-align:center; min-width:80px}
.cd-box span{display:block; font-weight:800; font-size:22px; color:var(--primary)}
.cd-box label{font-size:12px; opacity:.7}

/* ========== HERO LOGO SHOWCASE ========== */
.hero-art{position:relative}
.logo-showcase{
  position:relative;
  display:grid;
  place-items:center;
  padding:16px;
}
.logo-card{
  position:relative;
  width:min(440px, 90vw);
  aspect-ratio:1/1;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff,#e9f6f6);
  border:1px solid var(--border);
  box-shadow:
    0 12px 35px rgba(15,159,163,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  display:grid; place-items:center;
  animation:float 6s ease-in-out infinite;
}
.logo-hero{
  width:68%;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 6px 14px rgba(15,159,163,.28));
}
.logo-rings .ring{
  position:absolute; inset:0; margin:auto; border-radius:999px; pointer-events:none;
  border:2px solid rgba(15,159,163,.15);
}
.logo-rings .r1{width:min(520px,96vw); height:min(520px,96vw); animation:pulse 7s linear infinite}
.logo-rings .r2{width:min(580px,110vw); height:min(580px,110vw); animation:pulse 9s linear infinite reverse}
.logo-rings .r3{width:min(640px,120vw); height:min(640px,120vw); animation:pulse 12s linear infinite}
.logo-shadow{
  position:absolute; bottom:-14px;
  width:60%; height:18px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.18), transparent 70%);
  filter: blur(6px);
}
.logo-badge{
  position:absolute; bottom:-34px; inset-inline:0; margin:auto;
  width:max-content; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.9); border:1px solid var(--border);
  box-shadow:var(--shadow); font-weight:800; color:var(--primary);
}

/* Waves & Animations */
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes pulse{
  0%{transform:scale(0.96); opacity:.25}
  50%{transform:scale(1); opacity:.15}
  100%{transform:scale(1.04); opacity:.25}
}

.hero-wave{height:40px; background:linear-gradient(0deg, #e7f4f4, transparent)}

/* SECTIONS */
.section{padding:64px 0}
.section.muted{background:var(--muted); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-title{margin:0 0 6px; font-size:clamp(22px,3.5vw,32px); font-weight:800}
.section-sub{margin:0 0 26px; opacity:.9}

/* Features */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feature{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.feature .icon{width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(180deg, var(--primary), var(--accent)); color:#fff; margin-bottom:10px}
.feature .icon svg{width:24px; height:24px; fill:currentColor; stroke:currentColor}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{background:#fff; border:1px dashed var(--border); border-radius:var(--radius); padding:20px}
.step-num{width:36px; height:36px; display:grid; place-items:center; border-radius:999px; background:var(--primary); color:#fff; font-weight:800; margin-bottom:10px}

/* Contact */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.contact-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.socials{display:flex; gap:8px; margin-top:6px}
.socials .ghost{border:1px solid var(--border); padding:6px 10px; border-radius:10px; font-weight:700}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:#fff; padding:26px 0}
.footer-grid{display:flex; align-items:center; gap:18px}
.f-brand{flex:1}
.brand.inline .brand-text{font-weight:800; margin-inline-start:8px}
.fine{opacity:.75; margin-top:6px}
.f-links{display:flex; gap:16px; list-style:none; padding:0; margin:0}
.f-links a{color:var(--secondary); text-decoration:none; font-weight:600}
.f-links a:hover{color:var(--primary)}

/* Responsive */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr; padding-top:40px}
  .hero-art{order:-1}
}
@media (max-width: 860px){
  .features-grid, .steps, .contact-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .features-grid, .steps, .contact-grid{grid-template-columns:1fr}
  .nav{display:none}
  .hamburger{display:flex}
  .site-header.open .nav{
    display:flex; position:absolute; inset-inline:0; top:64px; background:#fff; border-bottom:1px solid var(--border); padding:12px 16px; gap:12px; flex-direction:column
  }
}

/* RTL/LTR */
body.is-en{font-family:"Inter","Tajawal",system-ui; direction:ltr}
body.is-en .notify-form input{direction:ltr}