/* Creatrs.ai Landing Page */
:root {
  --cr-primary: #4536b7;
  --cr-primary-light: #5a49d0;
  --cr-primary-dark: #3628a0;
  --cr-green: #8fc344;
  --cr-yellow: #fab81b;
  --cr-orange: #f68026;
  --cr-red: #f04033;
  --cr-magenta: #ce2c8f;
  --cr-purple: #6349a0;
  --cr-blue: #0379bf;
  --cr-dark: #1a1d23;
  --cr-darker: #12141a;
}

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #333; }

/* Nav — always solid (it was see-through over content until scrolled), and
   shrinks on scroll: logo ~56 px tall at the top, ~40 px once scrolled. */
.landing-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  padding: 0.75rem 0; background: var(--cr-darker);
  transition: padding 0.2s, box-shadow 0.2s;
}
.landing-nav.scrolled { padding: 0.35rem 0; box-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.landing-nav .creatrs-logo-static { width: auto !important; height: 56px; transition: height 0.2s; }
.landing-nav.scrolled .creatrs-logo-static { height: 40px; }
/* Anchored sections land below the fixed header, not under it. */
section[id] { scroll-margin-top: 80px; }
.landing-nav .nav-link { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.landing-nav .nav-link:hover { color: #fff; }

/* Hero */
.hero-section {
  background: linear-gradient(135deg, var(--cr-darker) 0%, #1e2028 100%);
  padding: 8rem 0 5rem; min-height: 80vh;
  display: flex; align-items: center;
  /* The animated preview cards slide 110% to the right; without this the
     page grew a horizontal scrollbar (1089 px in a 1013 px window). */
  overflow-x: clip;
}
.hero-section h1 { font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1.1; }
.hero-section .lead { font-size: 1.25rem; color: rgba(255,255,255,0.7); max-width: 560px; }
.hero-badge { display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 0.4rem 1rem; color: rgba(255,255,255,0.6); font-size: 0.85rem; }

/* Kanban animation */
.kanban-preview { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.kanban-col { display: inline-block; width: 30%; vertical-align: top; margin: 0 1%; }
.kanban-col-header { background: rgba(255,255,255,0.08); border-radius: 6px 6px 0 0; padding: 0.4rem 0.6rem; font-size: 0.65rem; color: rgba(255,255,255,0.5); font-weight: 600; text-transform: uppercase; }
.kanban-card-anim { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 0.5rem; margin: 0.3rem 0; font-size: 0.6rem; color: rgba(255,255,255,0.4); }
.kanban-card-anim.moving { animation: cardSlide 4s ease-in-out infinite; }
@keyframes cardSlide { 0%,100% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(110%); opacity: 0.5; } 60% { transform: translateX(110%); opacity: 0.5; } 80% { transform: translateX(0); opacity: 1; } }

/* Sections */
.section-padding { padding: 5rem 0; }
.section-dark { background: var(--cr-dark); color: #fff; }
.section-gray { background: #f8f9fa; }
.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.section-subtitle { font-size: 1.1rem; color: #6c757d; max-width: 640px; margin: 0 auto 2.5rem; }

/* Problem */
.tool-strikethrough { text-decoration: line-through; color: #999; font-size: 1.1rem; }
.replaces-text { font-size: 2rem; font-weight: 700; color: var(--cr-primary); margin-top: 1.5rem; }

/* Pillars */
.pillar-card {
  background: #fff; border-radius: 12px; padding: 2rem; height: 100%;
  border: 1px solid #e9ecef; transition: transform 0.2s, box-shadow 0.2s;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.pillar-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.pillar-card h3 { font-size: 1.3rem; font-weight: 700; }

/* Feature grid */
.feature-card {
  background: #fff; border-radius: 10px; padding: 1.5rem; height: 100%;
  border: 1px solid #e9ecef;
}
.feature-card .icon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.feature-card h5 { font-weight: 700; font-size: 1rem; }
.feature-card p { font-size: 0.9rem; color: #6c757d; margin: 0; }

/* Comparison table */
.comparison-table th, .comparison-table td { text-align: center; vertical-align: middle; font-size: 0.85rem; padding: 0.6rem; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align: left; font-weight: 600; }
.comparison-table .our-col { background: rgba(69, 54, 183, 0.06); font-weight: 700; color: var(--cr-primary); }
.check-yes { color: var(--cr-primary); font-weight: bold; }
.check-partial { color: #b07d0b; }
.check-no { color: #ccc; }

/* Pricing */
.pricing-card {
  background: #fff; border-radius: 12px; padding: 2rem; text-align: center;
  border: 2px solid #e9ecef; transition: transform 0.2s; position: relative;
}
.pricing-card.highlighted { border-color: var(--cr-primary); transform: scale(1.03); }
.pricing-card .badge-popular {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--cr-primary); color: #fff; padding: 0.25rem 1rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
}
.pricing-card .price { font-size: 2.5rem; font-weight: 800; }
.pricing-card .price-period { font-size: 0.85rem; color: #6c757d; }
.pricing-card .plan-name { font-size: 1.2rem; font-weight: 700; }
.annual-savings { display: inline-block; background: rgba(69,54,183,0.12); color: var(--cr-primary); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }

/* Persona cards */
.persona-card { text-align: center; padding: 2rem; }
.persona-card .icon { font-size: 3rem; margin-bottom: 1rem; }
.persona-card h4 { font-weight: 700; }

/* Waitlist form */
.waitlist-section { background: linear-gradient(135deg, var(--cr-darker) 0%, #1e2028 100%); color: #fff; }
.waitlist-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 2rem; max-width: 640px; margin: 0 auto;
}
.waitlist-card .form-control, .waitlist-card .form-select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: #fff; }
.waitlist-card .form-control::placeholder { color: rgba(255,255,255,0.35); }
.waitlist-card .form-control:focus { background: rgba(255,255,255,0.1); border-color: var(--cr-primary); color: #fff; box-shadow: 0 0 0 0.2rem rgba(69,54,183,0.25); }
.waitlist-card label { color: rgba(255,255,255,0.8); font-size: 0.85rem; font-weight: 600; }
.waitlist-card .form-text { color: rgba(255,255,255,0.4); }
.waitlist-card .text-muted { color: rgba(255,255,255,0.4) !important; }

/* Footer */
.landing-footer { background: var(--cr-darker); color: rgba(255,255,255,0.5); padding: 3rem 0; font-size: 0.85rem; }
.landing-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
.landing-footer a:hover { color: #fff; }

/* Utility */
.btn-cr-primary { background: var(--cr-primary); color: #fff; border: none; font-weight: 600; }
.btn-cr-primary:hover { background: var(--cr-primary-dark); color: #fff; }
.btn-cr-outline { border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.btn-cr-outline:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* FAQ */
.faq-section .accordion-button { font-weight: 600; font-size: 0.95rem; }
.faq-section .accordion-button:not(.collapsed) { background: rgba(69,54,183,0.08); color: #333; }

/* Responsive */
@media (max-width: 768px) {
  .hero-section h1 { font-size: 2.2rem; }
  .hero-section { padding: 6rem 0 3rem; min-height: auto; }
  .pricing-card.highlighted { transform: none; }
  .kanban-preview { display: none; }
}

/* Logo animation */
@keyframes creatrsHueShift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.creatrs-logo-wrap { position: relative !important; display: inline-block !important; line-height: 0 !important; }
.creatrs-logo-wrap .creatrs-logo-static { position: relative !important; display: block !important; }
.creatrs-logo-wrap .creatrs-logo-animated { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: block !important; clip-path: var(--logo-clip, none);  /* Creatrs clipped the gold play button out (inset(0 55% 0 0)); the Merlix wordmark cycles whole */ animation: creatrsHueShift 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .creatrs-logo-wrap .creatrs-logo-animated { animation: none; } }