/* ASA Branding - shared base: fonts, tokens, navigation, buttons, footer.
   Loaded by every page. Page-specific rules live in asa-home.css / asa-pages.css. */

/* ---------------------------------------------------------------
   Self-hosted Persian font (SIL OFL 1.1; Latin falls back to the system UI font).
   --------------------------------------------------------------- */
@font-face{font-family:Vazirmatn;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/vazirmatn-arabic.woff2?v=05d9ce2a) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------------------------------------------------------------
   Design Tokens & Global Resets
   --------------------------------------------------------------- */
:root{--bg:#10171c;--surface:#182127;--surface-strong:#202b32;--text:#edf0ef;--muted:#c3cdd1;--brand-petrol:#173c4b;--brand-petrol-rgb:23,60,75;--color-accent:#7899a8;--color-accent-soft:#9db2bc;--color-accent-rgb:120,153,168;--line:rgba(125,157,171,.2);--line-strong:rgba(125,157,171,.4);--radius:17px;--max:1360px}
html{scroll-behavior:smooth;background-color:#10171c;background-image:radial-gradient(ellipse at 82% 14%,rgba(31,91,167,.13),transparent 38%),radial-gradient(ellipse at 9% 72%,rgba(20,100,150,.09),transparent 44%),linear-gradient(135deg,transparent 49.75%,rgba(75,145,204,.055) 50%,transparent 50.25%),linear-gradient(45deg,transparent 49.75%,rgba(75,145,204,.04) 50%,transparent 50.25%);background-size:100% 100%,100% 100%,112px 112px,160px 160px;background-repeat:no-repeat,no-repeat,repeat,repeat}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{min-width:320px;margin:0;overflow-x:hidden;background:transparent;color:var(--text);font:600 16px/1.8 Vazirmatn,system-ui,sans-serif;position:relative;z-index:0;isolation:isolate}
body::before{content:"";position:fixed;z-index:-1;inset:-2vw;pointer-events:none;opacity:.30;background-image:radial-gradient(circle at 1px 1px,rgba(137,198,242,.78) 1.15px,transparent 1.85px),linear-gradient(135deg,transparent 49.6%,rgba(75,145,204,.27) 50%,transparent 50.4%),radial-gradient(ellipse at 18% 28%,rgba(42,131,192,.25),transparent 48%),radial-gradient(ellipse at 82% 70%,rgba(42,131,192,.19),transparent 42%);background-size:42px 42px,84px 84px,100% 100%,100% 100%;background-position:0 0,0 0,0 0,0 0;mask-image:linear-gradient(125deg,transparent 1%,#000 27%,#000 86%,transparent 100%);transform:translate3d(-.8%,.25%,0) scale(1.01);animation:asa-flow-map 36s ease-in-out infinite alternate}
@keyframes asa-flow-map{from{transform:translate3d(-.8%,.25%,0) scale(1.01)}to{transform:translate3d(1%,-.65%,0) scale(1.035)}}
@keyframes asa-flow-map-mobile{from{transform:translate3d(-.25%,0,0) scale(1.005)}to{transform:translate3d(.25%,-.15%,0) scale(1.008)}}
@media(max-width:720px){body::before{opacity:.15;animation:asa-flow-map-mobile 54s ease-in-out infinite alternate}}
@media(prefers-reduced-motion:reduce){body::before{animation:none;transform:none}}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,p{margin-top:0}
.shell{width:min(calc(100% - 36px),var(--max));margin-inline:auto}
.label,.eyebrow,.float-card,.brand small{font-family:Vazirmatn,system-ui,sans-serif}
.mono,.project .num,.contact-status i{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.skip{position:absolute;z-index:99;top:8px;right:-100vw;padding:8px 13px;border-radius:8px;background:var(--color-accent);color:#03101e}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip:focus{right:8px}
@media (max-width:520px){
  .shell{width:min(calc(100% - 32px),var(--max))}
}
@media (max-width:420px){
  .shell{width:min(calc(100% - 32px),var(--max))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------------------------------------------------------------
   Navigation
   --------------------------------------------------------------- */
.mark{font-size:0;background:rgba(8,30,50,.72) url(../images/AsaBranding-logo3.webp?v=f0a040c7) center/contain no-repeat;background-origin:content-box;background-clip:content-box;padding:7px;display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line-strong);border-radius:50%;color:var(--text);font:800 18px system-ui,sans-serif;box-shadow:0 0 12px rgba(120,153,168,.1)}
.nav{position:fixed;z-index:20;inset:7px 18px auto;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--max);height:76px;margin:auto;padding:0 20px;overflow:hidden;border:1px solid rgba(116,201,246,.3);border-radius:22px;background:rgba(8,23,26,.94);box-shadow:0 14px 42px rgba(0,0,0,.28);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800}
.brand small{display:block;color:var(--muted);font-size:12px;letter-spacing:.09em}
.navlinks{display:flex;gap:16px}
.navlinks a{padding:11px 20px;border:1px solid rgba(var(--color-accent-rgb),.24);border-radius:999px;color:#edf0ef;font-weight:800;transition:.22s;font-size:14px}
.navlinks a:hover{color:white;border-color:var(--color-accent);background:rgba(var(--brand-petrol-rgb),.18);box-shadow:0 0 18px rgba(var(--color-accent-rgb),.18)}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:12px;font-weight:800;transition:transform .22s,border-color .22s,background .22s,box-shadow .22s}
.nav-cta{padding:12px 17px;background:rgba(var(--brand-petrol-rgb),.32)}
.nav-cta:hover,.btn:hover{transform:translateY(-3px);border-color:var(--color-accent);box-shadow:0 11px 26px rgba(var(--color-accent-rgb),.2)}
.menu{display:none;border:0;background:none;color:white;font-size:25px;cursor:pointer}
@media (max-width:1050px){
  .navlinks{gap:8px}
  .navlinks a{padding-inline:13px}
}
@media (max-width:820px){
  .nav{height:64px;inset:8px 12px auto}
  .brand{font-size:16px}
  .mark{width:44px;height:44px;font-size:14px}
  .brand small{display:none}
  .navlinks{display:none}
  .menu{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line-strong);border-radius:12px;background:rgba(9,48,74,.55);box-shadow:0 0 16px rgba(var(--color-accent-rgb),.15)}
  .nav[data-open="true"]{overflow:visible}
  .nav[data-open="true"] .navlinks{position:absolute;inset:70px 0 auto;display:grid;gap:0;padding:8px;border:1px solid var(--line);border-radius:14px;background:#0b1d20}
  .nav[data-open="true"] .navlinks a{padding:10px}
  .nav-cta{display:none}
}
@media (max-width:420px){
  .nav{inset:6px 8px auto;padding-inline:10px;gap:8px}
  .brand{font-size:14px}
  .mark{width:39px;height:39px;font-size:12px}
  .menu{width:39px;height:39px}
}

/* ---------------------------------------------------------------
   Shared Buttons & Typography Utilities
   --------------------------------------------------------------- */
.btn{padding:12px 18px}
.primary{border-color:var(--line-strong);background:var(--brand-petrol);color:var(--text)}
.secondary{background:rgba(255,255,255,.025);color:#dceaff}
.hero-copy h1 em,.section-head h2,.card h3,.project h3,.step h3,.contact-panel h2{font-style:normal;background:linear-gradient(270deg,var(--color-accent-soft) 0%,var(--brand-petrol) 48%,var(--color-accent-soft) 100%);background-clip:text;-webkit-background-clip:text;color:transparent}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
footer{position:relative;padding:10px 0 8px;background:transparent;color:var(--muted);font-size:12px}
.footer-signature{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.footer-signature>span:first-child{justify-self:center;white-space:normal;text-align:center;display:block;margin-top:2px;color:var(--color-accent);font-size:12px}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;width:100%;order:-1}
.footer-links a,.footer-links span{flex:0 0 auto;padding:5px 9px;border:1px solid rgba(var(--color-accent-rgb),.48);border-radius:8px;background:rgba(9,48,74,.52);color:#c8d4d8;white-space:nowrap}
.footer-links a:hover{border-color:var(--color-accent);background:var(--brand-petrol);color:white}
.contact-signature{direction:ltr;color:var(--muted);font:10.5px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.08em}

/* ---------------------------------------------------------------
   Reveal / Scroll Motion Utility
   --------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ---------------------------------------------------------------
   Shared keyframes
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Shared bits used by cards on every page
   --------------------------------------------------------------- */
.art{display:block;width:100%;height:100%}
.navlinks a[aria-current]{border-color:var(--color-accent);background:rgba(var(--brand-petrol-rgb),.28);color:#fff}

.nav{border-color:var(--line);background:rgba(16,23,28,.97);box-shadow:0 12px 30px rgba(0,0,0,.22);backdrop-filter:blur(12px)}
.navlinks a,.footer-links a,.footer-links span{border-color:var(--line);color:#d2dadd}
.navlinks a:hover,.navlinks a[aria-current],.footer-links a:hover{background:rgba(23,60,75,.55);border-color:var(--line-strong);color:#f2f5f4;box-shadow:none}
.nav-cta{background:rgba(23,60,75,.32)}
.nav-cta:hover,.btn:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn{transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.primary{border-color:var(--line-strong);background:var(--brand-petrol);color:var(--text)}
.secondary{border-color:var(--line);background:rgba(255,255,255,.025);color:#e0e2e4}
.hero-copy h1 em,.section-head h2,.card h3,.project h3,.step h3,.contact-panel h2{background:none;color:var(--color-accent-soft)}
.menu{background:rgba(23,60,75,.42);box-shadow:none}
footer{color:#adb9be}.footer-signature>span:first-child{color:var(--color-accent)}
.navlinks a:focus-visible,.btn:focus-visible,.menu:focus-visible,.footer-links a:focus-visible{outline:2px solid var(--color-accent-soft);outline-offset:3px}
.primary{background:var(--brand-petrol);color:var(--text)}
.brand small,.footer-signature>span:first-child,.contact-signature{color:var(--muted)}
.mark{animation:none;filter:none}
.menu{min-width:44px;min-height:44px}
@media(max-width:420px){.menu{width:44px;height:44px}}
@media(max-width:320px){body{min-width:0}}


/* Desktop navigation: retain the right edge and release 15% on the left. */
@media(min-width:1101px){
 .nav{left:auto;right:max(18px,calc((100vw - var(--max))/2));width:calc(min(100vw - 36px,var(--max)) * .85);margin:0;gap:12px;padding-inline:16px}
 .navlinks{gap:8px}
 .navlinks a{padding-inline:12px}
}

/* Shared interactive color feedback across primary and secondary actions. */
:is(.btn,.nav-cta,.share-btn,.pager-link):is(:hover,:focus-visible){background:var(--brand-petrol)!important;border-color:var(--color-accent-soft)!important;color:#fff;box-shadow:0 5px 16px rgba(0,0,0,.18)!important}

.navlinks .nav-software{color:var(--color-accent-soft);font-weight:800;border-color:rgba(125,157,171,.55)}