/* Marketing color system: restrained blue and cyan over neutral and navy
   surfaces. The mark carries the warm orange accent. This public stylesheet
   stays last after Vite's page CSS chunks on both dev and production builds. */
:root {
  --brand-blue: #2e69c6;
  --brand-blue-deep: #2356a7;
  --brand-cyan: #38adbd;
  --brand-mint: #7cd1d8;
  --brand-orange: #f1a957;
  --brand-ink: #14263e;
  --brand-night: #101d31;
  --brand-surface: #f7f9fb;
  --brand-mist: #edf3f7;
  --brand-line: rgba(35, 73, 118, .14);
  --blue: var(--brand-blue);
  --mint: var(--brand-mint);
  --acid: #a7e2e7;
  --ink: var(--brand-ink);
  --navy: var(--brand-night);
  --paper: var(--brand-surface);
}

.home-page,
.partner-page,
.pricing-page,
.docs-guide-page { background: var(--brand-surface); color: var(--brand-ink); }
body:not(.creators-page) footer { background: var(--brand-night); }
body:not(.creators-page) .hero-trust .icon { color: var(--brand-cyan); }

body:not(.creators-page) .btn-dark,
body:not(.creators-page) .price-card.featured {
  background: var(--brand-blue);
}
body:not(.creators-page) .btn-dark:hover { background: var(--brand-blue-deep); }
body:not(.creators-page) .site-header.scrolled {
  border-color: rgba(45, 114, 216, .11);
}
.home-page .kicker::before,
.partner-page .kicker::before,
.pricing-page .kicker::before { background: var(--brand-orange); }
.home-page .final-cta,
.partner-page .final-cta,
.pricing-page .final-cta {
  background: radial-gradient(circle at 85% 15%, rgba(56,173,189,.18), transparent 30%),
    linear-gradient(125deg, #183a70, #245fa9);
  color: #fff;
}
.home-page .final-cta .section-title,
.partner-page .final-cta .section-title,
.pricing-page .final-cta .section-title { color: #fff; }
.home-page .final-cta .section-label,
.partner-page .final-cta .section-label,
.pricing-page .final-cta .section-label { color: #b7e8ec; }
.home-page .final-cta p,
.partner-page .final-cta p,
.pricing-page .final-cta p { color: rgba(255,255,255,.76); }
.home-page .final-cta .btn-line,
.partner-page .final-cta .btn-line,
.pricing-page .final-cta .btn-line { color: #fff; border-color: rgba(255,255,255,.34); }
.partner-page .final-cta .btn-dark { background: #fff; color: var(--brand-ink); }
.partner-page .final-cta .btn-dark:hover { background: #e7f4f6; }

.home-page .eco-pane.creator,
.partner-page .eco-pane.creator {
  background: radial-gradient(circle at 80% 12%, rgba(56,173,189,.18), transparent 38%), #182d46;
  color: #fff;
}
.home-page .eco-pane.partner,
.partner-page .eco-pane.partner {
  background: radial-gradient(circle at 80% 8%, rgba(132,211,220,.24), transparent 38%), #25569b;
  color: #fff;
}
.home-page .eco-pane h3,
.partner-page .eco-pane h3 { color: #fff; }
.home-page .eco-pane p,
.partner-page .eco-pane p { color: rgba(255,255,255,.72); }
.partner-page .eco-pane.partner p { color: rgba(255,255,255,.72); }
.home-page .eco-pane small,
.partner-page .eco-pane small { color: #a7e2e7; }
.home-page .eco-pane .eco-more,
.partner-page .eco-pane .eco-more { color: #fff; }
.home-page .eco-pane .eco-visual,
.partner-page .eco-pane .eco-visual { opacity: .94; filter: drop-shadow(0 18px 34px rgba(3,16,36,.22)); }

/* Home: quiet canvas and clear role cards. The trade flow section owns its light treatment. */
.home-page .main-hero {
  background: radial-gradient(circle at 79% 41%, rgba(56,173,189,.09), transparent 25%),
    radial-gradient(circle at 22% 72%, rgba(46,105,198,.07), transparent 28%),
    linear-gradient(180deg, #fff 0%, var(--brand-surface) 100%);
}
.home-page .hero-title .gradient {
  background: linear-gradient(100deg, var(--brand-blue-deep) 18%, var(--brand-cyan) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-page .section.audience { background: var(--brand-night); }
.home-page .audience .section-label,
.home-page .audience .section-title span { color: #a7e2e7; }
.home-page .audience .section-intro { color: #b6c5d1; }
.home-page .audience-pane.buyer {
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.55), transparent 42%), #b7e3e9;
  color: var(--brand-ink);
}
.home-page .audience-pane.seller {
  background: radial-gradient(circle at 90% 10%, rgba(56,173,189,.14), transparent 45%), #1b3049;
  color: #f7fbff;
}
.home-page .ecosystem {
  background: #fff;
}
.home-page .faq { background: var(--brand-surface); }

/* Pricing: three ways to join the platform, one brand family. */
.pricing-page .pricing-hero {
  background: radial-gradient(circle at 80% 22%, rgba(56,173,189,.08), transparent 34%),
    linear-gradient(145deg, #fff, var(--brand-surface));
}
.pricing-page .pricing-hero h1 span { color: var(--brand-blue); }
.pricing-page .price-card.creator { background: #e5f2f4; }
.pricing-page .price-card.partner { background: #e8eff8; }
.pricing-page .pricing-principles { background: var(--brand-mist); }
.pricing-page .pricing-status i {
  background: var(--brand-cyan);
  box-shadow: 0 0 0 7px rgba(56,173,189,.14);
}

/* Partners use the same canvas and action color. Amber stays in small icons. */
.partner-page {
  --partner-ink: var(--brand-ink);
  --partner-amber: var(--brand-orange);
  --partner-amber-deep: var(--brand-blue);
  --partner-cream: var(--brand-surface);
  --partner-peach: #e5f2f4;
  --partner-line: var(--brand-line);
  background: var(--brand-surface);
  color: var(--brand-ink);
}
.partner-page .brand-mark { background: var(--brand-blue); color: #fff; box-shadow: none; }
.partner-page .brand em,
.partner-page .section-label,
.partner-page .partner-hero .kicker { color: var(--brand-blue); }
.partner-page .nav-link::after { background: var(--brand-blue); }
.partner-page .nav-lang-trigger {
  background: rgba(255,255,255,.8);
  border-color: rgba(45,114,216,.17);
  color: var(--brand-ink);
}
.partner-page .btn-gold {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 14px 36px rgba(35,86,167,.18);
}
.partner-page .btn-gold:hover { background: var(--brand-blue-deep); }
.partner-page .btn-line { border-color: rgba(45,114,216,.22); color: var(--brand-ink); }
.partner-page .partner-hero {
  background: radial-gradient(circle at 85% 17%, rgba(56,173,189,.12), transparent 29%),
    linear-gradient(145deg, #fff 0%, var(--brand-surface) 100%);
  color: var(--brand-ink);
}
.partner-page .partner-title em {
  color: var(--brand-blue);
  background: linear-gradient(100deg, var(--brand-blue), var(--brand-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.partner-page .partner-sub,
.partner-page .partner-note,
.partner-page .type-row p { color: #607185; }
.partner-page .partner-note .icon,
.partner-page .type-row .icon { color: var(--brand-cyan); }
.partner-page .value-node.platform { background: var(--brand-blue); color: #fff; }
.partner-page .value-node.platform .node-icon { color: var(--brand-blue); }
.partner-page .partner-manifesto,
.partner-page .partner-support {
  background: var(--brand-surface);
}
.partner-page .partner-path {
  background: var(--brand-mist);
  color: var(--brand-ink);
}
.partner-page .path-item,
.partner-page .support-box { background: #fff; }
.partner-page .support-main { background: linear-gradient(145deg, #e3f1f3, #e4edf7); }
.partner-page .support-policy,
.partner-page .faq { background: var(--brand-mist); }
.partner-page .final-cta .section-label { color: #b7e8ec; }
.partner-page footer { background: var(--brand-night); }
.partner-page footer .brand em { color: #a7e2e7; }
.partner-page .footer-col a:hover { color: #8de0e3; }
.partner-page .mobile-menu { background: #f2f9fc; color: var(--brand-ink); }
.partner-page .mobile-cta { background: var(--brand-blue); color: #fff; }

/* Creator: keep the energetic dark page and exchange lime for cyan. */
.creators-page {
  --night: var(--brand-night);
  --night-2: #142c3d;
  --paper: var(--brand-surface);
  --paper-2: var(--brand-mist);
  --ink: var(--brand-ink);
  --white: #f9fdff;
  --lime: #a7e2e7;
  --mint: var(--brand-mint);
  --blue: #8fb8ef;
  --orange: var(--brand-orange);
  --line: rgba(24,63,102,.14);
}
.creators-page .hero {
  background: radial-gradient(circle at 75% 25%, rgba(56,173,189,.1), transparent 36%), var(--brand-night);
}
.creators-page .hero::after {
  border-color: rgba(83,205,215,.2);
  box-shadow: 0 0 0 70px rgba(83,205,215,.025), 0 0 0 140px rgba(83,205,215,.015);
}
.creators-page .btn-primary {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 14px 34px rgba(35,86,167,.24);
}
.creators-page .btn-primary:hover { background: #397bdf; }
.creators-page .pulse {
  background: var(--brand-orange);
  box-shadow: 0 0 0 7px rgba(241,169,87,.11);
}
.creators-page .growth-guide { stroke: rgba(125,210,224,.15); }
.creators-page .growth-break { stroke: rgba(125,210,224,.38); }
.creators-page .ring { border-color: rgba(125,210,224,.19); }
.creators-page .ring::after { box-shadow: 0 0 0 8px rgba(125,210,224,.1); }
.creators-page .package { background: #f6f9fb; }
.creators-page .float { background: rgba(20,39,60,.94); }
.creators-page .creative { background: #102a3d; }
.creators-page .product {
  background: linear-gradient(145deg, #8be8e5, #4eb6da);
  box-shadow: inset -18px -18px 38px rgba(7,45,70,.18), 0 20px 50px rgba(0,0,0,.25);
}
.creators-page .poster-obj { background: linear-gradient(145deg, #f3faff, #8ddbdc); }
.creators-page .chat-ai { background: #def4f5; }
.creators-page .template-demo,
.creators-page .expert-demo,
.creators-page .flow-demo { background: #e2eff4; }
.creators-page .state.green { background: #d8f3ee; color: #1d7181; }
.creators-page .market-ring,
.creators-page .market-ring::before,
.creators-page .market-ring::after,
.creators-page .license-card::before { border-color: rgba(83,205,215,.2); }
.creators-page .market-ring::after { box-shadow: 0 0 70px rgba(83,205,215,.18); }
.creators-page .flow-step[aria-selected=true] .flow-num { box-shadow: 0 0 0 7px rgba(83,205,215,.1); }
.creators-page .closing {
  background: linear-gradient(125deg, #dceff3, #deebf7);
  color: var(--brand-ink);
}
.creators-page .closing .eyebrow { color: #1d6586; }
.creators-page .closing .btn-dark { background: var(--brand-blue); color: #fff; }
.creators-page .closing .btn-dark:hover { background: var(--brand-blue-deep); }
.creators-page .header.scrolled { background: rgba(16,29,49,.94); }
.creators-page .progress { background: var(--brand-cyan); }
.creators-page footer .brand em { color: #a7e2e7; }

/* The guide reads like the same site without changing its document layout. */
.docs-guide-page .docs-guide { color: var(--brand-ink); }
.docs-guide-page .docs-guide aside { background: var(--brand-mist); }
.docs-guide-page .docs-guide nav a.active,
.docs-guide-page .docs-guide nav a:hover {
  background: #e2f1fa;
  color: var(--brand-blue-deep);
}