:root{
  --purple:#5b2a9d; --purple-dark:#36146b; --purple-soft:#f1eafc;
  --yellow:#ffc933; --gold:#d4a017; --blue:#2b6cff; --blue-soft:#e7efff;
  --white:#fff; --text:#26203a; --muted:#7b7590;
  --radius:18px; --shadow:0 8px 24px rgba(91,42,157,.14);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Vazirmatn",Tahoma,sans-serif;color:var(--text);background:linear-gradient(180deg,#fff 0%,var(--purple-soft) 100%);line-height:1.9}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1140px,92%);margin-inline:auto}
.section{padding:40px 0}
.muted{color:var(--muted)}

.nav{background:var(--purple-dark);position:sticky;top:0;z-index:10;border-bottom:3px solid var(--gold)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:baseline;gap:10px}
.brand-fa{font-weight:800;font-size:1.4rem;color:var(--yellow)}
.brand-en{color:#cdb8f5;font-size:.9rem;letter-spacing:1px}
.nav nav a{color:#fff;margin-inline-start:20px;font-weight:600;padding:6px 4px;border-bottom:2px solid transparent}
.nav nav a:hover{border-color:var(--yellow);color:var(--yellow)}

.hero{background:radial-gradient(circle at 20% 20%,var(--blue) 0,transparent 45%),linear-gradient(135deg,var(--purple) 0,var(--purple-dark) 100%);color:#fff;text-align:center;padding:90px 0}
.hero h1{font-size:3rem;margin:0;color:var(--yellow);text-shadow:0 3px 0 rgba(0,0,0,.2)}
.hero-en{letter-spacing:6px;color:#e9dcff;margin:0 0 10px}
.hero-actions{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 26px;border-radius:999px;font-weight:700;transition:.2s}
.btn-gold{background:linear-gradient(135deg,var(--yellow),var(--gold));color:var(--purple-dark)}
.btn-light{background:#fff;color:var(--purple)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

.title{color:var(--purple);position:relative;padding-inline-start:16px;margin:0 0 20px}
.title::before{content:"";position:absolute;inset-inline-start:0;top:12%;height:76%;width:6px;border-radius:6px;background:linear-gradient(var(--yellow),var(--gold))}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;position:relative;transition:.25s;border:1px solid #efe7fb;display:block}
.card:hover{border-color:var(--gold)}
.card h3{margin:10px 0 4px;color:var(--purple-dark)}
.card img,.noimg{border-radius:12px;width:100%;aspect-ratio:4/3;object-fit:cover}
.noimg{background:var(--blue-soft);display:grid;place-items:center;font-size:2.6rem}
.noimg.big{font-size:5rem}
.cat-card{text-align:center;background:linear-gradient(160deg,#fff,var(--blue-soft))}
.cat-card .icon{font-size:2.8rem}
.badge{position:absolute;top:12px;inset-inline-start:12px;background:var(--yellow);color:var(--purple-dark);font-weight:800;padding:2px 12px;border-radius:999px;z-index:2;font-size:.85rem}
.badge.static{position:static;display:inline-block;margin-inline-end:10px}
.price del{color:var(--muted);margin-inline-end:8px}
.price strong{color:var(--blue)}
.big-price{font-size:1.3rem;margin:12px 0}
.tag{display:inline-block;background:var(--purple-soft);color:var(--purple);border-radius:999px;padding:0 12px;font-size:.8rem}

.ad{margin-bottom:16px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:2px solid var(--gold)}
.layout{display:grid;grid-template-columns:240px 1fr;gap:28px}
aside h3{color:var(--purple)}
.side-list{list-style:none;padding:0}
.side-list a{display:block;padding:8px 14px;border-radius:12px}
.side-list a:hover{background:var(--yellow)}
.pager{display:flex;gap:14px;justify-content:center;margin-top:26px}
.pager a{background:var(--purple);color:#fff;padding:4px 18px;border-radius:999px}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.detail-img{border-radius:var(--radius);box-shadow:var(--shadow)}

.crumbs{color:var(--muted)} .crumbs a{color:var(--blue)}
.project-head{display:grid;grid-template-columns:320px 1fr;gap:24px;margin-bottom:30px;align-items:center}
.project-head img{border-radius:var(--radius);box-shadow:var(--shadow)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tabs a{padding:5px 18px;border-radius:999px;background:#fff;border:1px solid var(--purple)}
.tabs a.active,.tabs a:hover{background:var(--purple);color:#fff}
.browser{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:2px solid var(--purple);background:#fff}
.browser-bar{background:var(--purple-dark);padding:8px 14px;display:flex;align-items:center;gap:6px;color:#d9c9f7;font-size:.85rem;direction:ltr}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:var(--yellow)}
.browser-bar i:nth-child(2){background:var(--gold)} .browser-bar i:nth-child(3){background:var(--blue)}
.browser-bar span{margin-left:12px}
.browser iframe{width:100%;height:72vh;border:0;display:block}

.footer{background:var(--purple-dark);color:#d9c9f7;text-align:center;padding:28px 0;margin-top:40px;border-top:3px solid var(--gold)}
.footer strong{color:var(--yellow)}
@media(max-width:760px){.layout,.detail,.project-head{grid-template-columns:1fr}.hero h1{font-size:2.2rem}.nav-inner{flex-direction:column;gap:6px}}

/* پیام‌ها، فرم، درباره ما */
.msg{margin:16px 0;padding:12px 18px;border-radius:12px;font-weight:600}
.msg.success{background:#fff6d6;border:1px solid var(--gold);color:#6b4e00}
.msg.error{background:#ffe9ec;border:1px solid #e05a6d;color:#8a1f2f}
.form{max-width:640px;display:flex;flex-direction:column;gap:6px}
.form label{font-weight:700;color:var(--purple);margin-top:8px}
.form input,.form textarea{font:inherit;padding:10px 14px;border:2px solid #e2d6f6;border-radius:12px;background:#fff}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.form button{margin-top:14px;border:0;cursor:pointer;font:inherit;font-weight:700;align-self:flex-start}
.err{color:#c0283d}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:28px}
.values div{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;border-radius:var(--radius);padding:18px;text-align:center}
.values strong{display:block;color:var(--yellow);font-size:1.15rem}
.nav nav a{margin-inline-start:14px}

/* ================= افکت‌های سه‌بعدی ================= */
body{overflow-x:hidden}
.nav{backdrop-filter:blur(12px);background:rgba(54,20,107,.9)}

/* هیرو */
.hero{position:relative;overflow:hidden;text-align:start;padding:60px 0 80px;min-height:560px;display:flex;align-items:center}
.hero .container{width:min(1140px,92%)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero h1{font-size:3.8rem;line-height:1.3;
  text-shadow:0 1px 0 #d9a91c,0 2px 0 #c99a1d,0 3px 0 #b8890f,0 4px 0 #a67c0c,0 5px 0 #8f6a08,0 6px 0 #7a5906,0 16px 24px rgba(0,0,0,.45)}
.hero-actions{justify-content:flex-start}

/* دکمه‌های سه‌بعدی */
.btn{transition:transform .15s,box-shadow .15s;position:relative}
.btn-gold{box-shadow:0 5px 0 #9a7208,0 14px 22px rgba(0,0,0,.28)}
.btn-light{box-shadow:0 5px 0 #b9a5e3,0 14px 22px rgba(0,0,0,.2)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 8px 0 #9a7208,0 20px 28px rgba(0,0,0,.3)}
.btn-light:hover{transform:translateY(-3px);box-shadow:0 8px 0 #b9a5e3,0 20px 28px rgba(0,0,0,.25)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.3)}

/* مکعب سه‌بعدی */
.cube-scene{perspective:900px;height:340px;display:grid;place-items:center;position:relative}
.cube{width:170px;height:170px;position:relative;transform-style:preserve-3d;animation:spin 16s linear infinite}
.cube .face{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.35rem;
  border:2px solid rgba(255,255,255,.6);border-radius:14px;box-shadow:inset 0 0 34px rgba(255,255,255,.28)}
.f1{transform:translateZ(85px);background:rgba(91,42,157,.82);color:var(--yellow)}
.f2{transform:rotateY(90deg) translateZ(85px);background:rgba(43,108,255,.82);color:#fff}
.f3{transform:rotateY(180deg) translateZ(85px);background:rgba(212,160,23,.88);color:var(--purple-dark)}
.f4{transform:rotateY(-90deg) translateZ(85px);background:rgba(255,201,51,.9);color:var(--purple-dark)}
.f5{transform:rotateX(90deg) translateZ(85px);background:rgba(255,255,255,.85);color:var(--purple)}
.f6{transform:rotateX(-90deg) translateZ(85px);background:rgba(54,20,107,.9);color:var(--yellow)}
.cube-shadow{position:absolute;bottom:14px;width:190px;height:34px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.45),transparent 70%);animation:pulse 16s linear infinite}
@keyframes spin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
@keyframes pulse{50%{transform:scale(.9)}}

/* کارت‌های سه‌بعدی (تیلت + عمق لایه‌ها) */
.card{transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .18s ease-out,border-color .2s,box-shadow .25s;will-change:transform}
.card:hover{--ty:-8px;box-shadow:0 26px 44px rgba(91,42,157,.3)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.65),transparent 55%)}
.card:hover::after{opacity:.55}
.card img,.card .noimg{transform:translateZ(38px);box-shadow:0 16px 26px rgba(0,0,0,.22)}
.card h3{transform:translateZ(28px)}
.card p,.card .price,.card .tag{transform:translateZ(18px)}
.card .badge{transform:translateZ(64px)}
.card .icon{display:inline-block;transform:translateZ(56px);animation:bob 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 8px rgba(91,42,157,.35))}
@keyframes bob{50%{translate:0 -8px}}
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform}
.project-head img{box-shadow:0 24px 40px rgba(91,42,157,.35)}

/* ظهور سه‌بعدی هنگام اسکرول */
.reveal{opacity:0}
.reveal.in{opacity:1;animation:reveal3d .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d,0s)}
@keyframes reveal3d{
  from{opacity:0;transform:perspective(900px) rotateX(26deg) translateY(50px) translateZ(-140px)}
  to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) translateZ(0)}}

/* قاب مرورگر نمونه‌کار */
.browser-wrap{perspective:1600px;margin:10px 0 20px}
.browser{transform:rotateX(5deg) rotateY(-3deg) scale(.985);transform-origin:50% 0;transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;
  box-shadow:0 40px 60px -20px rgba(54,20,107,.5)}
.browser:hover,.browser:focus-within{transform:none;box-shadow:0 24px 40px rgba(54,20,107,.3)}
.open-full{padding:4px 18px;font-size:.9rem;margin-bottom:12px}
.demo-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}

@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.cube-scene{height:260px}.hero h1{font-size:2.6rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1}
  .card,[data-tilt],.browser{transform:none!important}
}


/* تایپوگرافی فارسی و برجستگی سه‌بعدی برند */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
body{font-family:"Vazirmatn",Tahoma,sans-serif;font-feature-settings:"kern" 1}
.hero h1{font-family:"Vazirmatn",Tahoma,sans-serif;font-weight:900;letter-spacing:-1.5px;color:#fff8d9;-webkit-text-stroke:.45px #ffe9a1;text-shadow:0 1px 0 #f9d76a,0 2px 0 #e9bd43,0 3px 0 #d5a52c,0 4px 0 #bd8c1c,0 5px 0 #a77712,0 6px 0 #80520b,0 7px 0 #613c08,0 9px 0 #4a2b08,0 14px 18px rgba(12,3,28,.45),0 24px 32px rgba(12,3,28,.28);filter:drop-shadow(0 0 18px rgba(255,220,105,.15));animation:brandFloat 4.5s ease-in-out infinite}
.brand-fa{font-family:"Vazirmatn",Tahoma,sans-serif;font-weight:900;text-shadow:0 1px 0 #e6b52e,0 2px 0 #c28d12,0 4px 0 #7b5109,0 7px 12px #10051e88}
@keyframes brandFloat{0%,100%{transform:translateY(0) rotateX(0deg)}50%{transform:translateY(-5px) rotateX(2deg)}}
@media(max-width:760px){.hero h1{font-size:2.55rem;text-shadow:0 1px 0 #e9bd43,0 2px 0 #d5a52c,0 3px 0 #a77712,0 5px 0 #613c08,0 10px 18px rgba(12,3,28,.4)}}
@media(prefers-reduced-motion:reduce){.hero h1{animation:none}}