/* ==========================================================================
   marketing-pages.css — per-page styles for the IGC marketing pages, merged
   into one file so client-side navigation between them needs no <head> change.
   Shared theme lives in nova-marketing.css. stream/about classes that collided
   with home are prefixed s-/a- (rendering unchanged).
   ========================================================================== */


/* ---------------- home ---------------- */
/* hero */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem 0 5rem 0;
  gap: 3rem;
}

.hero-content {
  flex: 1.2;
  animation: fadeSlideUp 1s ease-out;
}

.hero-eyebrow {
  margin-bottom: 1.6rem;
}

.hero-eyebrow .he-name {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--mk-accent-soft), var(--pub-accent-2, var(--pub-accent-2)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-eyebrow .he-name i {
  font-size: 1.5rem;
  color: var(--pub-accent, var(--pub-accent));
  -webkit-text-fill-color: var(--pub-accent, var(--pub-accent));
  filter: drop-shadow(0 0 12px var(--mk-glow-strong));
}

.hero-eyebrow .he-tag {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--mk-text-dim);
}

.hero-content h1 {
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2px;
  background: linear-gradient(135deg, var(--pub-ink) 20%, color-mix(in srgb, var(--pub-ink) 45%, var(--pub-accent)) 60%, var(--pub-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.2rem;
  filter: drop-shadow(0 0 40px var(--mk-glow));
}

.hero-desc {
  font-size: 1.2rem;
  color: var(--mk-text-bright);
  max-width: 520px;
  margin-bottom: 2.2rem;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
}

.hero-stats div {
  display: flex;
  flex-direction: column;
}

.hero-stats strong {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--pub-ink, var(--pub-ink)), var(--mk-accent-soft));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-stats span {
  font-size: 0.9rem;
  color: var(--mk-text-dim);
}

.hero-visual {
  flex: 1;
  background: var(--mk-panel);
  backdrop-filter: blur(16px);
  border-radius: 48px;
  padding: 2.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--mk-line-accent);
  box-shadow: 0 30px 80px var(--mk-shadow), 0 0 80px var(--mk-glow);
  min-height: 340px;
  justify-content: center;
  animation: floatGlow 6s ease-in-out infinite alternate;
  position: relative;
}

@keyframes floatGlow {
  0% { transform: translateY(0px); box-shadow: 0 30px 80px var(--mk-shadow), 0 0 60px var(--mk-glow); }
  100% { transform: translateY(-12px); box-shadow: 0 40px 100px var(--mk-line-accent), 0 0 100px var(--mk-glow-2); }
}

.hero-visual i {
  font-size: 5.5rem;
  color: var(--pub-accent, var(--pub-accent));
  background: var(--mk-fill);
  padding: 1.8rem;
  border-radius: 40px;
  box-shadow: 0 0 60px var(--mk-glow), inset 0 0 60px var(--mk-glow);
  border: 1px solid var(--mk-glow);
  animation: iconPulse 4s ease-in-out infinite;
}

@keyframes iconPulse {
  0% { box-shadow: 0 0 40px var(--mk-glow), inset 0 0 40px var(--mk-glow); }
  50% { box-shadow: 0 0 80px var(--mk-line-accent), inset 0 0 80px var(--mk-glow-2); }
  100% { box-shadow: 0 0 40px var(--mk-glow), inset 0 0 40px var(--mk-glow); }
}

.hero-visual p {
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--mk-text-bright);
  background: var(--mk-panel-2);
  padding: 0.5rem 1.8rem;
  border-radius: 60px;
  backdrop-filter: blur(8px);
  border: 1px solid var(--mk-line);
}

/* feature grid with glass + glow */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 4rem 0 4rem 0;
}

.feature-card {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(16px);
  border-radius: 32px;
  padding: 2.4rem 2rem;
  border: 1px solid var(--mk-line);
  transition: all 0.35s cubic-bezier(0.15, 0.8, 0.3, 1);
  box-shadow: 0 8px 32px var(--mk-shadow);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, var(--mk-glow), transparent 70%);
  opacity: 0;
  transition: 0.6s;
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--mk-line-accent);
  box-shadow: 0 20px 60px var(--mk-shadow), 0 0 60px var(--mk-glow);
}

.feature-card i {
  font-size: 2.8rem;
  color: var(--pub-accent, var(--pub-accent));
  background: var(--mk-fill);
  padding: 0.7rem;
  border-radius: 18px;
  margin-bottom: 1.4rem;
  display: inline-block;
  box-shadow: 0 0 30px var(--mk-glow);
  transition: 0.3s;
}

.feature-card:hover i {
  box-shadow: 0 0 40px var(--mk-glow);
}

.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--pub-ink, var(--pub-ink));
}

.feature-card p {
  color: var(--mk-text);
  font-size: 0.95rem;
}

/* positioning + pricing */
.testimonial-section {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(16px);
  border-radius: 60px;
  padding: 3.5rem 3rem;
  margin: 2rem 0 4rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--mk-line);
  box-shadow: 0 20px 60px var(--mk-shadow);
}

.testimonial-text i {
  color: var(--pub-accent, var(--pub-accent));
  font-size: 2.2rem;
  opacity: 0.5;
  margin-bottom: 0.3rem;
}

.testimonial-text blockquote {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mk-text-bright);
  max-width: 620px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.testimonial-author .avatar {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  background: linear-gradient(135deg, var(--pub-accent-hover, var(--pub-accent-hover)), color-mix(in srgb, var(--pub-accent-2) 75%, var(--pub-ink)));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  box-shadow: 0 0 30px var(--mk-line-accent);
}

.testimonial-author div {
  font-weight: 600;
}

.testimonial-author span {
  font-weight: 400;
  color: var(--mk-text-dim);
  font-size: 0.9rem;
}

.pricing-badge {
  background: var(--mk-panel-2);
  backdrop-filter: blur(16px);
  border-radius: 40px;
  padding: 1.8rem 2.5rem;
  border: 1px solid var(--mk-line);
  box-shadow: 0 0 60px var(--mk-glow);
}

.pricing-badge .price {
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--pub-ink, var(--pub-ink)), var(--mk-accent-soft));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-badge .price span {
  font-weight: 400;
  font-size: 1rem;
  color: var(--mk-text-dim);
  -webkit-text-fill-color: var(--mk-text-dim);
}

.pricing-badge .btn-glow {
  width: 100%;
  justify-content: center;
  margin-top: 0.8rem;
}

@media (max-width: 1000px) {
  .hero { flex-direction: column; text-align: center; }
  .hero-desc { max-width: 100%; }
  .hero-stats { justify-content: center; }
  .hero-buttons { justify-content: center; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .feature-grid { grid-template-columns: 1fr; }
  .testimonial-section { flex-direction: column; text-align: center; gap: 2rem; }
  .hero-content h1 { font-size: 3rem; }
  .hero-eyebrow .he-name { font-size: 1.5rem; }
  .pricing-badge { width: 100%; text-align: center; }
}
  


/* ---------------- pricing ---------------- */
/* pricing hero */
.pricing-hero {
  text-align: center;
  padding: 4rem 0 2.5rem 0;
  animation: fadeSlideUp 1s ease-out;
}

.pricing-hero h1 {
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, var(--pub-ink) 20%, color-mix(in srgb, var(--pub-ink) 45%, var(--pub-accent)) 60%, var(--pub-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 40px var(--mk-glow));
}

.pricing-hero p {
  font-size: 1.15rem;
  color: var(--mk-text-bright);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* billing switch (CSS-only, driven by #billing-toggle) */
.billing-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.billing-switch {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  font-weight: 600;
  color: var(--mk-text-dim);
  font-size: 0.95rem;
}

.billing-switch .switch {
  width: 58px;
  height: 32px;
  border-radius: 60px;
  background: var(--mk-panel-2);
  border: 1px solid var(--mk-line-accent);
  position: relative;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
  box-shadow: inset 0 0 20px var(--mk-shadow);
}

.billing-switch .switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: linear-gradient(135deg, var(--pub-accent-hover), color-mix(in srgb, var(--pub-accent-2) 75%, var(--pub-ink)));
  box-shadow: 0 0 16px var(--mk-glow-strong);
  transition: 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
}

.billing-checkbox:checked ~ * .billing-switch .switch {
  border-color: var(--mk-glow-strong);
  background: var(--mk-glow);
}

.billing-checkbox:checked ~ * .billing-switch .switch .knob {
  transform: translateX(26px);
}

.billing-checkbox:checked ~ * .billing-switch .lbl-monthly {
  color: var(--mk-text-dim);
}
.billing-switch .lbl-monthly {
  color: var(--pub-ink);
}
.billing-switch .lbl-annual {
  color: var(--mk-text-dim);
}
.billing-checkbox:checked ~ * .billing-switch .lbl-annual {
  color: var(--pub-ink);
}

.billing-switch .save-pill {
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0.18rem 0.7rem;
  border-radius: 60px;
  margin-left: -0.4rem;
}

/* pricing grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  padding: 3rem 0 2rem 0;
  align-items: start;
}

.plan {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(16px);
  border-radius: 32px;
  padding: 2.6rem 2rem;
  border: 1px solid var(--mk-line);
  box-shadow: 0 8px 32px var(--mk-shadow);
  position: relative;
  transition: all 0.35s cubic-bezier(0.15, 0.8, 0.3, 1);
}

.plan:hover {
  transform: translateY(-8px);
  border-color: var(--mk-line-accent);
  box-shadow: 0 20px 60px var(--mk-shadow), 0 0 60px var(--mk-glow);
}

.plan.popular {
  border-color: var(--mk-glow-strong);
  background: var(--mk-panel-2);
  box-shadow: 0 20px 60px var(--mk-shadow), 0 0 70px var(--mk-glow);
}

.plan .ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--pub-accent-hover), color-mix(in srgb, var(--pub-accent-2) 75%, var(--pub-ink)));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 60px;
  box-shadow: 0 0 24px var(--mk-glow-strong);
  white-space: nowrap;
}

.plan h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pub-ink);
  margin-bottom: 0.35rem;
}

.plan .tagline {
  color: var(--mk-text);
  font-size: 0.9rem;
  min-height: 2.6em;
}

.plan .price {
  margin: 1.4rem 0 0.2rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.plan .price .amt {
  font-size: 2.9rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--pub-ink), var(--mk-accent-soft));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan .price .per {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--mk-text-dim);
}

.plan .price-note {
  color: var(--mk-text-faint);
  font-size: 0.82rem;
  min-height: 1.2em;
}

/* monthly / annual visibility, toggled by #billing-toggle */
.plan .price.show-annual,
.plan .price-note.show-annual { display: none; }
.billing-checkbox:checked ~ * .plan .price.show-annual { display: flex; }
.billing-checkbox:checked ~ * .plan .price-note.show-annual { display: block; }
.billing-checkbox:checked ~ * .plan .price.show-monthly,
.billing-checkbox:checked ~ * .plan .price-note.show-monthly { display: none; }

.plan .plan-cta {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 1.6rem 0 1.8rem 0;
}

.plan.popular .plan-cta .btn-outline-glow {
  border-color: var(--mk-glow-strong);
  background: var(--mk-fill);
}

.plan ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.plan ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--mk-text-bright);
  font-size: 0.93rem;
}

.plan ul li i {
  color: var(--pub-accent);
  font-size: 0.9rem;
  margin-top: 0.28rem;
  flex-shrink: 0;
}

.plan ul li strong {
  color: var(--pub-ink);
  font-weight: 700;
}

/* comparison table */
.compare {
  padding: 4rem 0 2rem 0;
}

.compare h2 {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.8px;
  background: linear-gradient(135deg, var(--pub-ink), color-mix(in srgb, var(--pub-ink) 45%, var(--pub-accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2.5rem;
}

.compare-scroll {
  overflow-x: auto;
  border-radius: 28px;
  border: 1px solid var(--mk-line);
  background: rgba(10, 20, 50, 0.32);
  backdrop-filter: blur(16px);
}

table.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

table.compare-table th,
table.compare-table td {
  padding: 1.1rem 1.4rem;
  text-align: left;
  border-bottom: 1px solid var(--mk-line);
}

table.compare-table thead th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mk-accent-soft);
  font-weight: 700;
}

table.compare-table thead th:not(:first-child),
table.compare-table tbody td:not(:first-child) {
  text-align: center;
  width: 20%;
}

table.compare-table tbody th {
  font-weight: 600;
  color: var(--mk-text-bright);
  font-size: 0.92rem;
}

table.compare-table tbody tr:last-child th,
table.compare-table tbody tr:last-child td {
  border-bottom: none;
}

table.compare-table .col-popular {
  background: var(--mk-fill);
  color: var(--pub-ink);
}

table.compare-table td .yes {
  color: var(--pub-accent);
  font-size: 1rem;
}

table.compare-table td .no {
  color: #46577d;
}

table.compare-table td .txt {
  color: var(--mk-text-bright);
  font-size: 0.9rem;
}

/* faq */
.faq {
  padding: 4rem 0 2rem 0;
  max-width: 780px;
  margin: 0 auto;
}

.faq h2 {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.8px;
  background: linear-gradient(135deg, var(--pub-ink), color-mix(in srgb, var(--pub-ink) 45%, var(--pub-accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2.2rem;
}

.faq details {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(12px);
  border: 1px solid var(--mk-line);
  border-radius: 18px;
  padding: 1.2rem 1.6rem;
  margin-bottom: 1rem;
  transition: 0.25s;
}

.faq details[open] {
  border-color: var(--mk-line-accent);
  box-shadow: 0 0 40px var(--mk-glow);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--pub-ink);
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '\f067';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--pub-accent);
  font-size: 0.85rem;
  transition: 0.25s;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  margin-top: 0.9rem;
  color: var(--mk-text);
  font-size: 0.95rem;
  line-height: 1.7;
}

@media (max-width: 1150px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .pricing-hero h1 { font-size: 2.8rem; }
}

@media (max-width: 700px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
  


/* ---------------- about ---------------- */
.about-hero {
  text-align: center;
  padding: 4rem 0 2.5rem 0;
  animation: fadeSlideUp 1s ease-out;
}

.about-hero h1 {
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, var(--pub-ink) 20%, color-mix(in srgb, var(--pub-ink) 45%, var(--pub-accent)) 60%, var(--pub-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.2rem;
  filter: drop-shadow(0 0 40px var(--mk-glow));
}

.about-hero p {
  font-size: 1.2rem;
  color: var(--mk-text-bright);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

.about-hero .sub {
  font-size: 1.05rem;
  color: var(--mk-text-dim);
  max-width: 620px;
  margin: 1rem auto 0 auto;
}

/* our story */
.story {
  max-width: 720px;
  margin: 1rem auto 4rem auto;
  text-align: center;
}

.story p {
  color: var(--mk-text-bright);
  font-size: 1.08rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* team */
.team {
  text-align: center;
  padding: 1rem 0 3.5rem 0;
}

.team h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--pub-ink);
  margin-bottom: 0.6rem;
}

.team p {
  color: var(--mk-text);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* section heading */
.a-section-head {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 2.5rem 0 4rem 0;
}

.about-card {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(16px);
  border-radius: 32px;
  padding: 2.4rem 2rem;
  border: 1px solid var(--mk-line);
  transition: all 0.35s cubic-bezier(0.15, 0.8, 0.3, 1);
  box-shadow: 0 8px 32px var(--mk-shadow);
}

.about-card:hover {
  transform: translateY(-8px);
  border-color: var(--mk-line-accent);
  box-shadow: 0 20px 60px var(--mk-shadow), 0 0 60px var(--mk-glow);
}

.about-card i {
  font-size: 2.4rem;
  color: var(--pub-accent);
  background: var(--mk-fill);
  padding: 0.7rem;
  border-radius: 18px;
  margin-bottom: 1.2rem;
  display: inline-block;
}

.about-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--pub-ink);
}

.about-card p {
  color: var(--mk-text);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* products */
.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 2.5rem 0 4rem 0;
}

.product-card {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(16px);
  border-radius: 32px;
  padding: 2.6rem 2.2rem;
  border: 1px solid var(--mk-line);
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.15, 0.8, 0.3, 1);
}

.product-card:hover {
  transform: translateY(-8px);
  border-color: var(--mk-line-accent);
  box-shadow: 0 20px 60px var(--mk-shadow), 0 0 60px var(--mk-glow);
}

.product-card > i {
  font-size: 2.6rem;
  color: var(--pub-accent);
  background: var(--mk-fill);
  padding: 0.8rem;
  border-radius: 20px;
  margin-bottom: 1.2rem;
  align-self: flex-start;
}

.product-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pub-ink);
  margin-bottom: 0.15rem;
}

.product-card .kicker {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mk-text-dim);
  margin-bottom: 0.9rem;
}

.product-card p {
  color: var(--mk-text);
  line-height: 1.7;
  font-size: 0.98rem;
  margin-bottom: 1.4rem;
  flex: 1;
}

.product-links { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* contact */
.contact {
  text-align: center;
  padding: 1rem 0 4rem 0;
}

.contact h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--pub-ink);
  margin-bottom: 0.6rem;
}

.contact p {
  color: var(--mk-text);
  margin-bottom: 1.6rem;
}

.contact a.mail {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mk-accent-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--mk-line-accent);
  padding-bottom: 2px;
  transition: 0.2s;
}

.contact a.mail:hover { color: var(--pub-ink); border-color: var(--pub-ink); }

@media (max-width: 1000px) {
  .about-grid { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
  .about-hero h1 { font-size: 2.8rem; }
}

@media (max-width: 700px) {
  .product { padding: 2rem 1.6rem; }
}
  


/* ---------------- stream ---------------- */
/* hero */
.s-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem 0 5rem 0;
  gap: 3rem;
}

.s-hero-content {
  flex: 1.2;
  animation: fadeSlideUp 1s ease-out;
}

.s-hero-content h1 {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -2px;
  background: linear-gradient(135deg, var(--pub-ink) 20%, color-mix(in srgb, var(--pub-ink) 45%, var(--pub-accent)) 60%, var(--pub-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.2rem;
  filter: drop-shadow(0 0 40px var(--mk-glow));
}

.s-hero-desc {
  font-size: 1.2rem;
  color: var(--mk-text-bright);
  max-width: 540px;
  margin-bottom: 2.2rem;
  line-height: 1.7;
}

.s-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.s-hero-visual {
  flex: 1;
  background: var(--mk-panel);
  backdrop-filter: blur(16px);
  border-radius: 48px;
  padding: 2.5rem 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--mk-line-accent);
  box-shadow: 0 30px 80px var(--mk-shadow), 0 0 80px var(--mk-glow);
  min-height: 340px;
  justify-content: center;
  animation: s-floatGlow 6s ease-in-out infinite alternate;
}

@keyframes s-floatGlow {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-12px); box-shadow: 0 40px 100px var(--mk-line-accent), 0 0 100px var(--mk-glow-2); }
}

.s-hero-visual > i {
  font-size: 5.5rem;
  color: var(--pub-accent);
  background: var(--mk-fill);
  padding: 1.8rem;
  border-radius: 40px;
  box-shadow: 0 0 60px var(--mk-glow), inset 0 0 60px var(--mk-glow);
  border: 1px solid var(--mk-glow);
}

.s-hero-visual .drives {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

.s-hero-visual .drives span {
  background: var(--mk-panel-2);
  backdrop-filter: blur(8px);
  padding: 0.35rem 1.2rem;
  border-radius: 60px;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--mk-text-bright);
  border: 1px solid var(--mk-line);
}

/* feature grid */
.s-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 3rem 0 4rem 0;
}

.s-feature-card {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(16px);
  border-radius: 32px;
  padding: 2.4rem 2rem;
  border: 1px solid var(--mk-line);
  transition: all 0.35s cubic-bezier(0.15, 0.8, 0.3, 1);
  box-shadow: 0 8px 32px var(--mk-shadow);
}

.s-feature-card:hover {
  transform: translateY(-8px);
  border-color: var(--mk-line-accent);
  box-shadow: 0 20px 60px var(--mk-shadow), 0 0 60px var(--mk-glow);
}

.s-feature-card i {
  font-size: 2.6rem;
  color: var(--pub-accent);
  background: var(--mk-fill);
  padding: 0.7rem;
  border-radius: 18px;
  margin-bottom: 1.3rem;
  display: inline-block;
}

.s-feature-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--pub-ink);
}

.s-feature-card p {
  color: var(--mk-text);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* how it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 1rem 0 4rem 0;
}

.step {
  text-align: center;
}

.step .num {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  margin: 0 auto 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  background: linear-gradient(135deg, var(--pub-accent-hover), color-mix(in srgb, var(--pub-accent-2) 75%, var(--pub-ink)));
  box-shadow: 0 0 30px var(--mk-line-accent);
}

.step h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--pub-ink);
  margin-bottom: 0.3rem;
}

.step p {
  color: var(--mk-text);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto;
}

/* positioning band */
.selfhost {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(16px);
  border-radius: 60px;
  padding: 3.5rem 3rem;
  margin: 1rem 0 4rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border: 1px solid var(--mk-line);
  box-shadow: 0 20px 60px var(--mk-shadow);
}

.selfhost h2 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--pub-ink);
  max-width: 560px;
}

.selfhost p {
  color: var(--mk-text);
  margin-top: 0.5rem;
  max-width: 560px;
  line-height: 1.7;
}

.selfhost .tag {
  font-size: 5rem;
  color: var(--pub-accent);
  background: var(--mk-fill);
  padding: 1.6rem;
  border-radius: 40px;
  border: 1px solid var(--mk-glow);
}

.s-section-head {
  text-align: center;
  margin-bottom: 0.5rem;
}

.s-section-head h2 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -1px;
  margin-top: 0.6rem;
  background: linear-gradient(135deg, var(--pub-ink), color-mix(in srgb, var(--pub-ink) 45%, var(--pub-accent)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 1000px) {
  .s-hero { flex-direction: column; text-align: center; }
  .s-hero-desc { max-width: 100%; }
  .s-hero-buttons { justify-content: center; }
  .s-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 700px) {
  .s-feature-grid { grid-template-columns: 1fr; }
  .s-hero-content h1 { font-size: 2.8rem; }
  .selfhost { flex-direction: column; text-align: center; padding: 2.5rem 1.6rem; }
}
  


/* ---------------- docs ---------------- */
/* ============================================================
   /docs page styles  —  edit here: Admin > Pages > Docs > Head HTML
   Shared marketing theme is /cms-assets/css/nova-marketing.css (linked above);
   every colour resolves from the active public theme via --pub-* / --mk-*.
   ============================================================ */
.container { position: relative; z-index: 2; }
.logo-acc { -webkit-text-fill-color: var(--pub-accent-2); }
.navbar .nav-actions a { padding: .5rem 1.5rem; text-decoration: none; font-size: .95rem; }

/* hero */
.docs-hero { max-width: 780px; padding: 3.5rem 0 2.75rem; }
.docs-hero .badge-glow { margin-bottom: 1.4rem; }
.docs-hero h1 {
  font-size: 3.4rem; font-weight: 900; line-height: 1.05; letter-spacing: -1.5px;
  background: var(--mk-head-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.docs-hero h1 .dot { -webkit-text-fill-color: var(--pub-accent); }
.docs-lead { margin-top: 1.1rem; font-size: 1.15rem; line-height: 1.7; color: var(--mk-text-bright); }

/* the posts-list block styles itself from --pub-* custom properties, which
   now come from the active theme — only non-colour tweaks are scoped here. */
.docs-list {
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  display: block;
  padding-bottom: 3.5rem;
}
.docs-list > div > p {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mk-text-faint); margin-bottom: 1.5rem !important;
}
.docs-list > div > div { border-top: none !important; gap: .9rem !important; }
.docs-list > div > div > div {
  padding: 1.35rem 1.6rem !important;
  border-bottom: none !important;
  background: var(--mk-panel-soft);
  border: 1px solid var(--mk-line);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .3s cubic-bezier(.15,.8,.3,1), border-color .3s, box-shadow .3s;
}
.docs-list > div > div > div:hover {
  transform: translateY(-3px);
  border-color: var(--mk-line-accent);
  box-shadow: 0 16px 48px var(--mk-shadow), 0 0 50px var(--mk-glow);
}
.docs-list h2 {
  font-size: 1.4rem !important; font-weight: 700 !important;
  letter-spacing: -.3px; transition: color .2s;
}
.docs-list a:hover h2 { color: var(--pub-ink) !important; }

/* footer */
.footer .foot-brand { display: flex; align-items: center; gap: .5rem; }
.footer .foot-brand i { color: var(--pub-accent); font-size: 1.6rem; }
.footer .foot-name {
  font-weight: 800; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--mk-accent-soft), var(--pub-accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer .foot-copy { color: var(--mk-text-faint); margin-left: .4rem; font-size: .9rem; }

@media (max-width: 720px) {
  .docs-hero h1 { font-size: 2.5rem; }
  .nav-actions { display: none; }
}


/* contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1.8rem;
  padding: 1rem 0 3rem 0;
  align-items: start;
}
.contact-card,
.contact-form-card {
  background: var(--mk-panel-soft);
  backdrop-filter: blur(16px);
  border-radius: 32px;
  padding: 2.4rem 2rem;
  border: 1px solid var(--mk-line);
  box-shadow: 0 8px 32px var(--mk-shadow);
}
.contact-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 1.4rem;
  color: var(--pub-ink);
}
.contact-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.4rem;
}
.contact-row:last-child { margin-bottom: 0; }
.contact-row i {
  color: var(--pub-accent);
  font-size: 1.2rem;
  width: 1.6rem;
  margin-top: 0.2rem;
  text-align: center;
}
.contact-row .lbl {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mk-text-faint);
  margin-bottom: 0.2rem;
}
.contact-row .val {
  color: var(--mk-text-bright);
  line-height: 1.5;
}
.contact-row a.val { text-decoration: none; }
.contact-row a.val:hover { color: var(--pub-accent); }

@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; }
}