/*
  PostPilot v8.2 CSS Background System Only
  -----------------------------------------
  CSS is used for atmosphere, depth and polish only:
  - dark gradients
  - subtle glow orbs
  - faint grid overlays
  - glass panels
  - card borders/depth
  - simple icon badges
  - button/pricing/CTA glow

  CSS does not fake photos, screenshots or social-media images.
*/

:root{
  --pp-bg:#05080d;
  --pp-bg2:#07101d;
  --pp-card:#0a1422;
  --pp-card2:#0e192a;
  --pp-line:rgba(255,255,255,.12);
  --pp-blue:#386cff;
  --pp-blue2:#2f80ff;
  --pp-purple:#8f5cff;
  --pp-green:#35d982;
}

.pp-clean-bg{
  background:
    radial-gradient(circle at 18% 8%,rgba(47,128,255,.15),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(143,92,255,.11),transparent 30%),
    linear-gradient(180deg,#05080d 0%,#07101d 40%,#03070d 100%)!important;
}
.pp-clean-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:54px 54px;
  opacity:.42;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 70%);
}
.pp-clean-bg::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.025),transparent 26%),
    radial-gradient(circle at 8% 70%,rgba(47,128,255,.07),transparent 34%),
    radial-gradient(circle at 94% 76%,rgba(143,92,255,.07),transparent 36%);
}

.brand-logo{
  display:block;
  height:30px;
  width:auto;
  max-width:230px;
  object-fit:contain;
}

/* Background polish by section */
.hero,.steps,.industry-showcase,.mobile-preview,.pricing,.final-cta{
  position:relative;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:72%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 73% 45%,rgba(56,108,255,.17),transparent 32%),
    radial-gradient(circle at 20% 22%,rgba(47,128,255,.10),transparent 30%),
    linear-gradient(180deg,rgba(56,108,255,.06),transparent);
}
.steps::before,.industry-showcase::before,.pricing::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 4%,rgba(56,108,255,.07),transparent 32%),
    linear-gradient(180deg,transparent,rgba(255,255,255,.012),transparent);
}

/* Clean hero product panel */
.clean-hero-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-panel{
  width:min(780px,100%);
  padding:24px;
  border-radius:30px;
  background:
    radial-gradient(circle at 55% 16%,rgba(56,108,255,.14),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 36px 90px rgba(0,0,0,.40),0 0 42px rgba(56,108,255,.12);
}
.product-browser{
  overflow:hidden;
  border-radius:22px;
  background:#07101a;
  border:1px solid rgba(94,130,255,.44);
  box-shadow:0 24px 65px rgba(0,0,0,.34);
}
.product-top{
  display:grid;
  grid-template-columns:11px 11px 11px 1fr;
  gap:8px;
  align-items:center;
  padding:15px 18px;
  background:linear-gradient(180deg,#172132,#0c1420);
}
.product-top span{
  width:10px;height:10px;border-radius:50%;display:block;background:#56657a;
}
.product-top span:first-child{background:#ff5f66}
.product-top span:nth-child(2){background:#ffc45b}
.product-top span:nth-child(3){background:#39d98a}
.product-url{
  justify-self:end;
  max-width:380px;
  width:100%;
  padding:9px 14px;
  border-radius:9px;
  background:#f8fbff;
  color:#152033;
  font-weight:850;
  font-size:14px;
}
.product-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  padding:24px;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(135deg,#080d16,#111b2b 58%,#07101b);
  background-size:34px 34px,34px 34px,auto;
}
.source-card,.generated-stack article{
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 45px rgba(0,0,0,.24);
}
.source-card{
  padding:24px;
}
.micro-label{
  margin:0 0 12px;
  color:#7ea3ff;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:900;
}
.source-card h3{
  margin:0 0 12px;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.05em;
}
.source-card p,.generated-stack p{
  color:#b7c2d4;
  line-height:1.55;
}
.source-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}
.source-tags span{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(56,108,255,.12);
  border:1px solid rgba(103,139,255,.22);
  color:#dce7ff;
  font-size:12px;
  font-weight:800;
}
.generated-stack{
  display:grid;
  gap:14px;
}
.generated-stack article{
  padding:18px;
}
.generated-stack strong{
  display:block;
  margin-bottom:6px;
}
.generated-stack article:nth-child(1){border-color:rgba(57,114,255,.46)}
.generated-stack article:nth-child(2){border-color:rgba(143,92,255,.40)}
.generated-stack article:nth-child(3){border-color:rgba(53,217,130,.36)}

/* Plain cards and simple accents */
.step-card,.mini-social,.industry-css-grid article,.price-card,.benefit,.mobile-css-shot,.clean-flow-preview article{
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.24)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.asset-panel::before,.asset-grid-glow,.css-spark,.css-card-image,.css-thumb,.thumb{
  display:none!important;
}
.card-accent{
  height:4px;
  width:100%;
  margin-top:auto;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(56,108,255,.82),rgba(143,92,255,.52),rgba(53,217,130,.32));
}
.mini-social{
  min-height:230px!important;
}

/* Simple CSS/SVG-style icon badges */
.asset-step-icon,.industry-icon,.benefit-icon{
  display:grid!important;
  place-items:center;
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(56,108,255,.15),rgba(255,255,255,.035))!important;
  border:1px solid rgba(103,139,255,.26)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.20)!important;
  position:relative;
  color:transparent!important;
  font-size:0!important;
}
.asset-step-icon::before,.asset-step-icon::after,.industry-icon::before,.industry-icon::after,.benefit-icon::before,.benefit-icon::after{
  content:"";
  position:absolute;
}
.asset-paste::before{width:27px;height:21px;border:2px solid rgba(255,255,255,.86);border-radius:5px}
.asset-paste::after{width:15px;height:2px;background:rgba(255,255,255,.72);box-shadow:0 7px 0 rgba(255,255,255,.48)}
.asset-style::before{width:30px;height:3px;border-radius:999px;background:#fff;box-shadow:0 -10px 0 rgba(255,255,255,.75),0 10px 0 rgba(255,255,255,.55)}
.asset-style::after{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--pp-blue),var(--pp-purple));box-shadow:-10px -10px 0 rgba(143,92,255,.9),11px 10px 0 rgba(47,128,255,.9)}
.asset-download::before{width:23px;height:29px;border:2px solid rgba(255,255,255,.84);border-radius:5px}
.asset-download::after{width:15px;height:12px;border-left:2px solid rgba(255,255,255,.78);border-bottom:2px solid rgba(255,255,255,.78);transform:rotate(-45deg);top:18px}

.icon-cafe::before,.icon-beauty::before,.icon-trades::before,.icon-cakes::before,.icon-fitness::before,.icon-retail::before{
  width:24px;height:24px;border:2px solid #fff;border-radius:7px;
}
.icon-cafe::after{width:8px;height:10px;border:2px solid #fff;border-left:0;border-radius:0 8px 8px 0;right:10px}
.icon-beauty::before{height:3px;border:0;background:#fff;transform:rotate(-35deg);border-radius:999px}
.icon-trades::before{height:6px;border:0;background:#fff;transform:rotate(-38deg);border-radius:999px}
.icon-cakes::before{height:17px;border:0;background:#fff;border-radius:6px 6px 10px 10px;top:23px}
.icon-fitness::before{height:8px;border-top:3px solid #fff;border-bottom:3px solid #fff;border-left:0;border-right:0;border-radius:0}
.icon-retail::after{width:14px;height:8px;border:2px solid #fff;border-bottom:0;border-radius:9px 9px 0 0;top:13px}

.icon-time::before{width:24px;height:24px;border-radius:50%;border:2px solid #fff}
.icon-time::after{width:9px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);top:22px;left:25px}
.icon-boost::before{width:23px;height:23px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg)}
.icon-boost::after{width:9px;height:9px;border-top:3px solid #fff;border-right:3px solid #fff;right:16px;top:17px}
.icon-small::before{width:25px;height:19px;border:2px solid #fff;border-radius:7px;bottom:15px}
.icon-small::after{width:17px;height:8px;border:2px solid #fff;border-bottom:0;border-radius:10px 10px 0 0;top:13px}
.icon-cancel::before{width:24px;height:24px;border-radius:50%;border:2px solid #fff}
.icon-cancel::after{width:20px;height:2px;background:#fff;transform:rotate(-45deg)}

.industry-css-grid{
  max-width:1180px!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:18px!important;
}
.industry-css-grid article{
  min-height:185px!important;
  position:relative;
}
.industry-css-grid article::after{
  content:"";
  position:absolute;
  left:18px;right:18px;bottom:16px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(56,108,255,.78),rgba(143,92,255,.45),transparent);
}

/* Clean mobile flow cards */
.clean-flow-preview{
  display:grid!important;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  padding:22px!important;
  border-radius:24px;
}
.clean-flow-preview article{
  padding:22px;
  border-radius:20px;
}
.clean-flow-preview span{
  display:grid;
  place-items:center;
  width:36px;height:36px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--pp-blue),var(--pp-purple));
  font-weight:900;
  margin-bottom:22px;
}
.clean-flow-preview h4{
  margin:0 0 10px;
  font-size:18px;
}
.clean-flow-preview p{
  color:#aebbd0;
  line-height:1.5;
  margin:0;
}

/* Pricing and CTA background only */
.price-card{
  background:
    radial-gradient(circle at 50% 0,rgba(56,108,255,.16),transparent 34%),
    linear-gradient(180deg,#111d2d,#07101c)!important;
}
.price-card::before{display:none!important}
.asset-cta,.final-cta{
  background:
    radial-gradient(circle at 84% 50%,rgba(143,92,255,.20),transparent 36%),
    radial-gradient(circle at 55% 52%,rgba(56,108,255,.12),transparent 28%),
    linear-gradient(135deg,#08284a,#07101a 60%,#120b2c)!important;
}
.asset-cta::before,.asset-cta::after{
  display:none!important;
}

/* Subtle hover only */
.step-card,.industry-css-grid article,.price-card{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.step-card:hover,.industry-css-grid article:hover,.price-card:hover{
  transform:translateY(-2px);
  border-color:rgba(103,139,255,.28)!important;
}

/* Responsive */
@media (max-width:1120px){
  .product-body{grid-template-columns:1fr}
  .industry-css-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:760px){
  .brand-logo{height:25px;max-width:178px}
  .product-panel{padding:14px}
  .product-url{font-size:12px}
  .product-body{padding:18px}
  .source-card h3{font-size:24px}
  .industry-css-grid,.clean-flow-preview{grid-template-columns:1fr!important}
  .mini-social{min-height:auto!important}
}




/* v8.3 Final Layout Tidy
   - mobile section simplified
   - preview cards given more breathing room
   - pricing benefits made lighter
   - hero mock-up slightly stronger
   - section spacing tightened
*/

/* Hero balance */
.hero{
  grid-template-columns:minmax(380px,.84fr) minmax(690px,1.16fr)!important;
  gap:52px!important;
}
.product-panel{
  width:min(860px,100%)!important;
  padding:26px!important;
}
.product-body{
  min-height:330px;
}
.source-card h3{
  font-size:31px!important;
}
.generated-stack article{
  padding:20px!important;
}
.generated-stack p{
  margin:0;
}

/* General spacing polish */
.section-pad{
  padding-top:82px!important;
  padding-bottom:82px!important;
}
.steps.section-pad{
  padding-top:76px!important;
  padding-bottom:76px!important;
}
.industry-showcase.section-pad{
  padding-top:72px!important;
  padding-bottom:70px!important;
}
.mobile-preview.section-pad{
  padding-top:58px!important;
  padding-bottom:78px!important;
}
.pricing.section-pad{
  padding-top:76px!important;
  padding-bottom:84px!important;
}

/* Free preview panel tidy */
.demo-panel{
  max-width:1320px!important;
  margin-bottom:62px!important;
  padding:32px!important;
  grid-template-columns:.88fr 1.52fr!important;
  gap:32px!important;
  border-radius:24px!important;
}
.preview-side{
  min-width:0;
}
.preview-head{
  margin-bottom:18px;
}
.preview-cards{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
.mini-social{
  min-height:260px!important;
  padding:20px!important;
  display:flex!important;
  flex-direction:column!important;
}
.mini-social strong{
  margin-bottom:14px;
}
.mini-social p{
  font-size:15px!important;
  line-height:1.6!important;
  margin:0 0 12px!important;
}
.mini-social small{
  margin-top:auto!important;
  margin-bottom:14px!important;
}
.card-accent{
  margin-top:auto!important;
}

/* Industry cards cleaner */
.industry-css-grid{
  max-width:1120px!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:20px!important;
}
.industry-css-grid article{
  min-height:175px!important;
  padding:24px!important;
}
.industry-css-grid h3{
  margin-top:0!important;
}

/* Mobile section: one row only */
.mobile-preview{
  display:grid!important;
  grid-template-columns:minmax(320px,.82fr) minmax(560px,1.18fr)!important;
  gap:48px!important;
  align-items:center!important;
}
.mobile-copy{
  max-width:570px;
}
.clean-flow-preview{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:18px!important;
  padding:24px!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(56,108,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.018))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.27)!important;
}
.clean-flow-preview article{
  min-height:175px;
  padding:24px!important;
  border-radius:20px!important;
}
.clean-flow-preview span{
  margin-bottom:24px!important;
}
.clean-flow-preview h4{
  font-size:18px!important;
  line-height:1.15!important;
}
.clean-flow-preview p{
  font-size:14px!important;
}

/* Pricing: keep main card dominant, make benefits lighter */
.pricing-layout{
  max-width:1120px!important;
  grid-template-columns:1fr 1.18fr 1fr!important;
  gap:30px!important;
  align-items:center!important;
}
.price-card{
  padding:42px!important;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.price-card .btn{
  margin-top:22px!important;
}
.benefit{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px 0!important;
}
.benefit h3{
  font-size:17px!important;
}
.benefit p{
  font-size:14px!important;
  max-width:250px;
}
.benefit-icon{
  width:50px!important;
  height:50px!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,rgba(56,108,255,.12),rgba(255,255,255,.025))!important;
}

/* CTA stronger but still clean */
.final-cta{
  padding-top:64px!important;
  padding-bottom:64px!important;
}
.final-cta .btn{
  min-width:230px;
}

/* Responsive tidy */
@media (max-width:1120px){
  .hero{
    grid-template-columns:1fr!important;
  }
  .product-panel{
    width:min(780px,100%)!important;
  }
  .demo-panel,
  .mobile-preview,
  .pricing-layout{
    grid-template-columns:1fr!important;
  }
  .pricing-layout{
    max-width:760px!important;
  }
  .benefit{
    display:grid!important;
    grid-template-columns:52px 1fr!important;
  }
  .benefit p{
    max-width:none!important;
  }
}
@media (max-width:760px){
  .section-pad{
    padding-top:62px!important;
    padding-bottom:62px!important;
  }
  .hero h1{
    font-size:39px!important;
  }
  .product-body,
  .preview-cards,
  .industry-css-grid,
  .clean-flow-preview{
    grid-template-columns:1fr!important;
  }
  .product-body{
    min-height:auto!important;
  }
  .demo-panel{
    padding:20px!important;
  }
  .mobile-preview{
    gap:28px!important;
  }
  .price-card{
    min-height:auto!important;
    padding:30px!important;
  }
}