@font-face {
  font-family: 'IRANYekanX';
  src: url('../fonts/IRANYekanX-Regular.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #061b3a;
  --ink: #10284b;
  --royal: #1769e0;
  --teal: #13bfa5;
  --mint: #64e6c5;
  --paper: #f4f9ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'IRANYekanX', 'Vazirmatn', sans-serif; color: var(--ink); overflow-x: hidden; background: #f4f9ff; }

.header-shell { transition: background .3s ease, box-shadow .3s ease, padding .3s ease; }
.header-shell.is-scrolled { background: rgba(6,27,58,.94); box-shadow: 0 12px 32px rgba(1,14,35,.22); backdrop-filter: blur(18px); }

.hero-surface {
  background:
    radial-gradient(circle at 77% 18%, rgba(62,219,187,.30), transparent 20rem),
    radial-gradient(circle at 17% 78%, rgba(24,103,238,.40), transparent 23rem),
    linear-gradient(120deg, #04142f 0%, #092d69 54%, #075c73 100%);
}

.digital-grid {
  background-image: linear-gradient(rgba(160,236,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(160,236,255,.11) 1px, transparent 1px);
  background-size: 38px 38px;
}

.nav-item { color: #dcecff; transition: color .2s ease; }
.nav-item:hover { color: #6ee6cf; }

.action-button {
  background: linear-gradient(135deg, #2378e8, #11b796);
  box-shadow: 0 13px 26px rgba(17,183,150,.23);
  transition: transform .22s ease, box-shadow .22s ease;
  color: #fff;
}
.action-button:hover { transform: translateY(-3px); box-shadow: 0 19px 34px rgba(17,183,150,.34); }

.soft-button { border: 1px solid rgba(180,239,244,.48); background: rgba(255,255,255,.08); transition: background .22s ease, transform .22s ease; color: #fff; }
.soft-button:hover { background: rgba(110,230,207,.16); transform: translateY(-3px); }

.dashboard-frame { box-shadow: 0 30px 70px rgba(0,8,32,.38); }
.dashboard-image { display: block; width: 100%; height: auto; border-radius: 1.25rem; }

.card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-lift:hover { transform: translateY(-7px); box-shadow: 0 21px 45px rgba(17,63,126,.14); border-color: #72dcca; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }

.modal-backdrop { background: rgba(2,14,36,.74); backdrop-filter: blur(8px); }
.product-panel { display: none; }
.product-panel.is-active { display: block; }

input, textarea { font-family: 'Vazirmatn', sans-serif; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #61e3cb;
  outline-offset: 3px;
}

.product-thumb { width: 100%; height: auto; border-radius: 0.75rem; display: block; margin-top: 1rem; }
.logo-image { width: 44px; height: 44px; border-radius: 0.75rem; display: block; }
.about-image { width: 100%; height: auto; border-radius: 2rem; display: block; box-shadow: 0 30px 70px rgba(0,8,32,.25); }

.mobile-navigation > div { min-height: 0; overflow: hidden; }

/* Confined to the same breakpoint Tailwind's md:hidden uses, so there's no
   cascade-order race between this stylesheet and the Tailwind CDN stylesheet. */
@media (max-width: 767.98px) {
  .mobile-navigation {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    opacity: 0;
    transform: translateY(-6px);
    transition: grid-template-rows .28s ease, opacity .22s ease, transform .22s ease, margin-top .28s ease;
    margin-top: 0;
  }
  .mobile-navigation.open {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
    transform: translateY(0);
    margin-top: .75rem;
  }
}
.scroll-indicator { animation: bounce-down 1.8s ease-in-out infinite; }
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(6px); opacity: 1; }
}

.faq-item { overflow: hidden; transition: border-color .2s ease, background-color .2s ease; }
.faq-item:hover { border-color: rgba(100, 230, 197, .35); }
.faq-trigger { cursor: pointer; background: none; border: none; }
.faq-icon { transition: transform .25s ease; flex-shrink: 0; }
.faq-panel {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  transition: grid-template-rows .3s ease;
}
.faq-panel > p { overflow: hidden; min-height: 0; margin: 0; }
.faq-item.is-open .faq-panel { grid-template-rows: minmax(0, 1fr); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

.platform-icon { transition: transform .3s ease; }
.platform-card:hover .platform-icon { transform: scale(1.08) rotate(-4deg); }

.why-card { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
.why-card:hover { background-color: rgba(255,255,255,.09); border-color: rgba(100,230,197,.35); box-shadow: 0 18px 40px rgba(0,8,32,.35); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}