/* Product landing pages — layered on top of style.css; accent comes from body style */
.p-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--head-h) + 30px) 0 60px;background:radial-gradient(ellipse at 20% 20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%),radial-gradient(ellipse at 85% 85%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 55%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-grid .hero-in{pointer-events:auto}
.pname{font-size:clamp(44px,8vw,96px);line-height:1.1;text-align:right;direction:ltr;background:linear-gradient(90deg,#fff,var(--accent) 60%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px;letter-spacing:-1px}
.tag{font-size:clamp(18px,2.4vw,26px);font-weight:500;margin-bottom:12px}
.dl-row .btn{pointer-events:auto}
.hero .eyebrow,.eyebrow{color:var(--accent)}
.eyebrow::before{background:var(--accent)}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b0f1a}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}
.btn.disabled::after{content:" (به‌زودی)";font-size:12px;margin-inline-start:6px}

/* phone with glow + float */
.phone-wrap{position:relative;display:grid;place-items:center;pointer-events:none}
.phone{width:min(300px,62vw);filter:drop-shadow(0 30px 60px color-mix(in srgb,var(--accent) 45%,transparent));animation:float 6s ease-in-out infinite;transform-style:preserve-3d}
.glow{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.35;filter:blur(40px);animation:pulse 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.45;transform:scale(1.1)}}

.card svg{fill:var(--accent)}
.card:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid3 .reveal:nth-child(3n+2){transition-delay:.12s}
.grid3 .reveal:nth-child(3n){transition-delay:.24s}

/* screenshots */
.shots{background:var(--bg2);overflow:hidden}
.shots-row{display:flex;justify-content:center;gap:28px;align-items:center}
.shot{width:min(240px,28vw);filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));transition:transform .5s}
.shot:nth-child(2){width:min(280px,32vw);transform:translateY(-16px)}
.shot:hover{transform:translateY(-14px) scale(1.04)}

/* steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.steps3 li{padding:26px;border:1px solid var(--line);border-radius:16px;background:rgba(5,7,13,.5);backdrop-filter:blur(4px)}
.steps3 b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0b0f1a;font-size:20px}
.steps3 h3{margin:12px 0 4px}
.steps3 p{color:var(--muted);font-size:15px}
.note{margin-top:26px;color:var(--muted);font-size:14px;border-inline-start:3px solid var(--accent);padding-inline-start:12px}

/* downloads */
.dl{background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--bg2)}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dl-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:30px 26px;border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden;transition:transform .3s,border-color .3s}
.dl-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);transform:translateX(-120%);transition:transform .8s}
.dl-card:hover::before{transform:translateX(120%)}
.dl-card:hover{transform:translateY(-8px);border-color:var(--accent)}
.dl-card b{font-size:22px;position:relative}
.dl-card span{color:var(--muted);position:relative}
.dl-card em{font-style:normal;margin-top:10px;font-size:13px;color:var(--accent);position:relative;display:none}
.dl-card.disabled{opacity:.55;pointer-events:none}
.dl-card.disabled em{display:block}

.others{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.other{display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:.3s}
.other:hover{border-color:var(--accent);transform:translateY(-6px)}
.other b{font-size:20px;text-align:right}
.other span{color:var(--muted);font-size:14px}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:right}
  .phone-wrap{order:-1}
  .phone{width:min(220px,55vw)}
  .grid3,.steps3,.dl-grid,.others{grid-template-columns:1fr}
  .shots-row{gap:12px}
}