/* Isolated homepage enhancement; index-classic.html retains the previous hero. */
.page-home .hero.hero-devices { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); align-items: center; gap: 24px; padding: 68px max(28px,calc((100vw - 1280px)/2)) 52px; text-align: right; background: var(--feature-gradient); border-radius: clamp(12px, 2vw, 22px); }
.hero-devices .hero-copy { max-width: 600px; margin: 0; position: relative; z-index: 2; }
.page-home .hero-devices h1.hero-title-two-lines { font-size: clamp(24px,2.9vw,42px); letter-spacing: -.6px; }
.page-home .hero-devices .hero-description { margin-inline: 0; max-width: 520px; }
.page-home .hero-devices :is(.button-row,.hero-note) { justify-content: flex-start; }
.devices-showcase { min-width: 0; position: relative; }
.devices-stage { width: 100%; height: clamp(330px,38vw,540px); position: relative; isolation: isolate; }
.devices-stage canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; }
.devices-stage.is-ready canvas { opacity: 1; }
.devices-fallback { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; transition: opacity 300ms ease; }
.devices-stage.is-ready .devices-fallback { opacity: 0; visibility: hidden; }
.devices-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 12px; color: #021024; padding-inline: 12px; }
.device-status::before { content: ''; display: inline-block; width: 7px; height: 7px; background: #052659; border-radius: 50%; margin-inline-end: 7px; }
.devices-toggle { font: inherit; font-size: 12px; color: #021024; border: 1px solid #7da0ca; background: #eff8ff; border-radius: 24px; padding: 9px 14px; min-height: 40px; cursor: pointer; }
.devices-toggle[hidden] { display: none; }
.devices-toggle:hover { background: #c1e8ff; }
@media(min-width:768px) and (max-width:991px) {
 .page-home .hero.hero-devices { gap: 10px; padding: 44px 24px 32px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
 .page-home .hero-devices h1.hero-title-two-lines { font-size: 25px; }
 .devices-stage { height: 340px; }
 .devices-caption { flex-wrap: wrap; }
}
@media(max-width:767px) {
 .page-home .hero.hero-devices { grid-template-columns: 1fr; padding: 32px 18px 26px; gap: 8px; text-align: center; }
 .hero-devices .hero-copy { max-width: 600px; margin-inline: auto; }
 .page-home .hero-devices :is(.button-row,.hero-note) { justify-content: center; }
 .page-home .hero-devices .hero-description { margin-inline: auto; }
 .devices-stage { height: clamp(280px,82vw,440px); }
 .devices-caption { font-size: 11px; padding-inline: 0; }
}
@media(prefers-reduced-motion:reduce) { .devices-stage canvas,.devices-fallback { transition: none; } }
/* CSS depth fallback remains interactive when WebGL is unavailable. */
.css-devices { display: none; position: absolute; width: 540px; height: 410px; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(var(--device-scale,1)); transform-origin: center; direction: ltr; }
.devices-stage.has-css-devices:not(.is-ready) .css-devices { display: block; }
.devices-stage.has-css-devices .devices-fallback { opacity: 0; visibility: hidden; }
.css-laptop { position: absolute; width: 420px; height: 340px; left: 28px; top: 34px; transform: perspective(1000px) rotateY(calc(-15deg + var(--css-y,0deg))) rotateX(calc(5deg + var(--css-x,0deg))); transition: transform 400ms ease; transform-style: preserve-3d; z-index: 2; }
.css-laptop-lid { width: 420px; height: 270px; padding: 10px 10px 16px; border-radius: 17px 17px 9px 9px; background: linear-gradient(135deg,#c1e8ff,#052659 45%,#7da0ca 60%,#052659); box-shadow: 4px 3px 0 #5483b3,0 24px 36px #02102420; position: relative; }
.css-laptop-lid::before { content: ''; position: absolute; top: 5px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #021024; }
.css-laptop-lid::after { content: 'BJcode'; position: absolute; bottom: 2px; inset-inline: 0; text-align: center; color: #021024; font: 8px sans-serif; }
.css-screen { height: 100%; overflow: hidden; border-radius: 7px; background: #eff8ff; border: 3px solid #021024; direction: rtl; }
.css-screen-nav { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; font-size: 7px; color: #021024; }
.css-screen-nav b { color: #021024; font: 800 15px sans-serif; }
.css-screen-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 13px; background: linear-gradient(120deg,#c1e8ff,#c1e8ff 55%,#c1e8ff); }
.css-screen-hero small { color: #021024; font-size: 8px; }
.css-screen-hero strong { font-size: 18px; color: #021024; }
.css-screen-hero em { font-size: 16px; font-style: normal; font-weight: 700; color: #021024; }
.css-screen-cta { background: #052659; color: #c1e8ff; padding: 5px 14px; border-radius: 5px; font-size: 8px; }
.css-screen-services { display: flex; gap: 7px; padding: 12px; font-size: 9px; color: #021024; }
.css-screen-services span { flex: 1; padding: 12px 5px; border-radius: 7px; background: #c1e8ff; text-align: center; }
.css-screen-services span:nth-child(2) { background: #c1e8ff; }.css-screen-services span:nth-child(3) { background: #eff8ff; }
.css-laptop-base { position: absolute; width: 454px; height: 140px; top: 265px; left: -17px; transform: perspective(800px) rotateX(60deg); transform-origin: top; border-radius: 6px 6px 20px 20px; background: linear-gradient(110deg,#7da0ca,#c1e8ff 45%,#5483b3); border: 1px solid #5483b3; box-shadow: 0 8px 0 #5483b3,0 12px 0 #7da0ca; padding: 12px 24px; }
.css-keyboard { height: 60px; border: 4px solid #7da0ca; border-radius: 5px; background: repeating-linear-gradient(0deg,transparent 0 10px,#7da0ca 10px 14px),repeating-linear-gradient(90deg,#052659 0 22px,#7da0ca 22px 27px); }
.css-trackpad { width: 120px; height: 42px; margin: 9px auto; background: #7da0ca; border: 1px solid #5483b3; border-radius: 5px; }
.css-phone { position: absolute; left: 404px; top: 134px; width: 110px; height: 227px; padding: 6px; border: 2px solid #5483b3; background: #021024; border-radius: 22px; box-shadow: 5px 5px 0 #5483b3,12px 24px 35px #02102426; transform: perspective(800px) rotateY(-15deg) rotateZ(8deg) translateY(var(--css-float,0px)); transition: transform 500ms ease; z-index: 3; }
.css-phone-content { height: 100%; border-radius: 15px; background: linear-gradient(145deg,#c1e8ff,#eff8ff 60%,#c1e8ff); display: flex; flex-direction: column; align-items: center; padding: 21px 5px 8px; color: #021024; gap: 7px; direction: rtl; }
.css-phone-content b { color: #021024; font: 800 13px sans-serif; margin-bottom: 10px; }.css-phone-content small { font-size: 10px; }.css-phone-content strong { font-size: 15px; }.css-phone-content span { font-size: 8px; color: #021024; }.css-phone-content em { font-size: 7px; background: #052659; color: #c1e8ff; padding: 4px 10px; border-radius: 4px; font-style: normal; }.css-phone-content div { width: 80%; height: 16px; background: #c1e8ff; border-radius: 4px; }.css-phone-content div:nth-last-child(2) { background: #c1e8ff; }.css-phone-content div:last-child { background: #c1e8ff; }
.css-phone-island { position: absolute; top: 11px; left: 38px; width: 32px; height: 6px; background: #021024; border-radius: 8px; }
.css-device-shadow { position: absolute; left: 10px; bottom: 20px; width: 490px; height: 60px; background: radial-gradient(ellipse,#05265940,transparent 70%); filter: blur(10px); z-index: 0; }
.devices-stage.is-static .css-laptop { transform: perspective(1000px) rotateY(-15deg) rotateX(5deg); }.devices-stage.is-static .css-phone { transform: perspective(800px) rotateY(-15deg) rotateZ(8deg); }
@media(prefers-reduced-motion:reduce) { .css-laptop,.css-phone { transition: none; } }
.css-laptop { transform: perspective(1000px) rotateY(calc(-15deg + var(--css-y,0deg) + var(--css-scroll,0deg))) rotateX(calc(5deg + var(--css-x,0deg))); }
@keyframes device-float { from { translate: 0 -22px; rotate: 0 0 1 -6deg; } to { translate: 0 22px; rotate: 0 0 1 6deg; } }
@media(prefers-reduced-motion:no-preference) { .hero-in-view .devices-stage:not(.is-static) .css-phone { animation: device-float 3.8s ease-in-out infinite alternate; } }
.devices-stage.is-static .css-phone { animation: none; }

/* Idle rotation composes with pointer/scroll transforms rather than replacing them. */
@keyframes device-idle-turn {
  from { rotate: 0 1 0 -13deg; translate: 0 -7px; }
  to { rotate: 0 1 0 13deg; translate: 0 7px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-in-view .devices-stage:not(.is-static) .css-laptop {
    animation: device-idle-turn 5s ease-in-out infinite alternate;
  }
}
.devices-stage.is-static .css-laptop,
.devices-stage.is-static .css-phone { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .css-laptop, .css-phone { animation: none !important; rotate: none; translate: none; }
  .css-laptop { transform: perspective(1000px) rotateY(-15deg) rotateX(5deg); }
  .css-phone { transform: perspective(800px) rotateY(-15deg) rotateZ(8deg); }
}

/* Brighter hardware and a small, deliberately composed screen design. */
.css-laptop-lid { background: linear-gradient(130deg,#7da0ca,#052659 40%,#5483b3 75%,#052659); box-shadow: 4px 3px 0 #052659,0 24px 36px #05265929; }
.css-laptop-base { background: linear-gradient(115deg,#5483b3,#7da0ca 45%,#5483b3); border-color: #5483b3; box-shadow: 0 8px 0 #5483b3,0 12px 0 #5483b3; }
.css-trackpad { background: #7da0ca; border-color: #5483b3; }
.css-phone { background: linear-gradient(145deg,#7da0ca,#052659); border-color: #c1e8ff; box-shadow: 5px 5px 0 #052659,12px 24px 35px #0526592b; }
.css-screen-nav { padding: 8px 12px; }.css-screen-nav b { font-weight: 800; }
.css-screen-hero { background: radial-gradient(circle at 92% 20%,#eff8ff18,transparent 55%),linear-gradient(120deg,#052659,#103b58); gap: 7px; padding: 14px 8px; }
.css-screen-hero small { color: #c1e8ff; font-size: 8px; font-weight: 500; }
.css-screen-hero strong { color: #c1e8ff; font-size: 24px; font-weight: 800; }
.css-screen-hero em { color: #c1e8ff; font-size: 21px; font-weight: 800; }
.css-screen-cta { background: #c1e8ff; color: #021024; font-weight: 700; border-radius: 7px; }
.css-screen-services { padding: 11px; gap: 8px; font-weight: 700; }
.css-screen-services span { background: #c1e8ff; color: #021024; }
.css-screen-services span:nth-child(2) { background: #c1e8ff; color: #021024; }
.css-screen-services span:nth-child(3) { background: #c1e8ff; color: #021024; }
.css-phone-content { background: linear-gradient(155deg,#052659,#103b58); padding: 22px 5px 8px; gap: 6px; }
.css-phone-content b { color: #c1e8ff; margin-bottom: 5px; }
.css-phone-content small { color: #c1e8ff; font-size: 9px; }
.css-phone-content strong { color: #c1e8ff; font-size: 17px; line-height: 1.6; text-align: center; font-weight: 800; }
.css-phone-content span { color: #c1e8ff; font-size: 6px; }
.css-phone-content em { background: #c1e8ff; color: #021024; font-weight: 700; margin-bottom: 3px; }
.css-phone-content div { height: auto; min-height: 17px; padding: 2px 1px; text-align: center; font-size: 7px; font-weight: 600; color: #021024; background: #c1e8ff; }
.css-phone-content div:nth-last-child(2) { background: #c1e8ff; color: #021024; }
.css-phone-content div:last-child { background: #c1e8ff; color: #021024; }

.css-screen-hero strong,.css-screen-hero em { line-height: 1.45; }
.css-screen-hero small,.css-screen-cta { line-height: 1.5; }
.css-phone-content { padding: 20px 4px 6px; gap: 4px; line-height: 1.4; }
.css-phone-content b { margin-bottom: 2px; }
.css-phone-content strong { font-size: 15px; line-height: 1.35; }
.css-phone-content em { margin-bottom: 2px; }
.css-phone-content div { min-height: 15px; font-size: 6.5px; }

/* The device composition is present at first paint; no unrelated hero image swap. */
.devices-stage { --device-scale: .8; }
@media(max-width:767px) { .devices-stage { --device-scale: .5; } }

.page-home .hero-devices :is(h1,.hero-description,.hero-note,.eyebrow,.devices-caption) {
  color: var(--surface);
}
.page-home .hero.hero-devices h1.hero-title-two-lines > span:last-child { color: #75e0d0; }
.hero-devices .status-dot { background: var(--teal); }
.hero-devices .button.primary { background: #f5bd78; border-color: #f5bd78; color: var(--blue); }
.hero-devices .button.primary:hover { background: #ffc57a; }
.hero-devices .button.secondary { background: transparent; border-color: var(--surface); color: var(--surface); }
.hero-devices .button.secondary:hover { background: #ffffff1a; }
.hero-devices :is(a,button):focus-visible { outline-color: var(--surface); }
.css-screen-hero em,.css-phone-content strong { color: var(--teal); }
.css-screen-cta,.css-phone-content em { background: var(--coral); color: var(--blue); }

html[lang="fa"] body.page-home .hero.hero-devices h1.hero-title-two-lines > span:first-child {
  color: #f5fafc;
}

@media (min-width: 768px) {
  html[lang="fa"] body.page-home.glass-ready .site-header .brand {
    padding: 6px;
    border-radius: 14px;
    background: #f5fafc;
    color: #052659;
    box-shadow: 0 4px 14px #05265920;
  }
}