:root {
  --ink: #07111f;
  --ink-soft: #101d2d;
  --ice: #eef7fb;
  --blue: #1688b8;
  --blue-2: #62c6e8;
  --red: #e73338;
  --line: rgba(15, 35, 55, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f7fafc;
  color: #0c1724;
  font-family: "Vazir", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .035;
  background-image: url("../images/grain.svg");
}
::selection { background: rgba(22, 136, 184, .22); }

.container-shell { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.display-font { font-family: "Vazir", Tahoma, sans-serif; letter-spacing: -.035em; }
.english { font-family: Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; }

.glass {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.74);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 14px 60px rgba(5, 24, 42, .08);
}
.glass-dark {
  background: rgba(7,17,31,.72);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.brand-mark {
  width: 38px; height: 38px; position: relative; display: grid; place-items: center;
  border-radius: 13px; background: linear-gradient(145deg, #0b1827, #18344a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(5,28,45,.18);
}
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; border-radius: 999px; background: #fff; }
.brand-mark::before { width: 18px; height: 3px; transform: rotate(-28deg); }
.brand-mark::after { width: 3px; height: 18px; transform: rotate(-28deg); opacity: .68; }

.nav-link { position: relative; transition: color .25s ease; }
.nav-link::after { content:""; position:absolute; inset-inline:50% 50%; bottom:-8px; height:2px; border-radius:10px; background:var(--red); transition:inset .25s ease; }
.nav-link:hover::after, .nav-link.active::after { inset-inline:0 0; }
.nav-link.active { color: var(--ink); font-weight: 700; }

.hero-mesh {
  background:
    radial-gradient(circle at 12% 20%, rgba(98,198,232,.18), transparent 31%),
    radial-gradient(circle at 78% 18%, rgba(231,51,56,.08), transparent 24%),
    radial-gradient(circle at 78% 88%, rgba(98,198,232,.16), transparent 28%),
    linear-gradient(135deg, #fbfdff 0%, #eef8fc 48%, #ffffff 100%);
}
.hero-orbit { position:absolute; inset: 50% auto auto 50%; width:min(640px,90vw); aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(22,136,184,.14); border-radius:50%; }
.hero-orbit::before, .hero-orbit::after { content:""; position:absolute; border-radius:50%; inset:12%; border:1px solid rgba(22,136,184,.12); }
.hero-orbit::after { inset:27%; border-style:dashed; animation:spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.salt-particle { position:absolute; width:7px; height:7px; border-radius:2px; background:rgba(255,255,255,.82); box-shadow:0 3px 12px rgba(27,93,121,.16); animation:float 7s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform:translate3d(0,0,0) rotate(0deg); } 50%{ transform:translate3d(0,-15px,0) rotate(20deg); } }

.product-stage::before {
  content:""; position:absolute; inset:13% 9% 7%; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0 28%, rgba(98,198,232,.23) 29%, rgba(98,198,232,.06) 51%, transparent 72%);
  filter: blur(2px);
}
.product-stage::after {
  content:""; position:absolute; left:50%; bottom:6%; width:54%; height:8%; transform:translateX(-50%);
  border-radius:50%; background:rgba(11,41,58,.16); filter:blur(14px);
}

.soft-card { background:#fff; border:1px solid rgba(7,17,31,.08); box-shadow:0 16px 50px rgba(8,31,48,.07); }
.soft-card-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.soft-card-hover:hover { transform:translateY(-7px); box-shadow:0 26px 70px rgba(8,31,48,.12); border-color:rgba(22,136,184,.22); }

.kicker { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.08em; color:#176f98; }
.kicker::before { content:""; width:28px; height:1px; background:currentColor; }
.section-title { font-size:clamp(30px,4vw,54px); line-height:1.28; font-weight:900; color:var(--ink); letter-spacing:-.045em; }
.section-copy { color:#566575; line-height:2.05; font-size:15px; }

.btn-primary, .btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 20px; border-radius:16px; font-weight:800; font-size:14px; transition:all .25s ease; }
.btn-primary { color:white; background:linear-gradient(135deg,#0c2438,#113e5a); box-shadow:0 10px 24px rgba(7,17,31,.18); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 30px rgba(7,17,31,.24); }
.btn-secondary { color:#0a2130; background:rgba(255,255,255,.84); border:1px solid rgba(10,33,48,.12); }
.btn-secondary:hover { border-color:rgba(22,136,184,.35); background:white; }

.icon-box { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#effaff,#dff3fb); color:#0878a6; border:1px solid rgba(22,136,184,.12); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.revealed { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:.08s; }
.reveal[data-delay="2"] { transition-delay:.16s; }
.reveal[data-delay="3"] { transition-delay:.24s; }

.page-hero { position:relative; overflow:hidden; background:linear-gradient(145deg,#08131f,#10283a 68%,#0c425b); color:#fff; }
.page-hero::before { content:""; position:absolute; width:460px; height:460px; border-radius:50%; left:-160px; top:-200px; background:rgba(98,198,232,.16); filter:blur(10px); }
.page-hero::after { content:""; position:absolute; width:320px; height:320px; border-radius:50%; right:-100px; bottom:-190px; background:rgba(231,51,56,.13); filter:blur(6px); }

.metric-number { font-family:Inter, ui-sans-serif, system-ui, sans-serif; font-weight:800; letter-spacing:-.04em; }

.product-card img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.product-card:hover img { transform: scale(1.06) rotate(-1.5deg); }
.filter-btn.active { color:white; background:#0c2438; border-color:#0c2438; }

.timeline-line::before { content:""; position:absolute; top:0; bottom:0; inset-inline-start:15px; width:1px; background:linear-gradient(#72c5e3,rgba(114,197,227,.08)); }
.timeline-dot { width:31px; height:31px; border-radius:50%; background:#fff; border:7px solid #dff3fb; box-shadow:0 0 0 1px rgba(22,136,184,.2); }

.table-wrap { overflow:auto; border:1px solid rgba(7,17,31,.08); border-radius:24px; background:#fff; box-shadow:0 18px 54px rgba(7,17,31,.06); }
.product-table { width:100%; border-collapse:collapse; min-width:840px; }
.product-table th { position:sticky; top:0; background:#0b1d2c; color:#fff; padding:15px 16px; font-size:12px; text-align:start; white-space:nowrap; }
.product-table td { padding:14px 16px; border-bottom:1px solid #edf1f4; color:#43505d; font-size:13px; }
.product-table tbody tr:hover { background:#f7fcfe; }

.form-input { width:100%; min-height:52px; border-radius:16px; border:1px solid #dde5eb; background:#fff; padding:0 16px; outline:none; transition:border-color .2s, box-shadow .2s; }
textarea.form-input { padding-top:14px; min-height:130px; resize:vertical; }
.form-input:focus { border-color:#67bddf; box-shadow:0 0 0 4px rgba(98,198,232,.13); }

.toast { position:fixed; inset-inline-start:24px; bottom:24px; z-index:80; transform:translateY(20px); opacity:0; pointer-events:none; transition:.3s ease; }
.toast.show { transform:none; opacity:1; }

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


/* ---------- Multilingual / responsive navigation ---------- */
html[dir="ltr"] body { text-align: left; }
html[dir="rtl"] body { text-align: right; }
html[lang="fa"] body, html[lang="ar"] body { font-family: "Vazir", Tahoma, Arial, sans-serif; }
html[lang="en"] body, html[lang="ru"] body { font-family: Inter, "Segoe UI", Arial, sans-serif; }
html[lang="zh-CN"] body { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
html[dir="ltr"] .display-font { letter-spacing: -.025em; }
html[lang="zh-CN"] .display-font, html[lang="zh-CN"] .section-title { letter-spacing: -.02em; }
html[dir="ltr"] .kicker::before { order: 0; }
html[dir="ltr"] .timeline-line::before { inset-inline-start: 15px; }
html[dir="rtl"] .timeline-line::before { inset-inline-start: 15px; }

.header-shell { position: relative; overflow: visible; }
.header-desktop { display: flex; }
.desktop-menu { white-space: nowrap; }
.header-phone { min-height: 42px; border-radius: 14px; padding: 0 13px; align-items:center; justify-content:center; gap:8px; color:#fff; background:linear-gradient(135deg,#0c2438,#113e5a); box-shadow:0 8px 20px rgba(7,17,31,.15); font-size:11px; font-weight:800; }
.language-trigger { min-height:42px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 11px; border:1px solid #dfe7ec; border-radius:14px; background:rgba(255,255,255,.84); color:#304152; font-size:11px; font-weight:800; transition:.2s ease; }
.language-trigger:hover { border-color:rgba(22,136,184,.35); background:#fff; }
.language-trigger svg:last-child { width:14px; transition:transform .2s ease; }
.language-trigger[aria-expanded="true"] svg:last-child { transform:rotate(180deg); }
.language-popover { position:absolute; inset-inline-end:0; top:calc(100% + 10px); width:210px; border-radius:18px; padding:7px; opacity:0; transform:translateY(-7px) scale(.98); visibility:hidden; pointer-events:none; transition:.18s ease; z-index:70; }
.language-popover.open { opacity:1; transform:none; visibility:visible; pointer-events:auto; }
.lang-option { width:100%; display:flex; align-items:center; gap:10px; min-height:40px; padding:0 10px; border-radius:12px; color:#51606e; font-size:12px; font-weight:700; text-align:start; transition:.18s ease; }
.lang-option:hover { background:#f2f8fb; color:#102839; }
.lang-option.active { background:#0c2438; color:#fff; }
.lang-option .lang-code { min-width:26px; font:800 9px/1 Inter, sans-serif; letter-spacing:.08em; opacity:.55; }
.lang-option.active .lang-code { opacity:.75; }
.lang-option.compact { border:1px solid #e6ecef; background:#fff; min-height:44px; }
.lang-option.compact.active { background:#0c2438; border-color:#0c2438; }
.mobile-toggle { display:none; }
.mobile-menu { display:none; border-top:1px solid #eef2f4; }
.mobile-menu-inner { padding:12px 0 16px; max-height:calc(100vh - 105px); overflow:auto; overscroll-behavior:contain; }
.mobile-nav-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; border-radius:13px; padding:0 12px; color:#536271; font-size:13px; font-weight:700; transition:.18s ease; }
.mobile-nav-link:hover { background:#f4f8fa; color:#132938; }
.mobile-nav-link.active { background:#0c2438; color:#fff; }
.mobile-call { min-height:46px; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:14px; background:#eef8fc; color:#0d6f99; font-size:12px; font-weight:800; }
body.menu-open { overflow:hidden; }

@media (max-width: 1180px) {
  .container-shell { width:min(100% - 24px, 960px); }
  .header-desktop { display:none!important; }
  .mobile-toggle { display:grid; }
  .mobile-menu.open { display:block; }
}
@media (min-width: 1181px) { .mobile-toggle, .mobile-menu { display:none!important; } }
@media (max-width: 640px) {
  .site-header { padding-inline:8px; padding-top:8px; }
  .header-shell { border-radius:18px; padding-inline:12px!important; }
  .brand-link .brand-mark { width:34px; height:34px; border-radius:11px; }
  .brand-link strong { font-size:12px!important; letter-spacing:.13em!important; }
  .brand-link small { font-size:9px!important; }
  .container-shell { width:min(100% - 20px, 760px); }
  .toast { inset-inline:10px; bottom:10px; }
}