:root{
  --bg1:#0B5594;
  --bg2:#3BC1C6;
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --shadow: 0 18px 50px rgba(0,0,0,.30);
  --shadow2: 0 10px 28px rgba(0,0,0,.22);
  --max: 1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 16px}

.bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(900px 520px at 15% 5%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(900px 520px at 92% 20%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(1000px 700px at 70% 92%, rgba(0,0,0,.20), transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}
.gridlines{
  position:absolute; inset:-60px; opacity:.22;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 30% 20%, rgba(0,0,0,1), rgba(0,0,0,.2), transparent 70%);
}
.blob{position:absolute; filter: blur(60px); opacity:.35; border-radius:999px;}
.b1{width:420px; height:420px; left:-120px; top:60px; background: rgba(255,255,255,.30);}
.b2{width:520px; height:520px; right:-180px; top:-120px; background: rgba(255,255,255,.24);}
.b3{width:620px; height:620px; right:-210px; bottom:-260px; background: rgba(0,0,0,.22);}
.ring{position:absolute; border-radius:50%; border:2px solid rgba(255,255,255,.16); opacity:.22;}
.r1{width:420px; height:420px; right:120px; top:-110px;}
.r2{width:560px; height:560px; right:40px; top:-190px; opacity:.16}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(10,35,60,.55), rgba(10,35,60,.24));
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar__inner{
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand__icon{width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.18); box-shadow:0 14px 30px rgba(0,0,0,.22)}
.brand__name{font-weight:900; letter-spacing:.2px}
.brand__tag{font-weight:800; font-size:12px; color:var(--muted)}
.nav{display:flex; gap:14px; align-items:center}
.nav a{font-weight:900; color:rgba(255,255,255,.82); padding:10px 10px; border-radius:999px}
.nav a:hover{background: rgba(255,255,255,.10)}
.actions{display:flex; gap:10px; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  font-weight:900;
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.pill.primary{background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.10));}
.pill.ghost{background: rgba(255,255,255,.08)}
.dot{width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.85); box-shadow:0 0 18px rgba(255,255,255,.55)}

.hero{padding:38px 0 10px}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:start}
@media (max-width: 980px){ .nav{display:none} .hero__grid{grid-template-columns: 1fr; gap:16px} }
.badge{
  position:relative; display:inline-flex; align-items:center;
  padding:10px 14px; border-radius:999px;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  font-weight:900; overflow:hidden;
}
.badge__glow{position:absolute; inset:-40px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 55%); filter: blur(10px);}
.badge span{position:relative; z-index:1}
.hero__title{margin:14px 0 8px; font-size:52px; line-height:1.05; letter-spacing:-.8px}
@media (max-width: 520px){ .hero__title{font-size:40px} }
.grad{
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.75));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.grad2{
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(180,255,255,.70));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.hero__sub{margin:0 0 18px; color: rgba(255,255,255,.80); font-size:16.5px; line-height:1.55; max-width:52ch; font-weight:750}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  min-width: 270px;
}
.btn.primary{background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10));}
.btn:hover{transform: translateY(-1px); transition: .18s ease; background: rgba(255,255,255,.14)}
.btn__icon{width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background: rgba(255,255,255,.12); font-size:18px}
.btn__text{display:flex; flex-direction:column; gap:2px}
.btn__title{font-weight:950}
.btn__sub{font-weight:800; font-size:12px; color: rgba(255,255,255,.72)}
.hero__meta{margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px}
@media (max-width: 740px){ .hero__meta{grid-template-columns: 1fr} }
.metaCard{background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:12px; box-shadow: var(--shadow2);}
.metaCard__k{color: rgba(255,255,255,.70); font-weight:900; font-size:12px}
.metaCard__v{font-weight:950; margin-top:4px; font-size:13px}
.phoneStack{display:grid; gap:12px}
.glassCard{background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:26px; padding:12px; box-shadow: var(--shadow);}
.featureImg{width:100%; border-radius:18px; display:block}
.miniShots{display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.miniShots img{width:100%; border-radius:16px; border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 24px rgba(0,0,0,.20)}

.section{padding:36px 0}
.sectionHead h2{margin:0; font-size:28px; letter-spacing:-.3px}
.sectionHead p{margin:8px 0 0; color: rgba(255,255,255,.80); font-weight:800; max-width:70ch; line-height:1.55}

.cards{margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
@media (max-width: 980px){ .cards{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width: 600px){ .cards{grid-template-columns: 1fr} }
.card{background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:14px; box-shadow: var(--shadow2);}
.card__icon{width:44px; height:44px; border-radius:16px; display:grid; place-items:center; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14);}
.card__title{margin-top:10px; font-weight:950}
.card__desc{margin-top:6px; color: rgba(255,255,255,.78); font-weight:800; line-height:1.55}

.gallery{margin-top:14px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px}
@media (max-width: 1100px){ .gallery{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width: 560px){ .gallery{grid-template-columns: 1fr} }
.shot{margin:0; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:10px; box-shadow: var(--shadow2);}
.shot img{width:100%; display:block; border-radius:16px}
.shot figcaption{padding:10px 8px 4px; color: rgba(255,255,255,.78); font-weight:900; font-size:12.5px}

.faq{margin-top:12px; display:grid; gap:10px}
.faqItem{background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:12px 14px; box-shadow: var(--shadow2);}
.faqItem summary{cursor:pointer; font-weight:950}
.faqItem p{margin:10px 0 0; color: rgba(255,255,255,.80); font-weight:800; line-height:1.6}

.contactCard{background: rgba(10,35,60,.30); border:1px solid rgba(255,255,255,.14); border-radius:26px; padding:16px; box-shadow: var(--shadow); display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
@media (max-width: 980px){ .contactCard{grid-template-columns: 1fr} }
.contactCard__left h2{margin:0}
.contactCard__left p{margin:8px 0 0; color: rgba(255,255,255,.80); font-weight:800; line-height:1.55}
.contactCard__right{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start}
@media (max-width: 980px){ .contactCard__right{justify-content:flex-start} }

.footer{margin-top:14px; padding:16px 0 10px}
.footer__row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footer__brand{display:flex; align-items:center; gap:10px}
.footer__brand img{width:38px; height:38px; border-radius:14px; border:1px solid rgba(255,255,255,.16)}
.footer__name{font-weight:950}
.footer__muted{color: rgba(255,255,255,.70); font-weight:900; font-size:12px}
.footer__links{display:flex; gap:14px; flex-wrap:wrap}
.footer__links a{color: rgba(255,255,255,.82); font-weight:900}
.footer__links a:hover{text-decoration:underline}
.footer__note{margin-top:12px; color: rgba(255,255,255,.72); font-weight:850; font-size:12.5px; line-height:1.55}

html[dir="rtl"] .topbar__inner{flex-direction: row-reverse;}
html[dir="rtl"] .brand{flex-direction: row-reverse;}
html[dir="rtl"] .brand__text{text-align:right}
html[dir="rtl"] .nav{direction:rtl}
html[dir="rtl"] .actions{flex-direction: row-reverse;}
html[dir="rtl"] .hero__cta{flex-direction: row-reverse;}
html[dir="rtl"] .hero__left{text-align:right}
html[dir="rtl"] .hero__sub{margin-left:auto}


/* --- Legal / Support pages --- */
.legalCard{
  margin-top: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  padding: 16px;
  box-shadow: var(--shadow2);
}
.legalCard h3{
  margin: 12px 0 6px;
  font-weight: 950;
}
.legalCard p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.80);
  font-weight: 820;
  line-height: 1.65;
}
.legalLinks{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.supportGrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px){ .supportGrid{grid-template-columns: 1fr;} }
.supportCard{
  display: block;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow2);
}
.supportCard:hover{
  transform: translateY(-1px);
  transition: .18s ease;
  background: rgba(255,255,255,.12);
}
.supportCard__icon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 18px;
}
.supportCard__title{
  margin-top: 10px;
  font-weight: 950;
}
.supportCard__desc{
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
  line-height: 1.55;
  font-size: 12.5px;
}
.supportList{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.80);
  font-weight: 850;
  line-height: 1.7;
}
html[dir="rtl"] .supportList{padding-left: 0; padding-right: 18px;}