@font-face{font-family:"BNazanin";src:local("B Nazanin"),local("BNazanin"),url("fonts/BNazanin.woff2") format("woff2"),url("fonts/BNazanin.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"BNazanin";src:local("B Nazanin Bold"),local("BNazanin-Bold"),url("fonts/BNazanin-Bold.woff2") format("woff2"),url("fonts/BNazanin-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--navy:#0a1a3a;--navy2:#13306b;--cyan:#2aabee;--sun:#ffb547;--ink:#10203f;--mute:#586a85;--bg:#f4f7fb;--card:#fff;--line:#dde5f0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:20px/1.9 BNazanin,'B Nazanin',Nazanin,Tahoma,serif}
a{color:inherit}
h2,h3,p,ul,ol{margin:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.top{position:sticky;top:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 5vw;background:rgba(10,26,58,.94);backdrop-filter:blur(8px);color:#fff;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.3rem;text-decoration:none;display:flex;gap:8px;align-items:center}
.brand i{font-style:normal;background:var(--cyan);border-radius:10px;padding:0 6px}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{text-decoration:none;color:#c4d3ee;font-size:.95rem}
.top nav a:hover{color:#fff}
.btn{display:inline-block;background:var(--sun);color:#1b1200;text-decoration:none;padding:12px 26px;border-radius:14px;font-weight:700;box-shadow:0 8px 22px rgba(255,181,71,.28);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.sm{padding:6px 18px;box-shadow:none}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35);box-shadow:none}
.btn.dark{background:var(--navy);color:#fff;box-shadow:none}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:64px 5vw 90px;background:radial-gradient(60% 70% at 22% 45%,#1d4fae 0,transparent 70%),var(--navy);color:#fff}
.hero>*{max-width:560px;margin-inline:auto;width:100%}
h1{font-size:clamp(2rem,6.2vw,3.5rem);line-height:1.5;font-weight:700;margin-bottom:18px}
.hero p{color:#c9d7f0;margin-bottom:26px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.ticks{list-style:none;padding:0;display:flex;gap:6px 20px;flex-wrap:wrap;color:#9fe0ff;font-size:.95rem}
.phone{background:#0d2250;border:8px solid #1c3a7a;border-radius:34px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);max-width:340px}
.ph-head{background:#16336f;padding:10px 16px;font-weight:700;display:flex;gap:8px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%;background:#4cd98a}
.ph-body{padding:14px;display:flex;flex-direction:column;gap:10px;min-height:420px}
.m{padding:9px 13px;border-radius:16px;max-width:90%;font-size:.92rem;line-height:1.75;opacity:0;animation:pop .5s forwards}
.m.me{background:var(--cyan);color:#04202f;align-self:flex-start;border-end-start-radius:4px}
.m.bot{background:#1a3a7c;align-self:flex-end;border-end-end-radius:4px}
.d1{animation-delay:.5s}.d2{animation-delay:1.6s}.d3{animation-delay:2.9s}.d4{animation-delay:4s}.d5{animation-delay:5.4s}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.sale{background:var(--sun);color:#2b1c00;padding:0 8px;border-radius:6px;font-size:.78rem;font-weight:700}
.keys{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.keys span{background:#27499a;border-radius:8px;padding:1px 10px;font-size:.82rem}
.block{padding:64px 5vw}
.block>*{max-width:1040px;margin-inline:auto}
.alt{background:var(--card)}
h2{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700;margin:0 auto 30px;line-height:1.5}
h3{font-size:1.15rem;font-weight:700;margin-bottom:6px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vs>div{border-radius:20px;padding:26px}
.vs ul{padding-inline-start:1.2em;display:grid;gap:4px}
.old{background:var(--card);border:2px dashed var(--line);color:var(--mute)}
.new{background:var(--navy);color:#fff;box-shadow:0 18px 40px rgba(10,26,58,.25)}
.new li::marker{color:var(--sun)}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bento article{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .2s,box-shadow .2s}
.bento article:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(16,32,63,.1)}
.bento .wide{grid-column:span 2;background:var(--navy);color:#fff;border:0}
.bento .wide p{color:#c9d7f0}
.bento i{font-style:normal;font-size:1.8rem;display:block;margin-bottom:4px}
.bento p{color:var(--mute);font-size:.95rem}
.menu{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.menu span{background:#1a3a7c;border-radius:10px;padding:2px 14px;font-size:.9rem}
.all{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grp{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px}
.grp ul{list-style:none;padding:0;display:grid;gap:2px;color:var(--mute);font-size:.95rem}
.grp li::before{content:"✓ ";color:var(--cyan);font-weight:700}
.steps{list-style:none;padding:0;display:grid;gap:16px}
.steps li{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 22px}
.steps b{flex:none;width:54px;height:54px;border-radius:50%;background:var(--cyan);color:#04202f;display:grid;place-items:center;font-size:1.6rem}
.steps p{color:var(--mute)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plan{position:relative;border:2px solid var(--line);border-radius:22px;padding:28px;background:var(--bg);display:flex;flex-direction:column;gap:12px}
.plan ul{padding-inline-start:1.2em;color:var(--mute);flex:1}
.plan.full{background:var(--navy);color:#fff;border-color:var(--cyan);box-shadow:0 20px 44px rgba(10,26,58,.3)}
.plan.full ul{color:#c9d7f0}
.flag{position:absolute;top:-14px;inset-inline-start:22px;background:var(--sun);color:#1b1200;font-size:.85rem;font-weight:700;padding:1px 14px;border-radius:99px}
.price{font-weight:700}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 20px;margin-bottom:10px}
summary{cursor:pointer;font-weight:700}
details p{margin-top:8px;color:var(--mute)}
.cta{text-align:center;padding:70px 5vw;background:radial-gradient(50% 90% at 50% 0,#1d4fae 0,transparent 70%),var(--navy);color:#fff}
.cta h2{margin-bottom:8px}
.cta p{color:#c9d7f0;margin-bottom:22px}
footer{text-align:center;background:var(--navy);color:#8ea3c8;padding:18px;font-size:.9rem;border-top:1px solid #1c3a7a}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-top:40px}.vs,.plans,.all{grid-template-columns:1fr}.bento{grid-template-columns:1fr 1fr}.top nav{display:none}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.bento .wide{grid-column:auto}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.m{animation:none;opacity:1}.btn,.bento article{transition:none}}
