/* ==========================================================================
   PostGate marketing landing — page-specific styles
   ========================================================================== */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
section { padding: 120px 0; position: relative; }

/* Theme accents (tweakable) ------------------------------------------------ */
body[data-accent="sunset"]  { --pink:#FF7A45; --purple:#FF4D8D; --blue:#B14DFF;
  --grad: linear-gradient(135deg,#FFB347 0%,#FF5E7E 50%,#B14DFF 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,179,71,.18), rgba(255,94,126,.18), rgba(177,77,255,.18)); }
body[data-accent="ocean"]   { --pink:#26E0C7; --purple:#3D8BFF; --blue:#6B5BFF;
  --grad: linear-gradient(135deg,#26E0C7 0%,#3D8BFF 52%,#6B5BFF 100%);
  --grad-soft: linear-gradient(135deg, rgba(38,224,199,.16), rgba(61,139,255,.16), rgba(107,91,255,.16)); }

/* NAV ---------------------------------------------------------------------- */
.nav-wrap { position: sticky; top: 0; z-index: 100; background: rgba(6,7,13,0.62);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border); }
.nav { max-width: 1200px; margin: 0 auto; padding: 15px 28px; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; }
.nav-links { display: flex; justify-content: center; gap: 32px; }
.nav-links a { font-size: 14px; color: var(--text-dim); font-weight: 500; transition: color var(--t-fast); }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: inline-flex; gap: 10px; align-items: center; }

/* HERO --------------------------------------------------------------------- */
.hero { padding: 96px 0 70px; overflow: hidden; }
.hero-grid { position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 28%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 25%, #000 28%, transparent 72%); pointer-events: none; }
.hero-glow { position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 760px; pointer-events: none; filter: blur(48px);
  background: radial-gradient(ellipse 46% 50% at 22% 46%, rgba(255,77,222,0.22), transparent 60%),
              radial-gradient(ellipse 46% 50% at 78% 46%, rgba(45,125,255,0.22), transparent 60%),
              radial-gradient(ellipse 38% 40% at 50% 38%, rgba(123,92,255,0.24), transparent 60%); }
.hero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: 1.04fr 1fr; gap: 54px; align-items: center; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 15px 6px 9px;
  border: 1px solid var(--border-hi); background: rgba(255,255,255,0.03); border-radius: 999px;
  font-size: 12.5px; color: var(--text-dim); font-weight: 500; white-space: nowrap; }
.eyebrow .dot { width: 8px; height: 8px; }

.display { font-size: clamp(44px, 5.6vw, 74px); line-height: 1.02; font-weight: 800;
  letter-spacing: -0.035em; margin: 22px 0 22px; color: #fff; text-wrap: balance; }
.display em { font-style: normal; }
.lede { font-size: 18px; color: var(--text-dim); max-width: 540px; line-height: 1.6; margin: 0 0 30px; text-wrap: pretty; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-note { font-size: 13px; color: var(--text-mute); margin-top: 16px; display: flex; align-items: center; gap: 8px; }
.cta-note svg { width: 15px; height: 15px; color: var(--ok); }

.hero-stats { display: flex; gap: 26px; align-items: center; margin-top: 46px; }
.hstat { display: flex; flex-direction: column; gap: 2px; }
.hstat-num { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.hstat-label { font-size: 12.5px; color: var(--text-mute); line-height: 1.35; }
.hstat-sep { width: 1px; height: 38px; background: var(--border); }

/* Hero visual — gateway: content flows into the P core, fans to platforms -- */
.hero-visual { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; }
.hero-gw { width: 100%; max-width: 560px; }
.hero-gw svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 70px rgba(123,92,255,0.22)); }
.hero-gw .lbl { fill: var(--text-dim); font: 500 12.5px var(--font-mono); }
.compose-card { position: absolute; left: 0; top: 58px; background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--border-hi); border-radius: var(--radius-l); padding: 18px;
  box-shadow: var(--shadow-pop); width: 312px; z-index: 2; }
.cc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cc-avatar { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); flex: none; }
.cc-meta { min-width: 0; }
.cc-meta b { display: block; font-size: 13px; color: #fff; }
.cc-meta span { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; }
.cc-body { min-height: 44px; }
.cc-body { font-size: 14.5px; color: var(--text); line-height: 1.5; }
.cc-typed { border-right: 2px solid var(--purple); padding-right: 1px; }
.cc-media { margin-top: 12px; height: 92px; border-radius: 10px; overflow: hidden; position: relative;
  background: linear-gradient(120deg, #1a2138, #0e1322); border: 1px solid var(--border); }
.cc-media::after { content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(255,77,222,.3), transparent 55%),
              radial-gradient(circle at 75% 70%, rgba(45,125,255,.32), transparent 55%); }
.cc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.cc-targets { display: flex; gap: 6px; }
.cc-foot .btn { padding: 7px 14px; font-size: 12.5px; }

/* fanning platform receipt cards */
.fan { position: absolute; right: -6px; top: 0; display: flex; flex-direction: column; gap: 10px; z-index: 4; }
.fan-card { display: flex; align-items: center; gap: 10px; padding: 9px 13px 9px 10px;
  background: rgba(14,19,34,0.92); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-card); backdrop-filter: blur(8px); min-width: 184px; }
.fan-card .plat-dot { background: rgba(255,255,255,0.05); color: #fff; width:30px; height:30px; }
.fan-name { font-size: 12.5px; color: #fff; font-weight: 600; flex: 1; }
.fan-sub { font-size: 10.5px; color: var(--text-mute); }
@keyframes floatIn { from { opacity: 0; transform: translateX(14px) scale(.96); } to { opacity: 1; transform: none; } }
/* staggered fan offset for depth */
body[data-hero="gateway"] .fan-card:nth-child(1) { margin-right: 40px; }
body[data-hero="gateway"] .fan-card:nth-child(2) { margin-right: 16px; }
body[data-hero="gateway"] .fan-card:nth-child(3) { margin-right: 0; }
body[data-hero="gateway"] .fan-card:nth-child(4) { margin-right: 16px; }
body[data-hero="gateway"] .fan-card:nth-child(5) { margin-right: 40px; }

/* connecting lines layer */
.hero-wires { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* TRUST BAR ---------------------------------------------------------------- */
.trust { padding: 30px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.trust-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.trust-row { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-dim); font-weight: 500; }
.trust-item svg { width: 18px; height: 18px; }

/* SECTION HEAD ------------------------------------------------------------- */
.section-head { max-width: 720px; margin: 0 auto 58px; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-bottom: 18px; }
.kicker-line { width: 24px; height: 1px; background: var(--grad); }
.h2 { font-size: clamp(30px, 3.6vw, 47px); line-height: 1.08; letter-spacing: -0.028em; color: #fff;
  margin: 0 0 16px; font-weight: 700; text-wrap: balance; }
.lede-2 { font-size: 17.5px; color: var(--text-dim); max-width: 620px; line-height: 1.6; margin: 0 auto; text-wrap: pretty; }

/* STEPS -------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 30px 26px; box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast), transform var(--t-fast); }
.step:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.step-badge { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-soft); border: 1px solid rgba(123,92,255,0.28); color: #C7B9FF; margin-bottom: 20px; }
.step-badge svg { width: 23px; height: 23px; }
.step-num { font: 700 12px var(--font-mono); letter-spacing: 0.12em; color: var(--text-mute); margin-bottom: 8px; }
.step-h { font-size: 19px; color: #fff; margin: 0 0 9px; font-weight: 650; letter-spacing: -0.01em; }
.step-p { font-size: 14.5px; color: var(--text-dim); margin: 0; line-height: 1.6; }

/* BENEFIT / BIG FEATURE ROWS ----------------------------------------------- */
.bigfeat { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.bigfeat + .bigfeat { margin-top: 110px; }
.bigfeat.rev .bf-copy { order: 2; }
.bf-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: #C7B9FF; letter-spacing: 0.04em; margin-bottom: 14px; }
.bf-eyebrow svg { width: 16px; height: 16px; }
.bf-h { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -0.025em; color: #fff;
  margin: 0 0 14px; font-weight: 700; text-wrap: balance; }
.bf-p { font-size: 16px; color: var(--text-dim); line-height: 1.62; margin: 0 0 20px; }
.bf-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.bf-list li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; font-size: 14.5px; color: var(--text); align-items: start; }
.bf-list svg { width: 18px; height: 18px; color: var(--ok); margin-top: 2px; }

.bf-visual { background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 26px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.bf-visual::before { content:''; position:absolute; top:-60px; right:-60px; width:240px; height:240px;
  background: var(--grad-soft); filter: blur(40px); opacity:.5; pointer-events:none; }

/* mini calendar viz */
.cal { position: relative; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-title { font-size:14px; font-weight:600; color:#fff; }
.cal-grid { display:grid; grid-template-columns: repeat(7,1fr); gap:7px; }
.cal-dow { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-mute); text-align:center; font-weight:600; }
.cal-cell { aspect-ratio:1; border-radius:9px; background: rgba(255,255,255,0.03); border:1px solid var(--border);
  position:relative; display:flex; align-items:flex-start; justify-content:flex-end; padding:5px; }
.cal-cell span { font-size:10px; color:var(--text-mute); }
.cal-cell.has::after { content:''; position:absolute; left:5px; bottom:5px; right:5px; height:5px; border-radius:99px; background:var(--grad); }
.cal-cell.has2::before { content:''; position:absolute; left:5px; bottom:13px; right:30%; height:5px; border-radius:99px; background:rgba(255,255,255,.18); }
.cal-cell.today { border-color: rgba(123,92,255,.6); background: rgba(123,92,255,0.1); }

/* status rows viz */
.statusviz { display:flex; flex-direction:column; gap:10px; }
.sv-row { display:flex; align-items:center; gap:11px; padding:12px 14px; background:rgba(255,255,255,0.025);
  border:1px solid var(--border); border-radius:12px; }
.sv-row .plat-dot { background: rgba(255,255,255,0.05); color:#fff; }
.sv-name { font-size:13.5px; color:#fff; font-weight:600; flex:1; }
.sv-time { font-size:11.5px; color:var(--text-mute); }

/* AUDIENCES ---------------------------------------------------------------- */
.aud-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.aud { background: var(--card); border:1px solid var(--border); border-radius: var(--radius-l);
  padding: 26px 22px; transition: border-color var(--t-fast), transform var(--t-fast); position:relative; overflow:hidden; }
.aud:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.aud-ico { width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.04); border:1px solid var(--border); color:#C7B9FF; margin-bottom:16px; }
.aud-ico svg { width:21px; height:21px; }
.aud h3 { font-size:16.5px; color:#fff; margin:0 0 8px; font-weight:650; letter-spacing:-0.01em; }
.aud p { font-size:13.5px; color:var(--text-dim); margin:0; line-height:1.55; }

/* PLATFORMS STRIP ---------------------------------------------------------- */
.plat-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.plat-card { position:relative; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center;
  padding:20px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-l);
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast); }
.plat-card:hover { border-color:var(--border-hi); transform:translateY(-2px); background:var(--card-hi); }
.plat-card .plat-dot { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,0.04);
  border:1px solid var(--border); color:var(--text-dim); }
.plat-card .plat-dot svg { width:20px; height:20px; }
.plat-card:hover .plat-dot { color:#fff; }
.plat-card h3 { font-size:14.5px; color:#fff; margin:0 0 3px; font-weight:600; }
.plat-card p { font-size:12px; color:var(--text-mute); margin:0; }
.plat-tag { position:absolute; top:14px; right:14px; font-size:9px; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; padding:3px 7px; border-radius:5px; color:#79E3A4; background:rgba(68,209,122,0.12); }
.plat-tag.beta { color:#C7B9FF; background:rgba(123,92,255,0.16); }
.plat-tag.soon { color:#FFC872; background:rgba(240,176,68,0.14); }
.plat-card.soon { opacity:0.62; }

/* TESTIMONIAL -------------------------------------------------------------- */
.quote-wrap { max-width: 880px; margin: 0 auto; text-align:center; }
.quote { font-size: clamp(24px, 3vw, 36px); line-height: 1.32; letter-spacing:-0.02em; color:#fff;
  font-weight:600; text-wrap:balance; margin:0 0 28px; }
.quote em { font-style:normal; }
.quote-by { display:inline-flex; align-items:center; gap:13px; }
.quote-av { width:46px; height:46px; border-radius:50%; background:var(--grad); flex:none; }
.quote-by b { display:block; font-size:14.5px; color:#fff; }
.quote-by span { font-size:13px; color:var(--text-mute); }

/* PRICING ------------------------------------------------------------------ */
.pricing-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; align-items:stretch; max-width:1080px; margin:0 auto; }
.tier { position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:32px 30px; display:flex; flex-direction:column; gap:22px; box-shadow:var(--shadow-card);
  transition:border-color var(--t-fast), transform var(--t-fast); }
.tier:hover { border-color:var(--border-hi); transform:translateY(-3px); }
.tier-name { font-size:18px; color:#fff; margin:0; font-weight:650; }
.tier-desc { font-size:13.5px; color:var(--text-dim); margin:6px 0 0; line-height:1.5; }
.price-block { display:flex; align-items:baseline; gap:8px; padding:16px 0 18px; border-bottom:1px solid var(--border); }
.price { font-size:46px; font-weight:750; color:#fff; letter-spacing:-0.03em; line-height:1; }
.price-per { font-size:13px; color:var(--text-mute); font-weight:500; }
.check-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.check-list li { font-size:13.5px; color:var(--text-dim); display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; line-height:1.5; }
.check-list svg { width:16px; height:16px; color:var(--purple); margin-top:2px; }
.tier-feature { background: radial-gradient(circle at 0% 0%, rgba(255,77,222,0.14), transparent 46%),
  radial-gradient(circle at 100% 100%, rgba(45,125,255,0.14), transparent 46%), var(--card); border-color:rgba(123,92,255,0.42); }
.tier-feature .price { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ribbon { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 13px; border-radius:99px;
  box-shadow:0 6px 20px -8px rgba(123,92,255,0.6); white-space:nowrap; }
.pricing-foot { text-align:center; font-size:14px; color:var(--text-dim); margin:34px auto 0; max-width:620px; }
.pricing-foot a { color:#fff; border-bottom:1px solid rgba(255,255,255,0.3); }

/* FINAL CTA ---------------------------------------------------------------- */
.finalcta { padding: 40px 0 130px; }
.finalcta-inner { position:relative; border:1px solid var(--border-hi); border-radius:var(--radius-xl);
  padding:84px 40px; text-align:center; overflow:hidden;
  background: linear-gradient(180deg, rgba(11,16,32,0.6), rgba(11,16,32,0.95)),
    radial-gradient(circle at 30% 0%, rgba(255,77,222,0.18), transparent 50%),
    radial-gradient(circle at 70% 100%, rgba(45,125,255,0.18), transparent 50%); }
.finalcta-inner::before { content:''; position:absolute; inset:0;
  background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%); pointer-events:none; }
.finalcta-h { position:relative; font-size:clamp(30px,4vw,50px); line-height:1.08; color:#fff; margin:0 auto 16px;
  max-width:760px; letter-spacing:-0.028em; font-weight:750; text-wrap:balance; }
.finalcta-p { position:relative; font-size:17px; color:var(--text-dim); margin:0 auto 30px; max-width:540px; }
.finalcta .cta-row { position:relative; justify-content:center; }

/* FOOTER ------------------------------------------------------------------- */
.footer { border-top:1px solid var(--border); background: linear-gradient(180deg, transparent, rgba(11,16,32,0.5)); padding:62px 0 30px; }
.footer-inner { display:grid; grid-template-columns:1.3fr 2fr; gap:60px; padding-bottom:46px; }
.footer-tag { font-size:14.5px; color:var(--text); margin:12px 0 0; max-width:280px; line-height:1.5; }
.footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.footer-col { display:flex; flex-direction:column; gap:11px; }
.footer-col h4 { font-size:12px; color:var(--text-mute); letter-spacing:0.1em; text-transform:uppercase; margin:0 0 6px; font-weight:600; }
.footer-col a { font-size:14px; color:var(--text-dim); transition:color var(--t-fast); }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px;
  border-top:1px solid var(--border); font-size:13px; color:var(--text-mute); }
.footer-status { display:inline-flex; align-items:center; gap:8px; }

/* Hero layout variants (tweakable) ----------------------------------------- */
body[data-hero="statement"] .hero-inner { grid-template-columns: 1fr; text-align:center; max-width:920px; }
body[data-hero="statement"] .hero-visual { display:none; }
body[data-hero="statement"] .lede { margin-left:auto; margin-right:auto; }
body[data-hero="statement"] .cta-row { justify-content:center; }
body[data-hero="statement"] .hero-stats { justify-content:center; }
body[data-hero="statement"] .display { font-size: clamp(48px, 7vw, 88px); }

body[data-hero="product"] .hero-visual { min-height: auto; }
body[data-hero="product"] .compose-card { position: relative; left: auto; top: auto; width: 100%; }
body[data-hero="product"] .fan { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 16px; }

/* RESPONSIVE --------------------------------------------------------------- */
@media (max-width: 1040px) {
  .steps { grid-template-columns: 1fr; }
  .aud-grid { grid-template-columns: repeat(2,1fr); }
  .plat-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width:480px; }
}
@media (max-width: 920px) {
  .hero-inner { grid-template-columns: 1fr; gap:40px; }
  .hero-visual { display:none; }
  .bigfeat, .bigfeat.rev { grid-template-columns: 1fr; gap:32px; }
  .bigfeat.rev .bf-copy { order:0; }
  .nav-links { display:none; }
  .nav { grid-template-columns: auto 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap:36px; }
  section { padding: 84px 0; }
}