diff --git a/PlotLine/Views/Home/Index.cshtml b/PlotLine/Views/Home/Index.cshtml index 44fcc13..f16b246 100644 --- a/PlotLine/Views/Home/Index.cshtml +++ b/PlotLine/Views/Home/Index.cshtml @@ -1,43 +1,295 @@ @{ - ViewData["Title"] = "PlotWeaver Studio"; + ViewData["Title"] = "Finally finish your novel"; + ViewData["ShellClass"] = "marketing-shell"; } -
-
-

Story planning workspace

-

PlotWeaver Studio

-

- A story planning workspace for writers who need to track plots, scenes, characters, clues, threads, and continuity without losing their minds. -

-
-
- @if (User.Identity?.IsAuthenticated == true) - { - Go to Projects - } - else - { - Sign in - Create account - } -
-
+
+
+
+
+

PlotWeaver Studio for novelists

+

Finally finish the novel you've always wanted to write.

+

+ Organise characters, plot threads, timelines, and story details in one place so you can stop feeling overwhelmed and start making progress. +

+ +
+
+
9
+
story systems brought together
+
+
+
1
+
calm place to plan, draft, and revise
+
+
+
-
-
-

Plan books, chapters, and scenes

-

Shape a novel, a series, or a messy first draft into a structure you can actually see and revise.

-
-
-

Track characters and relationships

-

Follow appearances, arcs, knowledge, relationships, locations, and the changing emotional pressure of the story.

-
-
-

Follow plot lines and clues

-

Keep promises, reveals, unresolved threads, objects, and story assets visible from setup to payoff.

-
-
-

Review story health

-

Use timelines, metrics, warnings, and continuity checks to find problems before they spread through the manuscript.

-
-
+
+ +
+ +
+
+
+ Book 2 - The Ember Court +

Chapter 18 is ready to draft

+
+ Continuity clear +
+
+
+
Pacing and emotional flow
+ +
+
+
Threads
+
+ The missing heir + Secret alliance + Romance arc +
+
+
+
Next focus
+ Resolve the clue before scene 22. +

Three notes, two characters, one dangling promise.

+
+
+
+
+
+
+
+ +
+
+

Made for real drafting problems

+

Every writer faces these challenges. PlotWeaver helps solve them.

+
+
+ +
+
+
+ +
+

Losing track of story details

+

Your story should feel alive, not impossible to remember.

+

Keep characters, locations, objects, reveals, and world details connected to the scenes where they matter, so the important pieces stay visible while you write.

+
+
+ +
+ +
+

Managing complex plots

+

See the shape of your book before it tangles.

+

Map main plots, subplots, clues, reveals, and romantic beats across chapters so you can spot thin stretches, crowded scenes, and missing payoffs early.

+
+
+ +
+ +
+

Continuity mistakes

+

Catch contradictions before readers do.

+

PlotWeaver surfaces timeline gaps, unresolved dependencies, and story details that no longer line up, helping your manuscript feel intentional and polished.

+
+
+ +
+ +
+

Knowing what to work on next

+

Turn overwhelm into a clear next step.

+

Use scene readiness, revision status, notes, and blockers to decide what deserves your attention today instead of rereading everything to get oriented.

+
+
+ +
+ +
+

Drowning in notes and documents

+

Bring the scattered pieces into one graceful workspace.

+

Replace the pile of half-useful documents with an organised story bible that grows with your draft and stays connected to the work in progress.

+
+
+ +
+ +
+

Tracking character relationships

+

Follow bonds, secrets, tension, and change.

+

Track relationships as they evolve across scenes, including what characters know, what they believe, and how emotional pressure shifts through the story.

+
+
+ +
+ +
+

Keeping plot threads organised

+

Never lose a promise you made to the reader.

+

Give each thread a visible lifecycle from introduction to resolution, whether it is a murder clue, family secret, magic rule, rivalry, or slow-burn confession.

+
+
+ +
+ +
+

Managing series and multiple books

+

Plan the saga without flattening the book in front of you.

+

Track arcs across books, preserve long-term reveals, and keep each instalment focused while still seeing how the series fits together.

+
+
+ +
+ +
+

Understanding pacing and emotional flow

+

Feel the rhythm of the novel as a whole.

+

Review emotional intensity, purpose balance, revision state, and scene shape so the manuscript builds with confidence instead of drifting chapter by chapter.

+
+
+
+
+ +
+
+
+

Loved by story-obsessed writers

+

Authors use PlotWeaver to feel oriented again.

+
+
+
+
"It feels like someone finally designed a planning tool for the way my fantasy series actually works."
+
R. H., epic fantasy author
+
+
+
"I stopped losing clues in old documents. The whole mystery is visible now, including the red herrings."
+
Maya K., crime novelist
+
+
+
"PlotWeaver turned my revision from panic into decisions. I knew what to fix next."
+
Elena S., romance series author
+
+
+
+
+ +
+
+ +
+

Built by an author

+

Created by a novelist who needed the same calm.

+

+ PlotWeaver Studio was created by a novelist who was tired of juggling Word documents, spreadsheets, notebooks, and sticky notes while writing complex stories. +

+

+ The goal was simple: make a beautiful, dependable place where story structure, emotional logic, continuity, and the next writing step can live together. +

+
+
+
+ +
+
+

Start with the story you already have

+

Ready to take control of your story?

+

Whether you're planning your first novel or managing an epic series, PlotWeaver Studio helps you write with confidence.

+ Start Your Free Trial +
+
+
+ +@section Scripts { + +} diff --git a/PlotLine/wwwroot/css/plotline-theme.css b/PlotLine/wwwroot/css/plotline-theme.css index 4924109..167628a 100644 --- a/PlotLine/wwwroot/css/plotline-theme.css +++ b/PlotLine/wwwroot/css/plotline-theme.css @@ -2134,6 +2134,969 @@ a:focus-visible { border-color: rgba(208, 214, 223, 0.28); } +/* Premium marketing homepage */ +.marketing-shell { + max-width: none; + padding-right: 0; + padding-left: 0; +} + +.marketing-shell main { + padding-bottom: 0 !important; +} + +.marketing-home { + --marketing-navy: #1f2a44; + --marketing-gold: #d4a574; + --marketing-cream: #faf8f5; + --marketing-offwhite: #fcfbf9; + --marketing-ink: #201a16; + --marketing-muted: #6f655c; + --marketing-rose: #9f5f55; + --marketing-sage: #5f786c; + --marketing-line: rgba(31, 42, 68, 0.12); + --marketing-shadow: 0 28px 70px rgba(31, 42, 68, 0.15); + overflow: hidden; + margin-top: -1rem; + color: var(--marketing-ink); + background: + radial-gradient(circle at 88% 8%, rgba(212, 165, 116, 0.2), transparent 26rem), + linear-gradient(180deg, var(--marketing-cream) 0%, var(--marketing-offwhite) 42%, #f6efe6 100%); +} + +.marketing-container { + width: min(1180px, calc(100% - 32px)); + margin-inline: auto; +} + +.marketing-eyebrow { + margin: 0 0 0.8rem; + color: #8b612e; + font-size: 0.76rem; + font-weight: 850; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.marketing-home h1, +.marketing-home h2, +.marketing-home h3 { + color: var(--marketing-navy); + font-family: Georgia, "Times New Roman", serif; + letter-spacing: 0; + text-wrap: balance; +} + +.marketing-home h1 { + max-width: 11ch; + margin: 0; + font-size: clamp(3.2rem, 7vw, 6.35rem); + line-height: 0.95; +} + +.marketing-home h2 { + margin: 0; + font-size: clamp(2.1rem, 4.4vw, 4rem); + line-height: 1.02; +} + +.marketing-home h3 { + margin: 0; + font-size: clamp(1.7rem, 3vw, 2.7rem); + line-height: 1.08; +} + +.marketing-lead, +.problem-copy p, +.founder-story p, +.final-cta p, +.section-heading p { + color: var(--marketing-muted); + font-size: clamp(1rem, 1.5vw, 1.18rem); + line-height: 1.7; +} + +.marketing-hero { + position: relative; + padding: clamp(4rem, 8vw, 7.25rem) 0 clamp(3.5rem, 7vw, 6rem); +} + +.marketing-hero::before { + content: ""; + position: absolute; + inset: 0 0 auto; + height: 54%; + pointer-events: none; + background: + linear-gradient(115deg, rgba(31, 42, 68, 0.08), transparent 42%), + radial-gradient(circle at 12% 20%, rgba(212, 165, 116, 0.22), transparent 24rem); +} + +.marketing-hero__grid { + position: relative; + display: grid; + grid-template-columns: minmax(0, 0.86fr) minmax(440px, 1.14fr); + gap: clamp(2rem, 5vw, 5rem); + align-items: center; +} + +.marketing-hero__copy { + display: grid; + gap: 1.35rem; + align-content: center; +} + +.marketing-lead { + max-width: 42rem; + margin: 0; +} + +.marketing-actions { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + align-items: center; +} + +.marketing-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 3.2rem; + border: 1px solid transparent; + border-radius: 999px; + padding: 0.85rem 1.35rem; + font-weight: 800; + line-height: 1.1; + text-decoration: none; + transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; +} + +.marketing-btn:hover, +.marketing-btn:focus { + transform: translateY(-1px); +} + +.marketing-btn--primary { + color: #fffaf2; + background: linear-gradient(135deg, var(--marketing-navy), #26375e); + box-shadow: 0 16px 32px rgba(31, 42, 68, 0.22); +} + +.marketing-btn--primary:hover, +.marketing-btn--primary:focus { + color: #fffaf2; + box-shadow: 0 20px 42px rgba(31, 42, 68, 0.28); +} + +.marketing-btn--secondary { + color: var(--marketing-navy); + border-color: rgba(31, 42, 68, 0.18); + background: rgba(255, 255, 255, 0.68); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88); +} + +.marketing-btn--secondary:hover, +.marketing-btn--secondary:focus { + color: var(--marketing-navy); + border-color: rgba(31, 42, 68, 0.3); + background: #fffdf9; +} + +.hero-proof { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin: 0; +} + +.hero-proof div { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 0.55rem; + align-items: center; + max-width: 18rem; +} + +.hero-proof dt { + color: var(--marketing-navy); + font-family: Georgia, "Times New Roman", serif; + font-size: 2.35rem; + font-weight: 700; + line-height: 1; +} + +.hero-proof dd { + margin: 0; + color: var(--marketing-muted); + font-weight: 650; + line-height: 1.25; +} + +.browser-frame { + border: 1px solid rgba(31, 42, 68, 0.13); + border-radius: 22px; + background: rgba(252, 251, 249, 0.72); + box-shadow: var(--marketing-shadow); + overflow: hidden; +} + +.hero-product { + transform: rotate(1deg); + animation: productFloat 7s ease-in-out infinite; +} + +.browser-frame__chrome { + display: flex; + gap: 0.45rem; + align-items: center; + height: 2.55rem; + border-bottom: 1px solid rgba(31, 42, 68, 0.1); + padding: 0 1rem; + background: linear-gradient(180deg, #fffdf9, #f5efe7); +} + +.browser-frame__chrome span { + width: 0.72rem; + height: 0.72rem; + border-radius: 999px; + background: #d8cabf; +} + +.browser-frame__chrome span:nth-child(2) { + background: var(--marketing-gold); +} + +.browser-frame__chrome span:nth-child(3) { + background: var(--marketing-sage); +} + +.product-mockup { + display: grid; + grid-template-columns: 170px minmax(0, 1fr); + min-height: 470px; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(250, 248, 245, 0.92)), + var(--marketing-offwhite); +} + +.product-sidebar { + display: grid; + align-content: start; + gap: 0.5rem; + border-right: 1px solid rgba(31, 42, 68, 0.1); + padding: 1.1rem; + background: rgba(31, 42, 68, 0.96); + color: rgba(255, 250, 242, 0.72); +} + +.product-sidebar strong { + margin-bottom: 0.8rem; + color: #fffaf2; + font-family: Georgia, "Times New Roman", serif; + font-size: 1.05rem; +} + +.product-sidebar span { + border-radius: 999px; + padding: 0.5rem 0.7rem; + font-size: 0.84rem; + font-weight: 750; +} + +.product-sidebar .is-active { + color: #241b12; + background: var(--marketing-gold); +} + +.product-main { + display: grid; + gap: 1rem; + align-content: start; + padding: clamp(1rem, 2vw, 1.45rem); +} + +.product-topline { + display: flex; + justify-content: space-between; + gap: 1rem; + align-items: start; +} + +.product-topline small, +.mock-label { + color: var(--marketing-muted); + font-size: 0.78rem; + font-weight: 820; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.product-topline h2 { + margin-top: 0.25rem; + font-size: clamp(1.5rem, 2.4vw, 2.15rem); +} + +.product-topline > span { + flex: 0 0 auto; + border-radius: 999px; + padding: 0.38rem 0.7rem; + color: #294a35; + background: #e5f1e8; + font-size: 0.78rem; + font-weight: 800; +} + +.product-grid { + display: grid; + grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); + gap: 0.85rem; +} + +.product-panel { + display: grid; + gap: 0.75rem; + min-height: 150px; + border: 1px solid rgba(31, 42, 68, 0.1); + border-radius: 16px; + padding: 1rem; + background: rgba(255, 253, 249, 0.92); + box-shadow: 0 16px 30px rgba(31, 42, 68, 0.07); +} + +.product-panel--wide { + grid-row: span 2; +} + +.product-panel p { + margin: 0; + color: var(--marketing-muted); +} + +.mock-chart { + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + gap: 0.55rem; + align-items: end; + min-height: 220px; + padding-top: 1rem; +} + +.mock-chart span { + height: var(--height); + min-height: 2.2rem; + border-radius: 999px 999px 8px 8px; + background: linear-gradient(180deg, var(--marketing-gold), #8f5d3b); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); +} + +.thread-list { + display: grid; + gap: 0.55rem; +} + +.thread-list span { + border-left: 4px solid var(--marketing-gold); + border-radius: 10px; + padding: 0.55rem 0.65rem; + color: var(--marketing-navy); + background: rgba(212, 165, 116, 0.13); + font-weight: 760; +} + +.problem-intro { + padding: clamp(3rem, 7vw, 6rem) 0 1rem; + text-align: center; +} + +.problem-intro h2, +.section-heading h2 { + max-width: 850px; + margin-inline: auto; +} + +.problem-stack { + padding: 1rem 0 clamp(4rem, 8vw, 7rem); +} + +.problem-section { + display: grid; + grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); + gap: clamp(1.5rem, 5vw, 5rem); + align-items: center; + min-height: 460px; + padding: clamp(2.5rem, 6vw, 5rem) 0; +} + +.problem-section--reverse .problem-visual { + order: 2; +} + +.problem-copy { + display: grid; + gap: 1rem; +} + +.problem-copy p { + max-width: 36rem; + margin: 0; +} + +.problem-visual { + position: relative; + min-height: 320px; + border: 1px solid rgba(31, 42, 68, 0.11); + border-radius: 24px; + background: + linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(242, 230, 215, 0.88)), + var(--marketing-offwhite); + box-shadow: 0 22px 56px rgba(31, 42, 68, 0.1); + overflow: hidden; +} + +.visual-notes span, +.visual-docs span, +.visual-series span, +.visual-threads span, +.visual-warning span { + position: absolute; + border: 1px solid rgba(31, 42, 68, 0.1); + border-radius: 14px; + padding: 0.75rem 0.9rem; + color: var(--marketing-navy); + background: #fffdf9; + box-shadow: 0 14px 28px rgba(31, 42, 68, 0.08); + font-weight: 760; +} + +.visual-notes span:nth-child(1) { top: 14%; left: 12%; transform: rotate(-5deg); } +.visual-notes span:nth-child(2) { top: 28%; right: 10%; transform: rotate(4deg); } +.visual-notes span:nth-child(3) { bottom: 22%; left: 16%; transform: rotate(3deg); } +.visual-notes span:nth-child(4) { bottom: 13%; right: 18%; transform: rotate(-4deg); } + +.visual-plot { + background: linear-gradient(135deg, #fffdf9, #f2e8d9); +} + +.plot-lane { + position: absolute; + left: 12%; + right: 12%; + height: 0.62rem; + border-radius: 999px; +} + +.lane-gold { top: 28%; background: rgba(212, 165, 116, 0.86); } +.lane-navy { top: 50%; background: rgba(31, 42, 68, 0.82); } +.lane-rose { top: 72%; background: rgba(159, 95, 85, 0.78); } + +.plot-node { + position: absolute; + width: 4.25rem; + height: 4.25rem; + border: 0.55rem solid #fffaf2; + border-radius: 999px; + background: var(--marketing-gold); + box-shadow: 0 15px 28px rgba(31, 42, 68, 0.16); +} + +.node-one { top: 18%; left: 23%; } +.node-two { top: 40%; right: 24%; background: var(--marketing-navy); } +.node-three { bottom: 14%; left: 44%; background: var(--marketing-rose); } + +.visual-warning { + display: grid; + gap: 0.75rem; + align-content: center; + padding: 2rem; +} + +.visual-warning strong { + color: var(--marketing-navy); + font-family: Georgia, "Times New Roman", serif; + font-size: 1.6rem; +} + +.visual-warning span { + position: static; + border-left: 4px solid var(--marketing-gold); +} + +.visual-next { + display: grid; + align-content: center; + gap: 0.8rem; + padding: 2rem; +} + +.visual-next small { + color: #8b612e; + font-weight: 850; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.visual-next strong { + color: var(--marketing-navy); + font-family: Georgia, "Times New Roman", serif; + font-size: clamp(2rem, 4vw, 3.5rem); + line-height: 1; +} + +.visual-next p { + max-width: 22rem; + margin: 0; + color: var(--marketing-muted); + font-size: 1.1rem; + line-height: 1.6; +} + +.visual-docs span:nth-child(1) { top: 13%; left: 12%; } +.visual-docs span:nth-child(2) { top: 23%; right: 12%; } +.visual-docs span:nth-child(3) { top: 45%; left: 23%; } +.visual-docs span:nth-child(4) { bottom: 18%; left: 12%; } +.visual-docs span:nth-child(5) { bottom: 14%; right: 15%; } + +.visual-relationships::before, +.visual-relationships::after { + content: ""; + position: absolute; + inset: 22% 18%; + border: 2px solid rgba(31, 42, 68, 0.16); + border-radius: 50%; +} + +.visual-relationships::after { + inset: 34% 22%; + border-color: rgba(212, 165, 116, 0.44); + transform: rotate(22deg); +} + +.person { + position: absolute; + z-index: 1; + display: grid; + place-items: center; + width: 5rem; + height: 5rem; + border: 0.4rem solid #fffaf2; + border-radius: 999px; + color: #fffaf2; + background: var(--marketing-navy); + box-shadow: 0 16px 30px rgba(31, 42, 68, 0.18); + font-weight: 850; +} + +.person-a { top: 13%; left: 18%; } +.person-b { top: 21%; right: 18%; background: var(--marketing-rose); } +.person-c { bottom: 17%; left: 24%; background: var(--marketing-sage); } +.person-d { right: 24%; bottom: 13%; background: var(--marketing-gold); color: #2a2119; } + +.visual-threads { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0.85rem; + align-content: center; + padding: 2rem; +} + +.visual-threads::before { + content: ""; + position: absolute; + left: 11%; + right: 11%; + top: 50%; + height: 0.32rem; + border-radius: 999px; + background: rgba(31, 42, 68, 0.14); +} + +.visual-threads span { + position: relative; + display: grid; + place-items: center; + min-height: 6.5rem; + text-align: center; +} + +.visual-series { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0.8rem; + align-content: center; + padding: 2rem; +} + +.visual-series span { + position: static; + display: grid; + place-items: center; + min-height: 10.5rem; + border-radius: 12px 12px 18px 18px; + color: #fffaf2; + background: linear-gradient(180deg, var(--marketing-navy), #314263); + text-align: center; +} + +.visual-series span:nth-child(2) { + background: linear-gradient(180deg, #75503a, #533424); +} + +.visual-series span:nth-child(3) { + background: linear-gradient(180deg, #5f786c, #3d564b); +} + +.visual-series span:nth-child(4) { + color: #2a2119; + background: linear-gradient(180deg, #e1bd8e, var(--marketing-gold)); +} + +.visual-flow { + display: grid; + align-items: center; + padding: 2rem; +} + +.flow-line { + position: absolute; + left: 8%; + right: 8%; + top: 50%; + height: 8rem; + border-bottom: 0.38rem solid var(--marketing-gold); + border-radius: 0 0 50% 50%; + transform: translateY(-54%); +} + +.visual-flow span { + position: absolute; + left: var(--pos); + bottom: 26%; + border-radius: 999px; + padding: 0.55rem 0.8rem; + color: var(--marketing-navy); + background: #fffaf2; + box-shadow: 0 12px 26px rgba(31, 42, 68, 0.1); + font-weight: 800; +} + +.social-proof { + padding: clamp(4rem, 8vw, 7rem) 0; + background: var(--marketing-offwhite); +} + +.section-heading { + display: grid; + gap: 0.7rem; + margin-bottom: clamp(1.5rem, 4vw, 3rem); + text-align: center; +} + +.testimonial-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; +} + +.testimonial-grid figure { + display: grid; + align-content: space-between; + min-height: 250px; + margin: 0; + border: 1px solid rgba(31, 42, 68, 0.1); + border-radius: 18px; + padding: clamp(1.25rem, 2.3vw, 1.75rem); + background: + linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(250, 248, 245, 0.88)), + #fff; + box-shadow: 0 18px 42px rgba(31, 42, 68, 0.08); +} + +.testimonial-grid blockquote { + margin: 0; + color: var(--marketing-navy); + font-family: Georgia, "Times New Roman", serif; + font-size: 1.32rem; + line-height: 1.4; +} + +.testimonial-grid figcaption { + margin-top: 1.35rem; + color: #8b612e; + font-weight: 820; +} + +.founder-story { + padding: clamp(4rem, 8vw, 7rem) 0; + background: + radial-gradient(circle at 10% 20%, rgba(212, 165, 116, 0.18), transparent 22rem), + var(--marketing-cream); +} + +.founder-story__grid { + display: grid; + grid-template-columns: minmax(180px, 0.35fr) minmax(0, 0.65fr); + gap: clamp(1.5rem, 5vw, 4rem); + align-items: center; +} + +.founder-mark { + display: grid; + place-items: center; + aspect-ratio: 1; + border: 1px solid rgba(31, 42, 68, 0.12); + border-radius: 28px; + color: #fffaf2; + background: + linear-gradient(135deg, rgba(212, 165, 116, 0.3), transparent), + var(--marketing-navy); + box-shadow: var(--marketing-shadow); + font-family: Georgia, "Times New Roman", serif; + font-size: clamp(3rem, 8vw, 6rem); +} + +.founder-story h2 { + margin-bottom: 1rem; +} + +.founder-story p { + max-width: 48rem; + margin: 0 0 1rem; +} + +.final-cta { + padding: clamp(4rem, 8vw, 7rem) 0; + background: var(--marketing-navy); +} + +.final-cta__inner { + display: grid; + justify-items: center; + gap: 1rem; + border: 1px solid rgba(255, 250, 242, 0.14); + border-radius: 28px; + padding: clamp(2.25rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem); + background: + radial-gradient(circle at 50% 0%, rgba(212, 165, 116, 0.28), transparent 26rem), + linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent); + text-align: center; + box-shadow: 0 28px 70px rgba(10, 16, 29, 0.2); +} + +.final-cta h2 { + color: #fffaf2; +} + +.final-cta p { + max-width: 42rem; + margin: 0 0 0.75rem; + color: rgba(255, 250, 242, 0.78); +} + +.final-cta .marketing-eyebrow { + color: var(--marketing-gold); +} + +.final-cta .marketing-btn--primary { + color: #241b12; + background: linear-gradient(135deg, #e3bd8e, var(--marketing-gold)); + box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22); +} + +.final-cta .marketing-btn--primary:hover, +.final-cta .marketing-btn--primary:focus { + color: #241b12; +} + +.reveal-section { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.72s ease, transform 0.72s ease; +} + +.marketing-hero.reveal-section { + opacity: 1; + transform: none; +} + +.reveal-section.is-visible { + opacity: 1; + transform: translateY(0); +} + +@keyframes productFloat { + 0%, 100% { + transform: rotate(1deg) translateY(0); + } + + 50% { + transform: rotate(1deg) translateY(-12px); + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-product, + .reveal-section { + animation: none; + transition: none; + } + + .reveal-section { + opacity: 1; + transform: none; + } +} + +@media (max-width: 1060px) { + .marketing-hero__grid, + .problem-section, + .founder-story__grid { + grid-template-columns: 1fr; + } + + .marketing-home h1 { + max-width: 13ch; + } + + .hero-product { + transform: none; + animation: none; + } + + .problem-section--reverse .problem-visual { + order: 0; + } + + .testimonial-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 760px) { + .marketing-container { + width: min(100% - 24px, 1180px); + } + + .marketing-home { + margin-top: -0.75rem; + } + + .marketing-hero { + padding-top: 2.25rem; + } + + .marketing-actions, + .marketing-actions .marketing-btn { + width: 100%; + } + + .product-mockup { + grid-template-columns: 1fr; + min-height: 0; + } + + .product-sidebar { + display: flex; + gap: 0.4rem; + overflow-x: auto; + border-right: 0; + border-bottom: 1px solid rgba(31, 42, 68, 0.1); + } + + .product-sidebar strong { + flex: 0 0 auto; + margin: 0 0.4rem 0 0; + } + + .product-sidebar span { + flex: 0 0 auto; + } + + .product-topline, + .hero-proof { + display: grid; + } + + .hero-proof { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.65rem; + } + + .hero-proof div { + display: block; + } + + .hero-proof dt { + font-size: 1.8rem; + } + + .hero-proof dd { + font-size: 0.86rem; + } + + .product-grid { + grid-template-columns: 1fr; + } + + .mock-chart { + min-height: 145px; + } + + .problem-section { + min-height: 0; + padding: 2.25rem 0; + } + + .problem-visual { + min-height: 260px; + border-radius: 18px; + } + + .visual-series, + .visual-threads { + grid-template-columns: repeat(2, 1fr); + padding: 1rem; + } + + .visual-series span { + min-height: 7.5rem; + } + + .visual-docs span, + .visual-notes span { + max-width: 12rem; + font-size: 0.88rem; + } + + .founder-mark { + max-width: 220px; + } +} + +@media (max-width: 520px) { + .marketing-home h1 { + font-size: clamp(2.7rem, 13vw, 3.55rem); + line-height: 1; + } + + .browser-frame { + border-radius: 16px; + } + + .product-sidebar span:not(.is-active) { + display: none; + } + + .visual-flow span { + font-size: 0.78rem; + } + + .person { + width: 4.3rem; + height: 4.3rem; + } +} + @media (max-width: 1200px) { .timeline-filter-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));