@import url('/assets/app.css');

.marketing-page { background: #fbfafb; }
.marketing-header { position: sticky; top: 0; z-index: 50; height: 76px; padding: 0 clamp(22px,5vw,76px); display: flex; align-items: center; gap: 36px; border-bottom: 1px solid rgba(87,67,108,.09); background: rgba(255,255,255,.93); backdrop-filter: blur(16px); }
.marketing-header nav { margin-left: auto; display: flex; gap: 28px; }.marketing-header nav a,.marketing-login { color: #665d6d; text-decoration: none; font-size: 12px; font-weight: 600; }.marketing-header nav a:hover,.marketing-login:hover { color: var(--navy); }
.marketing-header-actions { display: flex; align-items: center; gap: 14px; }.marketing-cta { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 30px; border-radius: 12px; color: white; background: linear-gradient(135deg,var(--navy),#745786); box-shadow: 0 12px 26px rgba(48,38,61,.18); text-decoration: none; font-size: 12px; font-weight: 700; transition: transform .18s,box-shadow .18s; }.marketing-cta:hover { color: white; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(48,38,61,.23); }.marketing-cta.small { min-height: 39px; padding: 0 17px; border-radius: 999px; box-shadow: none; }.marketing-sub-cta { color: var(--navy); text-decoration: none; font-size: 12px; font-weight: 700; }
.marketing-hero { min-height: 680px; padding: clamp(70px,8vw,120px) clamp(28px,7vw,110px); display: grid; grid-template-columns: minmax(420px,.92fr) minmax(500px,1.08fr); align-items: center; gap: clamp(45px,7vw,110px); overflow: hidden; background: radial-gradient(circle at 84% 14%,rgba(238,141,167,.12),transparent 28%),linear-gradient(160deg,#fff,#faf7fa 70%,#f2f7f4); }
.marketing-eyebrow,.marketing-section-heading > p,.beta-copy > p,.marketing-final-cta > p { margin: 0 0 18px; color: var(--coral); font: 700 10px 'Outfit',sans-serif; letter-spacing: .24em; }.marketing-hero h1 { margin: 0; color: var(--navy-deep); font-size: clamp(44px,5.1vw,75px); line-height: 1.22; letter-spacing: -.06em; }.marketing-hero h1 span { color: var(--navy); }.marketing-hero-copy > p:not(.marketing-eyebrow) { max-width: 620px; margin: 28px 0 34px; color: var(--muted); font-size: 15px; line-height: 2; }.marketing-hero-actions { display: flex; align-items: center; gap: 23px; }.marketing-hero-copy > small { display: block; margin-top: 15px; color: #928b96; font-size: 10px; }
.marketing-preview { position: relative; min-height: 475px; }.preview-orbit { position: absolute; inset: -65px -80px -65px -40px; border: 1px solid rgba(87,67,108,.08); border-radius: 50%; transform: rotate(-12deg); }.preview-orbit::before,.preview-orbit::after { content: ''; position: absolute; inset: 55px; border: 1px solid rgba(87,67,108,.06); border-radius: 50%; }.preview-orbit::after { inset: 120px; }.preview-orbit span,.preview-orbit i,.preview-orbit b { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }.preview-orbit span { left: 16%; top: 20%; }.preview-orbit i { right: 11%; top: 47%; background: var(--mint); }.preview-orbit b { left: 28%; bottom: 7%; background: #f7cf82; }
.preview-card { position: absolute; z-index: 2; padding: 32px; border: 1px solid rgba(87,67,108,.09); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 30px 90px rgba(48,38,61,.14); backdrop-filter: blur(12px); }.preview-card.main { width: min(100%,430px); left: 50%; top: 50%; transform: translate(-50%,-50%); }.preview-card > span { color: var(--coral); font: 700 9px 'Outfit'; letter-spacing: .2em; }.preview-card > strong { display: block; margin: 13px 0 25px; color: var(--navy-deep); font-size: 25px; line-height: 1.5; }.preview-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }.preview-card li { padding: 11px 13px; display: flex; align-items: center; gap: 12px; border-radius: 9px; color: #5c5462; background: #f8f6f8; font-size: 11px; }.preview-card li i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: white; font: 700 8px 'Outfit'; }
.preview-chip { position: absolute; z-index: 3; min-width: 155px; padding: 12px 15px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(87,67,108,.08); border-radius: 13px; background: rgba(255,255,255,.95); box-shadow: 0 18px 45px rgba(48,38,61,.12); }.preview-chip > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--navy); background: var(--mint-soft); }.preview-chip small,.preview-chip b { display: block; }.preview-chip small { margin-bottom: 2px; color: #a199a5; font: 700 7px 'Outfit'; letter-spacing: .15em; }.preview-chip b { color: var(--navy-deep); font-size: 10px; }.preview-chip.strategy { top: 25px; left: 0; }.preview-chip.content { top: 90px; right: -12px; }.preview-chip.improve { left: 26px; bottom: 24px; }
.marketing-proof { min-height: 82px; padding: 0 clamp(24px,7vw,110px); display: grid; grid-template-columns: repeat(4,1fr); align-items: center; border-block: 1px solid #ebe6ed; background: white; }.marketing-proof span { position: relative; padding-left: 20px; color: #655e69; font-size: 11px; font-weight: 700; }.marketing-proof span::before { content: '✓'; position: absolute; left: 0; color: var(--mint); }
.marketing-section { padding: clamp(75px,9vw,130px) clamp(28px,7vw,110px); }.marketing-section-heading { max-width: 700px; }.marketing-section-heading.centered { margin-inline: auto; text-align: center; }.marketing-section-heading h2 { margin: 0 0 19px; color: var(--navy-deep); font-size: clamp(31px,4vw,52px); line-height: 1.4; letter-spacing: -.045em; }.marketing-section-heading > span { color: var(--muted); font-size: 13px; line-height: 1.9; }
.problem-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(45px,8vw,120px); background: white; }.problem-grid { display: grid; gap: 12px; }.problem-grid article { padding: 23px 25px; display: grid; grid-template-columns: 42px 1fr; column-gap: 13px; border: 1px solid #ebe6ed; border-radius: 14px; background: #fdfcfd; }.problem-grid article > span { grid-row: 1/3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: var(--mint-soft); font: 700 9px 'Outfit'; }.problem-grid h3 { margin: 0 0 6px; color: var(--navy-deep); font-size: 14px; }.problem-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.feature-section { background: #f7f4f7; }.feature-grid { margin-top: 55px; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.feature-grid article { padding: 27px 24px 29px; border: 1px solid #e8e1e9; border-radius: 16px; background: white; box-shadow: 0 14px 40px rgba(48,38,61,.05); }.feature-icon { width: 46px; height: 46px; margin-bottom: 27px; display: grid; place-items: center; border-radius: 13px; color: var(--navy); background: var(--mint-soft); font-size: 18px; }.feature-grid article:nth-child(2) .feature-icon { color: #83586f; background: #faeaf0; }.feature-grid article:nth-child(3) .feature-icon { background: #f2ecf8; }.feature-grid article:nth-child(4) .feature-icon { color: #9b7740; background: #fff5df; }.feature-grid article > span { color: var(--coral); font: 700 8px 'Outfit'; letter-spacing: .16em; }.feature-grid h3 { margin: 8px 0 12px; color: var(--navy-deep); font-size: 17px; }.feature-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.85; }
.steps-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(50px,8vw,130px); background: white; }.marketing-steps { margin: 0; padding: 0; list-style: none; display: grid; }.marketing-steps li { position: relative; min-height: 88px; display: grid; grid-template-columns: 52px 1fr; align-items: start; gap: 18px; }.marketing-steps li:not(:last-child)::after { content: ''; position: absolute; left: 25px; top: 48px; bottom: 8px; width: 1px; background: #ddd5e1; }.marketing-steps b { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid #dcd3e0; border-radius: 50%; color: var(--navy); background: #faf8fa; font: 700 10px 'Outfit'; }.marketing-steps strong,.marketing-steps span { display: block; }.marketing-steps strong { margin: 5px 0 6px; color: var(--navy-deep); font-size: 14px; }.marketing-steps span { color: var(--muted); font-size: 11px; }
.beta-section { display: grid; grid-template-columns: 1fr 380px; gap: clamp(55px,8vw,120px); align-items: center; color: white; background: radial-gradient(circle at 88% 15%,rgba(238,141,167,.2),transparent 28%),linear-gradient(145deg,#30263d,#493750 68%,#33453f); }.beta-copy { max-width: 680px; }.beta-copy h2 { margin: 0 0 20px; font-size: clamp(31px,4vw,50px); line-height: 1.4; letter-spacing: -.045em; }.beta-copy > span { color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.9; }.beta-copy ul { margin: 27px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.beta-copy li { position: relative; padding-left: 20px; color: rgba(255,255,255,.76); font-size: 11px; }.beta-copy li::before { content: '✓'; position: absolute; left: 0; color: var(--mint); }.beta-card { padding: 33px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.09); backdrop-filter: blur(12px); }.beta-card > span { font-size: 11px; font-weight: 700; }.beta-card > strong { display: block; margin: 18px 0 4px; font: 700 45px 'Outfit'; }.beta-card > strong small { font-size: 11px; }.beta-card > p { margin: 0 0 24px; color: rgba(255,255,255,.6); font-size: 10px; }.beta-card .marketing-cta { width: 100%; color: var(--navy-deep); background: white; box-shadow: none; }.beta-card > small { display: block; margin-top: 14px; color: rgba(255,255,255,.5); font-size: 9px; line-height: 1.7; }
.faq-section { background: #f8f6f8; }.faq-grid { max-width: 850px; margin: 48px auto 0; display: grid; gap: 10px; }.faq-grid details { padding: 19px 22px; border: 1px solid #e6dfe8; border-radius: 12px; background: white; }.faq-grid summary { cursor: pointer; color: var(--navy-deep); font-size: 13px; font-weight: 700; }.faq-grid p { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.85; }
.marketing-final-cta { padding: 90px 25px; display: grid; justify-items: center; color: white; background: var(--navy-deep); text-align: center; }.marketing-final-cta .brand-mark { margin-bottom: 24px; }.marketing-final-cta h2 { margin: 0 0 12px; font-size: clamp(31px,4vw,49px); }.marketing-final-cta > span { color: rgba(255,255,255,.62); font-size: 12px; }.marketing-cta.light { margin-top: 28px; color: var(--navy-deep); background: white; box-shadow: none; }.marketing-cta.light:hover { color: var(--navy-deep); }
.marketing-footer { min-height: 120px; padding: 28px clamp(24px,7vw,110px); display: flex; align-items: center; gap: 30px; background: white; }.marketing-footer > div { margin-left: auto; display: flex; gap: 22px; }.marketing-footer > div a { color: var(--muted); font-size: 10px; }.marketing-footer > small { color: #9b949e; font-size: 9px; }
@media (max-width: 1050px) { .marketing-header nav { display: none; }.marketing-hero { grid-template-columns: 1fr; }.marketing-hero-copy { max-width: 750px; }.marketing-preview { width: min(100%,650px); margin: auto; }.problem-section,.steps-section { grid-template-columns: 1fr; }.feature-grid { grid-template-columns: 1fr 1fr; }.beta-section { grid-template-columns: 1fr 340px; } }
@media (max-width: 720px) { .marketing-header { height: 66px; padding: 0 18px; gap: 12px; }.marketing-header .brand { font-size: 18px; }.marketing-header .brand-mark { width: 30px; flex-basis: 30px; }.marketing-login { display: none; }.marketing-header-actions { margin-left: auto; }.marketing-hero { min-height: auto; padding: 62px 22px 75px; grid-template-columns: 1fr; }.marketing-hero h1 { font-size: 40px; }.marketing-hero-actions { align-items: stretch; flex-direction: column; }.marketing-sub-cta { text-align: center; }.marketing-preview { min-height: 420px; }.preview-card.main { padding: 25px; }.preview-chip { min-width: 138px; }.preview-chip.content { right: -8px; }.marketing-proof { padding: 20px 25px; grid-template-columns: 1fr 1fr; gap: 16px; }.marketing-section { padding: 72px 22px; }.feature-grid { grid-template-columns: 1fr; }.beta-section { grid-template-columns: 1fr; }.beta-card { padding: 25px; }.beta-copy ul { grid-template-columns: 1fr; }.marketing-footer { align-items: flex-start; flex-direction: column; }.marketing-footer > div { margin: 0; flex-wrap: wrap; } }
@media (max-width: 450px) { .marketing-header .marketing-cta.small { padding-inline: 13px; }.marketing-preview { transform: scale(.88); transform-origin: center top; margin-bottom: -45px; }.preview-chip.strategy { left: -10px; }.problem-grid article { grid-template-columns: 38px 1fr; padding: 19px; }.marketing-proof { grid-template-columns: 1fr; } }