/* درگاه سامانه‌های هوشمند پالایشگاه نفت بندرعباس — Suite 5 */
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Medium.woff2) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-Bold.woff2) format('woff2');font-weight:700 800;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#050d1a}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(1200px 520px at 50% 0,#0b2347 0,transparent 70%),#050d1a;color:#e9f1fc;font-family:Vazirmatn,Tahoma,'Segoe UI',sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #7fb4ff;outline-offset:3px}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:12px;transform:translateY(-200%);background:#0b1a2e;color:#fff;border:2px solid #7fb4ff;padding:10px 16px;border-radius:10px;z-index:50}
.skip:focus{transform:none}
.hero{position:relative;isolation:isolate;min-height:330px;display:flex;flex-direction:column}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:#050d1a url(skyline.svg) center bottom/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,13,26,.82) 0,rgba(5,13,26,.15) 46%,rgba(5,13,26,.78) 100%)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,56px)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{width:56px;height:56px;border-radius:50%;flex:none}
.brand b{display:block;font-size:20px;line-height:1.45;font-weight:700;color:#fff}
.brand small{display:block;font-size:13px;color:#6cc4ee;line-height:1.5}
.hero h1{margin:auto 0 0;padding:34px 20px 6px;text-align:center;font-size:clamp(28px,4.4vw,46px);line-height:1.4;font-weight:800;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hero p{margin:0;padding:0 20px 78px;text-align:center;font-size:clamp(15px,1.7vw,19px);color:#cfe0f6;text-shadow:0 1px 10px rgba(0,0,0,.6)}
main{flex:1;width:100%;max-width:1220px;margin:-52px auto 0;padding:0 clamp(16px,3vw,28px) 44px}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{--c:#8fb3e6;position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid #1a3358;border-radius:20px;background:linear-gradient(180deg,#0b1a33,#08142a);box-shadow:0 14px 40px rgba(0,0,0,.4);transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 0 1px var(--c)}
.card:focus-visible{outline:3px solid var(--c)}
.art{display:block;aspect-ratio:474/190;overflow:hidden;background:#0a1a2f}
.art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .art img{transform:scale(1.04)}
.body{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding:16px 18px 18px}
.ico{grid-row:span 2;display:grid;place-items:center;width:54px;height:54px;border:1px solid color-mix(in srgb,var(--c) 55%,#0b1a33);border-radius:14px;background:color-mix(in srgb,var(--c) 14%,#0b1a33);color:var(--c)}
.ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tx b{display:block;font-size:18px;line-height:1.5;font-weight:700;color:#fff}
.tx small{display:block;font-size:13.5px;line-height:1.6;color:#a3b6d0}
.go{grid-column:1/-1;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border-radius:12px;background:var(--c);color:#06101d;font-weight:800;font-size:15px}
.go svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k-voice{--c:#4b92ff}.k-flame{--c:#f59a3b}.k-ai{--c:#9b7bff}.k-news{--c:#2bd0dc}.k-hse{--c:#2fcf93}.k-oil{--c:#f0b429}
footer{display:flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:10px 16px;border-top:1px solid #12243c;color:#8197b6;font-size:13px}
footer i{width:1px;height:14px;background:#2a4268}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .grid{grid-template-columns:1fr;gap:16px}.hero{min-height:290px}.brand img{width:46px;height:46px}.brand b{font-size:17px}
 .hero p{padding-bottom:70px}main{margin-top:-46px}.art{aspect-ratio:474/170}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}