/* fouzhanco.ir — page layout on top of fouzhan-ds.css (the DS is vendored; edit tokens there, layout here). */

@font-face{font-family:"Vazirmatn";src:url("../fonts/vazirmatn-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-var.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fz *{transition-duration:0s!important;animation:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:16px;top:-48px;z-index:100;background:var(--bg-primary);padding:8px 12px;border-radius:10px;border:1px solid var(--stroke-default)}
.skip:focus{top:8px}

/* layout */
.container{max-width:1440px;margin-inline:auto;padding-inline:24px}
.rails{border-inline:1px solid var(--stroke-subtle)}
.pad{padding:152px 58px 80px}
.pad-tight{padding:112px 58px 112px}
.sec{border-top:1px solid var(--stroke-subtle)}
.sec-b{border-bottom:1px solid var(--stroke-subtle)}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.center{align-items:center;text-align:center}
.g-4{gap:4px}.g-6{gap:6px}.g-8{gap:8px}.g-10{gap:10px}.g-16{gap:16px}.g-20{gap:20px}.g-24{gap:24px}.g-32{gap:32px}.g-40{gap:40px}.g-64{gap:64px}
.balance{text-wrap:balance}
.max-22{max-width:22em}.max-14{max-width:14em}.max-20{max-width:20em}.max-26{max-width:26em}.max-30{max-width:30em}
@media (max-width:1199px){.pad{padding:112px 40px 72px}.pad-tight{padding:88px 40px}}
@media (max-width:991px){.rails{border:0}.pad{padding:88px 0 64px}.pad-tight{padding:72px 0}.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.h-md{font-size:32px;line-height:42px}.h-lg{font-size:40px;line-height:52px}}
@media (max-width:767px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}.btn{height:46px;padding:0 14px;border-radius:12px;font-size:16px;line-height:22px;gap:8px}.btn-sm{height:36px;padding:0 12px;border-radius:10px;font-size:14px;line-height:20px}.btn-icon{width:46px}.btn-icon.btn-sm{width:36px}.h-md{font-size:28px;line-height:38px}}
@media (max-width:374px){.container{padding-inline:16px}}

/* banner */
.banner{background:#101010;height:48px;display:flex;align-items:center;justify-content:center;position:relative;padding:0 48px 0 16px}
.banner[hidden]{display:none}
.banner a{font-size:13px;line-height:20px;color:#fff;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.banner .u-hover{background-image:linear-gradient(#fff,#fff)}
.banner a:hover .u-hover{background-size:100% .06em;transition-duration:.3s}
.banner .close{position:absolute;left:12px;top:8px;color:#dee2e7}
@media (max-width:767px){.banner{justify-content:flex-start}}

/* header */
.site-header{position:sticky;top:0;z-index:92;border-bottom:1px solid var(--stroke-subtle);background:color-mix(in oklab,var(--bg-primary) 95%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-header .bar{height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:8px;padding:8px 4px;margin:-8px -4px;border-radius:12px}
.mark{width:26px;height:26px;border-radius:8px;background:var(--fg-primary);color:var(--bg-primary);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;line-height:1}
.wordmark{font-size:19px;font-weight:700;line-height:24px;color:var(--fg-primary)}
.nav-main{display:flex;align-items:center;gap:6px}
.nav-wrap{display:flex;align-items:center;gap:36px}
.nav-cta{display:flex;align-items:center;gap:8px}
.menu-btn{display:none}
.mobile-menu{display:none;border-top:1px solid var(--stroke-subtle);background:var(--bg-primary);padding:8px 0 16px}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 12px;border-radius:12px;font-size:16px;font-weight:500;color:var(--fg-secondary)}
.mobile-menu a:hover{background:var(--surface-subtle)}
.mobile-menu .cta{display:flex;flex-direction:column;gap:8px;padding:12px 0 0}
.site-header[data-open="true"] .mobile-menu{display:block}
@media (max-width:991px){.site-header .bar{height:52px}.nav-main{display:none}.nav-cta .btn-ghost{display:none}.menu-btn{display:inline-flex}.nav-cta .btn-primary{height:32px;padding:0 10px;font-size:12px;line-height:18px;border-radius:10px}}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--stroke-subtle)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg .glow{position:absolute;inset:0;background-image:radial-gradient(90% 80% at 50% 100%,#e6ecff 0%,#bccbff 45%,#86a0ee 100%);opacity:.4}
.hero-bg .lines{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.78) 0 1px,transparent 1px 8px);opacity:.4}
.hero-bg .fade{position:absolute;top:0;left:-150%;width:400%;height:150%;background-image:radial-gradient(70% 106% at 50% 0%,var(--bg-primary) 32%,transparent 64%)}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:96px 58px 0}
.hero h1{margin-top:36px;max-width:18em}
.hero .sub{margin-top:20px;max-width:30em;font-size:18px;line-height:30px;font-weight:500;color:var(--fg-accent)}
.hero .cta{margin-top:28px;display:flex;align-items:center;gap:10px}
.hero .preview{margin-top:72px;width:100%;max-width:1120px}
@media (max-width:991px){.hero-in{padding:64px 0 0}.hero h1{margin-top:24px}.hero .preview{margin-top:48px}}
@media (max-width:767px){.hero .cta{flex-direction:column;align-self:stretch;gap:8px}.hero .cta .btn{width:100%}.hero .sub{font-size:16px;line-height:26px}.hero h1{font-size:40px;line-height:52px}}

/* product window */
.win{display:flex;text-align:start;height:560px}
.win aside{width:232px;flex-shrink:0;border-inline-end:1px solid var(--stroke-subtle);background:var(--bg-secondary);padding:14px 12px;display:flex;flex-direction:column;gap:4px}
.win .main{flex-grow:1;min-width:0;display:flex;flex-direction:column}
.win .toolbar{height:48px;border-bottom:1px solid var(--stroke-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:8px}
.win .toolbar .row{gap:8px}
.tbl-wrap{overflow:hidden}
@media (max-width:991px){.win{height:auto}.win aside{display:none}.tbl .opt{display:none}}
@media (max-width:767px){.win .toolbar{height:44px;padding:0 12px}.win .toolbar .hide-sm{display:none}.tbl .opt2{display:none}.tbl{table-layout:fixed}.tbl th,.tbl td{padding-inline:10px;overflow:hidden;text-overflow:ellipsis}.tbl th:nth-child(3),.tbl td:nth-child(3){width:88px}.tbl th:nth-child(4),.tbl td:nth-child(4){width:96px}}

/* family strip */
.family{background:var(--bg-secondary);border-bottom:1px solid var(--stroke-subtle)}
.family .rails{height:96px;display:flex;align-items:center;justify-content:center;gap:72px;padding:0 58px}
.family .name{font-size:20px;font-weight:700;color:var(--fg-secondary);white-space:nowrap}
@media (max-width:991px){.family .rails{height:auto;flex-wrap:wrap;gap:12px 32px;padding:24px 0}.family .name{font-size:17px}}

/* section header */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sec-head h2 span.b{color:var(--fg-primary)}
.sec-head h2 span.a{color:var(--fg-accent)}
.dark .sec-head h2 span.b{color:var(--white-200)}
.dark .sec-head h2 span.a{color:var(--black-800)}
.sec-head h2 br{display:none}
@media (min-width:768px){.sec-head h2 br{display:block}}
@media (max-width:767px){.sec-head{gap:16px}.sec-head-row{flex-direction:column;align-items:flex-start;gap:16px}}

/* fronts */
.fronts-head{padding:152px 58px 80px;border-bottom:1px solid var(--stroke-subtle)}
.fronts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--stroke-subtle)}
.front{padding:40px 32px 48px;border-inline-end:1px solid var(--stroke-subtle);display:flex;flex-direction:column;gap:20px}
.front:last-child{border-inline-end:0}
.front h3{font-size:24px;line-height:32px;font-weight:500;color:var(--fg-primary)}
.fronts-foot{height:80px}
@media (max-width:1199px){.fronts-head{padding:112px 40px 72px}}
@media (max-width:991px){.fronts-head{padding:88px 0 32px;border-bottom:0}.fronts{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--stroke-subtle)}.front{padding:24px 0 28px;border-inline-end:0;border-bottom:1px solid var(--stroke-subtle)}.front:nth-child(odd){padding-inline-end:16px}.front:nth-child(even){padding-inline-start:16px;border-inline-start:1px solid var(--stroke-subtle)}.front h3{font-size:20px;line-height:30px}.fronts-foot{height:64px}}
@media (max-width:575px){.fronts{grid-template-columns:minmax(0,1fr)}.front:nth-child(odd),.front:nth-child(even){padding-inline:0;border-inline-start:0}}

/* project cards */
.pcard{padding:24px;display:flex;flex-direction:column;gap:20px;min-height:380px}
.pcard .ico{width:40px;height:40px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.pcard .ico.blue{background:var(--blue-100);color:var(--blue-600)}
.pcard .ico.grey{background:var(--white-300);color:var(--black-500)}
.pcard p.desc{font-weight:400;color:var(--fg-tertiary)}
.pcard .feat{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.pcard .feat div{display:flex;align-items:flex-start;gap:8px}
.pcard .actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:767px){.pcard{padding:20px;min-height:0}.pcard .actions .btn{flex-grow:1}}

/* panel section */
.panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:end}
.panel-grid .lead{font-size:18px;line-height:30px;color:var(--black-800);max-width:26em}
.modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--black-400)}
.module{padding:32px 24px 0;display:flex;flex-direction:column;gap:10px}
.module:nth-child(3n+1){padding-inline-start:0}
.module:nth-child(3n){padding-inline-end:0}
.module h3{color:var(--white-400)}
.module p{font-weight:400;color:var(--black-800)}
@media (max-width:991px){.panel-grid{grid-template-columns:minmax(0,1fr);gap:24px}.modules{grid-template-columns:repeat(2,minmax(0,1fr))}.module{padding:24px 12px 0}.module:nth-child(3n+1),.module:nth-child(3n){padding-inline:12px}.module:nth-child(odd){padding-inline-start:0}.module:nth-child(even){padding-inline-end:0}}

/* quote */
.quote{font-size:44px;line-height:64px;max-width:20em;color:var(--fg-primary)}
.quote-by{display:flex;align-items:center;gap:12px}
.avatar{width:36px;height:36px;border-radius:12px;background:var(--surface)}
@media (max-width:767px){.quote{font-size:28px;line-height:42px}}

/* news */
.news{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.news .list-card{padding-block:4px}
.news .date{letter-spacing:0;font-weight:500}
@media (max-width:991px){.news{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 0}}
@media (max-width:575px){.news{grid-template-columns:minmax(0,1fr);gap:24px}.news .list-card{padding-inline:16px 0}}

/* contact */
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center;border-top:1px solid var(--stroke-subtle);padding-top:48px}
.contact .mail{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.contact .addr{font-family:var(--font-mono);font-size:14px;direction:ltr;color:var(--fg-secondary);background:var(--surface-subtle);border:1px solid var(--stroke-weak);border-radius:10px;padding:9px 13px}
@media (max-width:767px){.contact{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:32px}}

/* final CTA */
.cta-final{padding:152px 58px}
@media (max-width:1199px){.cta-final{padding:112px 40px}}
@media (max-width:991px){.cta-final{padding:88px 0}}
@media (max-width:767px){.cta-final .cta{flex-direction:column;align-self:stretch;gap:8px}.cta-final .cta .btn{width:100%}}

/* footer */
.site-footer{background:#101010;color:#fff}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:80px 1px 48px}
.foot-brand{grid-column:1/3}
.foot-cols{grid-column:5/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.foot-col{display:flex;flex-direction:column;gap:2px}
.foot-col h2{font-size:14px;line-height:22px;font-weight:500;color:var(--black-600);padding:4px 0;margin-bottom:4px}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:40px 1px;border-top:1px solid #232529}
.foot-bar .copy{font-size:14px;line-height:22px;color:var(--black-700)}
@media (max-width:991px){.foot-grid{display:flex;flex-direction:column;gap:40px;padding:56px 0 0}.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.foot-bar{flex-direction:column;align-items:flex-start;gap:12px;padding:24px 0 32px}}

/* reveal on scroll (progressive; content visible without JS) */
.reveal{opacity:1;filter:none;transition:opacity .6s var(--ease),filter .6s var(--ease),transform .6s var(--ease)}
.js .reveal{opacity:0;filter:blur(1.5px);transform:translateY(8px)}
.js .reveal.in{opacity:1;filter:none;transform:none}