/* ================================================================
   Sina Holding — shared design system.
   Lifted verbatim from the client-approved v1 home page so every new
   page is the same design, not a lookalike. When this becomes a
   WordPress theme this file is style.css.
   ================================================================ */

/* ---------------------------------------------------------------
   Palette taken from their own logo: the node-mark runs
   green -> purple -> deep navy. Their current site uses unrelated
   flat blue/purple/green, which is most of why it reads incoherent.
----------------------------------------------------------------*/
:root{
  --navy:#14225f;
  --navy-900:#0b1236;
  --navy-800:#101a4c;
  --navy-700:#1d3080;
  --green:#17a35c;
  --purple:#6d3f9e;
  --ink:#131a2e;
  --body:#5a6379;
  --line:#e6e9f2;
  --bg:#ffffff;
  --bg-soft:#f5f7fc;
  --grad:linear-gradient(115deg,var(--green) 0%,var(--purple) 52%,var(--navy-700) 100%);
  /* The brand green is only 3.2:1 against white, so white-on-brand chips and
     buttons failed AA. Buttons use a darkened green start (5.2:1) and keep the
     same hue family; large decorative fills still use --grad. */
  --green-ink:#0e7c45;
  --grad-ui:linear-gradient(115deg,var(--green-ink) 0%,var(--purple) 52%,var(--navy-700) 100%);
  --radius:18px;
  --shadow:0 18px 50px -22px rgba(19,29,80,.28);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Vazirmatn,"Segoe UI",Tahoma,sans-serif;
  background:var(--bg); color:var(--body);
  line-height:1.95; font-size:16.5px; overflow-x:hidden;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.55;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:2}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.82rem;font-weight:700;color:var(--purple);margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}
.on-dark .eyebrow{color:#b78af0}
.sec-head{max-width:660px;margin-bottom:46px}
.sec-head h2{font-size:clamp(1.6rem,3.1vw,2.25rem);margin-bottom:14px;letter-spacing:-.01em}
.sec-head p{font-size:1.02rem}
section{padding:104px 0;position:relative}

/* ============ decorative background system ============
   Three reusable layers so sections stop looking flat:
   .bg-mesh  soft colour orbs
   .bg-grid  fine engineering grid
   .bg-hex   repeating node/hex motif lifted from the logo
   .grain    very light film grain over dark areas
--------------------------------------------------------*/
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-mesh::before,.bg-mesh::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
}
.bg-mesh::before{width:520px;height:520px;background:rgba(23,163,92,.30);top:-160px;inset-inline-end:-120px}
.bg-mesh::after{width:560px;height:560px;background:rgba(109,63,158,.34);bottom:-220px;inset-inline-start:-140px}
.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(circle at 50% 40%,#000 12%,transparent 72%);
}
.bg-grid.dark-on-light{
  background-image:
    linear-gradient(rgba(20,34,95,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,34,95,.055) 1px,transparent 1px);
}
.bg-hex{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'>\
<g fill='none' stroke='%236d3f9e' stroke-opacity='.14' stroke-width='1.2'>\
<path d='M30 2 L60 19 L60 53 L30 70 L0 53 L0 19 Z'/>\
<path d='M90 2 L120 19 L120 53 L90 70 L60 53 L60 19 Z'/>\
<path d='M60 53 L90 70 L90 104 L60 121 L30 104 L30 70 Z'/></g>\
<g fill='%2317a35c' fill-opacity='.22'><circle cx='60' cy='19' r='2.6'/>\
<circle cx='0' cy='53' r='2.6'/><circle cx='120' cy='53' r='2.6'/>\
<circle cx='60' cy='87' r='2.6'/></g></svg>");
  opacity:.9;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.grain{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.05;mix-blend-mode:overlay;
}
.soft{background:var(--bg-soft)}
.dark{background:var(--navy-900);color:#c3cbe4}
.dark h2,.dark h3,.dark h4{color:#fff}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:30px;height:68px}
.logo img{height:46px;width:auto}
nav.menu{display:flex;gap:22px;margin-inline-start:auto;font-size:.93rem;font-weight:600;color:var(--ink)}
nav.menu a{position:relative;padding:6px 0;transition:color .2s}
nav.menu a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;
  background:var(--grad);transition:width .28s ease;border-radius:2px;
}
nav.menu a:hover{color:var(--navy)}
nav.menu a:hover::after{width:100%}
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:13px 26px;font-weight:700;font-size:.94rem;
  transition:transform .22s ease,box-shadow .22s ease;white-space:nowrap;
}
.btn-primary{background:var(--grad-ui);color:#fff;box-shadow:0 12px 26px -12px rgba(109,63,158,.75)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(109,63,158,.85)}
.btn-ghost{border:1.6px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-outline{border:1.6px solid var(--line);color:var(--navy)}
.btn-outline:hover{background:var(--bg-soft)}
.btn-line{border:1.6px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--purple);color:var(--purple)}

/* ---------- image slider ---------- */
.slider{position:relative;background:var(--navy-900);overflow:hidden}
.slide{display:none;position:relative;min-height:min(74vh,620px)}
.slide.is-active{display:block;animation:fade .8s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.slide-bg{position:absolute;inset:0}
.slide-bg img{width:100%;height:100%;object-fit:cover;animation:kb 14s ease-out both}
@keyframes kb{from{transform:scale(1.09)}to{transform:scale(1)}}
.slide-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to left,rgba(11,18,54,.96) 8%,rgba(11,18,54,.80) 42%,rgba(11,18,54,.35) 78%),
    linear-gradient(to top,rgba(11,18,54,.85),transparent 55%);
}
.slide-inner{
  position:relative;z-index:3;min-height:min(74vh,620px);
  display:flex;align-items:center;padding:96px 0 118px;
}
.slide-copy{max-width:600px;color:#fff}
.s-badge{
  display:inline-flex;align-items:center;gap:9px;font-size:.84rem;font-weight:700;
  color:#9fe8c4;background:rgba(23,163,92,.16);border:1px solid rgba(23,163,92,.36);
  border-radius:999px;padding:8px 18px;margin-bottom:20px;backdrop-filter:blur(6px);
}
.slide-copy h2{
  color:#fff;font-size:clamp(1.7rem,3.5vw,2.65rem);line-height:1.5;
  letter-spacing:-.015em;margin-bottom:16px;
}
.slide-copy h2 .accent{
  background:linear-gradient(100deg,#37d98a,#b78af0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.slide-copy p{color:#cdd4e8;font-size:1.02rem;margin-bottom:28px}
.s-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;transition:background .22s ease;backdrop-filter:blur(6px);
}
.s-arrow:hover{background:rgba(255,255,255,.24)}
.s-arrow.prev{inset-inline-start:26px}   /* RTL: previous sits on the right */
.s-arrow.next{inset-inline-end:26px}
.s-dots{position:absolute;bottom:110px;inset-inline-start:0;width:100%;z-index:6;display:flex;justify-content:center;gap:9px}
.s-dots button{
  width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.32);transition:width .28s ease,background .28s ease;
}
.s-dots button.on{width:30px;border-radius:999px;background:linear-gradient(90deg,#37d98a,#b78af0)}

/* ---------- stats ---------- */
.stats{
  position:relative;z-index:5;margin-top:-58px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.stat{padding:24px 26px;text-align:center;border-inline-start:1px solid var(--line)}
.stat:first-child{border:0}
.stat b{display:block;font-size:2.05rem;color:var(--navy);font-weight:800;line-height:1.3}
.stat b i{font-style:normal;font-size:1rem;color:var(--purple);vertical-align:super}
.stat span{font-size:.9rem}
.ph-note{font-size:.8rem;color:#98a1b5;text-align:center;margin-top:12px}

/* ---------- brand intro ---------- */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.intro-grid h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:18px}
.motif{position:relative;aspect-ratio:1/.92}
.motif svg{width:100%;height:100%;overflow:visible}
.motif .ring{position:absolute;inset:14% 14%;border-radius:50%;border:1px dashed rgba(20,34,95,.16)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.motif svg .n{animation:float 6s ease-in-out infinite}
.motif svg .n:nth-child(2){animation-delay:-1.4s}
.motif svg .n:nth-child(3){animation-delay:-2.8s}
.motif svg .n:nth-child(4){animation-delay:-4.2s}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pillar{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 32px;position:relative;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.pillar::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:4px;
  background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s ease;
}
.pillar:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.pillar:hover::before{transform:scaleX(1)}
.pillar .ico{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(23,163,92,.13),rgba(109,63,158,.13));margin-bottom:20px;
}
.pillar h3{font-size:1.22rem;margin-bottom:16px}
.pillar ul{list-style:none;display:grid;gap:12px}
.pillar li{position:relative;padding-inline-start:22px;font-size:.94rem;line-height:1.85}
.pillar li::before{
  content:"";position:absolute;inset-inline-start:0;top:13px;width:8px;height:8px;
  border-radius:50%;background:var(--grad);
}

/* ---------- product ---------- */
.product{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.panel{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.panel-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.panel-bar span{width:10px;height:10px;border-radius:50%;background:#d3d9e6}
.panel-bar span:first-child{background:#17a35c}
.panel-bar em{font-style:normal;font-size:.82rem;color:var(--body);margin-inline-start:auto;font-weight:600}
.panel-body{padding:26px 24px 30px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.kpi{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center}
.kpi b{display:block;font-size:1.3rem;color:var(--navy);font-weight:800}
.kpi span{font-size:.78rem}
.spark{width:100%;height:118px;display:block}
.bars{display:flex;align-items:flex-end;gap:9px;height:76px;margin-top:20px}
.bars i{flex:1;border-radius:6px 6px 0 0;background:var(--grad);opacity:.82}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 30px}
.chip{font-size:.86rem;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px}

/* ---------- calls ---------- */
.calls{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.call{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:28px 30px;display:flex;gap:20px;align-items:flex-start;
  transition:border-color .28s ease,transform .28s ease,background .28s ease;backdrop-filter:blur(6px);
}
.call:hover{border-color:rgba(157,116,224,.6);transform:translateX(-5px);background:rgba(255,255,255,.07)}
.call .badge{flex:none;font-size:.78rem;font-weight:700;color:#fff;background:var(--grad-ui);border-radius:999px;padding:6px 14px;margin-top:4px}
.call h3{font-size:1.02rem;margin-bottom:8px;line-height:1.75;color:#fff}
.call a{font-size:.88rem;font-weight:700;color:#b78af0}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.person:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.person .ph{height:230px;background:var(--bg-soft);overflow:hidden}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.person .body{padding:24px 20px}
.person h3{font-size:1.06rem;margin-bottom:5px}
.person span{font-size:.9rem;color:var(--purple);font-weight:600}

/* ---------- news ---------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post .thumb{height:180px;overflow:hidden}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post:hover .thumb img{transform:scale(1.06)}
.post .pbody{padding:26px 26px 30px}
.post .date{display:inline-block;font-size:.8rem;font-weight:700;color:var(--green);background:rgba(23,163,92,.1);border-radius:8px;padding:5px 12px;margin-bottom:14px}
.post h3{font-size:1.02rem;line-height:1.8;margin-bottom:12px}
.post a{font-size:.88rem;font-weight:700;color:var(--purple)}

/* ---------- cta ---------- */
.cta{
  background:var(--navy-800);border-radius:26px;padding:64px 54px;color:#fff;
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
}
.cta>*{position:relative;z-index:3}
.cta h2{color:#fff;font-size:clamp(1.5rem,2.7vw,2rem);margin-bottom:12px}
.cta p{color:#c3cbe4}
.cta-contact{text-align:left}
.phone{display:flex;align-items:center;justify-content:flex-start;gap:12px;color:#fff;font-weight:700;font-size:1.15rem;direction:ltr}

/* ---------- footer ---------- */
footer{background:#080f2b;color:#9aa4c4;padding:70px 0 30px;font-size:.93rem;position:relative;overflow:hidden}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px}
footer .fh{color:#fff;font-size:1rem;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:11px}
footer a:hover{color:#fff}
.f-logo{background:#fff;border-radius:12px;padding:12px 16px;display:inline-block;margin-bottom:18px}
.f-logo img{height:42px}
.f-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.86rem}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:background .25s ease}
.socials a:hover{background:var(--purple)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:980px){
  .intro-grid,.product,.cta,.pillars,.people,.news,.calls{grid-template-columns:1fr}
  .motif{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3){border:0}
  nav.menu{display:none}
  .s-arrow{display:none}
  .s-dots{bottom:96px}
  .slide-inner{padding:76px 0 104px}
  section{padding:74px 0}
  .cta{padding:44px 28px}
  /* one column now, so there is no left edge to hold — the contact block joins
     the rest of the card on the right like every other line */
  .cta-contact{text-align:right}
  .phone{justify-content:flex-end}
}

/* ================================================================
   ADDITIONS FOR INNER PAGES (2026-08-08)
   Everything above is the approved v1 system, untouched.
   Below: components the home page did not need.
   ================================================================ */

/* ---------- inner-page hero ---------- */
.phero{
  position:relative;background:var(--navy-900);color:#c3cbe4;
  padding:112px 0 82px;overflow:hidden;
}
.phero h1{
  color:#fff;font-size:clamp(1.75rem,3.6vw,2.6rem);
  line-height:1.5;letter-spacing:-.015em;margin-bottom:16px;max-width:22ch;
}
.phero p{color:#cdd4e8;font-size:1.03rem;max-width:62ch}
.phero .accent{
  background:linear-gradient(100deg,#37d98a,#b78af0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.85rem;margin-bottom:20px;color:#8e99bb}
.crumb a{color:#b78af0;font-weight:600}
.crumb a:hover{color:#d7bdfa}
.crumb span[aria-hidden]{opacity:.5}

/* ---------- product page ---------- */
.p-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.p-head.solo{grid-template-columns:minmax(0,900px);gap:0;justify-content:start}
.p-brand{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.p-brand .p-logo{width:76px;height:76px;flex:none}
.p-brand h2{font-size:1.6rem;margin-bottom:2px}
.p-brand span{font-size:.92rem;color:var(--purple);font-weight:600}
.p-tagline{
  font-size:1.22rem;font-weight:700;color:var(--ink);line-height:1.85;
  padding-inline-start:18px;border-inline-start:4px solid transparent;
  border-image:var(--grad) 1;margin-bottom:22px;
}
.p-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px}
.fact h4{font-size:.86rem;color:var(--purple);margin-bottom:9px;font-weight:700}
.fact p,.fact li{font-size:.93rem;line-height:1.9}
.fact ul{list-style:none;display:grid;gap:9px}
.fact li{position:relative;padding-inline-start:18px}
.fact li::before{
  content:"";position:absolute;inset-inline-start:0;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--grad);
}

/* feature / advantage cards */
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden;
}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.fcard .num{
  font-size:.78rem;font-weight:800;color:#fff;background:var(--grad-ui);
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:16px;
}
.fcard h3{font-size:1.02rem;margin-bottom:10px;line-height:1.75}
.fcard p{font-size:.92rem;line-height:1.9}
.on-dark .fcard{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.on-dark .fcard h3{color:#fff}
.on-dark .fcard p{color:#c3cbe4}

/* industry / audience tag cloud */
.taglist{display:flex;flex-wrap:wrap;gap:10px}
.taglist span{
  font-size:.88rem;font-weight:600;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;
}
.on-dark .taglist span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#e3e8f7}

/* ---------- numbered process (investment funnel) ---------- */
.steps{counter-reset:s;display:grid;gap:0;position:relative}
.step{
  position:relative;padding:22px 0 22px 0;padding-inline-start:66px;
  border-bottom:1px dashed var(--line);
}
.step:last-child{border-bottom:0}
.step::before{
  counter-increment:s;content:counter(s,persian);
  position:absolute;inset-inline-start:0;top:18px;
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-weight:800;font-size:.95rem;color:#fff;background:var(--grad-ui);
}
.step h3{font-size:1.03rem;line-height:1.8}
.step p{font-size:.92rem;margin-top:5px}

/* ---------- company / portfolio grid ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ccard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;display:flex;flex-direction:column;gap:14px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden;
}
.ccard::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:4px;
  background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s ease;
}
.ccard:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.ccard:hover::before{transform:scaleX(1)}
.ccard .clogo{
  width:100%;height:88px;border-radius:12px;background:var(--bg-soft);
  border:1px dashed var(--line);display:grid;place-items:center;
  font-size:.78rem;color:#98a1b5;text-align:center;padding:8px;
}
.ccard .clogo img{max-height:64px;width:auto;object-fit:contain}
.ccard .clogo img.tall{max-height:80px}
.ccard .clogo img[src*="rade"]{max-height:78px}
.ccard .clogo img[src*="didaniset"]{max-height:45px}
.ccard h3{font-size:1.08rem}
.ccard .field{
  align-self:flex-start;font-size:.78rem;font-weight:700;color:var(--green);
  background:rgba(23,163,92,.1);border-radius:8px;padding:5px 12px;
}
.ccard p{font-size:.92rem;line-height:1.9;flex:1}
.ccard .more{font-size:.88rem;font-weight:700;color:var(--purple);display:inline-flex;align-items:center;gap:7px}
.ccard:hover .more{gap:11px}
.ccard .more svg{transition:transform .25s ease}

/* one-scroll company page: the outbound link belongs at the BOTTOM */
.outlink{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  background:var(--navy-800);color:#fff;border-radius:26px;padding:44px 46px;
  position:relative;overflow:hidden;
}
section.dark + section > .wrap > .outlink,
section.dark + section .outlink{
  background:
    radial-gradient(120% 150% at 88% 0%, rgba(109,63,158,.55) 0%, rgba(109,63,158,0) 58%),
    linear-gradient(115deg, #16205c 0%, #1d3080 62%, #2a1f6b 100%);
  box-shadow:var(--shadow);
}
.outlink>*{position:relative;z-index:3}
.outlink h2{color:#fff;font-size:1.4rem;margin-bottom:8px}
.outlink p{color:#c3cbe4;font-size:.95rem}

/* ---------- long-form prose block ---------- */
.prose{max-width:74ch}
.prose a{overflow-wrap:anywhere}
.prose p{margin-bottom:20px;font-size:1.01rem;line-height:2.05}
.prose h3{font-size:1.2rem;margin:34px 0 14px}
.prose ul{list-style:none;display:grid;gap:13px;margin-bottom:22px}
.prose li{position:relative;padding-inline-start:22px;font-size:.98rem;line-height:1.95}
.prose li::before{
  content:"";position:absolute;inset-inline-start:0;top:14px;width:8px;height:8px;
  border-radius:50%;background:var(--grad);
}
.prose strong{color:var(--ink)}

/* two-column split used on division pages */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}

@media(max-width:980px){
  .p-head,.split,.outlink{grid-template-columns:1fr}
  .fcards,.cgrid{grid-template-columns:1fr}
  .p-facts{grid-template-columns:1fr}
  .phero{padding:84px 0 62px}
  .outlink{padding:34px 26px}
  .step{padding-inline-start:56px}
}
@media(min-width:981px) and (max-width:1180px){
  .fcards,.cgrid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- mobile drawer (new — v1 had no mobile navigation at all) ---------- */
.burger{
  display:none;margin-inline-start:auto;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;border-radius:12px;
}
.burger span{display:block;height:2px;border-radius:2px;background:var(--ink);margin:5px 0;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:200;background:rgba(8,15,43,.55);backdrop-filter:blur(3px)}
.drawer[hidden]{display:none}
.drawer-panel{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(84vw,340px);
  background:#fff;padding:78px 30px 34px;box-shadow:-24px 0 60px -30px rgba(11,18,54,.5);
  animation:slidein .3s ease both;display:flex;flex-direction:column;
}
@keyframes slidein{from{transform:translateX(-100%)}to{transform:none}}
.drawer-panel nav{display:grid;gap:2px}
.drawer-panel nav a{
  padding:15px 12px;border-radius:12px;font-weight:600;color:var(--ink);font-size:1rem;
  border-bottom:1px solid var(--line);
}
.drawer-panel nav a:hover{background:var(--bg-soft);color:var(--purple)}
.drawer-close{
  position:absolute;top:18px;inset-inline-end:22px;background:none;border:0;
  font-size:2rem;line-height:1;color:var(--ink);cursor:pointer;
}
@media(max-width:980px){
  .burger{display:block}
  .hide-sm{display:none}
}
@media(min-width:981px){
  .drawer{display:none!important}
}

/* active page marker in the desktop nav */
nav.menu a.is-here{color:var(--navy)}
nav.menu a.is-here::after{width:100%}

/* ---------- footer responsiveness ----------
   v1 never collapsed the footer grid, so on a phone it stayed four narrow
   columns and the link text wrapped mid-word. Caught in the 390px shot. */
@media(max-width:980px){
  .f-grid{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media(max-width:560px){
  .f-grid{grid-template-columns:1fr;gap:28px}
  .f-bottom{flex-direction:column;gap:10px}
}

/* ---------- news card extras (archive page) ---------- */
.post .more{font-size:.88rem;font-weight:700;color:var(--purple);display:inline-flex;align-items:center;gap:7px}
.post:hover .more{gap:11px}
.thumb-motif{
  background:var(--grad);display:grid;place-items:center;overflow:hidden;
}
.thumb-motif svg{width:100%;height:100%;display:block}
.call{color:inherit}
.call h3{margin-bottom:6px}

/* CTA that lives inside an already-dark section: no second navy fill, just a
   hairline panel, so the seam between list and CTA disappears. */
.outlink.ghost{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  margin-top:46px;
}

/* ================================================================
   ACCESSIBILITY PASS (2026-08-09)
   Measured with scripts/sina_ux_audit.py, not eyeballed. Every value
   below fixes a specific WCAG AA failure or target-size miss.
   ================================================================ */

/* --- contrast: greys that fell under 4.5:1 on their own backgrounds --- */
.ccard .clogo{color:#67718a}                 /* was #98a1b5 → 2.42:1 */
.ph-note{color:#67718a}
.ccard .field{color:var(--green-ink)}        /* was #17a35c → 3.27:1 */
.post .date{color:var(--green-ink)}
.stat span,.kpi span{color:#525c70}

/* --- target size: nav and social links were 41px and 38px tall --- */
nav.menu a{padding:12px 0}
.socials a{width:44px;height:44px}
.crumb a{padding:4px 0;display:inline-block}

/* --- respect reduced motion: the reveal transition and the slider
       kenburns both animate on load, which is exactly what this setting
       is for. --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
}

/* --- headings: .fact now uses h3 so the outline never skips a level --- */
.fact h3{font-size:.86rem;color:var(--purple);margin-bottom:9px;font-weight:700}

/* --- Latin runs inside Persian sentences are wrapped in <bdi> at build
       time; give them the same weight as their surroundings. --- */
bdi{font-weight:inherit}
/* archive card titles are h2 for a correct outline; keep the card's visual size */
.post h2{font-size:1.02rem;line-height:1.8;margin-bottom:12px;color:var(--ink)}
.call h2{font-size:1.02rem;margin-bottom:8px;line-height:1.75;color:#fff}
/* footer links measured 23px tall, one pixel under the WCAG 2.2 minimum */
footer ul li a{display:inline-block;padding:5px 0}
/* card titles are h2 so the outline never jumps h1 -> h3 */
.ccard h2{font-size:1.08rem;color:var(--ink);line-height:1.6}
/* a CTA line was running 111 characters; comfortable measure is 60-80 */
.outlink p{max-width:60ch}
.fact li a{display:inline-block;padding:4px 0}

/* ================================================================
   DNA PASS (2026-08-09)
   The client approved the home page because it reads modern but still
   dignified for a semi-governmental holding, and never flat. They had
   explicitly rejected plain white. On mobile the inner pages were
   drifting back towards plain white, so the same three signals from v1
   are carried through every section: a tinted ground, the node motif,
   and the gradient bar that opens on a card.
   ================================================================ */

/* 1. no content section is flat white any more: the engineering grid now
      carries a soft brand tint, the same green->purple pair as the logo */
.bg-grid.dark-on-light::before{
  content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  background:rgba(23,163,92,.07);filter:blur(110px);
  top:-220px;inset-inline-end:-180px;
}
.bg-grid.dark-on-light::after{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  background:rgba(109,63,158,.08);filter:blur(110px);
  bottom:-240px;inset-inline-start:-160px;
}

/* 2. every card in the family gets v1's gradient bar that opens on hover,
      not just .pillar and .ccard */
.fcard::before{
  content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:4px;
  background:var(--grad);transform:scaleX(0);transform-origin:right;
  transition:transform .35s ease;
}
.fcard:hover::before{transform:scaleX(1)}
.on-dark .fcard::before{background:linear-gradient(90deg,#37d98a,#b78af0)}

/* 3. the logo's node geometry as a quiet watermark in inner-page heroes,
      so a hero is never just a flat navy band */
.phero .deco.bg-hex{opacity:.55}

/* At tablet width the card grids drop to one column and card copy stretched to
   ~90 characters a line. Comfortable measure is 60-75. */
@media(min-width:601px) and (max-width:980px){
  .ccard p,.fcard p,.fact p,.post p,.step p{max-width:70ch}
}
/* demo slide copy: looks like the real slide headline, but is not a heading */
.slide-copy .demo-title{
  color:#fff;font-size:clamp(1.7rem,3.5vw,2.65rem);line-height:1.5;
  letter-spacing:-.015em;margin-bottom:16px;font-weight:700;
}

/* ---------- empty state ----------
   A section with nothing in it yet should invite, not apologise. */
.empty{
  text-align:center;max-width:560px;margin:0 auto;padding:70px 24px;
  display:grid;justify-items:center;gap:16px;
}
.empty-mark{opacity:.85}
.empty h2{font-size:1.35rem}
.empty p{font-size:1rem;line-height:2}
.empty .btn{margin-top:8px}
/* inline "read more" links measured 22px tall on the home page, under the
   24px minimum; a little vertical padding is enough and shifts nothing else */
.call a,.post a{display:inline-block;padding:4px 0}

/* ================================================================
   INNER PAGES, ROUND 2 (2026-08-09)
   Bijan: the inner pages read flatter than the approved home page and
   some are monotonous. The home page's two strongest devices are the
   animated node figure and the light/dark section rhythm, so both are
   carried inward rather than inventing a new language.
   ================================================================ */

/* hero becomes two columns: copy on the reading side, the logo's node
   figure opposite it, so no inner page opens on an empty navy band */
.phero .wrap.phero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
}
.phero .hero-motif{position:relative;aspect-ratio:1/.86}
.phero .hero-motif svg{width:100%;height:100%;overflow:visible;opacity:.9}
.phero .hero-motif .ring{
  position:absolute;inset:12% 12%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.14);
}
.phero .hero-motif .n{animation:float 6s ease-in-out infinite}
.phero .hero-motif .n:nth-child(2){animation-delay:-1.4s}
.phero .hero-motif .n:nth-child(3){animation-delay:-2.8s}
.phero .hero-motif .n:nth-child(4){animation-delay:-4.2s}
@media(max-width:980px){
  .phero .wrap.phero-grid{grid-template-columns:1fr;gap:0}
  .phero .hero-motif{display:none}
}
/* a pillar can now carry a link to its own page */
.pillar .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  font-size:.88rem;font-weight:700;color:var(--purple);
}
.pillar:hover .more{gap:11px}

/* Each page gets its own hero drawing instead of one repeated motif: the
   product pages show what the product does, the companies page shows the
   holding and its satellites, the investment page shows the funnel, and the
   news page uses their own event photographs. Same stroke language throughout
   so it still reads as one site. */
.phero .hero-fig{position:relative;aspect-ratio:1/.86}
.phero .hero-fig svg{width:100%;height:100%;overflow:visible;opacity:.92}
.phero .hero-fig .n{animation:float 6s ease-in-out infinite}
.phero .hero-fig .n:nth-of-type(2){animation-delay:-1.5s}
.phero .hero-fig .n:nth-of-type(3){animation-delay:-3s}
.phero .hero-fig .n:nth-of-type(4){animation-delay:-4.5s}

/* news: three of their own photographs, stacked like prints on a desk */
.hero-photos{position:relative;height:100%;min-height:280px}
.hero-photos img{
  position:absolute;width:62%;border-radius:16px;object-fit:cover;aspect-ratio:16/10;
  border:3px solid rgba(255,255,255,.10);box-shadow:0 26px 60px -26px rgba(0,0,0,.75);
}
.hero-photos img:nth-child(1){inset-inline-start:0;top:4%;transform:rotate(-5deg)}
.hero-photos img:nth-child(2){inset-inline-end:2%;top:24%;transform:rotate(4deg)}
.hero-photos img:nth-child(3){inset-inline-start:14%;bottom:2%;transform:rotate(-1.5deg)}
/* Bijan opened the links on a phone and the figures were gone — hiding them
   removed the one thing that makes each page look different, on the screen
   most people actually use. They stay, but small and below the copy so the
   title still lands above the fold. */
@media(max-width:980px){
  .phero .hero-fig{
    display:block;aspect-ratio:auto;height:172px;margin:30px auto 0;
    /* an explicit width, not max-width + auto margins: as a grid item with
       absolutely-positioned children its max-content width is zero, which
       collapsed the news photo stack to nothing. */
    width:min(300px,86%);opacity:.85;
  }
  .phero .hero-photos{min-height:0;height:172px}
  .phero .hero-photos img{width:52%}
}
@media(max-width:420px){
  .phero .hero-fig,.phero .hero-photos{height:140px}
}

/* ---------- product screenshots (Maris) ---------- */
/* two supplied screenshots side by side, each captioned so the visitor knows
   what they are looking at; stacks on a phone like every other grid here */
.mshots{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.mshots figure{margin:0}
.mshots figcaption{
  margin-top:12px;font-size:.88rem;color:#67718a;line-height:1.9;text-align:center;
}
@media(max-width:980px){ .mshots{grid-template-columns:1fr} }

/* A supplied product image on a white background (the Maris key visual) has no
   edge of its own, so on a white page it dissolves into the layout. A hairline
   border and the page's own shadow give it the same weight as a card. */
.p-head img, .mshots img{
  border:1px solid var(--line);
  box-shadow:0 14px 34px -22px rgba(19,29,80,.30);
}
.p-brand .p-logo img{border:0;box-shadow:none}

/* ---------- forms (investment request) ----------
   The site had no form styling until 2026-08-15 because no page had a form.
   Written against the same tokens as everything else so the form reads as part
   of the design rather than a browser default dropped into it. In WordPress
   these class names survive whether the form ends up hand-rolled or inside a
   plugin like CF7 — only the wrapper changes. */
.formcard{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(24px,4vw,46px);
}
.fset{border:0;margin:0 0 38px}
.fset:last-of-type{margin-bottom:0}
.fset legend{
  font-weight:700;color:var(--ink);font-size:1.06rem;
  padding:0 0 6px;margin-bottom:22px;width:100%;border-bottom:1px solid var(--line);
}
.frow{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.frow.one{grid-template-columns:1fr}
.field-w{display:flex;flex-direction:column;gap:9px}
.field-w > label{font-weight:700;color:var(--ink);font-size:.93rem;line-height:1.7}
.req{color:var(--purple)}
.hint{font-size:.83rem;color:#67718a;line-height:1.8}
.field-w input[type=text],
.field-w input[type=tel],
.field-w input[type=email],
.field-w input[type=url],
.field-w input[type=number],
.field-w input[type=file],
.field-w select,
.field-w textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);line-height:1.9;
  background:var(--bg-soft);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 15px;width:100%;transition:border-color .2s ease,background .2s ease;
}
.field-w textarea{min-height:150px;resize:vertical}
.field-w input:focus,.field-w select:focus,.field-w textarea:focus{
  outline:0;border-color:var(--purple);background:var(--bg);
}
.field-w input::placeholder,.field-w textarea::placeholder{color:#9aa3b6}
/* Radios read as a row of chips so the five funding stages stay scannable and
   the tap target is the whole chip, not a 13px circle. */
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:999px;padding:9px 17px;
  font-size:.9rem;color:var(--body);transition:border-color .2s ease,color .2s ease;
}
.choices input{accent-color:var(--purple);width:16px;height:16px;flex:none}
.choices label:hover{border-color:var(--purple)}
.choices input:checked + span{color:var(--ink);font-weight:700}
.choices label:has(input:checked){border-color:var(--purple);background:rgba(109,63,158,.055)}
.field-w input[type=file]{padding:10px 14px;background:var(--bg);cursor:pointer}
.field-w input[type=file]::file-selector-button{
  font-family:inherit;font-size:.87rem;font-weight:700;color:var(--purple);
  background:rgba(109,63,158,.08);border:0;border-radius:8px;
  padding:8px 15px;margin-inline-end:14px;cursor:pointer;
}
.fsubmit{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line);
}
.fsubmit .btn{border:0;cursor:pointer;font-family:inherit}
.fnote{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  padding:16px 19px;font-size:.89rem;line-height:1.95;
}
.fnote svg{flex:none;margin-top:5px}
@media(max-width:760px){ .frow{grid-template-columns:1fr} }
/* .fnote sets display:flex, which outranks the browser's [hidden]{display:none}
   — the empty status box showed as a grey bar under the submit row until the
   form was actually submitted. */
[hidden]{display:none !important}

/* ---------- banner slides ----------
   The client supplies finished 16:9 banners with their own headline, logo and
   menu already drawn into the artwork. Those slides must not get the usual
   dark scrim or the .slide-copy overlay — both would sit on top of type that is
   already there. So the banner IS the slide: shown whole, never cropped. */
.slide.banner{min-height:0}
.slide.banner .slide-bg{
  position:static;
  --bw: min(2000px, calc((100svh - 212px) * 16 / 9));
  --gutter: max(0px, calc((100% - var(--bw)) / 2 + 1px));
  background-repeat:no-repeat,no-repeat;
  background-position:left center,right center;
  background-size: var(--gutter) 100%, var(--gutter) 100%;
}
.slide.banner .slide-bg{position:static}
.slide.banner .slide-bg::after{content:none}
.slide.banner .slide-bg picture{display:block}
.slide.banner{padding-block:0}
.slider:has(.slide.banner) .s-dots{
  position:absolute;left:50%;right:auto;transform:translateX(-50%);
  bottom:14px;width:auto;margin:0;padding:0 8px;
  background:rgba(8,18,46,.45);backdrop-filter:blur(6px);border-radius:999px;
}
.slider:has(.slide.banner) .s-dots button{padding:11px 9px}
.slider:has(.slide.banner) .s-dots button{background-color:rgba(255,255,255,.62)}
.slider:has(.slide.banner) .s-dots button.on{background-color:transparent}
.slide.banner .slide-bg img{
  display:block;margin-inline:auto;
  width:100%;
  max-width:var(--bw);
  height:auto;max-height:none;
  object-fit:contain;border-radius:0;animation:none;
}
@media (max-width:720px){
  .slide.banner{padding-block:0}
  .slide.banner .slide-bg img{aspect-ratio:auto;height:auto;max-height:none;
    width:100%;border-radius:0;object-fit:contain}
  .slider:has(.slide.banner) .s-dots{position:static;margin:10px auto 0;padding:0 8px 4px;
    transform:none;width:auto;background:none;backdrop-filter:none}
  .slider:has(.slide.banner) .s-dots button{background-color:rgba(255,255,255,.4)}
  .slider:has(.slide.banner) .s-dots button{padding:20px 14px}
}
/* dots sit inside the frame on a normal slide; on a banner there is no copy
   block to sit above, so lift them off the bottom edge of the artwork */
.slider:has(.slide.banner) .s-dots{bottom:18px}
/* The -58px pull that tucks the stats card under a photo slide would cover the
   bottom of a client banner, where their own title sits. Banner slides get the
   card clear of the artwork instead. */
body:has(.slide.banner) .stats{margin-top:14px}