/* =====================================================================
   IGNITE ADDITIONS — 3D device mockups, Premium Builds section,
   pricing "what's inside" popups.
===================================================================== */

/* ---------- 3D device mockups (Mac + phone) ---------- */
.dev-duo{position:relative;width:100%;aspect-ratio:5/4;perspective:1600px}
.dev-duo::before{
  content:"";position:absolute;inset:18% 12%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(40,230,161,.3),transparent);filter:blur(34px);
}
.dev-duo .dev-mac{position:absolute;right:0;top:12%;width:84%}
.dev-duo .dev-phone{position:absolute;left:1%;bottom:4%;width:27%;z-index:3;transform:rotateY(14deg) rotateZ(-5deg)}

.dev-mac{
  position:relative;z-index:1;transform-style:preserve-3d;
  transform:rotateY(-12deg) rotateX(4deg);
  transition:transform .7s var(--ease);
  animation:devFloat 6s ease-in-out infinite;
}
.dev-duo:hover .dev-mac{transform:rotateY(-4deg) rotateX(2deg)}
.dev-mac-lid{
  position:relative;padding:9px 9px 6px;border-radius:14px 14px 4px 4px;
  background:linear-gradient(155deg,#3a3a3e,#1a1a1c 20%,#0a0a0b 55%,#1c1c1f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 40px 80px -24px rgba(0,0,0,.75),0 0 60px -10px rgba(40,230,161,.25);
}
.dev-mac-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:14%;height:7px;border-radius:0 0 7px 7px;background:#050505;z-index:4}
.dev-mac-screen{aspect-ratio:16/10;border-radius:6px}
.dev-mac-base{
  position:relative;height:11px;margin:0 -7%;border-radius:2px 2px 14px 14px;
  background:linear-gradient(180deg,#5a5a60,#1d1d20);
  box-shadow:0 22px 34px -12px rgba(0,0,0,.8);
}
.dev-mac-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:14%;height:4px;border-radius:0 0 6px 6px;background:rgba(0,0,0,.4)}

.dev-phone{
  position:relative;aspect-ratio:9/19.3;padding:2.8%;border-radius:17%/8%;
  background:linear-gradient(155deg,#3a3a3e 0%,#1a1a1c 18%,#0a0a0b 45%,#1c1c1f 78%,#38383c 100%);
  box-shadow:inset 1px 1px 2px rgba(255,255,255,.2),inset -1px -1px 3px rgba(0,0,0,.85),0 30px 60px -16px rgba(0,0,0,.8),0 0 40px -6px rgba(40,230,161,.3);
  animation:devFloat 6s ease-in-out infinite -2.5s;
  transition:transform .7s var(--ease);
}
.dev-phone-island{position:absolute;top:3.4%;left:50%;transform:translateX(-50%);width:30%;height:3%;border-radius:99px;background:#000;z-index:4}
.dev-phone-screen{width:100%;height:100%;border-radius:14%/6.6%}

.dev-screen{position:relative;overflow:hidden;background:#07100c}
.dev-screen > img,.dev-screen > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:2}
.dev-ph{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;padding:8%;text-align:center;color:var(--accent-bright);
  background:
    radial-gradient(circle at 50% 35%,rgba(40,230,161,.22),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 12px),#0b0f0d;
}
.dev-ph b{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.dev-ph small{font-size:.6rem;color:var(--muted-2);word-break:break-all}
.dev-phone .dev-ph b{font-size:.58rem}
.dev-phone .dev-ph small{font-size:.48rem}
@keyframes devFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media(prefers-reduced-motion:reduce){.dev-mac,.dev-phone{animation:none}}

/* solo devices (used inside popups) */
.dev-mac.is-solo{width:100%}
.dev-phone.is-solo{width:150px;margin:0 auto;transform:rotateY(-10deg) rotateX(3deg)}
.plan-item:hover .dev-phone.is-solo{transform:rotateY(0) rotateX(0)}

/* industries page device visual */
.industry-duo{max-width:560px;margin:0 auto}

/* ---------- Premium Builds section ---------- */
.premium-stage{max-width:900px;margin:2.5rem auto 0}
.premium-stage .dev-duo{aspect-ratio:16/10.5}
.premium-caption{text-align:center;color:var(--muted-2);font-size:.9rem;margin:2.25rem auto 1.5rem;max-width:560px}
.premium-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
@media(max-width:640px){
  .premium-stage .dev-duo{aspect-ratio:4/3.4}
  .premium-stage .dev-duo .dev-phone{width:30%}
}

/* ---------- Pricing: clickable cards + "See What's Inside" ---------- */
.aw-plan-card.is-peekable{cursor:pointer;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.aw-plan-card.is-peekable:hover{border-color:rgba(40,230,161,.55);box-shadow:0 24px 60px -24px rgba(0,0,0,.6),0 0 36px -8px rgba(40,230,161,.35)}
.plan-peek-btn{
  margin-top:1.25rem;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1rem;border-radius:20px;font-size:.85rem;font-weight:700;cursor:pointer;
  color:var(--accent-bright);border:1px dashed rgba(40,230,161,.5);background:rgba(40,230,161,.06);
  transition:background .25s,border-color .25s;
}
.plan-peek-btn:hover{background:rgba(40,230,161,.15);border-style:solid}
.plan-peek-btn svg{width:16px;height:16px}

/* ---------- Pricing popup ---------- */
.plan-modal-overlay{
  position:fixed;inset:0;z-index:700;display:flex;align-items:flex-start;justify-content:center;
  padding:4vh 1rem;overflow-y:auto;background:rgba(5,6,6,.88);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.plan-modal-overlay.open{opacity:1;pointer-events:auto}
.plan-modal{
  position:relative;width:100%;max-width:1000px;margin:auto 0;
  background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(40,230,161,.14),transparent 70%),var(--bg2);
  border:1px solid rgba(40,230,161,.3);border-radius:22px;
  padding:2.75rem clamp(1.1rem,3vw,2.75rem);
  transform:translateY(26px) scale(.97);transition:transform .45s var(--ease);
}
.plan-modal-overlay.open .plan-modal{transform:none}
.plan-modal-close{
  position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:#fff;font-size:1rem;transition:background .2s,transform .3s;
}
.plan-modal-close:hover{background:rgba(40,230,161,.25);transform:rotate(90deg)}
.plan-modal-head{text-align:center;margin-bottom:2.25rem}
.plan-modal-head .eyebrow-label{justify-content:center}
.plan-modal-head h3{font-family:var(--font-body);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);color:#fff;margin:.5rem 0 .25rem}
.plan-modal-price{color:var(--accent-bright);font-weight:700}
.plan-modal-head p{color:var(--muted);max-width:560px;margin:.75rem auto 0;line-height:1.6}

.plan-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem}
.plan-item{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:1.5rem;
  display:flex;flex-direction:column;gap:1.1rem;transition:border-color .3s;
}
.plan-item:hover{border-color:rgba(40,230,161,.45)}
.plan-item.is-wide{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:2rem}
.plan-item-visual{display:flex;align-items:center;justify-content:center;min-height:230px;perspective:1200px}
.plan-item-num{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bright);font-weight:700}
.plan-item h4{font-family:var(--font-body);font-weight:800;font-size:1.15rem;margin:.25rem 0 .4rem;color:#fff}
.plan-item p{color:var(--muted);font-size:.88rem;line-height:1.6}

.plan-creatives{margin-top:1.75rem}
.plan-creatives h4{font-family:var(--font-body);font-weight:800;font-size:1.15rem;color:#fff;margin:0 0 .35rem;text-align:center}
.plan-creatives > p{color:var(--muted);font-size:.88rem;text-align:center;margin:0 auto 1.25rem;max-width:520px}
.plan-creatives-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.plan-creatives.is-single .plan-creatives-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
.plan-creative{
  position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--panel-border);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;
}
.plan-creative:nth-child(1){transform:rotate(-2deg)}
.plan-creative:nth-child(3){transform:rotate(2deg)}
.plan-creative:hover{transform:translateY(-6px) rotate(0) scale(1.03);border-color:rgba(40,230,161,.6);box-shadow:0 0 40px -6px rgba(40,230,161,.45)}
.plan-creatives.is-single .plan-creative{transform:none}
.plan-creative > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

.plan-modal-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2.5rem}
.plan-modal-ctas .btn{min-width:210px}

@media(max-width:760px){
  .plan-item.is-wide{grid-template-columns:1fr}
  .plan-creatives-grid{grid-template-columns:1fr 1fr}
  .plan-creatives-grid .plan-creative:nth-child(3){grid-column:1/-1;max-width:50%;justify-self:center}
  .plan-modal-ctas .btn{width:100%}
}
/* ---------- popup fixes: lone phone card + uncropped graphics ---------- */
.plan-item.is-wide.is-flip{grid-template-columns:1fr 1.2fr}
.plan-item.is-flip .plan-item-visual{order:2}
.plan-item.is-phone-wide .plan-item-visual{min-height:320px}
.plan-item.is-phone-wide .dev-phone.is-solo{width:170px}

/* designed graphics: show the whole image instead of cropping the sides */
.dev-screen.is-contain > img{object-fit:contain;object-position:center}
.dev-phone .dev-screen.is-contain{background:#0b0f0d}

@media(max-width:760px){
  .plan-item.is-flip .plan-item-visual{order:0}
  .plan-item.is-phone-wide .plan-item-visual{min-height:260px}
}
/* ---------- popup: phone cards always fill the row ---------- */
.plan-items{grid-template-columns:repeat(2,1fr)}
.plan-item.is-wide{grid-column:1/-1}
.plan-item:not(.is-wide) .plan-item-visual{min-height:300px}
.plan-item:not(.is-wide) .dev-phone.is-solo{width:165px}

@media(max-width:760px){
  .plan-items{grid-template-columns:1fr}
}