/* HOME PAGE **/

:root {
  --bg: #0f1720;
  --bg-soft: #152231;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --light: #f8fafc;
  --accent: #2db6c4;
  --accent-dark: #1594a2;
  --border: #e2e8f0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--light);
  color: var(--text);
  line-height: 1.6;
}

body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

body[dir="rtl"] .screen-top,
body[dir="rtl"] .sale-row,
body[dir="rtl"] .total,
body[dir="rtl"] .footer-grid {
  direction: rtl;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: min(1180px, 92%);
  margin: 0 auto;
}

header {
  background: rgba(15, 23, 32, 0.96);
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.logo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.logo span {
  color: var(--accent);
}

nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  color: #d7e0ea;
}

nav a:hover {
  color: white;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.language-select {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

.language-select option {
  color: #111827;
  background: white;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 14px;
  transition: 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #052b31;
}

.btn-primary:hover {
  background: #51d0db;
}

.btn-secondary {
  color: white;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

.hero {
  background: radial-gradient(
    circle at top right,
    #1f5262 0,
    #0f1720 38%,
    #0b1118 100%
  );
  color: white;
  padding: 86px 0 78px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  color: #89e4ee;
  font-weight: 700;
  margin-bottom: 18px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 22px;
}

.hero p {
  font-size: 19px;
  color: #cbd5e1;
  max-width: 620px;
  margin-bottom: 28px;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.device-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.mock-device {
  background: #0b1118;
  border-radius: 26px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.screen {
  background: white;
  color: var(--text);
  border-radius: 18px;
  padding: 18px;
}

.screen-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--muted);
}

.sale-row {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.total {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: #e8fbfd;
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  color: #07545e;
}

section {
  padding: 72px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 44px;
}

body[dir="rtl"] .section-title {
  text-align: center;
}

.section-title h2 {
  font-size: 36px;
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.section-title p {
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
}

.trust-grid,
.feature-grid,
.package-grid {
  display: grid;
  gap: 22px;
}

.trust-grid {
  grid-template-columns: repeat(5, 1fr);
}
.feature-grid {
  grid-template-columns: repeat(4, 1fr);
}
.package-grid {
  grid-template-columns: repeat(3, 1fr);
}

.trust-card,
.feature-card,
.package-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.05);
}

.trust-card {
  text-align: center;
  font-weight: 700;
}

.icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e8fbfd;
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-bottom: 16px;
}

.feature-card h3,
.package-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.feature-card p,
.package-card p {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 16px;
}

.feature-card ul,
.package-card ul {
  list-style: none;
  color: var(--text);
  font-size: 14px;
}

.feature-card li,
.package-card li {
  padding: 5px 0;
}

.feature-card li::before,
.package-card li::before {
  content: "✓";
  color: var(--accent-dark);
  font-weight: 900;
  margin-right: 8px;
}

body[dir="rtl"] .feature-card li::before,
body[dir="rtl"] .package-card li::before {
  margin-right: 0;
  margin-left: 8px;
}

.packages {
  background: #eef6f8;
}

.package-card.highlight {
  border: 2px solid var(--accent);
  transform: translateY(-8px);
}

.tag {
  display: inline-block;
  background: #e8fbfd;
  color: #07545e;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 16px;
}

.device-section {
  background: var(--bg-soft);
  color: white;
}

.device-section .section-title p {
  color: #cbd5e1;
}

.device-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.device-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  font-weight: 700;
}

.partner {
  background: white;
}

.partner-box {
  background: linear-gradient(135deg, #0f1720, #18384a);
  color: white;
  border-radius: 30px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.partner-box p {
  color: #cbd5e1;
  margin-top: 12px;
  margin-bottom: 22px;
}

.dashboard {
  background: #f8fafc;
}

.dashboard-preview {
  background: white;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.metric {
  background: #f1f5f9;
  padding: 22px;
  border-radius: 18px;
}

.metric strong {
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
}

.metric span {
  color: var(--muted);
  font-size: 14px;
}

.final-cta {
  background: #0f1720;
  color: white;
  text-align: center;
}

.final-cta p {
  color: #cbd5e1;
  margin: 14px auto 26px;
  max-width: 680px;
}

footer {
  background: #071018;
  color: #94a3b8;
  padding: 38px 0;
  font-size: 14px;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-links a:hover {
  color: white;
}

@media (max-width: 980px) {
  nav {
    display: none;
  }

  .hero-grid,
  .partner-box {
    grid-template-columns: 1fr;
  }

  .trust-grid,
  .feature-grid,
  .package-grid,
  .device-list,
  .dashboard-preview {
    grid-template-columns: 1fr 1fr;
  }

  .package-card.highlight {
    transform: none;
  }
}

@media (max-width: 640px) {
  .nav {
    flex-wrap: wrap;
  }

  .nav-actions {
    width: 100%;
    justify-content: end;
  }

  .trust-grid,
  .feature-grid,
  .package-grid,
  .device-list,
  .dashboard-preview {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 56px;
  }

  .partner-box {
    padding: 30px;
  }
}

/* ── Smooth scroll ── */
html {
  scroll-behavior: smooth;
}

/* ── Scroll-reveal animations ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delay helpers */
.delay-1 {
  transition-delay: 0.08s !important;
}
.delay-2 {
  transition-delay: 0.16s !important;
}
.delay-3 {
  transition-delay: 0.24s !important;
}
.delay-4 {
  transition-delay: 0.32s !important;
}
.delay-5 {
  transition-delay: 0.4s !important;
}

/* Hero entrance */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-text-col > * {
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-text-col .eyebrow {
  animation-delay: 0.1s;
}
.hero-text-col h1 {
  animation-delay: 0.22s;
}
.hero-text-col p {
  animation-delay: 0.34s;
}
.hero-text-col .hero-buttons {
  animation-delay: 0.46s;
}

@keyframes deviceFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
.device-card {
  animation: deviceFloat 5s ease-in-out infinite;
}

/* Nav link hover underline */
nav a {
  position: relative;
  padding-bottom: 3px;
}
nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}
nav a:hover::after {
  width: 100%;
}

/* Button hover lift */
.btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45, 182, 196, 0.25);
}
.btn:active {
  transform: translateY(0);
}

/* Feature card hover */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}

/* Trust card hover */
.trust-card {
  transition: transform 0.25s ease, background 0.25s ease;
  cursor: default;
}
.trust-card:hover {
  transform: translateY(-4px);
  background: #e0f9fb;
}

/* Package card hover */
.package-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.package-card:not(.highlight):hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}
.package-card.highlight {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.package-card.highlight:hover {
  transform: translateY(-12px);
  box-shadow: 0 28px 56px rgba(45, 182, 196, 0.2);
}

.icon svg,
.modal-icon svg {
  width: 26px;
  height: 26px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-icon {
  color: var(--accent-dark);
}

/* ── Modal overlay ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 16, 26, 0.72);
  backdrop-filter: blur(6px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open {
  display: flex;
  animation: overlayIn 0.25s ease forwards;
}
@keyframes overlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modal-box {
  background: white;
  border-radius: 28px;
  padding: 44px 40px 36px;
  max-width: 520px;
  width: 100%;
  position: relative;
  animation: modalSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
}
@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #e8fbfd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
}
.modal-box h3 {
  font-size: 22px;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  color: #0f1720;
}
.modal-box p {
  color: #64748b;
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 22px;
}
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-form input,
.modal-form select,
.modal-form textarea {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  color: #1e293b;
  background: #f8fafc;
}
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  border-color: var(--accent);
  background: white;
}
.modal-form textarea {
  resize: vertical;
  min-height: 90px;
}
.modal-submit {
  background: var(--accent);
  color: #052b31;
  border: none;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: 4px;
}
.modal-submit:hover {
  background: #51d0db;
  transform: translateY(-1px);
}
.modal-success {
  text-align: center;
  padding: 20px 0 10px;
}
.modal-success .check {
  font-size: 48px;
  margin-bottom: 14px;
  display: block;
}
.modal-success h4 {
  font-size: 20px;
  color: #0f1720;
  margin-bottom: 8px;
}
.modal-success p {
  margin-bottom: 0;
}

/* Package detail list in modal */
.modal-pkg-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.modal-pkg-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  color: #1e293b;
  display: flex;
  gap: 10px;
}
.modal-pkg-list li:last-child {
  border-bottom: none;
}
.modal-pkg-list li .tick {
  color: var(--accent-dark);
  font-weight: 900;
  flex-shrink: 0;
}
.modal-pkg-badge {
  display: inline-block;
  background: #e8fbfd;
  color: #07545e;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 16px;
}

/* Login modal */
.login-tabs {
  display: flex;
  gap: 0;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
}
.login-tab {
  flex: 1;
  text-align: center;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #64748b;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}
.login-tab.active {
  background: white;
  color: #0f1720;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Mobile-first polish / responsive fixes ── */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}
html,
body {
  width: 100%;
  overflow-x: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
.mobile-menu-toggle {
  display: none;
}

@media (max-width: 980px) {
  header {
    position: sticky;
  }
  .nav {
    min-height: 66px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .logo {
    font-size: 21px;
  }
  .mobile-menu-toggle {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }
  nav {
    display: none;
    position: absolute;
    left: 4%;
    right: 4%;
    top: calc(100% + 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(15, 23, 32, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  }
  header.menu-open nav {
    display: flex;
  }
  nav a {
    padding: 12px 14px;
    border-radius: 12px;
  }
  nav a:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  nav a::after {
    display: none;
  }
  .nav-actions {
    margin-left: auto;
    gap: 8px;
  }
  .nav-actions .btn {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
  }
  .language-select {
    padding: 8px;
    min-height: 40px;
  }
  .hero {
    padding: 56px 0 58px;
  }
  .hero-grid {
    gap: 34px;
  }
  .device-card {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }
  #about .container > div {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 32px, 1180px);
  }
  section {
    padding: 48px 0;
  }
  h1 {
    font-size: clamp(34px, 11vw, 48px);
    letter-spacing: -1.3px;
  }
  .hero p {
    font-size: 16px;
  }
  .section-title {
    margin-bottom: 28px;
  }
  .section-title h2 {
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.14;
  }
  .section-title p {
    font-size: 15px;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-buttons .btn {
    width: 100%;
    min-height: 46px;
  }
  .trust-card,
  .feature-card,
  .package-card,
  .metric {
    padding: 20px;
    border-radius: 18px;
  }
  .partner-box {
    padding: 26px 20px;
    border-radius: 24px;
  }
  .dashboard-preview {
    padding: 18px;
    border-radius: 22px;
  }
  .screen {
    padding: 14px;
  }
  .sale-row {
    gap: 12px;
  }
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }
  .modal-box {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    border-radius: 24px 24px 18px 18px;
    padding: 34px 20px 22px;
  }
  .modal-close {
    top: 12px;
    right: 14px;
  }
  .login-tabs {
    overflow-x: auto;
  }
  .login-tab {
    min-width: max-content;
  }
  .footer-grid {
    flex-direction: column;
  }
  .footer-links {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .nav {
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .mobile-menu-toggle {
    order: 2;
  }
  .logo {
    order: 1;
  }
  .nav-actions {
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: 70px 1fr 1fr;
    gap: 8px;
  }
  .nav-actions .btn {
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
  }
  nav {
    top: calc(100% + 4px);
  }
  .hero {
    padding-top: 38px;
  }
  .device-card {
    padding: 14px;
    border-radius: 22px;
  }
  .mock-device {
    padding: 10px;
    border-radius: 20px;
  }
  .screen-top,
  .sale-row,
  .total {
    font-size: 13px;
  }
  .total {
    padding: 13px;
  }
  .icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .metric strong {
    font-size: 24px;
  }
  #about h2 {
    font-size: 30px !important;
  }
  #about .container > div > div:last-child {
    padding: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.site-logo {
  height: 70px;
  width: auto;
  display: block;
}

:root {
  --accent: #ffbf00;
  --accent-dark: #e0007a;
  --bg: #050816;
  --bg-soft: #10192d;
  --light: #f5f7fb;
}

.hero {
  background: radial-gradient(
      circle at top left,
      rgba(224, 0, 122, 0.28),
      transparent 28%
    ),
    radial-gradient(
      circle at top right,
      rgba(255, 191, 0, 0.28),
      transparent 32%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0, 132, 255, 0.2),
      transparent 30%
    ),
    linear-gradient(135deg, #050816 0%, #10192d 55%, #07111f 100%);
}

.btn-primary {
  background: linear-gradient(135deg, #ffbf00, #ff7a00);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ffcf40, #ff9500);
}

.icon {
  background: linear-gradient(
    135deg,
    rgba(255, 191, 0, 0.15),
    rgba(224, 0, 122, 0.12)
  );
  color: #e0007a;
}

.feature-card:hover,
.package-card:hover {
  border-color: #ffbf00;
}

.package-card.highlight {
  border: 2px solid #ffbf00;
  box-shadow: 0 18px 45px rgba(255, 191, 0, 0.15);
}

.tag,
.modal-pkg-badge {
  background: rgba(255, 191, 0, 0.12);
  color: #ff9500;
}

.total {
  background: linear-gradient(
    135deg,
    rgba(255, 191, 0, 0.1),
    rgba(0, 132, 255, 0.08)
  );
  color: #0f1720;
}

.partner-box {
  background: radial-gradient(
      circle at top right,
      rgba(255, 191, 0, 0.22),
      transparent 35%
    ),
    linear-gradient(135deg, #0c1325, #10192d);
}

.final-cta {
  background: radial-gradient(
      circle at top left,
      rgba(224, 0, 122, 0.2),
      transparent 30%
    ),
    linear-gradient(135deg, #050816, #10192d);
}

.trust-card:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 191, 0, 0.08),
    rgba(224, 0, 122, 0.06)
  );
}

nav a::after {
  background: linear-gradient(90deg, #ffbf00, #e0007a);
}

@media (max-width: 640px) {
  .site-logo {
    height: 44px;
  }
}

/** CONTACT PAGE */
:root{
--bg:#0f1720;--bg2:#152231;--card:#fff;--text:#1e293b;--muted:#64748b;
--light:#f8fafc;--accent:#2db6c4;--accent2:#1594a2;--border:#e2e8f0
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--light);color:var(--text);line-height:1.6}
body[dir="rtl"]{direction:rtl;text-align:right}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:auto}
header{background:rgba(15,23,32,.96);color:white;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{min-height:74px;display:flex;justify-content:space-between;align-items:center;gap:22px}
.logo{font-size:24px;font-weight:800;white-space:nowrap}.logo span{color:var(--accent)}
nav{display:flex;gap:22px;font-size:14px;color:#d7e0ea}
nav a:hover{color:white}
.nav-actions{display:flex;gap:12px;align-items:center}
select{background:transparent;color:white;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:9px 10px}
select option{color:#111;background:white}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 18px;font-weight:700;font-size:14px;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:#052b31}
.btn-secondary{color:white;border-color:rgba(255,255,255,.25)}
.hero{background:radial-gradient(circle at top right,#1f5262 0,#0f1720 38%,#0b1118 100%);color:white;padding:86px 0 78px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{color:#89e4ee;font-weight:700;margin-bottom:18px;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
h1{font-size:clamp(38px,5vw,62px);line-height:1.05;letter-spacing:-2px;margin-bottom:22px}
.hero p{font-size:19px;color:#cbd5e1;max-width:680px;margin-bottom:28px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}
.hero-panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.panel-inner{background:white;color:var(--text);border-radius:22px;padding:24px}
.panel-row{display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid var(--border);padding:14px 0}
.panel-row:last-child{border-bottom:none}
.status{display:inline-block;padding:5px 9px;border-radius:999px;background:#e8fbfd;color:#07545e;font-size:12px;font-weight:800;white-space:nowrap}
section{padding:76px 0}
.section-title{text-align:center;margin-bottom:46px}
.section-title h2{font-size:38px;letter-spacing:-1px;margin-bottom:12px}
.section-title p{color:var(--muted);max-width:760px;margin:auto}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:white;border:1px solid var(--border);border-radius:24px;padding:26px;box-shadow:0 14px 35px rgba(15,23,42,.05)}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px;margin-bottom:16px}
.alt{background:#eef6f8}
.form-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.form-card{background:white;border:1px solid var(--border);border-radius:28px;padding:30px;box-shadow:0 14px 35px rgba(15,23,42,.06)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
input,textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px;font:inherit;background:#fff}
textarea{min-height:120px}
.full{grid-column:1/-1}
.info-list{display:grid;gap:16px}
.info-item{background:#0f1720;color:white;border-radius:22px;padding:22px}
.info-item p{color:#cbd5e1}
.support-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dark-box{background:linear-gradient(135deg,#0f1720,#18384a);color:white;border-radius:30px;padding:42px}
.dark-box p{color:#cbd5e1}
.cta{background:#0f1720;color:white;text-align:center;padding:76px 0}
.cta p{color:#cbd5e1;margin:14px auto 26px;max-width:700px}
footer{background:#071018;color:#94a3b8;padding:38px 0;font-size:14px}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:980px){
nav{display:none}.hero-grid,.form-layout,.support-grid{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.nav{flex-wrap:wrap}.nav-actions{width:100%;justify-content:space-between}.cards,.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.hero{padding-top:56px}
}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800;1,9..40,400&display=swap');
:root{--accent:#ffbf00;--accent-dark:#e0007a;--accent2:#e0007a;--bg:#050816;--bg2:#10192d;--bg-soft:#10192d;--light:#f5f7fb;--border:#e2e8f0;--text:#1e293b;--muted:#64748b;--card:#fff}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--light);color:var(--text)}
.site-logo{height:70px;width:auto;display:block}.logo span{color:var(--accent)}
header{background:rgba(5,8,22,.96);z-index:100}.nav{position:relative}
.hero{background:radial-gradient(circle at top left,rgba(224,0,122,.28),transparent 28%),radial-gradient(circle at top right,rgba(255,191,0,.28),transparent 32%),radial-gradient(circle at bottom right,rgba(0,132,255,.20),transparent 30%),linear-gradient(135deg,#050816 0%,#10192d 55%,#07111f 100%)!important}
.btn{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,191,0,.22)}.btn-primary{background:linear-gradient(135deg,#ffbf00,#ff7a00)!important;color:white!important}.btn-primary:hover{background:linear-gradient(135deg,#ffcf40,#ff9500)!important}.btn-secondary:hover{background:rgba(255,255,255,.08)}
.tag,.status,.num{background:rgba(255,191,0,.12)!important;color:#ff9500!important}.eyebrow{color:#ffcf40!important}.card:hover,.package-card:hover,.customer-box:hover,.upgrade-card:hover,.flow-step:hover{border-color:#ffbf00;transform:translateY(-4px);box-shadow:0 22px 48px rgba(15,23,42,.12)}.card,.package-card,.customer-box,.upgrade-card,.flow-step{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.package-card.highlight{border:2px solid #ffbf00!important;box-shadow:0 18px 45px rgba(255,191,0,.15)}
nav a{position:relative;padding-bottom:3px}nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:linear-gradient(90deg,#ffbf00,#e0007a);border-radius:2px;transition:width .3s ease}nav a:hover::after{width:100%}
.portal-box,.note-box,.dark-box,.cta{background:radial-gradient(circle at top left,rgba(224,0,122,.20),transparent 30%),linear-gradient(135deg,#050816,#10192d)!important}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:translateY(0)}.delay-1{transition-delay:.08s!important}.delay-2{transition-delay:.16s!important}.delay-3{transition-delay:.24s!important}.delay-4{transition-delay:.32s!important}.delay-5{transition-delay:.40s!important}
.mobile-menu-toggle{display:none}.modal-overlay{display:none;position:fixed;inset:0;background:rgba(7,16,26,.72);backdrop-filter:blur(6px);z-index:9999;align-items:center;justify-content:center;padding:20px}.modal-overlay.open{display:flex;animation:overlayIn .25s ease forwards}@keyframes overlayIn{from{opacity:0}to{opacity:1}}.modal-box{background:white;border-radius:28px;padding:44px 40px 36px;max-width:540px;width:100%;position:relative;animation:modalSlideUp .35s cubic-bezier(.22,1,.36,1) forwards;box-shadow:0 40px 100px rgba(0,0,0,.35)}@keyframes modalSlideUp{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-close{position:absolute;top:18px;right:22px;background:#f1f5f9;border:0;border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748b}.modal-close:hover{background:#e2e8f0;color:#1e293b}.modal-icon{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,rgba(255,191,0,.15),rgba(224,0,122,.12));color:#e0007a;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;margin-bottom:20px}.modal-box h3{font-size:22px;margin-bottom:10px;letter-spacing:-.5px;color:#0f1720}.modal-box p{color:#64748b;font-size:15px;line-height:1.65;margin-bottom:22px}.modal-form{display:flex;flex-direction:column;gap:12px}.modal-form input,.modal-form select,.modal-form textarea{border:1px solid #e2e8f0;border-radius:12px;padding:13px 16px;font-size:14px;font-family:inherit;outline:0;color:#1e293b;background:#f8fafc}.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{border-color:var(--accent);background:white}.modal-form textarea{resize:vertical;min-height:90px}.modal-submit{background:linear-gradient(135deg,#ffbf00,#ff7a00);color:white;border:0;border-radius:12px;padding:14px 20px;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px}.modal-submit:hover{background:linear-gradient(135deg,#ffcf40,#ff9500);transform:translateY(-1px)}.modal-success{text-align:center;padding:20px 0 10px}.modal-success .check{font-size:48px;margin-bottom:14px;display:block}.login-tabs{display:flex;gap:0;background:#f1f5f9;border-radius:12px;padding:4px;margin-bottom:20px}.login-tab{flex:1;text-align:center;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;color:#64748b;user-select:none}.login-tab.active{background:white;color:#0f1720;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.modal-pkg-list{list-style:none;margin:0 0 22px;padding:0}.modal-pkg-list li{padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:14px;color:#1e293b;display:flex;gap:10px}.modal-pkg-list li:last-child{border-bottom:0}.modal-pkg-list li .tick{color:#e0007a;font-weight:900;flex-shrink:0}.modal-pkg-badge{display:inline-block;background:rgba(255,191,0,.12);color:#ff9500;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:16px}
@media(max-width:980px){.nav{min-height:66px;flex-wrap:nowrap;gap:12px}.logo{font-size:21px}.mobile-menu-toggle{display:inline-flex;width:42px;height:42px;border:1px solid rgba(255,255,255,.24);border-radius:12px;background:rgba(255,255,255,.06);color:white;align-items:center;justify-content:center;font-size:24px;line-height:1;cursor:pointer;flex-shrink:0}header nav{display:none;position:absolute;left:4%;right:4%;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:4px;padding:12px;border-radius:18px;background:rgba(15,23,32,.98);border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 60px rgba(0,0,0,.28)}header.menu-open nav{display:flex}nav a{padding:12px 14px;border-radius:12px}nav a:hover{background:rgba(255,255,255,.08)}nav a::after{display:none}.nav-actions{margin-left:auto;gap:8px}.nav-actions .btn{padding:10px 12px;font-size:13px;border-radius:10px}.language-select,select{padding:8px;min-height:40px}.hero-grid,.cards,.grid2,.grid3,.upgrade-grid,.customer-grid,.feature-block,.feature-block.reverse,.block,.block.reverse,.portal-box,.note-box,.form-layout,.support-grid{grid-template-columns:1fr!important}.package-card.highlight{transform:none!important}}
@media(max-width:760px){.container{width:min(100% - 32px,1180px)}section{padding:48px 0}.hero-buttons{flex-direction:column;align-items:stretch;width:100%}.hero-buttons .btn{width:100%;min-height:46px}.modal-overlay{padding:12px;align-items:flex-end}.modal-box{max-height:calc(100dvh - 24px);overflow-y:auto;border-radius:24px 24px 18px 18px;padding:34px 20px 22px}.modal-close{top:12px;right:14px}.footer-grid{flex-direction:column}.footer-links{width:100%}}
@media(max-width:520px){.nav{flex-wrap:wrap;padding:10px 0}.mobile-menu-toggle{order:2}.logo{order:1}.nav-actions{order:3;width:100%;display:grid;grid-template-columns:70px 1fr 1fr;gap:8px}.site-logo{height:44px}nav{top:calc(100% + 4px)}.hero{padding-top:38px}}


/* CUSTOM**/

.ESKOBJ_IN  > div
{
position:relative !important ;
}

.ESKBDY 
{
position:relative !important ;

}



/***/