:root{--bg:#f3f6f6;--surface:rgba(255,255,255,.78);--text:#12262f;--muted:#5b6b73;--line:rgba(20,40,50,.12);--edge:rgba(255,255,255,.9);--accent:#01678f;--glow:rgba(1,138,175,.26);--glow2:rgba(1,138,175,.14);--shadow:0 14px 44px rgba(1,60,90,.09);--font:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;min-height:100vh;font-family:var(--font);font-size:1.0625rem;line-height:1.9;color:var(--text);background:radial-gradient(circle at 85% 0%,var(--glow),transparent 46%),radial-gradient(circle at 0% 60%,var(--glow2),transparent 42%),var(--bg)}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{width:min(72rem,100% - 2.5rem);margin-inline:auto}
.glass{background:var(--surface);border:1px solid var(--edge);box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn{display:inline-block;padding:.55rem 1.5rem;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;text-decoration:none;border:1px solid var(--accent)}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--line)}
section{padding:3.8rem 0 0}
.head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1.5rem;margin-bottom:1.1rem}
h2{margin:0;font-size:clamp(1.45rem,3.6vw,1.9rem);line-height:1.4}
.head p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1rem}
.card{display:flex;flex-direction:column;gap:.55rem;padding:1.4rem;border-radius:22px;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(1,60,90,.14)}
.card-top{display:flex;justify-content:space-between;align-items:center}
.num{color:var(--accent);font-weight:700}
.tag,.chip{padding:0 .75rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6);font-size:.83rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.card h3{margin:0;font-size:1.15rem;line-height:1.7}
.card p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.85;flex:1}
.card .btn{align-self:flex-start;margin-top:.4rem;padding:.35rem 1.2rem;font-size:.95rem}
.about{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:start;padding:clamp(1.5rem,4vw,2.5rem);border-radius:26px}
.about-photo{width:clamp(96px,14vw,132px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(1,60,90,.18)}
.about p{margin:0 0 .9rem;color:var(--muted);font-size:.98rem;line-height:1.95;max-width:48rem}
.about p:last-child{margin:0}
@media (max-width:640px){.about{grid-template-columns:1fr}}
.cta{margin-top:3.8rem;padding:clamp(1.8rem,5vw,3rem);border-radius:28px;color:#fff;background:linear-gradient(135deg,#01577c,#0180a6);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}
.cta h2{font-size:clamp(1.5rem,4vw,2.1rem)}
.cta p{margin:.2rem 0 0;color:#d6f1f7}
.cta .btn{background:#fff;color:#01506f;border-color:#fff}
footer{margin-top:3rem;padding:1.5rem 0 2.2rem;text-align:center;color:var(--muted);font-size:.9rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}

.top{position:sticky;top:.7rem;z-index:20;margin-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem .6rem .4rem .6rem;border-radius:999px}
.links{display:flex;align-items:center;gap:1.4rem;font-size:.96rem;padding-inline-start:.6rem}
.links a{text-decoration:none;color:var(--muted)}.links a:hover{color:var(--accent)}
.tools{display:flex;align-items:center;gap:.5rem}
.app,.burger{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.85);cursor:pointer;transition:border-color .15s}
.app:hover,.burger:hover{border-color:var(--accent)}
.app img{width:1.65rem;height:1.65rem;border-radius:.45rem;display:block}
.burger{display:none;grid-auto-flow:row;align-content:center;gap:4px}
.burger span{display:block;width:15px;height:2px;border-radius:2px;background:var(--text)}
.menu{position:absolute;top:calc(100% + .5rem);inset-inline:0;display:grid;gap:.1rem;padding:.6rem;border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(0,30,50,.25)}
.menu[hidden]{display:none}
.menu a{padding:.45rem .9rem;border-radius:12px;text-decoration:none;font-weight:600}
.menu a:hover{background:rgba(1,103,143,.08);color:var(--accent)}
.hero{position:relative;margin-top:.8rem;min-height:13.5rem;display:flex;flex-direction:column;justify-content:center;padding:clamp(1.8rem,4vw,2.8rem) clamp(1.5rem,5vw,3.5rem);border-radius:28px;color:#fff;background:linear-gradient(to left,rgba(0,78,98,.86) 0%,rgba(0,78,98,.84) 62%,rgba(0,78,98,.3) 100%),url("assets/images/hero-wave.jpg") center/cover no-repeat;background-origin:border-box;border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--shadow)}
.hero h1{margin:0;font-size:clamp(2rem,5vw,3.1rem);line-height:1.3;font-weight:700}
.roles{margin:.4rem 0 .6rem;color:#8ef3f8;font-weight:700;font-size:1.2rem;white-space:nowrap}
.lead{margin:0;color:#e2f5f9}
@media (max-width:900px){
  .links{display:none}.burger{display:inline-grid}
  .hero{min-height:0;padding:clamp(1.8rem,6vw,2.5rem) 1.1rem;color:var(--text);border:1px solid var(--edge);box-shadow:var(--shadow);background:radial-gradient(circle at 90% 0%,var(--glow),transparent 55%),var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .roles{color:var(--accent);font-size:min(1.2rem,3.7vw)}
  .lead{color:var(--muted);max-width:34rem}
}
@media (max-width:359px){.roles{white-space:normal;font-size:.95rem}}
@media (min-width:901px){.menu{display:none!important}}