/* PI AI CREATIVE STUDIO
   RESPONSIVE UI/UX UPGRADE V3.2 — HOMEPAGE VISUAL & SALES UX
   Builds on V3.1. UI-only. No DB/provider/story/auth/route changes. */

/* V3.2_SOURCE_VERIFIED */

:root{
  --v32-max:1440px;
  --v32-gutter:clamp(18px,3vw,48px);
  --v32-section-y:clamp(38px,4.8vw,68px);
  --v32-card:#0f1a2d;
  --v32-card2:#0a1324;
  --v32-line:rgba(148,163,184,.17);
  --v32-text:#f8fafc;
  --v32-muted:#aab7ca;
  --v32-blue:#3b82f6;
  --v32-cyan:#22d3ee;
  --v32-violet:#8b5cf6;
  --v32-pink:#ec4899;
  --v32-orange:#f59e0b;
}

/* Overall density */
.section{padding:var(--v32-section-y) 0!important}
.section-head{margin-bottom:clamp(24px,2.5vw,34px)!important}
.section-head h2{
  font-size:clamp(30px,3vw,46px)!important;
  line-height:1.12!important;
  letter-spacing:-.025em;
}
.section-head p{font-size:clamp(14px,1.05vw,17px)!important}

/* Premium header */
.nav{
  background:rgba(5,11,23,.82)!important;
  border-bottom:1px solid rgba(125,211,252,.12)!important;
  box-shadow:0 8px 28px rgba(2,6,23,.18);
}
.nav-inner{min-height:74px!important}
.brand{
  font-size:clamp(16px,1.25vw,20px)!important;
  font-weight:950!important;
  letter-spacing:.02em;
  background:linear-gradient(90deg,#fff,#67e8f9 50%,#a78bfa);
  -webkit-background-clip:text;
  color:transparent;
}
.menu{font-size:14px!important}
.menu>a:not(.btn){color:#d9e2f2}
.menu>a:not(.btn):hover{color:#fff}
.menu .btn{padding-inline:17px}

/* Hero */
.hero{
  padding:clamp(50px,5.5vw,78px) 0 clamp(34px,4vw,56px)!important;
}
.hero-grid{
  min-height:0!important;
  gap:clamp(32px,4.2vw,68px)!important;
}
.badge{
  padding:8px 14px!important;
  box-shadow:inset 0 0 0 1px rgba(103,232,249,.06);
}
.hero h1{
  margin:18px 0 18px!important;
  font-size:clamp(44px,4.7vw,74px)!important;
  max-width:850px;
}
.lead{
  max-width:760px;
  margin-bottom:24px!important;
}
.hero-actions .btn{
  min-height:50px!important;
  padding:13px 22px!important;
  border-radius:14px!important;
}
.hero-image{
  min-height:clamp(330px,31vw,500px)!important;
  max-width:660px!important;
  padding:10px!important;
  border-radius:26px!important;
  box-shadow:0 28px 70px rgba(2,6,23,.36),0 0 50px rgba(59,130,246,.08);
}

/* Three studios becomes the key sales section directly under hero */
.pi-v13-wrap{
  margin:0 auto clamp(34px,4vw,58px)!important;
}
.pi-v13-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(28px,3vw,44px)!important;
  background:
    radial-gradient(circle at 12% 10%,rgba(34,211,238,.16),transparent 33%),
    radial-gradient(circle at 86% 12%,rgba(139,92,246,.19),transparent 30%),
    linear-gradient(145deg,#091426,#111a31 56%,#160f2d)!important;
  border:1px solid rgba(125,211,252,.16)!important;
  box-shadow:0 24px 70px rgba(2,6,23,.28);
}
.pi-v13-pill{font-size:12px!important}
.pi-v13-hero h2{
  margin:14px 0 10px!important;
  max-width:980px;
  font-size:clamp(32px,3.3vw,50px)!important;
}
.pi-v13-hero>p{
  max-width:920px!important;
  color:#c8d4e8!important;
  font-size:clamp(15px,1.1vw,18px)!important;
}
.pi-v13-grid{margin-top:24px!important}
.pi-v13-card{
  min-height:260px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.pi-v13-card:nth-child(1){
  background:linear-gradient(155deg,rgba(14,39,72,.88),rgba(10,20,37,.94))!important;
}
.pi-v13-card:nth-child(2){
  background:linear-gradient(155deg,rgba(55,25,75,.78),rgba(15,20,39,.94))!important;
}
.pi-v13-card:nth-child(3){
  background:linear-gradient(155deg,rgba(67,39,13,.72),rgba(18,18,35,.94))!important;
}
.pi-v13-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 18px 44px rgba(2,6,23,.24);
}
.pi-v13-num{width:38px!important;height:38px!important}
.pi-v13-card h3{
  margin:16px 0 8px!important;
  font-size:clamp(20px,1.6vw,24px)!important;
}
.pi-v13-card p{font-size:14px!important;line-height:1.65!important}
.pi-v13-go{font-size:14px}
.pi-v13-flow{
  margin-top:20px!important;
  padding:13px 16px!important;
  font-size:13px!important;
}

/* Content cards */
.card{
  background:linear-gradient(150deg,rgba(16,27,48,.98),rgba(8,15,28,.98))!important;
  border:1px solid var(--v32-line)!important;
  box-shadow:0 10px 28px rgba(2,6,23,.12);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(103,232,249,.24)!important;
  box-shadow:0 18px 44px rgba(2,6,23,.20);
}
.card h3{font-size:clamp(17px,1.25vw,21px)}
.icon{width:52px!important;height:52px!important;font-size:23px!important}

/* Features */
.features .card{
  min-height:190px;
  display:flex;
  flex-direction:column;
}
.features .card p{margin-bottom:0}

/* Demo */
.video-grid .card{padding:14px!important}
.video-grid video{border-radius:16px!important}
.video-grid .card h3{margin:14px 4px 6px}
.video-grid .card p{margin:0 4px 6px}

/* Learning */
.learning-grid .card{
  min-height:210px;
  display:flex;
  flex-direction:column;
}
.learning-grid .card .btn{margin-top:auto;align-self:flex-start}

/* Pricing */
#packages{
  background:
    radial-gradient(circle at 50% 0%,rgba(37,99,235,.10),transparent 34%),
    rgba(15,23,42,.18);
}
.plans{
  align-items:stretch;
}
.plans .card{
  position:relative;
  min-height:330px;
  padding:clamp(22px,2.2vw,32px)!important;
}
.plans .card:has(.small){
  overflow:hidden;
}
.plans .small{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.18);
}
.plans .price{
  margin:10px 0!important;
  font-size:clamp(34px,3vw,46px)!important;
  letter-spacing:-.03em;
}
.plans .benefits{margin:14px 0 22px}
.plans .btn{
  width:100%;
  min-height:48px!important;
  border-radius:13px!important;
}

/* Testimonials / FAQ / CTA */
.testimonial-grid .card{min-height:190px}
.faq{max-width:980px!important}
.faq details{
  padding:18px 20px!important;
  border-color:rgba(148,163,184,.16)!important;
}
.cta{
  padding:clamp(38px,4vw,58px) clamp(22px,4vw,54px)!important;
  box-shadow:0 24px 70px rgba(2,6,23,.20);
}
.cta h2{
  margin-top:0;
  font-size:clamp(30px,3vw,46px);
}
.cta .btn{min-height:50px;padding-inline:24px}

/* Footer */
footer{padding:32px 0!important}
.footer-grid{align-items:start}
.footer-grid h3{margin-top:0;color:#f8fafc}

/* Tablet */
@media (max-width:1199px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:920px){
  .hero{padding-top:42px!important}
  .hero-image{max-width:720px!important}
  .pi-v13-wrap{margin-bottom:34px!important}
  .pi-v13-grid{grid-template-columns:1fr!important}
  .pi-v13-card{min-height:220px!important}
}

/* Mobile */
@media (max-width:700px){
  .nav-inner{min-height:62px!important}
  .hero{padding:36px 0 28px!important}
  .hero h1{
    margin:14px 0!important;
    font-size:clamp(34px,10vw,48px)!important;
  }
  .hero-image{min-height:240px!important}
  .pi-v13-wrap{margin:0 auto 28px!important}
  .pi-v13-hero{padding:20px!important}
  .pi-v13-card{min-height:200px!important}
  .section{padding:38px 0!important}
  .section-head{margin-bottom:22px!important}
  .features .card,.learning-grid .card,.plans .card,.testimonial-grid .card{min-height:auto}
  .plans .card{padding:22px!important}
  .cta{padding:30px 18px!important}
}

@media (prefers-reduced-motion:reduce){
  .card,.pi-v13-card{transition:none!important}
}