/* فونت‌های درخواستی: B Titr - IRANSans - B Nazanin */
@font-face{
font-family:'B Titr';
src:local('B Titr'),local('B-Titr'),url('BTitr.woff') format('woff');
font-display:swap;
}
@font-face{
font-family:'B Nazanin';
src:local('B Nazanin'),local('B-Nazanin'),url('BNazanin.woff') format('woff');
font-display:swap;
}
@font-face{
font-family:'IRANSans';
src:local('IRANSans'),local('IranSans'),url('IRANSans.woff') format('woff');
font-display:swap;
}
:root{
--font-title:'B Titr','B-Titr',Tahoma,sans-serif;
--font-body:'IRANSans','IranSans',Tahoma,sans-serif;
--font-text:'B Nazanin','B-Nazanin',Tahoma,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:#f6f7fb;color:#1a2340;line-height:1.9}
h1,h2,h3,h4,.logo h1,.cat h4,.repair-steps h4{font-family:var(--font-title);font-weight:700}
p,.spec,.repair-list li,.review,.why p,.cat p{font-family:var(--font-text);font-size:19px;line-height:1.8}
.container{max-width:1150px;margin:auto;padding:0 18px}
a{text-decoration:none;color:inherit}
.topbar{background:#0b1437;color:#cbd5ff;font-size:14px;padding:7px 0}
.topbar-inner{display:flex;justify-content:space-between}
.topbar-phone{letter-spacing:1px}
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 5px 20px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:12px}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#ff6a00,#ff2d55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;animation:logoPulse 2.5s ease-in-out infinite}
.logo h1{font-size:28px;color:#0b1437;line-height:1.2}
.logo small{display:block;line-height:1.6}
.manager{color:#d35400;font-size:13.5px;font-weight:700}
.degree{color:#6b7699;font-size:12px}
.nav{display:flex;gap:18px;font-size:15px;font-weight:600}
.nav a{padding:6px 4px;color:#33415e;position:relative}
.nav a::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:#ff5a00;transition:.3s}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav a.active,.nav a:hover{color:#ff5a00}
.header-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-block;padding:11px 22px;border-radius:12px;font-weight:700;font-size:15px;font-family:var(--font-body);border:2px solid transparent;cursor:pointer;transition:.25s;text-align:center}
.btn-primary{background:linear-gradient(135deg,#ff6a00,#ff2d2d);background-size:200% 200%;color:#fff;box-shadow:0 8px 20px rgba(255,90,0,.3);animation:gradientMove 4s ease infinite}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 28px rgba(255,90,0,.45)}
.btn-outline{border-color:#0b1437;color:#0b1437;background:#fff}
.btn-outline:hover{background:#0b1437;color:#fff;transform:translateY(-2px)}
.btn-dark{background:#0b1437;color:#fff;width:100%;margin-top:10px}
.btn-dark:hover{background:#ff5a00;transform:translateY(-2px)}
.btn-outline-light{border-color:#fff;color:#fff}
.btn-outline-light:hover{background:#fff;color:#d61e4a}
.menu-btn{display:none;background:#0b1437;color:#fff;border:none;border-radius:10px;padding:8px 12px;font-size:18px}
.manager-bar{background:linear-gradient(90deg,#0b1437,#273a8a,#0b1437);background-size:200% auto;color:#ffd9a8;text-align:center;padding:9px 10px;font-size:14.5px;animation:gradientMove 6s linear infinite}
.manager-bar b{color:#fff}
.pulse-dot{display:inline-block;width:9px;height:9px;background:#22ff88;border-radius:50%;margin-left:8px;animation:blink 1.2s infinite}
.hero{background:radial-gradient(800px 400px at 20% 10%,#ffe3c7,transparent),linear-gradient(180deg,#0b1437 0%,#17265e 100%);color:#fff;padding:55px 0 60px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:100px;font-size:13px;display:inline-block;margin-bottom:12px;animation:fadeDown 1s ease both}
.badge.light{background:#fff3e8;color:#a33d00;border-color:#ffd6ad;animation:none}
.hero-text h2{font-size:34px;line-height:1.6;margin:10px 0 12px}
.hero-text h2 span{color:#ffb020;display:inline-block;animation:glowText 2s ease-in-out infinite}
.hero-text p{color:#cbd5ff;font-size:19px}
.hero-btns{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap}
.hero-stats{display:flex;gap:14px;margin-top:10px}
.stat-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:10px 18px;text-align:center;flex:1;transition:.3s}
.stat-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.15)}
.hero-stats b{display:block;font-size:22px;color:#ffb020;font-family:Tahoma}
.hero-stats span{font-size:13px;color:#dbe4ff}
.hero-visual{position:relative}
.laptop-mock{position:relative;animation:floatY 4s ease-in-out infinite}
.laptop-screen{background:#fff;color:#1a2340;border-radius:18px 18px 0 0;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.screen-top{background:#0b1437;color:#fff;font-size:13px;border-radius:10px;padding:8px 12px;text-align:center;margin-bottom:12px}
.screen-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.s-card{background:#f1f4ff;border:1px solid #e0e6ff;border-radius:12px;padding:10px;text-align:center;font-size:12px;transition:.3s}
.s-card:hover{transform:scale(1.05)}
.s-card i{font-size:22px}
.s-card b{display:block;font-size:13px;font-family:var(--font-body)}
.screen-off{margin-top:12px;background:linear-gradient(135deg,#ff6a00,#ff2d55);background-size:200% auto;color:#fff;text-align:center;border-radius:10px;padding:10px;font-weight:800;animation:gradientMove 3s linear infinite}
.laptop-base{height:14px;background:#c6cede;border-radius:0 0 18px 18px}
.float{position:absolute;background:#fff;color:#0b1437;font-size:13px;font-weight:700;padding:8px 14px;border-radius:100px;box-shadow:0 10px 25px rgba(0,0,0,.3);animation:floatY 3s ease-in-out infinite}
.f1{top:-12px;left:-8px}.f2{bottom:20px;right:-10px;animation-delay:1.2s}
.trust{background:#fff;border-bottom:1px solid #eee}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 18px;font-size:14px}
.trust-grid div{background:#f6f7fb;border-radius:12px;padding:10px 14px;transition:.3s}
.trust-grid div:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.08)}
.trust-grid b{display:block;font-family:var(--font-body)}
.trust-grid span{color:#666;font-size:16px}
.section{padding:55px 0}
.gray{background:#eef1f8}
.sec-head{text-align:center;margin-bottom:26px}
.sec-head h3{font-size:30px;color:#0b1437}
.sec-head p{color:#6b7699}
.cats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat{background:#fff;border-radius:18px;padding:22px;border:1px solid #e8ecf7;transition:.35s}
.cat:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 18px 40px rgba(11,20,55,.12);border-color:#ffb020}
.cat-icon{font-size:36px;background:#fff4e6;width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:16px;margin-bottom:10px;animation:wiggle 4s ease-in-out infinite}
.cat h4{font-size:19px}
.cat p{font-size:18px;color:#6b7699;margin:6px 0 8px}
.cat a{color:#ff5a00;font-weight:700;font-size:14px}
.repair-cat{background:linear-gradient(135deg,#0b1437,#273a8a);color:#fff;border:none}
.repair-cat p{color:#cbd5ff}
.filter{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.filter button{border:1px solid #cbd5ff;background:#fff;padding:7px 18px;border-radius:100px;cursor:pointer;font-family:inherit;transition:.25s}
.filter button.active{background:#0b1437;color:#fff;transform:scale(1.05)}
#countdown{margin-top:8px}
#timer{background:#ff2d55;color:#fff;padding:2px 12px;border-radius:8px;letter-spacing:1px;font-family:Tahoma;animation:blink 1s infinite}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.product{background:#fff;border-radius:18px;padding:18px;position:relative;border:1px solid #e8ecf7;transition:.35s}
.product:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.off{position:absolute;top:12px;left:12px;background:#ff2d55;color:#fff;font-size:12px;font-weight:800;padding:3px 10px;border-radius:100px;font-family:Tahoma;animation:logoPulse 2s infinite}
.p-img{font-size:52px;text-align:center;background:#f1f4ff;border-radius:14px;padding:14px;margin-bottom:10px;transition:.3s}
.product:hover .p-img{transform:scale(1.08) rotate(-2deg)}
.product h4{font-size:16px;font-family:var(--font-body)}
.spec{font-size:17px;color:#6b7699;display:block;margin:4px 0;font-family:Tahoma}
.price s{color:#999;font-size:13px;display:block;font-family:Tahoma}
.price b{color:#0b1437;font-size:17px;font-family:Tahoma}
.repair{background:linear-gradient(135deg,#ff6a00,#d61e4a);background-size:200% auto;padding:55px 0;color:#fff;animation:gradientMove 8s ease infinite}
.repair-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.repair-info h3{font-size:30px;margin:8px 0}
.repair-list{list-style:none;margin:14px 0;display:grid;gap:8px}
.repair-list li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:8px 12px;border-radius:10px;transition:.3s}
.repair-list li:hover{background:rgba(255,255,255,.25);transform:translateX(-6px)}
.repair-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.repair-btns .btn-primary{background:#0b1437;animation:none;box-shadow:none}
.repair-steps{background:#fff;color:#1a2340;border-radius:20px;padding:22px;animation:floatY 6s ease-in-out infinite}
.repair-steps h4{margin-bottom:12px;font-size:20px}
.step{display:flex;gap:12px;align-items:flex-start;background:#f6f7fb;border-radius:12px;padding:10px 12px;margin-bottom:10px;transition:.3s}
.step:hover{transform:translateX(-5px)}
.step span{width:36px;height:36px;flex-shrink:0;background:#0b1437;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:Tahoma}
.step b{font-size:14.5px;font-family:var(--font-body)}.step p{font-size:17px;color:#666}
.warranty{background:#e8f8ee;border:1px dashed #22a75d;color:#157a42;border-radius:12px;padding:10px;text-align:center;font-size:16px;font-weight:700}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why{background:#fff;border:1px solid #e8ecf7;border-radius:16px;padding:18px;font-size:14px;transition:.3s}
.why:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.why b{font-family:var(--font-body)}
.why p{color:#666;font-size:18px}
.reviews{margin-top:18px;background:#0b1437;color:#fff;border-radius:18px;padding:24px;text-align:center;position:relative;overflow:hidden}
.review{display:none;line-height:2;animation:fadeUp .6s ease}
.review.active{display:block}
.dots{margin-top:12px;display:flex;gap:8px;justify-content:center}
.dot{width:10px;height:10px;border-radius:50%;background:#5a6aa0;cursor:pointer;transition:.3s}
.dot.active{background:#ffb020;width:28px;border-radius:100px}
.cta{background:#0b1437;color:#fff;padding:55px 0}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.cta-grid ul{list-style:none;margin-top:12px;display:grid;gap:8px;font-size:17px;color:#cbd5ff}
.form{background:#fff;color:#1a2340;border-radius:20px;padding:22px}
.form h4{margin-bottom:12px;font-size:20px}
.form input,.form select,.form textarea{width:100%;border:1px solid #d8deef;border-radius:10px;padding:10px 12px;margin-bottom:10px;font-family:var(--font-body);font-size:14px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#ff5a00;outline:none;box-shadow:0 0 0 3px rgba(255,90,0,.15)}
.form-ok{display:none;color:#157a42;background:#e8f8ee;padding:8px;border-radius:10px;margin-top:10px;font-size:14px}
.footer{background:#070d26;color:#aab6dd;padding:40px 0 0;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:18px}
.footer h4{color:#fff;margin-bottom:10px;font-size:19px}
.footer a,.footer span{display:block;margin-bottom:6px}
.copy{text-align:center;border-top:1px solid rgba(255,255,255,.1);margin-top:20px;padding:14px;font-size:13px;font-family:Tahoma}
.whatsapp{position:fixed;bottom:18px;left:18px;width:56px;height:56px;background:#22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 10px 25px rgba(0,0,0,.3);z-index:99;animation:logoPulse 2s infinite}
/* انیمیشن‌ها */
@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes glowText{0%,100%{text-shadow:0 0 0 rgba(255,176,32,0)}50%{text-shadow:0 0 18px rgba(255,176,32,.9)}}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.animate-hero{animation:fadeUp 1s ease both}
.animate-float{animation:fadeUp 1.2s ease both}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:900px){
.hero-grid,.repair-grid,.cta-grid{grid-template-columns:1fr}
.cats-grid,.products-grid,.why-grid,.trust-grid{grid-template-columns:1fr 1fr}
.nav{display:none;position:absolute;top:100%;right:0;left:0;background:#fff;flex-direction:column;padding:14px;box-shadow:0 10px 20px rgba(0,0,0,.1)}
.nav.open{display:flex}
.menu-btn{display:block}
.hero-text h2{font-size:26px}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.cats-grid,.products-grid,.why-grid,.trust-grid,.footer-grid{grid-template-columns:1fr}
.screen-cards{grid-template-columns:1fr}
.hero-stats{flex-wrap:wrap}
}