/* ===================================================
 Poolban landing — main stylesheet
 =================================================== */

/* ---------- FONTS (self-hosted) ----------
 Shabnam-FD: Persian text, Persian digits
 Mona Sans: Latin letters only (via unicode-range) */
@font-face{font-family:'Shabnam'; src:url('../fonts/Shabnam-FD.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Shabnam'; src:url('../fonts/Shabnam-Medium-FD.woff2') format('woff2'); font-weight:500 600; font-style:normal; font-display:swap;}
@font-face{font-family:'Shabnam'; src:url('../fonts/Shabnam-Bold-FD.woff2') format('woff2'); font-weight:700 900; font-style:normal; font-display:swap;}
@font-face{font-family:'Mona Sans'; src:url('../fonts/Mona-Sans-Regular.woff') format('woff'); font-weight:400 500; font-display:swap; unicode-range:U+0041-005A, U+0061-007A;}
@font-face{font-family:'Mona Sans'; src:url('../fonts/Mona-Sans-SemiBold.woff') format('woff'); font-weight:600; font-display:swap; unicode-range:U+0041-005A, U+0061-007A;}
@font-face{font-family:'Mona Sans'; src:url('../fonts/Mona-Sans-Bold.woff') format('woff'); font-weight:700 900; font-display:swap; unicode-range:U+0041-005A, U+0061-007A;}

:root{
  --paper:#F6F4EC;
  --paper-2:#ECE8DB;
  --surface:#FFFFFF;
  --ink:#12181F;
  --ink-soft:#4A5766;
  --ink-faint:#89909C;
  --gold:#B4802B;
  --gold-soft:#EAD6A6;
  --teal:#0E5C61;
  --teal-soft:#CFE2DF;
  --line:#DEDACB;
  --radius-s:6px;
  --radius-m:16px;
  --radius-l:30px;
  --maxw:1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C1216; --paper-2:#101820; --surface:#141D26;
    --ink:#F1EFE6; --ink-soft:#B3BAC4; --ink-faint:#7C8590;
    --gold:#DCB36A; --gold-soft:#473A20; --teal:#4FA6A0; --teal-soft:#163330;
    --line:#233039;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1216; --paper-2:#101820; --surface:#141D26;
  --ink:#F1EFE6; --ink-soft:#B3BAC4; --ink-faint:#7C8590;
  --gold:#DCB36A; --gold-soft:#473A20; --teal:#4FA6A0; --teal-soft:#163330;
  --line:#233039;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-padding-top: calc(84px + env(safe-area-inset-top,0px)); scroll-behavior:smooth;}
html,body{height:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Mona Sans','Shabnam', Tahoma, sans-serif; line-height:1.75;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
button{font-family:inherit;}
code, pre{font-family:ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50; padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.nav-row{ max-width:var(--maxw); margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.28rem;}
.brand-mark{ height:34px; width:auto; flex:none;}
.mobile-panel .brand-mark, footer .brand-mark{height:30px;}
.nav-links{display:flex; align-items:center; gap:26px; font-size:.94rem; color:var(--ink-soft); font-weight:500;}
.nav-links a{transition:color .15s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.icon-btn.nav-toggle{display:none;}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:999px; font-weight:700; font-size:.94rem; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{box-shadow:0 12px 28px -12px rgba(14,26,43,.55);}
.btn-gold{background:var(--gold); color:#241a06;}
.btn-gold:hover{box-shadow:0 12px 28px -12px rgba(180,128,43,.6);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink-soft);}
.btn-sm{padding:10px 18px; font-size:.86rem;}
.btn-block{width:100%;}

/* ---------- HERO ---------- */
.hero{position:relative; padding:70px 0 44px; overflow:clip;}
.hero::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height:640px; z-index:-1;
  background:
    radial-gradient(560px 320px at 82% 6%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 68%),
    radial-gradient(520px 340px at 8% 18%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;}
.eyebrow-tag{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); padding:7px 16px 7px 14px; border-radius:999px; font-size:.84rem; color:var(--ink-soft); font-weight:600; margin-bottom:22px;}
.eyebrow-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;}
.hero-title{ font-size:clamp(2.25rem, 4.2vw, 3.5rem); font-weight:800; line-height:1.32; letter-spacing:-.5px; max-width:21ch;}
.hero-sub{margin-top:22px; font-size:1.1rem; color:var(--ink-soft); max-width:46ch;}
.hero-sub b{color:var(--ink); font-weight:700;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.hero-meta{margin-top:40px; display:flex; gap:20px 28px; flex-wrap:wrap;}
.hero-meta div{border-inline-start:2px solid var(--gold); padding-inline-start:14px;}
.hero-meta b{display:block; font-size:1.05rem; font-weight:800;}
.hero-meta span{font-size:.86rem; color:var(--ink-faint);}
.hero-art{position:relative; display:flex; align-items:center; justify-content:center; min-height:380px;}
.hero-art svg{width:100%; height:auto;}
.hero-art::before{
  content:""; position:absolute; inset:6%; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--gold) 22%, transparent), transparent 72%);
  filter:blur(6px);
}
.hero-img-wrap{position:relative; z-index:1; width:100%; max-width:460px;}
.hero-img-wrap img{
  width:100%; height:auto; border-radius:28px;
  box-shadow:0 40px 80px -30px rgba(18,24,31,.45), 0 6px 18px -6px rgba(18,24,31,.18);
}
@media (prefers-reduced-motion: no-preference){
  .hero-img-wrap{ animation:hero-float 6s ease-in-out infinite; }
  @keyframes hero-float{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-14px) rotate(.4deg);} }
}

/* ---------- SCROLL REVEAL ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-group .reveal:nth-child(1){transition-delay:.02s;}
.reveal-group .reveal:nth-child(2){transition-delay:.10s;}
.reveal-group .reveal:nth-child(3){transition-delay:.18s;}
.reveal-group .reveal:nth-child(4){transition-delay:.26s;}
.reveal-group .reveal:nth-child(5){transition-delay:.34s;}
.reveal-group .reveal:nth-child(6){transition-delay:.42s;}
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

.service-card, .usecase-card, .step, .faq-item{ transition:transform .25s ease, box-shadow .25s ease, border-color .15s ease; }
.service-card:hover, .usecase-card:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -26px rgba(18,24,31,.28); }
.step:hover .step-num{ transform:scale(1.08); }
.step-num{ transition:transform .25s ease; }

/* ---------- TRUST STRIP ---------- */
.trust-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-2);}
.trust-row{ display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; justify-content:space-between; padding:22px 0; font-size:.88rem; color:var(--ink-soft); font-weight:600;}
.trust-item{display:flex; align-items:center; gap:9px;}
.trust-item svg{width:18px;height:18px; flex:none; color:var(--teal);}

/* ---------- SECTION HEADS ---------- */
.section{padding:96px 0;}
.section.tight{padding:72px 0;}
.section.alt{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.head{max-width:640px; margin-bottom:56px;}
.head.center{margin-inline:auto; text-align:center;}
.kicker{color:var(--teal); font-weight:700; font-size:.92rem; margin-bottom:12px; display:block;}
.head h2{font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; line-height:1.35;}
.head p{margin-top:16px; color:var(--ink-soft); font-size:1.04rem;}

/* ---------- SERVICES (asymmetric bento) ---------- */
.services-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:auto auto; gap:16px;}
.service-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:32px 30px; transition:border-color .15s ease;}
.service-card:hover{border-color:var(--ink-soft);}
.service-card.lead{grid-row:span 2; display:flex; flex-direction:column; justify-content:space-between; background:var(--ink); color:var(--paper); border-color:var(--ink);}
.service-card.lead h3{color:var(--paper); font-size:1.3rem;}
.service-card.lead p{color:color-mix(in srgb, var(--paper) 68%, transparent);}
.service-card.lead .service-icon{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14);}
.service-card.lead .service-icon svg{color:var(--gold-soft);}
.service-icon{ width:44px;height:44px;border-radius:12px; background:var(--paper-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.service-icon svg{width:21px;height:21px; color:var(--gold);}
.service-card h3{font-size:1.08rem; font-weight:800; margin-bottom:10px;}
.service-card p{color:var(--ink-soft); font-size:.94rem;}
@media (max-width:900px){ .services-grid{grid-template-columns:1fr 1fr;} .service-card.lead{grid-column:span 2; grid-row:auto;} }
@media (max-width:600px){ .services-grid{grid-template-columns:1fr;} .service-card.lead{grid-column:auto;} }

/* ---------- STEPS (how it works) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:step; position:relative;}
.step{position:relative; padding-inline-end:26px;}
.step-num{ position:relative; z-index:1; width:44px;height:44px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; margin-bottom:22px;}
.step h3{font-size:1.05rem; font-weight:800; margin-bottom:10px;}
.step p{color:var(--ink-soft); font-size:.92rem;}
.step-line{position:absolute; top:22px; inset-inline-start:56px; inset-inline-end:12px; height:1px; background:var(--line);}
.step:last-child .step-line{display:none;}
@media (max-width:860px){
  .steps{grid-template-columns:1fr; gap:34px;}
  .step-line{display:none;}
  .step{padding-inline-end:0;}
}

/* ---------- USE CASES ---------- */
.usecases{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.usecase-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px 24px;}
.usecase-card .service-icon{margin-bottom:18px;}
.usecase-card h3{font-size:1rem; font-weight:800; margin-bottom:8px;}
.usecase-card p{font-size:.9rem; color:var(--ink-soft);}
@media (max-width:1100px){ .usecases{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .usecases{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .usecases{grid-template-columns:1fr;} }

/* ---------- WHY STATEMENT ---------- */
.statement{ background:var(--ink); color:var(--paper); border-radius:var(--radius-l); padding:64px clamp(24px,6vw,72px); position:relative; overflow:hidden;}
.statement::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 240px at 85% 0%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 70%); pointer-events:none;}
.statement-inner{position:relative; max-width:720px;}
.statement .kicker{color:var(--gold-soft);}
.statement h2{color:var(--paper); font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:800; line-height:1.42;}
.statement p{margin-top:22px; color:color-mix(in srgb, var(--paper) 72%, transparent); font-size:1.05rem; max-width:58ch;}
.statement-badges{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px;}
.pill{ border:1px solid color-mix(in srgb, var(--paper) 25%, transparent); color:var(--paper); border-radius:999px; padding:9px 18px; font-size:.86rem; font-weight:600;}

/* ---------- FEATURE SPLIT ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split.reverse .split-art{order:-1;}
.split-art{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:44px; display:flex; align-items:center; justify-content:center; min-height:320px;}
.split-art svg{width:100%; max-width:340px; height:auto;}
.split-text h2{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; line-height:1.4; margin-bottom:18px;}
.split-text p{color:var(--ink-soft); font-size:1.02rem; margin-bottom:22px;}
.check-list{display:flex; flex-direction:column; gap:14px;}
.check-list li{display:flex; align-items:flex-start; gap:12px; font-size:.98rem; color:var(--ink);}
.check-list svg{width:19px;height:19px; flex:none; margin-top:3px; color:var(--teal);}
@media (max-width:860px){
  .split, .split.reverse{grid-template-columns:1fr;}
  .split.reverse .split-art{order:0;}
}

/* ---------- DEVELOPER / CODE ---------- */
.dev-wrap{display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center;}
.dev-badges{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px;}
.dev-chip{ border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:7px 15px; font-size:.82rem; color:var(--ink-soft); font-weight:600;}
.code-card{ background:#12181F; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-m); overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.5);}
.code-top{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08);}
.code-dot{width:10px;height:10px;border-radius:50%;}
.code-top span{font-size:.78rem; color:rgba(255,255,255,.45); margin-inline-start:10px; font-family:ui-monospace, SFMono-Regular, Consolas, monospace;}
.code-card pre{ margin:0; padding:24px 22px; font-size:.84rem; line-height:1.9; color:#D8DEE9; overflow-x:auto; direction:ltr; text-align:left;}
.code-card .k{color:#D8A657;} .code-card .s{color:#89CA78;} .code-card .c{color:#6A7480;} .code-card .p{color:#7FB4E3;}

@media (max-width:900px){ .dev-wrap{grid-template-columns:1fr;} }

/* ---------- PRICING ---------- */
.price-card{ background:var(--surface); border:1px solid var(--gold); border-radius:var(--radius-l); padding:44px clamp(28px,5vw,54px); display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; box-shadow:0 28px 60px -34px rgba(180,128,43,.4);}
.price-card .price-desc{color:var(--ink-soft); font-size:1rem; margin-top:12px; max-width:44ch;}
.price-card h3{font-size:1.3rem; font-weight:800;}
.price-figure{font-size:2.6rem; font-weight:900; color:var(--ink);}
.price-figure span{font-size:1rem; font-weight:700; color:var(--ink-faint); margin-inline-start:8px;}
.price-side{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:30px;}
.price-card .check-list{margin-bottom:26px;}
.price-note{ margin-top:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:20px 26px; border:1px dashed var(--line); border-radius:var(--radius-m); color:var(--ink-soft); font-size:.94rem;}
.price-note b{color:var(--ink);}
@media (max-width:820px){ .price-card{grid-template-columns:1fr;} }

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;}
.faq-item{background:var(--surface);}
.faq-item summary{ list-style:none; cursor:pointer; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-weight:700; font-size:1rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{ width:26px;height:26px; border-radius:50%; border:1px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; position:relative;}
.faq-plus::before, .faq-plus::after{content:""; position:absolute; background:var(--ink-soft);}
.faq-plus::before{width:11px; height:1.4px;}
.faq-plus::after{width:1.4px; height:11px; transition:transform .2s ease;}
.faq-item[open] .faq-plus::after{transform:scaleY(0);}
.faq-body{padding:0 26px 24px; color:var(--ink-soft); font-size:.95rem; max-width:68ch;}

/* ---------- CTA BAND ---------- */
.cta-band{ background:var(--teal); color:#fff; border-radius:var(--radius-l); padding:56px clamp(24px,6vw,64px); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-band h2{font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:800; max-width:24ch;}
.cta-band p{color:rgba(255,255,255,.82); margin-top:10px; font-size:1rem;}
.cta-band .btn-gold{background:#fff; color:var(--teal);}
.cta-band .btn-gold:hover{box-shadow:0 12px 28px -12px rgba(0,0,0,.35);}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap;}
.cta-band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.45);}
.cta-band .btn-ghost:hover{border-color:#fff;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); background:var(--paper-2); padding:64px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px;}
.foot-brand p{color:var(--ink-soft); font-size:.92rem; margin-top:14px; max-width:32ch;}
.foot-col h4{font-size:.92rem; font-weight:800; margin-bottom:16px;}
.foot-col ul{display:flex; flex-direction:column; gap:11px;}
.foot-col a, .foot-col span{color:var(--ink-soft); font-size:.92rem;}
.foot-col a:hover{color:var(--ink);}
.foot-bottom{ margin-top:52px; padding-top:26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.82rem; color:var(--ink-faint);}
.foot-badges{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.enamad-slot:empty{display:none;}
.enamad-slot img{max-height:84px; width:auto;}

@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; row-gap:36px;} }
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;}
}
@media (max-width:1100px){
  .nav-links{display:none;}
  .icon-btn.nav-toggle{display:flex;}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1; min-height:0;}
  .hero-img-wrap{max-width:380px;}
}
@media (max-width:640px){
  .nav-phone{display:none;}
  .nav-row{padding:12px 20px;}
  .hero{padding-top:36px;}
}
@media (max-width:460px){
  .nav-cta .btn-ghost{display:none;}
}

.mobile-panel{ display:none; position:fixed; inset:0; z-index:60; background:var(--paper); padding: calc(24px + env(safe-area-inset-top,0px)) 24px 24px;}
.mobile-panel.open{display:block;}
.mobile-panel .close-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:36px;}
.mobile-panel ul{display:flex; flex-direction:column; gap:26px; font-size:1.25rem; font-weight:700;}
.mobile-panel .mobile-cta{display:flex; flex-direction:column; gap:12px; margin-top:40px;}
html.menu-open{overflow:hidden;}
.icon-btn{width:40px;height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.icon-btn svg{width:20px;height:20px;}

/* ---------- DEV TEXT (moved from inline styles) ---------- */
.dev-title{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; line-height:1.4; margin-bottom:18px;}
.dev-desc{color:var(--ink-soft); font-size:1.02rem; margin-bottom:24px;}
.price-fine{color:var(--ink-soft); font-size:.92rem; margin-top:10px;}
.price-side .btn-block{margin-top:22px;}
.price-card .check-list.first{margin-top:26px;}