/* IRANSAR — Static Multilingual Site
   Designed for: Cloudflare Pages (no build step)
*/
@viewport { width: device-width; }
@-ms-viewport { width: device-width; }

@font-face{
  font-family:"Iranian Sans";
  src:url("../fonts/IranianSans.ttf") format("truetype");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#070b14;
  --bg2:#0b1224;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --text:#e7edf7;
  --muted:#a8b7cf;
  --brand:#4fd1ff;
  --brand2:#7c5cff;
  --ok:#63f2b0;
  --warn:#ffd66e;
  --line: rgba(255,255,255,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --max: 1160px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
[data-theme="light"]{
  --bg:#f6f8fc;
  --bg2:#ffffff;
  --card: rgba(0,0,0,.04);
  --card2: rgba(0,0,0,.06);
  --text:#0b1020;
  --muted:#3c4a63;
  --line: rgba(0,0,0,.12);
  --shadow: 0 18px 40px rgba(2,8,20,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%}
html, body{width:100%; max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, rgba(79,209,255,.12), transparent 60%),
              radial-gradient(900px 600px at 85% 10%, rgba(124,92,255,.12), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{width:calc(100% - 40px); max-width:var(--max); margin:0 auto}
header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(180%) blur(12px);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  border-bottom:1px solid var(--line);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.12em}
.logo{
  width:34px; height:34px; border-radius:12px;
  background: radial-gradient(circle at 30% 30%, var(--brand), transparent 55%),
              radial-gradient(circle at 70% 70%, var(--brand2), transparent 60%),
              rgba(255,255,255,.06);
  border:1px solid var(--line);
  box-shadow: 0 10px 25px rgba(79,209,255,.12);
}
.nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nav a{font-size:.92rem; color:var(--muted); padding:8px 10px; border-radius:12px}
.nav a.active, .nav a:hover{color:var(--text); background:var(--card)}

.navselect{
  display:none;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  padding:8px 10px;
  border-radius:12px;
  font-size:.92rem;
  max-width: 190px;
}
.slogan{
  margin:10px 0 0 0;
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  opacity:.92;
}
.tools{display:flex; align-items:center; gap:10px}
.select, .btn, .iconbtn{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  border-radius:14px;
}
.select{padding:10px 12px; font-size:.92rem}
.btn{
  padding:10px 14px; font-weight:700; font-size:.95rem; cursor:pointer;
  transition: transform .12s ease, background .2s ease;
}
.btn:hover{transform: translateY(-1px); background:var(--card2)}
.btn.primary{
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: linear-gradient(135deg, rgba(79,209,255,.22), rgba(124,92,255,.18));
}
.iconbtn{width:42px; height:42px; display:grid; place-items:center; cursor:pointer}
.hero{
  position:relative; overflow:hidden;
  padding:72px 0 56px;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("../img/hero_caspian_nightlights.jpg");
  background-size:cover; background-position:center;
  filter:saturate(1.1) contrast(1.05);
  transform:scale(1.03);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,11,20,.75), rgba(7,11,20,.55) 35%, rgba(7,11,20,.92));
}
[data-theme="light"] .hero::after{
  background: linear-gradient(180deg, rgba(246,248,252,.75), rgba(246,248,252,.55) 35%, rgba(246,248,252,.92));
}
.hero .container{position:relative; z-index:2; display:grid; gap:26px}
.hero-grid{display:grid; gap:26px; grid-template-columns: 1.25fr .75fr; align-items:start}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{margin:0; font-size: clamp(2.0rem, 3.4vw, 3.1rem); line-height:1.12}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px; border-radius:999px;
  background: color-mix(in srgb, var(--card) 75%, transparent);
  border:1px solid var(--line);
  width:fit-content;
  color:var(--muted);
  font-weight:650;
}
.badge-dot{width:8px; height:8px; border-radius:99px; background:var(--ok); box-shadow:0 0 0 6px rgba(99,242,176,.12)}
.hero p{margin:10px 0 0; color:var(--muted); font-size:1.05rem; line-height:1.75}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.hero-card{
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stat{
  padding:14px; border-radius:16px; background:var(--card);
  border:1px solid var(--line);
}
.stat b{display:block; font-size:1.15rem}
.stat span{color:var(--muted); font-size:.9rem}
section{padding:64px 0}
.section-title{display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:22px}
.section-title h2{margin:0; font-size:1.9rem}
.section-title p{margin:0; color:var(--muted); max-width:62ch; line-height:1.7}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.grid{display:grid; gap:16px}
.grid.two{grid-template-columns: 1.05fr .95fr}
@media (max-width: 980px){ .grid.two{grid-template-columns:1fr} }
.feature-grid{display:grid; gap:14px; grid-template-columns: repeat(4, 1fr)}
@media (max-width: 1100px){ .feature-grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 560px){ .feature-grid{grid-template-columns: 1fr}}
.feature{
  position:relative; overflow:hidden;
  padding:16px; border-radius:18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 80%, transparent), color-mix(in srgb, var(--card2) 70%, transparent));
  border:1px solid var(--line);
}
.feature h3{margin:0 0 8px; font-size:1.05rem}
.feature p{margin:0; color:var(--muted); line-height:1.65; font-size:.95rem}
.feature .mini{
  height:84px; border-radius:14px; overflow:hidden; margin-bottom:12px;
  border:1px solid var(--line);
  background: var(--card);
}
.feature .mini img{width:100%; height:100%; object-fit:cover}
.timeline{display:grid; gap:12px}
.step{
  display:grid; grid-template-columns: 44px 1fr; gap:12px; align-items:start;
  padding:14px; border-radius:18px; border:1px solid var(--line); background:var(--card);
}
.step .num{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(79,209,255,.25), rgba(124,92,255,.22));
  border:1px solid color-mix(in srgb, var(--brand) 45%, var(--line));
  font-weight:800;
}
.step h3{margin:0 0 6px; font-size:1.05rem}
.step p{margin:0; color:var(--muted); line-height:1.65}
.banner{
  border-radius: 22px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); box-shadow: var(--shadow);
}
.banner img{width:100%; height: min(340px, 40vw); object-fit:cover}
.divider{
  margin:44px 0; border-radius:22px; overflow:hidden; border:1px solid var(--line);
  position:relative;
}
.divider img{width:100%; height: 240px; object-fit:cover}
.divider::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(7,11,20,.80), transparent 40%, rgba(7,11,20,.80));
}
[data-theme="light"] .divider::after{
  background: linear-gradient(90deg, rgba(246,248,252,.80), transparent 40%, rgba(246,248,252,.80));
}
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width: 780px){ .kpi{grid-template-columns:1fr} }
.kpi .card b{font-size:1.2rem}
.kpi .card small{color:var(--muted)}
.infographic{
  display:grid; gap:12px; grid-template-columns: 1fr 1fr;
}
@media (max-width: 980px){ .infographic{grid-template-columns:1fr} }
.bar{
  height:12px; border-radius:999px; background: color-mix(in srgb, var(--card) 70%, transparent);
  border:1px solid var(--line); overflow:hidden
}
.bar > i{display:block; height:100%; width:var(--w,50%); background: linear-gradient(90deg, rgba(79,209,255,.85), rgba(124,92,255,.85))}
.note{color:var(--muted); line-height:1.7}
.compare{
  position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); box-shadow: var(--shadow);
  height: min(420px, 56vw);
}
.compare .after, .compare .before{position:absolute; inset:0}
.compare img{width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none}
.compare .before{width:50%; overflow:hidden}
.handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:3px; background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 8px rgba(79,209,255,.14);
}
.handle::after{
  content:"↔";
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(79,209,255,.35), rgba(124,92,255,.25));
  border:1px solid var(--line);
  color:var(--text); font-weight:900;
}
.compare-labels{
  position:absolute; inset:auto 0 14px 0;
  display:flex; justify-content:space-between; padding:0 14px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem;
  color: rgba(255,255,255,.88);
  text-shadow: 0 8px 20px rgba(0,0,0,.5);
}
[data-theme="light"] .compare-labels{color: rgba(0,0,0,.75); text-shadow:none}
.usecases{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 980px){ .usecases{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 620px){ .usecases{grid-template-columns: 1fr}}
.uc{
  border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--card);
  display:flex; flex-direction:column;
}
.uc img{height:140px; object-fit:cover}
.uc .body{padding:14px}
.uc h3{margin:0 0 6px; font-size:1.05rem}
.uc p{margin:0; color:var(--muted); line-height:1.65}
.gallery{display:grid; grid-template-columns: repeat(5, 1fr); gap:10px}
@media (max-width: 1100px){ .gallery{grid-template-columns: repeat(3, 1fr)}}
@media (max-width: 650px){ .gallery{grid-template-columns: repeat(2, 1fr)}}
.gitem{
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); cursor:pointer; position:relative;
}
.gitem img{width:100%; height:140px; object-fit:cover; transition: transform .25s ease}
.gitem:hover img{transform: scale(1.04)}
.gcap{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px; font-size:.82rem; color:#fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
}
.modal{
  position:fixed; inset:0; background: rgba(0,0,0,.78);
  display:none; place-items:center; z-index:2000;
  padding:20px;
}
.modal.open{display:grid}
.modal .box{
  width:min(1100px, 100%);
  border-radius:22px; overflow:hidden; background: var(--bg2);
  border:1px solid var(--line); box-shadow: var(--shadow);
}
.modal .top{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.modal .top b{font-size:1rem}
.modal .imgwrap{background:#000}
.modal .imgwrap img{width:100%; height:auto}
.accordion{display:grid; gap:10px}
.acc-item{border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card)}
.acc-btn{
  width:100%; text-align:inherit; background:transparent; border:0; cursor:pointer;
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:14px 14px; color:var(--text); font-weight:800;
}
.acc-panel{max-height:0; overflow:hidden; transition: max-height .22s ease}
.acc-panel .inner{padding:0 14px 14px; color:var(--muted); line-height:1.7}
.form{
  display:grid; gap:12px; grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px){ .form{grid-template-columns:1fr} }
.field label{display:block; font-weight:800; margin:0 0 6px}
.field input, .field select, .field textarea{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  outline:none;
}
.field textarea{min-height:120px; resize:vertical}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.small{font-size:.92rem; color:var(--muted); line-height:1.65}
footer{padding:44px 0; border-top:1px solid var(--line)}
.footergrid{display:grid; gap:12px; grid-template-columns: 1.2fr .8fr}
@media (max-width: 880px){ .footergrid{grid-template-columns:1fr} }
.footergrid a{color:var(--muted)}
.footergrid a:hover{color:var(--text)}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-size:.9rem;
}
hr.sep{border:0; border-top:1px solid var(--line); margin:18px 0}


/* Callout block inside sections */
.callout{
  margin:18px 0 26px;
  padding:16px 16px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border-radius:18px;
}
.callout h3{margin:0 0 8px; font-size:1.05rem}
.callout p{margin:0 0 10px; color:var(--muted)}
.callout ul{margin:0; padding-inline-start: 18px; color:var(--text)}
.callout li{margin:8px 0}

/* Mobile / tablet navigation (no overlay menu)
   We keep the navbar visible and allow wrapping to avoid cramped layouts.
*/
.menu-toggle{display:none !important}
@media (max-width: 980px){
  .nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    width:100%;
  }
  .nav a{padding:8px 10px; font-size:.92rem}
}

@media (max-width: 520px){
  .nav{display:none;}
  .navselect{display:block;}
  .navbar{flex-wrap:wrap;}
  .brand span{font-size:.95rem;}
}


/* Professional service upgrades */
.table-wrap{width:100%; overflow:auto; border-radius:18px; border:1px solid var(--line); background:var(--card)}
.matrix{width:100%; border-collapse:collapse; min-width:760px; direction:inherit}
.matrix th,.matrix td{padding:13px 14px; border-bottom:1px solid var(--line); text-align:start; vertical-align:top; line-height:1.65}
.matrix th{background:color-mix(in srgb, var(--card2) 85%, transparent); color:var(--text); font-weight:900}
.matrix td{color:var(--muted)}
.chipset{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.chipset span{display:inline-flex; align-items:center; padding:8px 11px; border-radius:999px; border:1px solid var(--line); background:var(--card2); color:var(--text); font-weight:750; font-size:.92rem}
.process-map{display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin-top:18px}
.process-map>div{flex:1 1 145px; min-width:130px; border:1px solid var(--line); border-radius:16px; padding:12px; background:linear-gradient(180deg, var(--card), var(--card2)); font-weight:850; text-align:center}
.process-map small{display:block; color:var(--muted); font-weight:600; margin-top:4px; font-size:.78rem}
.process-map>i{display:grid; place-items:center; color:var(--brand); font-style:normal; font-weight:900}
.mapdemo{position:relative; min-height:330px; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:radial-gradient(circle at 28% 25%, rgba(79,209,255,.22), transparent 24%), radial-gradient(circle at 72% 67%, rgba(124,92,255,.20), transparent 25%), linear-gradient(135deg, rgba(79,209,255,.10), rgba(124,92,255,.08)); box-shadow:var(--shadow)}
.mapgrid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size:32px 32px; mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.55))}
.maplayer{position:absolute; padding:9px 11px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg2) 82%, transparent); font-weight:850; box-shadow:0 14px 30px rgba(0,0,0,.25)}
.maplayer.l1{top:36px; inset-inline-start:28px}.maplayer.l2{top:108px; inset-inline-end:34px}.maplayer.l3{bottom:82px; inset-inline-start:54px}
.maplegend{position:absolute; inset-inline-end:18px; bottom:18px; max-width:245px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg2) 88%, transparent); border-radius:16px; padding:13px; font-weight:900}.maplegend small{color:var(--muted); font-weight:650}
.clean-list{margin:10px 0 0; padding-inline-start:20px; color:var(--muted); line-height:1.75}.clean-list li{margin:6px 0}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}@media(max-width:980px){.pricing-grid{grid-template-columns:1fr}}
.price-card{border:1px solid var(--line); border-radius:22px; background:var(--card); padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.18)}
.price-card.featured{background:linear-gradient(180deg, rgba(79,209,255,.12), rgba(124,92,255,.10)); border-color:color-mix(in srgb, var(--brand) 45%, var(--line))}
.price-card h3{margin:0 0 8px}.price-card p{color:var(--muted); line-height:1.7}.price-card ul{padding-inline-start:20px; color:var(--muted); line-height:1.8}
@media(max-width:780px){.process-map>i{display:none}.grid[style*="repeat(2"]{grid-template-columns:1fr !important}.matrix{min-width:680px}}


/* Typography by language */
html[lang="fa"]{--font:"Iranian Sans", "Vazirmatn", "Noto Sans Arabic", Tahoma, Arial, sans-serif;}
html[lang="ar"]{--font:"Noto Sans Arabic", Tahoma, Arial, sans-serif;}
html[lang="en"], html[lang="tr"], html[lang="fr"], html[lang="de"]{--font:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}
html[lang="ru"]{--font:"Noto Sans", "Segoe UI", Arial, sans-serif;}
.hero-grid.hero-single{grid-template-columns:1fr; max-width:980px; margin-inline:auto; text-align:start;}
.hero-grid.hero-single h1{font-size:clamp(2.35rem, 5vw, 4.9rem); line-height:1.18; letter-spacing:-.02em; max-width:900px;}
html[dir="rtl"] .hero-grid.hero-single h1{letter-spacing:0;}
.hero-grid.hero-single .slogan{font-size:clamp(1.15rem, 2.1vw, 1.7rem); color:var(--text);}
.engineering-note{margin-top:18px; padding:16px 18px; border-radius:18px; border:1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background:linear-gradient(135deg, rgba(79,209,255,.13), rgba(124,92,255,.10)); color:var(--text); line-height:1.85; font-weight:650; box-shadow:0 16px 40px rgba(0,0,0,.18);}
html[dir="rtl"] .process-map>i{font-size:1.35rem;}
footer#footer-contact{scroll-margin-top:90px;}


/* v9.1 refinements: improved Persian desktop hero and centered footer rights */
@media (min-width: 781px){
  html[lang="fa"] .hero-grid.hero-single{max-width:1120px; text-align:center;}
  html[lang="fa"] .hero-grid.hero-single .kicker{margin-inline:auto;}
  html[lang="fa"] .hero-grid.hero-single h1.hero-title-fa{
    max-width:1080px;
    margin-inline:auto;
    font-size:clamp(2.6rem, 4.35vw, 4.35rem);
    line-height:1.36;
    letter-spacing:0;
  }
  html[lang="fa"] .hero-title-fa .hero-title-name,
  html[lang="fa"] .hero-title-fa .hero-title-tag{display:block; white-space:nowrap;}
  html[lang="fa"] .hero-grid.hero-single p{max-width:980px; margin-left:auto; margin-right:auto;}
  html[lang="fa"] .hero-grid.hero-single .engineering-note{max-width:1080px; margin-left:auto; margin-right:auto; text-align:center;}
}
@media (max-width: 780px){
  html[lang="fa"] .hero-grid.hero-single h1.hero-title-fa{font-size:clamp(2.35rem, 5vw, 4.9rem);}
}
.footer-rights{
  grid-column:1 / -1;
  width:100%;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  text-align:center;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.75;
}


/* v10 content and launch-ready refinements */
html[lang="fa"], html[lang="fa"] body{
  --font: "Iranian Sans", "Vazirmatn", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}
html[lang="ar"], html[lang="ar"] body{
  --font: "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}
html[lang="fa"] .hero{
  min-height: 680px;
  display:flex;
  align-items:center;
}
html[lang="fa"] .hero h1.hero-title-fa{
  display:grid;
  gap:.1em;
  margin-top:18px;
  margin-bottom:10px;
}
html[lang="fa"] .hero-title-fa .hero-title-name{
  display:block;
  font-size:clamp(3.7rem, 7.2vw, 7.1rem);
  line-height:.98;
  font-weight:950;
  letter-spacing:-.035em;
}
html[lang="fa"] .hero-title-fa .hero-title-tag{
  display:block;
  font-size:clamp(2.0rem, 3.55vw, 3.55rem);
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.025em;
  opacity:.98;
}
html[lang="fa"] .hero-grid.hero-single p{
  max-width:1050px;
}
.hero-scan{
  position:relative;
  height:72px;
  margin:22px auto 0;
  max-width:860px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  background:
    linear-gradient(90deg, transparent, rgba(79,209,255,.10), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px);
  opacity:.88;
}
.hero-scan::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:32%;
  inset-inline-start:-36%;
  background:linear-gradient(90deg, transparent, rgba(79,209,255,.50), rgba(99,242,176,.25), transparent);
  animation: scanMove 6.5s linear infinite;
}
.hero-scan span{
  position:absolute; inset:18px 36px;
  border-top:1px solid rgba(79,209,255,.35);
  border-bottom:1px solid rgba(124,92,255,.30);
  border-radius:999px;
}
@keyframes scanMove{
  0%{inset-inline-start:-36%}
  100%{inset-inline-start:104%}
}
.service-context{
  margin-top:18px;
  margin-bottom:28px;
}
.compact-title{
  margin-top:36px;
}
.emphasis-card{
  background:linear-gradient(135deg, rgba(79,209,255,.11), rgba(124,92,255,.10));
}
.flow-steps{
  display:grid;
  gap:9px;
  margin-top:12px;
}
.flow-steps span{
  display:block;
  padding:10px 12px;
  border-radius:14px;
  background:var(--card2);
  border:1px solid var(--line);
  font-weight:800;
  color:var(--text);
}
.scan-wave{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.scan-wave::before{
  content:"";
  position:absolute;
  top:-20%;
  bottom:-20%;
  width:18%;
  inset-inline-start:-22%;
  background:linear-gradient(90deg, transparent, rgba(79,209,255,.42), transparent);
  transform:skewX(-10deg);
  animation: scanMove 5.8s linear infinite;
}
.mapdemo::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border:1px solid rgba(79,209,255,.55);
  border-radius:50%;
  inset-inline-end:38px;
  top:46px;
  box-shadow:0 0 0 10px rgba(79,209,255,.08), 0 0 80px rgba(79,209,255,.18);
  animation:pulseRing 3.8s ease-in-out infinite;
}
@keyframes pulseRing{
  0%,100%{transform:scale(.94); opacity:.65}
  50%{transform:scale(1.05); opacity:1}
}
.smart-services .feature{
  min-height:150px;
}
.footergrid{
  grid-template-columns: .9fr 1.35fr .85fr;
  align-items:start;
  gap:22px;
}
.footer-about{
  max-width:520px;
}
.footer-contact-box{
  text-align:start;
}
html[dir="rtl"] .footer-contact-box{
  text-align:right;
}
@media (max-width: 880px){
  .footergrid{grid-template-columns:1fr}
  .footer-about{max-width:none}
}
@media (max-width: 780px){
  html[lang="fa"] .hero{
    min-height:auto;
  }
  html[lang="fa"] .hero-title-fa .hero-title-name{
    font-size:clamp(2.75rem, 12vw, 4.3rem);
  }
  html[lang="fa"] .hero-title-fa .hero-title-tag{
    font-size:clamp(1.65rem, 7.2vw, 2.55rem);
  }
  .hero-scan{height:54px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-scan::before,.scan-wave::before,.mapdemo::after{animation:none}
}

/* v10.1 footer column order */
.footer-quicklinks{line-height:1.75;}

.portal-link{white-space:nowrap;padding:9px 12px;font-size:.88rem}
@media(max-width:760px){.portal-link{display:none}}