/**
* ============================================================================
* LANDING STYLES (styles.css)
* ============================================================================
* Global styles for the landing page.
* Defines the "Warm Cream" color palette, typography, and layout variables.
*/
:root {
/* Warm cream palette */
--bg: #fffdf9;
--bg-alt: #fbf8f3;
--bg-warm: #f7f3ed;
--surface: #ffffff;
--surface-hover: #faf7f2;
--text: #1c1917;
--text-secondary: #57534e;
--text-muted: #78716c;
--border: #e7e5e4;
--border-light: #f5f5f4;
--primary: #1c1917;
--primary-hover: #292524;
--accent: #d97706;
--accent-light: #fef3c7;
--accent-soft: #fffbeb;
--success: #059669;
--success-light: #d1fae5;
/* Cursor */
--cursor-dot: rgba(28, 25, 23, 0.85);
--cursor-ring: rgba(28, 25, 23, 0.25);
/* Layout helpers */
--social-proof-h: 56px;
/* approx. height of social proof bar */
--ticker-h: 56px;
/* diagram ticker height estimate */
--ticker-gap: 24px;
/* extra gap to lift the ticker a bit above the viewport bottom */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family:
"Inter",
-apple-system,
BlinkMacSystemFont,
sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Custom Text Selection */
::selection {
background-color: rgba(253, 230, 138, 0.7);
color: #1c1917;
}
::-moz-selection {
background-color: rgba(253, 230, 138, 0.7);
color: #1c1917;
}
/* Premium cursor theme: rounded arrow, consistent across hover */
/* Hotspot at (0,0). Uses a smoother shape closer to the provided reference. */
/* Apply to all elements universally to prevent flash of default cursor */
*,
*::before,
*::after,
html,
body,
a,
button,
input,
textarea,
select,
label,
div,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
[role="button"],
[tabindex] {
/* Cursor based on provided SVG, tuned for visibility with soft shadow */
cursor:
url("data:image/svg+xml;utf8,") 0 0,
auto !important;
}
/* Interactive affordance: accent cursor and subtle motion cues on hover */
.interactive,
a,
button,
.btn,
.diagram-item,
.pricing-cta,
.logo,
.nav-links a,
.footer-col a,
.step-card {
transition:
transform 120ms ease,
box-shadow 160ms ease,
border-color 160ms ease,
color 160ms ease;
}
a:hover,
button:hover,
.btn:hover,
.diagram-item:hover,
.pricing-cta:hover,
.logo:hover,
.nav-links a:hover,
.footer-col a:hover,
.step-card:hover,
.interactive:hover,
.pricing-card-premium:hover,
.feature-card:hover,
.use-case-card:hover {
/* Accent-tinted cursor to indicate clickability */
cursor:
url("data:image/svg+xml;utf8,") 0 0,
auto !important;
transform: translateY(-1px);
}
/* Ensure nested elements inherit the accent-tinted cursor from their interactive parents */
a:hover *,
button:hover *,
.btn:hover *,
.diagram-item:hover *,
.pricing-cta:hover *,
.logo:hover *,
.nav-links a:hover *,
.footer-col a:hover *,
.step-card:hover *,
.interactive:hover *,
.pricing-card-premium:hover *,
.feature-card:hover *,
.use-case-card:hover *,
#billingToggle:hover *,
#billingToggle span:hover {
cursor: inherit !important;
}
/* Ensure the billing toggle (id="billingToggle") and pricing call-to-action show pointer cursor
and receive the accent-tinted cursor on hover (match other interactive elements). */
#billingToggle,
.pricing-cta {
cursor: pointer;
transition:
background-color 160ms ease,
border-color 160ms ease,
color 160ms ease,
transform 160ms ease;
}
#billingToggle:hover,
.pricing-cta:hover {
cursor:
url("data:image/svg+xml;utf8,") 0 0,
auto !important;
box-shadow: 0 6px 18px rgba(217, 119, 6, 0.08);
border-color: var(--accent);
transform: translateY(-1px);
}
/* Improve visual affordance for clickable buttons while staying on-theme */
.btn:hover {
filter: brightness(0.985);
}
.btn-secondary:hover {
background: var(--bg-alt);
border-color: #d6d3d1;
color: var(--text);
transform: translateY(-1px);
}
.btn-ghost:hover {
background: var(--bg-alt);
color: var(--text);
transform: translateY(-1px);
}
/* Strengthen hover affordance for key clickable elements */
.diagram-item:hover {
box-shadow: 0 2px 10px rgba(217, 119, 6, 0.1);
border-color: var(--accent);
}
.pricing-cta:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.nav-links a:hover,
.footer-col a:hover {
color: var(--accent);
}
.logo:hover {
filter: brightness(0.98);
}
/* Accessibility helpers */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
.visually-hidden-focusable {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.visually-hidden-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 8px;
padding: 8px 12px;
border-radius: 8px;
background: var(--bg-alt);
border: 1px solid var(--border);
}
.container {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
/* Diagram preview: fixed aspect with matching background */
.diagram-preview-content {
aspect-ratio: 16 / 9;
width: 100%;
/* Fallback height for browsers without aspect-ratio support */
min-height: 360px;
background: #f5f5f4;
/* requested background color */
border-radius: 0;
/* remove rounded edges */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.diagram-preview-content .demo-diagram-image {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
/* remove inline image baseline gap */
background: transparent;
}
/* Remove rounding/padding in the preview window wrapper if present */
.diagram-preview-window {
border-radius: 0;
}
.diagram-preview-panel {
padding: 0;
}
.preview-window-bar {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* AI visual output demo: match background and remove spacing */
.use-case-demo .demo-diagram-preview {
background: #f5f5f4;
/* requested background color */
border-radius: 0;
padding: 0;
box-shadow: none;
border: none;
}
.use-case-demo .demo-diagram-preview .demo-diagram-image {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* Ensure premium demo variant inherits the same background with no subtle tint */
.use-case-demo-premium .demo-diagram-preview {
background: #f5f5f4;
/* requested background color */
box-shadow: none;
border: none;
}
/* Guard against container tint under the image causing a visible strip */
.use-case-card.use-case-featured .use-case-demo {
background: #f5f5f4;
/* component background */
border: 1px solid var(--border);
/* match prompt border color */
border-radius: 12px;
/* match prompt rounded look */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
/* subtle shadow like prompt */
}
/* If the demo has an inner wrapper creating a contrasting edge, unify it */
.use-case-demo .demo-stage,
.use-case-demo .demo-container,
.use-case-demo .demo-shell {
background: #f5f5f4;
border-radius: 0;
}
/* Typography */
h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--text);
}
/* Gradient text for highlights */
.gradient-text {
background: linear-gradient(135deg, var(--accent) 0%, #b45309 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
h2 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
}
h3 {
font-size: 1.125rem;
font-weight: 600;
}
h4 {
font-size: 0.9375rem;
font-weight: 600;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 10px;
font-weight: 500;
font-size: 0.9375rem;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Focus styles */
.btn:focus-visible,
.nav a:focus-visible,
.footer-col a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 10px;
}
/* Micro-interaction: magnetic button (subtle) */
[data-micro="magnetic"] {
will-change: transform;
}
.btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--bg-alt);
border-color: #d6d3d1;
}
.btn-accent {
background: var(--accent);
color: white;
}
.btn-accent:hover {
background: #b45309;
}
/* Force landing buttons to use filled amber on hover (consistent across landing pages) */
.btn:hover,
a.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-accent:hover,
.pricing-cta:hover,
.nav-buttons .btn:hover,
.mobile-overlay-menu .btn:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
box-shadow: 0 8px 20px rgba(217, 119, 6, 0.12);
transform: translateY(-1px);
}
/* Ensure icons inside buttons stay visible on amber hover */
.btn:hover .icon,
.btn:hover svg {
color: #fff !important;
fill: currentColor !important;
}
.btn-lg {
padding: 16px 32px;
font-size: 1rem;
}
.btn-xl {
padding: 18px 40px;
font-size: 1.0625rem;
font-weight: 600;
}
/* Gradient Sweep Button Animation */
.btn-gradient-sweep {
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-gradient-sweep::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 100%);
animation: gradient-sweep 3s ease-in-out infinite;
z-index: 2;
pointer-events: none;
}
@keyframes gradient-sweep {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
.btn .icon {
width: 18px;
height: 18px;
}
/* Navigation */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(255, 253, 249, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text);
font-weight: 600;
font-size: 1.125rem;
}
.logo-icon {
width: 28px;
height: 28px;
}
.nav-links {
display: flex;
gap: 32px;
}
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--text);
}
.nav-buttons {
display: flex;
align-items: center;
gap: 12px;
}
.btn-ghost {
background: transparent;
color: var(--text);
padding: 10px 16px;
}
.btn-ghost:hover {
background: var(--bg-alt);
}
/* Hero */
.hero {
padding: 140px 0 60px;
background: var(--bg);
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: radial-gradient(ellipse at 70% 30%,
var(--accent-soft) 0%,
transparent 50%);
pointer-events: none;
}
.hero .container {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
}
/* Make initial fold end exactly at the ticker */
.hero {
min-height: calc(100vh - var(--ticker-h) - var(--ticker-gap));
}
/* Hero Highlight with Left-to-Right Reveal Animation */
.hero-content h1 .highlight {
color: var(--accent);
display: inline-block;
position: relative;
background: linear-gradient(90deg, var(--accent) 0%, #ea8c00 50%, var(--accent) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: highlightReveal 0.8s ease-out 0.3s both, highlightShimmer 4s ease-in-out 1.5s infinite;
}
.hero-content h1 .highlight::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), #ea8c00);
border-radius: 2px;
animation: underlineReveal 0.6s ease-out 0.8s forwards;
}
@keyframes highlightReveal {
0% {
opacity: 0;
transform: translateX(-20px);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
}
@keyframes highlightShimmer {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes underlineReveal {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.hero-content {
position: relative;
z-index: 1;
}
/* Hero Badge - Premium Pill Style */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 12px;
background: linear-gradient(135deg, rgba(255, 251, 235, 0.9), rgba(254, 243, 199, 0.8));
border: 1px solid rgba(217, 119, 6, 0.2);
border-radius: 50px;
font-size: 0.8125rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 20px;
backdrop-filter: blur(8px);
box-shadow: 0 2px 12px rgba(217, 119, 6, 0.08);
animation: badgeFadeIn 0.6s ease-out both;
transition: all 0.3s ease;
}
.hero-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(217, 119, 6, 0.15);
}
.badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: badgePulse 2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
}
@keyframes badgeFadeIn {
0% {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes badgePulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 6px rgba(217, 119, 6, 0);
transform: scale(1.1);
}
}
/* Hero Content Entrance Animations */
.hero-content h1 {
animation: heroTextFadeIn 0.7s ease-out 0.15s both;
}
.hero-desc {
font-size: 1.1875rem;
color: var(--text-secondary);
margin: 24px 0 32px;
max-width: 520px;
line-height: 1.7;
animation: heroTextFadeIn 0.7s ease-out 0.3s both;
}
.hero-actions {
animation: heroTextFadeIn 0.7s ease-out 0.45s both;
}
@keyframes heroTextFadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.btn-secondary.btn-xl {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
}
.btn-secondary.btn-xl:hover {
background: var(--bg-alt);
border-color: var(--accent);
color: var(--accent);
}
/* Social Proof Badge */
.social-proof-badge {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 20px;
padding: 10px 18px 10px 14px;
background: linear-gradient(135deg, rgba(255, 251, 235, 0.8), rgba(254, 243, 199, 0.6));
border: 1px solid rgba(217, 119, 6, 0.15);
border-radius: 50px;
font-size: 0.875rem;
color: var(--text-secondary);
backdrop-filter: blur(8px);
animation: heroTextFadeIn 0.7s ease-out 0.6s both;
transition: all 0.3s ease;
}
.social-proof-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(217, 119, 6, 0.12);
border-color: rgba(217, 119, 6, 0.25);
}
.social-proof-icon {
width: 20px;
height: 20px;
stroke: var(--success);
flex-shrink: 0;
}
.social-proof-badge span {
line-height: 1.4;
}
.social-proof-badge strong {
color: var(--text);
font-weight: 600;
}
@media (max-width: 768px) {
.social-proof-badge {
margin-top: 16px;
padding: 8px 14px 8px 10px;
font-size: 0.8125rem;
gap: 8px;
}
.social-proof-icon {
width: 18px;
height: 18px;
}
}
/* Hero Preview */
.hero-preview {
position: relative;
}
.preview-window {
background: var(--surface);
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.window-bar {
display: flex;
gap: 6px;
padding: 14px 16px;
background: var(--bg-alt);
border-bottom: 1px solid var(--border);
}
.window-bar .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--border);
}
/* Safari-like colored window controls */
.window-bar .dot:nth-child(1) {
background: #ff5f57;
}
.window-bar .dot:nth-child(2) {
background: #febc2e;
}
.window-bar .dot:nth-child(3) {
background: #28c840;
}
.window-title {
margin-left: auto;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.window-body {
display: flex;
min-height: 320px;
}
/* ======================================
Hero Showcase - Warm & Premium
====================================== */
.hero-showcase {
width: 100%;
position: relative;
animation: showcaseFadeIn 0.8s ease-out 0.5s both;
}
@keyframes showcaseFadeIn {
0% {
opacity: 0;
transform: translateY(30px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Showcase Frame with Subtle Glow */
.showcase-frame {
background: #ffffff;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.04),
0 16px 32px rgba(0, 0, 0, 0.04),
0 0 60px rgba(217, 119, 6, 0.12);
border: 1px solid rgba(217, 119, 6, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.showcase-frame:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.04),
0 8px 20px rgba(0, 0, 0, 0.06),
0 24px 48px rgba(0, 0, 0, 0.06),
0 0 80px rgba(217, 119, 6, 0.16);
}
/* Prompt Display Section */
.prompt-display {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 28px;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border-bottom: 1px solid rgba(217, 119, 6, 0.15);
transition: all 0.3s ease;
}
.prompt-icon-wrap {
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, var(--accent) 0%, #ea8c00 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
transition: all 0.3s ease;
}
.showcase-frame:hover .prompt-icon-wrap {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4);
}
.prompt-icon-wrap svg {
width: 24px;
height: 24px;
stroke: #ffffff;
}
.prompt-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.prompt-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.prompt-text {
font-size: 1.25rem;
font-weight: 600;
color: var(--text);
margin: 0;
line-height: 1.3;
}
/* Diagram Display */
.diagram-display {
padding: 40px 32px;
background: #f5f5f4;
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
}
.diagram-result {
max-width: 100%;
max-height: 300px;
object-fit: contain;
transition: transform 0.4s ease;
}
.showcase-frame:hover .diagram-result {
transform: scale(1.02);
}
/* Responsive */
@media (max-width: 768px) {
.showcase-frame {
border-radius: 16px;
}
.prompt-display {
padding: 20px;
gap: 14px;
}
.prompt-icon-wrap {
width: 44px;
height: 44px;
}
.prompt-icon-wrap svg {
width: 22px;
height: 22px;
}
.prompt-text {
font-size: 1.0625rem;
}
.prompt-content {
text-align: left;
align-items: flex-start;
}
.prompt-label {
text-align: left;
}
.diagram-display {
padding: 24px 20px;
min-height: 240px;
}
.diagram-result {
max-height: 220px;
}
}
/* Legacy hero-video-wrap for compatibility */
.hero-video-wrap {
width: 100%;
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
padding: 0;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
.preview-sidebar {
width: 48px;
background: var(--bg-alt);
border-right: 1px solid var(--border);
padding: 12px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.sidebar-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--border);
}
.sidebar-icon.active {
background: var(--primary);
}
.preview-main {
flex: 1;
display: flex;
flex-direction: column;
}
.preview-chat {
padding: 16px;
border-bottom: 1px solid var(--border);
}
.chat-msg {
padding: 10px 14px;
border-radius: 10px;
font-size: 0.8125rem;
max-width: 85%;
}
.chat-msg.user {
background: var(--bg-alt);
color: var(--text-secondary);
margin-bottom: 8px;
}
.chat-msg.ai {
background: var(--primary);
color: white;
margin-left: auto;
max-width: 70%;
}
/* New Chat Interface Styles */
.chat-interface {
display: flex;
flex-direction: column;
height: 100%;
min-height: 340px;
background: var(--surface);
width: 100%;
}
.chat-messages {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
}
.chat-message {
display: flex;
gap: 12px;
align-items: flex-start;
}
.chat-message.chat-user {
flex-direction: row;
}
.chat-message.chat-ai {
flex-direction: row;
}
.chat-avatar {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 600;
flex-shrink: 0;
}
.chat-avatar-user {
background: var(--bg-alt);
color: var(--text-secondary);
}
.chat-avatar-ai {
background: var(--accent-soft);
color: var(--accent);
}
.chat-avatar-ai svg {
width: 18px;
height: 18px;
}
.chat-bubble {
padding: 12px 16px;
border-radius: 12px;
font-size: 0.875rem;
line-height: 1.5;
max-width: 280px;
}
.chat-bubble-user {
background: var(--bg-alt);
color: var(--text);
border-bottom-left-radius: 4px;
}
.chat-bubble-ai {
background: var(--accent-soft);
color: var(--text);
border-bottom-left-radius: 4px;
display: flex;
flex-direction: column;
gap: 12px;
}
.chat-diagram-preview {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px;
}
.mini-flow {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.flow-node {
background: var(--accent-soft);
border: 1.5px solid var(--accent);
padding: 6px 14px;
border-radius: 6px;
font-size: 0.7rem;
font-weight: 500;
color: var(--accent);
text-align: center;
min-width: 80px;
}
.flow-node.flow-start,
.flow-node.flow-end {
border-radius: 20px;
}
.flow-node.flow-decision {
transform: rotate(0deg);
border-radius: 4px;
background: var(--bg-warm);
border-color: var(--accent);
}
.flow-arrow {
width: 2px;
height: 12px;
background: var(--accent);
position: relative;
}
.flow-arrow::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid var(--accent);
}
.flow-branches {
display: flex;
gap: 16px;
margin-top: 6px;
}
.flow-branch {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.branch-label {
font-size: 0.6rem;
color: var(--text-secondary);
font-weight: 500;
}
.chat-status {
font-size: 0.7rem;
color: var(--text-secondary);
margin-top: 4px;
}
.chat-input-area {
padding: 16px 20px;
border-top: 1px solid var(--border);
background: var(--bg-alt);
}
.chat-input-box {
display: flex;
align-items: center;
gap: 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 14px;
transition: border-color 0.2s;
}
.chat-input-box:focus-within {
border-color: var(--accent);
}
.chat-input-actions {
display: flex;
gap: 6px;
}
.chat-action-btn {
width: 32px;
height: 32px;
border: none;
background: var(--bg-alt);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
color: var(--text-secondary);
}
.chat-action-btn:hover {
background: var(--accent-soft);
color: var(--accent);
}
.chat-action-btn svg {
width: 16px;
height: 16px;
}
.chat-input-field {
flex: 1;
display: flex;
align-items: center;
}
.typing-demo {
color: var(--text);
font-size: 0.875rem;
}
.typing-cursor {
display: inline-block;
width: 2px;
height: 14px;
background: var(--accent);
margin-left: 2px;
animation: blink 1s infinite;
}
@keyframes blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
.chat-send-btn {
width: 36px;
height: 36px;
border: none;
background: var(--accent);
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
color: white;
}
.chat-send-btn:hover {
background: var(--accent-dark);
transform: scale(1.05);
}
.chat-send-btn svg {
width: 18px;
height: 18px;
}
.preview-diagram {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.diagram-placeholder svg {
width: 200px;
height: 120px;
}
/* Image/GIF Placeholder styles */
.media-placeholder {
background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-alt) 100%);
border: 2px dashed var(--border);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 0.875rem;
position: relative;
overflow: hidden;
}
.media-placeholder::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg,
transparent,
transparent 10px,
rgba(0, 0, 0, 0.02) 10px,
rgba(0, 0, 0, 0.02) 20px);
}
.media-placeholder-icon {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.5;
}
.media-placeholder span {
position: relative;
z-index: 1;
}
.media-placeholder-label {
font-weight: 500;
margin-bottom: 4px;
}
.media-placeholder-hint {
font-size: 0.75rem;
color: var(--text-muted);
}
/* Social Proof Bar */
.social-proof {
padding: 20px 0;
background: var(--accent-soft);
border-bottom: 1px solid var(--accent-light);
}
.social-proof-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.proof-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(--text-secondary);
}
.proof-item strong {
color: var(--text);
font-weight: 600;
}
.proof-icon {
width: 20px;
height: 20px;
color: var(--accent);
}
.proof-stars {
display: flex;
gap: 2px;
color: var(--accent);
}
.proof-stars svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* Ticker */
.ticker {
padding: 24px 0;
background: var(--bg-alt);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.ticker-track {
display: flex;
width: max-content;
animation: scroll 30s linear infinite;
}
.ticker[data-interactive="true"] .ticker-track {
animation-play-state: running;
}
.ticker:hover .ticker-track {
animation-play-state: paused;
}
/* Features cards selection state */
.features-grid .feature-card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.features-grid .feature-card.selected {
border-color: var(--accent);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
background: linear-gradient(180deg,
var(--surface) 0%,
rgba(255, 251, 235, 0.5) 100%);
}
.ticker-content {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding-right: 24px;
height: 100%;
}
.ticker-content span {
font-size: 0.875rem;
color: var(--text-secondary);
white-space: nowrap;
display: inline-flex;
align-items: center;
vertical-align: middle;
line-height: 1;
}
.ticker-dot {
color: var(--accent) !important;
opacity: 0.8;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Section Headers - Premium Styling */
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-light) 100%);
border: 1px solid rgba(217, 119, 6, 0.15);
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 16px;
transition: all 0.3s ease;
}
.section-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
opacity: 0.7;
}
.section-header h2 {
transition: all 0.3s ease;
position: relative;
}
.section-header p {
color: var(--text-secondary);
margin-top: 12px;
font-size: 1.0625rem;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* ===========================================
How It Works Section
=========================================== */
.how-it-works {
padding: 100px 0;
background: var(--bg-alt);
}
.steps-grid {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 24px;
margin-top: 48px;
}
.step-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px 28px;
flex: 1;
max-width: 320px;
position: relative;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-card:hover {
transform: translateY(-6px);
border-color: var(--accent-light);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(217, 119, 6, 0.08);
}
.step-number {
position: absolute;
top: -14px;
left: 24px;
width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--accent) 0%, #ea8c00 100%);
color: white;
font-size: 0.8125rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
transition: all 0.3s ease;
}
.step-card:hover .step-number {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4);
}
.step-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(145deg, var(--bg-alt) 0%, var(--accent-soft) 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.step-card:hover .step-icon {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
.step-icon svg {
width: 26px;
height: 26px;
color: var(--text);
transition: color 0.3s ease;
}
.step-card:hover .step-icon svg {
color: var(--accent);
}
.step-card h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 10px;
color: var(--text);
}
.step-card p {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 16px;
}
.step-example {
padding: 12px 14px;
background: var(--bg-alt);
border-radius: 10px;
font-size: 0.8125rem;
display: flex;
flex-direction: column;
gap: 4px;
}
.example-label {
color: var(--text-muted);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.example-text {
color: var(--accent);
font-weight: 500;
font-style: italic;
}
.step-visual {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: var(--bg-alt);
border-radius: 10px;
}
.ai-processing {
display: flex;
align-items: center;
gap: 6px;
}
.processing-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
animation: processingPulse 1.4s ease-in-out infinite;
}
.processing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.processing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes processingPulse {
0%,
100% {
opacity: 0.3;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1);
}
}
.processing-time {
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 500;
}
.step-exports {
display: flex;
gap: 8px;
}
.export-badge {
padding: 6px 12px;
background: var(--bg-alt);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
transition: all 0.2s ease;
}
.step-card:hover .export-badge {
background: var(--accent-soft);
}
/* Step Connector Arrow */
.step-connector {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
flex-shrink: 0;
color: var(--text-muted);
opacity: 0.5;
animation: connectorPulse 2s ease-in-out infinite;
}
.step-connector svg {
width: 24px;
height: 24px;
}
@keyframes connectorPulse {
0%,
100% {
opacity: 0.4;
transform: translateX(0);
}
50% {
opacity: 0.7;
transform: translateX(4px);
}
}
@keyframes connectorPulseVertical {
0%,
100% {
opacity: 0.4;
transform: rotate(90deg) translateX(0);
}
50% {
opacity: 0.7;
transform: rotate(90deg) translateX(4px);
}
}
.how-cta {
text-align: center;
margin-top: 48px;
}
/* Responsive How It Works */
@media (max-width: 900px) {
.steps-grid {
flex-direction: column;
align-items: center;
gap: 40px;
}
.step-card {
max-width: 400px;
}
.step-connector {
transform: rotate(90deg);
width: 40px;
height: 40px;
animation: connectorPulseVertical 2s ease-in-out infinite;
justify-content: center;
margin: 0 auto;
}
}
.use-cases {
padding: 100px 0;
background: var(--bg);
}
.use-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.use-case-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.use-case-card:hover {
border-color: var(--accent-light);
transform: translateY(-4px);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(217, 119, 6, 0.06);
}
.use-case-card.use-case-featured {
grid-column: span 2;
grid-row: span 2;
background: linear-gradient(145deg,
var(--surface) 0%,
var(--accent-soft) 100%);
border-color: var(--accent-light);
padding: 36px;
}
.use-case-card.use-case-featured:hover {
box-shadow:
0 16px 40px rgba(217, 119, 6, 0.12),
0 6px 16px rgba(0, 0, 0, 0.06);
}
.use-case-badge {
position: absolute;
top: 16px;
right: 16px;
padding: 4px 10px;
background: var(--accent);
color: white;
font-size: 0.6875rem;
font-weight: 600;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.use-case-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(145deg,
var(--bg-alt) 0%,
var(--accent-soft) 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.use-case-featured .use-case-icon {
width: 56px;
height: 56px;
border-radius: 14px;
}
.use-case-card:hover .use-case-icon {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
.use-case-icon svg {
width: 24px;
height: 24px;
color: var(--text);
transition: color 0.3s ease;
}
.use-case-featured .use-case-icon svg {
width: 28px;
height: 28px;
}
.use-case-card:hover .use-case-icon svg {
color: var(--accent);
}
.use-case-card h3 {
font-size: 1.0625rem;
font-weight: 600;
margin-bottom: 10px;
color: var(--text);
letter-spacing: -0.01em;
}
.use-case-featured h3 {
font-size: 1.375rem;
margin-bottom: 14px;
}
.use-case-card p {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 16px;
}
.use-case-featured p {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 24px;
}
.use-case-example {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 0.875rem;
color: var(--text-secondary);
font-style: italic;
}
.use-case-example .example-icon {
font-size: 1.125rem;
}
/* AI Outputs Demo Flow */
.use-case-demo {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.demo-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.demo-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.demo-label {
font-size: 0.7rem;
font-weight: 500;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.demo-box {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.demo-text {
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
border: 1px solid #d1d5db;
}
.demo-process {
background: linear-gradient(135deg, var(--accent-soft) 0%, #fcd34d 100%);
border: 1px solid var(--accent);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
.demo-result {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
border: 1px solid #10b981;
}
.demo-arrow {
font-size: 1.25rem;
color: var(--text-muted);
font-weight: 300;
}
.use-case-featured:hover .demo-box {
transform: scale(1.05);
}
.use-case-featured:hover .demo-process {
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.25);
}
.use-case-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.use-case-tag {
padding: 5px 10px;
background: var(--bg-alt);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.2s ease;
}
.use-case-card:hover .use-case-tag {
background: var(--accent-soft);
color: var(--accent);
}
/* Responsive Use Cases */
@media (max-width: 1024px) {
.use-cases-grid {
grid-template-columns: repeat(2, 1fr);
}
.use-case-card.use-case-featured {
grid-column: span 2;
grid-row: span 1;
}
}
@media (max-width: 640px) {
.use-cases-grid {
grid-template-columns: 1fr;
}
.use-case-card.use-case-featured {
grid-column: span 1;
}
}
/* Features */
.features {
padding: 100px 0;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.feature-card:hover {
border-color: var(--accent-light);
transform: translateY(-4px);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(217, 119, 6, 0.05);
}
.feature-card h3 {
margin: 20px 0 10px;
font-size: 1.1875rem;
letter-spacing: -0.01em;
}
.feature-card p {
color: var(--text-secondary);
font-size: 0.9375rem;
line-height: 1.65;
}
.feature-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(145deg,
var(--bg-alt) 0%,
var(--accent-soft) 100%);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
.feature-icon svg {
width: 26px;
height: 26px;
stroke-width: 1.75;
color: var(--text);
transition: color 0.3s ease;
}
.feature-card:hover .feature-icon svg {
color: var(--accent);
}
.feature-mini {
margin-top: 20px;
}
/* Main Feature Card */
.feature-main {
grid-column: span 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 40px;
background: linear-gradient(135deg,
var(--surface) 0%,
var(--accent-soft) 100%);
border-color: var(--accent-light);
}
.feature-badge {
display: inline-block;
padding: 6px 12px;
background: var(--accent-light);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
}
.feature-main h3 {
font-size: 1.5rem;
margin: 16px 0 12px;
}
.feature-main p {
font-size: 1rem;
}
.feature-demo {
background: transparent;
border-radius: 12px;
padding: 24px;
}
.demo-input {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 16px;
margin-bottom: 16px;
}
.demo-prompt {
color: var(--text-secondary);
font-size: 0.875rem;
}
.demo-output {
height: 140px;
background: var(--surface);
border-radius: 8px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
}
/* AI Input Showcase */
.ai-input-showcase {
display: flex;
flex-direction: column;
gap: 16px;
}
.ai-input-card {
background: var(--surface);
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.04),
0 12px 48px rgba(0, 0, 0, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.ai-input-card:hover {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.06),
0 16px 56px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
}
.ai-input-header {
padding: 14px 20px;
border-bottom: none;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.6) 0%,
transparent 100%);
}
.ai-status-indicator {
display: flex;
align-items: center;
gap: 10px;
}
.ai-status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%,
100% {
opacity: 1;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}
50% {
opacity: 0.7;
box-shadow: 0 0 12px rgba(34, 197, 94, 0.7);
}
}
.ai-status-text {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ai-input-body {
padding: 24px 20px;
min-height: 80px;
}
.ai-input-field {
font-size: 1.125rem;
color: var(--text);
line-height: 1.6;
font-weight: 500;
}
.ai-typing-text {
display: inline;
}
.ai-typing-cursor {
display: inline-block;
width: 2px;
height: 1.2em;
background: linear-gradient(180deg, var(--accent) 0%, #f59e0b 100%);
margin-left: 2px;
vertical-align: text-bottom;
border-radius: 1px;
animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.ai-input-footer {
padding: 14px 20px;
border-top: none;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
}
.ai-input-tools {
display: flex;
gap: 10px;
}
.ai-tool-btn {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.ai-tool-btn:hover {
background: var(--accent-soft);
border-color: var(--accent-light);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.1);
}
.ai-tool-btn svg {
width: 20px;
height: 20px;
color: var(--text-secondary);
transition: color 0.2s ease;
}
.ai-tool-btn:hover svg {
color: var(--accent);
}
.ai-send-btn {
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(145deg, var(--accent) 0%, #b45309 100%);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
box-shadow:
0 4px 12px rgba(217, 119, 6, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ai-send-btn:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 6px 20px rgba(217, 119, 6, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ai-send-btn:active {
transform: translateY(0) scale(0.98);
}
.ai-send-btn svg {
width: 22px;
height: 22px;
color: white;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
/* Feature showcase section */
.feature-showcase {
padding: 80px 0;
background: var(--bg);
}
.showcase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.showcase-grid.reverse {
direction: rtl;
}
.showcase-grid.reverse>* {
direction: ltr;
}
.showcase-content {
max-width: 480px;
}
.showcase-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--accent-light);
border-radius: 20px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--accent);
margin-bottom: 16px;
}
.showcase-label svg {
width: 16px;
height: 16px;
}
.showcase-content h3 {
font-size: 1.75rem;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.showcase-content p {
color: var(--text-secondary);
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 20px;
}
.showcase-bullets {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.showcase-bullets li {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--text-secondary);
font-size: 0.9375rem;
}
.showcase-bullets li svg {
width: 20px;
height: 20px;
color: var(--success);
flex-shrink: 0;
margin-top: 2px;
}
.showcase-visual {
background: var(--bg-alt);
border-radius: 16px;
border: 1px solid var(--border);
overflow: hidden;
}
.showcase-visual .media-placeholder {
height: 340px;
border: none;
border-radius: 0;
}
/* Feature Mini Elements */
.feature-mini {
margin-top: 20px;
}
.version-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.version {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg-alt);
border-radius: 6px;
font-size: 0.8125rem;
color: var(--text-secondary);
transition: all 0.2s ease;
cursor: pointer;
}
.version:hover:not(.active) {
background: var(--accent-soft);
transform: translateX(4px);
}
.version.active {
background: var(--accent);
color: white;
}
.version span {
font-size: 0.6875rem;
opacity: 0.7;
}
.export-tags {
display: flex;
gap: 8px;
}
.tag {
padding: 6px 12px;
background: var(--bg-alt);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
border: 1px solid var(--border-light);
transition: all 0.2s ease;
cursor: default;
}
.tag:hover {
background: var(--accent-soft);
color: var(--accent);
transform: translateY(-2px);
}
/* Highlight PNG/SVG tags when hovering the Export feature card */
.feature-card-premium:hover .export-tags .tag {
/* keep border grey on hover, only text/background change applies */
border-color: var(--border-light);
}
/* Pricing */
.pricing {
padding: 100px 0;
background: var(--bg);
}
.pricing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 48px;
}
.pricing-toggle span {
font-size: 0.9375rem;
color: var(--text-secondary);
}
.pricing-toggle span.active {
color: var(--text);
font-weight: 500;
}
.toggle-switch {
width: 48px;
height: 26px;
background: var(--border);
border-radius: 13px;
position: relative;
cursor: pointer;
transition: background 0.2s;
}
.toggle-switch.active {
background: var(--accent);
}
.toggle-switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggle-switch.active::after {
transform: translateX(22px);
}
.pricing-badge {
display: inline-block;
padding: 4px 10px;
background: var(--success-light);
color: var(--success);
font-size: 0.75rem;
font-weight: 600;
border-radius: 12px;
margin-left: 8px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.pricing-grid.pricing-grid-two {
grid-template-columns: repeat(2, 1fr);
max-width: 700px;
}
.pricing-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px;
position: relative;
transition:
transform 0.2s,
box-shadow 0.2s;
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.pricing-card.popular {
border: 2px solid var(--accent);
background: linear-gradient(135deg,
var(--surface) 0%,
var(--accent-soft) 100%);
}
.pricing-tier {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.pricing-card.popular .pricing-tier {
color: var(--accent);
}
.pricing-name {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.pricing-desc {
color: var(--text-secondary);
font-size: 0.9375rem;
margin-bottom: 24px;
min-height: 44px;
}
.pricing-price {
margin-bottom: 24px;
}
.pricing-amount {
font-size: 3rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.pricing-amount.pricing-amount-compact {
font-size: 2.5rem;
}
.pricing-amount span {
font-size: 1rem;
font-weight: 500;
color: var(--text-secondary);
}
.pricing-amount .pricing-per {
font-size: 1rem;
font-weight: 400;
color: var(--text-muted);
}
.pricing-period {
font-size: 0.875rem;
color: var(--text-muted);
}
.pricing-features {
list-style: none;
margin-bottom: 32px;
}
.pricing-features li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
font-size: 0.9375rem;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-light);
}
.pricing-features li:last-child {
border-bottom: none;
}
.pricing-features li svg {
width: 20px;
height: 20px;
color: var(--success);
flex-shrink: 0;
margin-top: 1px;
}
.pricing-features li svg.x-icon {
color: var(--text-muted);
opacity: 0.5;
}
.pricing-features li.disabled {
color: var(--text-muted);
opacity: 0.6;
}
.pricing-cta {
width: 100%;
justify-content: center;
}
/* Testimonials */
.testimonials {
padding: 100px 0 60px;
background: var(--bg-alt);
overflow: hidden;
}
.testimonials .section-header {
margin-bottom: 48px;
}
.testimonials-marquee {
overflow: hidden;
padding: 20px 0;
position: relative;
/* needed for fade overlays */
}
.testimonials-track {
display: flex;
width: max-content;
animation: testimonials-scroll 40s linear infinite;
position: relative;
z-index: 1;
/* keep track under the fade overlays */
}
.testimonials-marquee[data-marquee="hover-pause"] .testimonials-track:hover {
animation-play-state: paused;
}
.testimonials-content {
display: flex;
gap: 24px;
padding-right: 24px;
}
@keyframes testimonials-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.testimonial-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
width: 380px;
flex-shrink: 0;
transition:
transform 0.2s,
box-shadow 0.2s;
}
/* High-visibility fade overlays for marquee edges */
.testimonials-marquee::before,
.testimonials-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 180px;
/* wide enough to make the fade obvious */
pointer-events: none;
z-index: 2;
}
.testimonials-marquee::before {
left: 0;
background: linear-gradient(90deg,
rgba(251, 248, 243, 1) 0%,
rgba(251, 248, 243, 0) 60%);
}
.testimonials-marquee::after {
right: 0;
background: linear-gradient(270deg,
rgba(251, 248, 243, 1) 0%,
rgba(251, 248, 243, 0) 60%);
}
.testimonial-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.testimonial-stars {
display: flex;
gap: 2px;
margin-bottom: 16px;
color: var(--accent);
font-size: 1rem;
letter-spacing: 2px;
}
.testimonial-stars svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.testimonial-text {
color: var(--text);
font-size: 0.9375rem;
line-height: 1.7;
margin-bottom: 20px;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-warm);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--text-secondary);
font-size: 0.875rem;
}
.testimonial-info h4 {
font-size: 0.9375rem;
margin-bottom: 2px;
}
.testimonial-info span {
font-size: 0.8125rem;
color: var(--text-muted);
}
/* Diagram Showcase */
.diagram-showcase {
padding: 100px 0;
background: var(--bg-alt);
}
.diagram-showcase-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 40px;
align-items: start;
}
.diagram-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 500px;
overflow-y: auto;
padding-right: 8px;
}
.diagram-list::-webkit-scrollbar {
width: 4px;
}
.diagram-list::-webkit-scrollbar-track {
background: var(--border-light);
border-radius: 2px;
}
.diagram-list::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
.diagram-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 14px 16px;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
text-align: left;
width: 100%;
}
.diagram-item:hover {
background: var(--surface);
border-color: var(--border);
}
.diagram-item.active {
background: var(--surface);
border-color: var(--accent);
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12);
}
.diagram-item-name {
font-weight: 600;
font-size: 0.9375rem;
color: var(--text);
}
.diagram-item-desc {
font-size: 0.8125rem;
color: var(--text-muted);
}
.diagram-item.active .diagram-item-name {
color: var(--accent);
}
.diagram-preview-panel {
position: sticky;
top: 100px;
}
.diagram-preview-window {
background: var(--surface);
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.preview-window-bar {
display: flex;
gap: 6px;
padding: 14px 16px;
background: var(--bg-warm);
border-bottom: 1px solid var(--border);
align-items: center;
}
.preview-window-bar .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--border);
}
.preview-window-title {
margin-left: auto;
margin-right: auto;
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 500;
}
.diagram-preview-content {
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
/* --- Minor visual tweaks & overrides --- */
/* Safari-like dots for preview window */
.preview-window-bar .dot:nth-child(1) {
background: #ff5f57;
}
.preview-window-bar .dot:nth-child(2) {
background: #febc2e;
}
.preview-window-bar .dot:nth-child(3) {
background: #28c840;
}
/* Constrain review marquee width */
.testimonials-marquee {
max-width: 1120px;
margin: 0 auto;
}
/* CTA Section - Premium Design */
.cta {
padding: 0 0 100px;
text-align: center;
background: transparent;
position: relative;
max-width: 800px;
margin: 0 auto;
}
.cta-content {
margin: 64px 24px 0;
padding: 56px 48px;
background: var(--surface);
border: 2px solid transparent;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
linear-gradient(135deg, var(--accent), #f59e0b, #ea580c, var(--accent)) border-box;
background-size: 100% 100%, 300% 300%;
animation: gradientBorder 6s ease infinite;
border-radius: 24px;
box-shadow: 0 8px 32px rgba(217, 119, 6, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta h2 {
font-size: clamp(1.625rem, 3.5vw, 2rem);
margin-bottom: 28px;
line-height: 1.35;
letter-spacing: -0.02em;
color: var(--text);
}
.cta p {
color: var(--text-secondary);
margin-bottom: 32px;
font-size: 1.0625rem;
line-height: 1.7;
}
/* CTA Badge - Premium Pill Style */
.cta-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: linear-gradient(135deg, rgba(255, 251, 235, 0.95), rgba(254, 243, 199, 0.9));
border: 1px solid rgba(217, 119, 6, 0.3);
border-radius: 50px;
font-size: 0.8125rem;
font-weight: 600;
color: #b45309;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.1);
transition: all 0.3s ease;
}
.cta-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(217, 119, 6, 0.15);
}
/* Subtext styling */
.cta-subtext {
color: var(--text-muted);
font-size: 0.875rem;
margin-top: 20px;
font-weight: 500;
}
.cta-features {
display: flex;
justify-content: center;
gap: 24px;
margin-top: 24px;
flex-wrap: wrap;
}
.cta-feature {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
color: var(--text-secondary);
}
.cta-feature svg {
width: 16px;
height: 16px;
color: var(--success);
}
/* CTA Button - Orange Gradient Style (matching FAQ page) */
.cta .btn-primary,
.cta .btn-xl,
.cta .btn-gradient-sweep {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 14px 32px !important;
background: linear-gradient(135deg, #d97706 0%, #ea580c 100%) !important;
color: white !important;
border-radius: 14px !important;
font-size: 1rem !important;
font-weight: 600 !important;
text-decoration: none !important;
box-shadow: 0 10px 25px -5px rgba(234, 88, 12, 0.3) !important;
position: relative !important;
overflow: hidden !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
border: none !important;
}
.cta .btn-primary::before,
.cta .btn-xl::before,
.cta .btn-gradient-sweep::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 100%);
animation: ctaBtnShimmer 3s ease-in-out infinite;
pointer-events: none;
}
.cta .btn-primary:hover,
.cta .btn-xl:hover,
.cta .btn-gradient-sweep:hover {
transform: translateY(-2px) !important;
box-shadow: 0 15px 35px -5px rgba(234, 88, 12, 0.4) !important;
background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
color: white !important;
}
@keyframes ctaBtnShimmer {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
/* FAQ Section */
.faq {
padding: 100px 0;
background: var(--bg-alt);
}
.faq-grid {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s;
}
.faq-item:hover {
border-color: var(--accent-light);
}
.faq-item.active {
border-color: var(--accent);
}
.faq-question {
width: 100%;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.faq-question span {
font-size: 1rem;
font-weight: 500;
color: var(--text);
}
.faq-question svg {
width: 20px;
height: 20px;
color: var(--text-secondary);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-item.active .faq-question svg {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition:
max-height 0.3s ease,
padding 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 300px;
}
.faq-answer p {
padding: 0 24px 20px;
color: var(--text-secondary);
font-size: 0.9375rem;
line-height: 1.7;
margin: 0;
}
/* Footer */
.footer {
padding: 80px 0 32px;
background: var(--bg-warm);
position: relative;
}
/* Premium separator line at top of footer */
.footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 5%,
var(--border) 20%,
rgba(217, 119, 6, 0.3) 50%,
var(--border) 80%,
transparent 95%);
}
.footer-cta-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
margin-bottom: 24px;
background: linear-gradient(135deg,
var(--surface) 0%,
var(--accent-soft) 100%);
border: 1px solid var(--accent-light);
border-radius: 16px;
}
.footer-cta-text {
font-weight: 600;
color: var(--text);
}
.footer-cta-actions {
display: flex;
gap: 12px;
}
.footer-main {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
padding-bottom: 48px;
border-bottom: 1px solid var(--border);
}
.footer-brand .logo {
margin-bottom: 16px;
display: inline-flex;
}
.footer-tagline {
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.footer-desc {
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.7;
max-width: 280px;
}
.footer-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.footer-col h4 {
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
margin-bottom: 16px;
}
.footer-col a {
display: block;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9375rem;
padding: 6px 0;
transition: color 0.2s;
}
.footer-col a:hover {
color: var(--text);
}
/* Animated underline for footer link text (left-to-right) */
.footer-link-text {
position: relative;
display: inline-block;
}
.footer-link-text::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
background: var(--accent);
transition: width 0.2s ease;
}
.footer-col a:hover .footer-link-text::after,
.footer-col a:focus .footer-link-text::after {
width: 100%;
}
/* Footer Contact/Email Section */
.footer-contact {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-email-link {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding: 10px 16px !important;
background: var(--accent-soft);
border: 1px solid var(--accent-light);
border-radius: 10px;
color: var(--accent) !important;
font-weight: 500;
transition: all 0.25s ease;
position: relative;
}
.footer-email-link:hover {
background: var(--accent-light);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
/* No underline effect for pill email link to avoid full-width highlight */
.footer-email-link svg {
width: 18px;
height: 18px;
color: var(--accent);
}
.footer-response-time {
font-size: 0.8125rem;
color: var(--text-muted);
margin-top: 4px;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
color: var(--text-muted);
font-size: 0.8125rem;
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
}
.footer-legal a:hover {
color: var(--text);
}
/* Responsive */
@media (max-width: 1024px) {
.hero .container {
grid-template-columns: 1fr;
gap: 48px;
}
.hero-content {
text-align: center;
}
.hero-desc {
margin-left: auto;
margin-right: auto;
}
.hero-actions {
align-items: center;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.diagram-showcase-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.diagram-list {
flex-direction: row;
flex-wrap: wrap;
max-height: none;
overflow-y: visible;
justify-content: center;
}
.diagram-item {
width: auto;
flex: 0 0 auto;
}
.diagram-preview-panel {
position: static;
}
.footer-main {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-nav {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero {
padding: 120px 0 60px;
}
.hero-showcase {
margin-bottom: 40px;
}
.features-grid {
grid-template-columns: 1fr;
}
.pricing-grid,
.pricing-grid-two {
grid-template-columns: 1fr;
max-width: 400px;
}
.pricing-card.popular {
order: -1;
}
.footer-nav {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
.footer-cta-band {
flex-direction: column;
text-align: center;
}
.cta-features {
flex-direction: column;
gap: 12px;
}
.testimonials-marquee {
gap: 16px;
}
}
@media (max-width: 480px) {
.footer-nav {
grid-template-columns: 1fr;
}
.btn-xl {
padding: 16px 32px;
font-size: 0.9375rem;
}
}
/* Fade-in animations */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.5s ease,
transform 0.5s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Parallax-like hero text subtle motion */
.hero-content[data-observe] {
will-change: transform, opacity;
}
.hero-content.parallax {
transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
.ticker-track,
.testimonials-track {
animation: none !important;
}
/* Disable new animations for users who prefer reduced motion */
.hero-content h1 .highlight,
.hero-content h1 .highlight::after,
.hero-badge,
.badge-dot,
.hero-content h1,
.hero-desc,
.hero-actions,
.hero-showcase,
.processing-dot,
.step-connector {
animation: none !important;
}
.hero-content h1 .highlight {
opacity: 1;
transform: none;
filter: none;
}
.hero-content h1 .highlight::after {
width: 100%;
}
/* Keep same cursor theme under reduced motion */
}
/* Stagger animations for grids */
.features-grid .fade-in:nth-child(1) {
transition-delay: 0s;
}
.features-grid .fade-in:nth-child(2) {
transition-delay: 0.1s;
}
.features-grid .fade-in:nth-child(3) {
transition-delay: 0.15s;
}
.features-grid .fade-in:nth-child(4) {
transition-delay: 0.2s;
}
.features-grid .fade-in:nth-child(5) {
transition-delay: 0.25s;
}
.features-grid .fade-in:nth-child(6) {
transition-delay: 0.3s;
}
.diagram-list .fade-in:nth-child(1) {
transition-delay: 0s;
}
.diagram-list .fade-in:nth-child(2) {
transition-delay: 0.03s;
}
.diagram-list .fade-in:nth-child(3) {
transition-delay: 0.06s;
}
.diagram-list .fade-in:nth-child(4) {
transition-delay: 0.09s;
}
.diagram-list .fade-in:nth-child(5) {
transition-delay: 0.12s;
}
.diagram-list .fade-in:nth-child(6) {
transition-delay: 0.15s;
}
.diagram-list .fade-in:nth-child(7) {
transition-delay: 0.18s;
}
.diagram-list .fade-in:nth-child(8) {
transition-delay: 0.21s;
}
.diagram-list .fade-in:nth-child(9) {
transition-delay: 0.24s;
}
.diagram-list .fade-in:nth-child(10) {
transition-delay: 0.27s;
}
.diagram-list .fade-in:nth-child(11) {
transition-delay: 0.3s;
}
.diagram-list .fade-in:nth-child(12) {
transition-delay: 0.33s;
}
.diagram-list .fade-in:nth-child(13) {
transition-delay: 0.36s;
}
/* ===========================================
Use Cases Section
=========================================== */
.use-cases {
padding: 100px 0;
background: var(--bg-alt);
}
.use-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.use-case-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
transition: all 0.3s ease;
}
.use-case-card:hover {
border-color: var(--accent-soft);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.use-case-header {
display: flex;
align-items: center;
gap: 12px;
}
.use-case-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.use-case-icon svg {
width: 24px;
height: 24px;
}
.use-case-ai {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #b45309;
}
.use-case-student {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1d4ed8;
}
.use-case-dev {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
color: #047857;
}
.use-case-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
.use-case-card h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
margin: 0;
}
.use-case-card p {
font-size: 0.9375rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
/* Use Case Demo Animation */
.use-case-demo {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 24px 16px;
background: var(--bg);
border-radius: 12px;
margin-top: 8px;
}
.use-case-before,
.use-case-after {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.use-case-arrow {
color: var(--accent);
animation: arrow-pulse 2s ease-in-out infinite;
}
.use-case-arrow svg {
width: 24px;
height: 24px;
}
@keyframes arrow-pulse {
0%,
100% {
opacity: 0.5;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(4px);
}
}
.demo-label {
font-size: 0.6875rem;
color: var(--text-secondary);
text-align: center;
}
/* Text Wall Animation (ChatGPT) */
.text-wall {
width: 60px;
height: 50px;
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
background: var(--surface);
border-radius: 6px;
border: 1px solid var(--border);
}
.text-wall span {
height: 3px;
background: var(--border);
border-radius: 2px;
animation: text-shimmer 1.5s ease-in-out infinite;
}
.text-wall span:nth-child(1) {
width: 100%;
animation-delay: 0s;
}
.text-wall span:nth-child(2) {
width: 85%;
animation-delay: 0.1s;
}
.text-wall span:nth-child(3) {
width: 92%;
animation-delay: 0.2s;
}
.text-wall span:nth-child(4) {
width: 78%;
animation-delay: 0.3s;
}
.text-wall span:nth-child(5) {
width: 95%;
animation-delay: 0.4s;
}
.text-wall span:nth-child(6) {
width: 70%;
animation-delay: 0.5s;
}
.text-wall span:nth-child(7) {
width: 88%;
animation-delay: 0.6s;
}
.text-wall span:nth-child(8) {
width: 60%;
animation-delay: 0.7s;
}
@keyframes text-shimmer {
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 0.8;
}
}
/* Mini Diagram (Flowchart) */
.mini-diagram {
display: flex;
align-items: center;
gap: 4px;
}
.mini-node {
width: 14px;
height: 14px;
background: var(--accent-soft);
border: 2px solid var(--accent);
border-radius: 4px;
}
.mini-connector {
width: 8px;
height: 2px;
background: var(--accent);
}
/* Textbook Page */
.textbook-page {
width: 50px;
height: 60px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px 6px;
display: flex;
flex-direction: column;
gap: 5px;
}
.book-line {
height: 3px;
background: var(--border);
border-radius: 2px;
}
.book-line.long {
width: 100%;
}
.book-line.medium {
width: 75%;
}
.book-line.short {
width: 50%;
}
/* Mini Mind Map */
.mini-mindmap {
width: 60px;
height: 60px;
position: relative;
}
.mm-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: var(--accent);
border-radius: 50%;
}
.mm-branch {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background: var(--accent);
transform-origin: left center;
}
.mm-branch::after {
content: "";
position: absolute;
right: -4px;
top: -3px;
width: 8px;
height: 8px;
background: var(--accent-soft);
border: 2px solid var(--accent);
border-radius: 50%;
}
.mm-branch-1 {
transform: rotate(-45deg);
}
.mm-branch-2 {
transform: rotate(45deg);
}
.mm-branch-3 {
transform: rotate(135deg);
}
.mm-branch-4 {
transform: rotate(-135deg);
}
/* Code Snippet */
.code-snippet {
width: 55px;
height: 50px;
background: #1c1917;
border-radius: 6px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.code-line {
height: 3px;
background: #57534e;
border-radius: 2px;
width: 90%;
}
.code-line.indent {
margin-left: 8px;
width: 70%;
}
/* Mini Architecture Diagram */
.mini-architecture {
width: 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.arch-box {
background: var(--accent-soft);
border: 2px solid var(--accent);
border-radius: 4px;
}
.arch-box.arch-top {
width: 32px;
height: 14px;
}
.arch-lines {
display: flex;
gap: 16px;
}
.arch-line {
width: 2px;
height: 12px;
background: var(--accent);
}
.arch-row {
display: flex;
gap: 8px;
}
.arch-row .arch-box {
width: 20px;
height: 12px;
}
/* Responsive */
@media (max-width: 1024px) {
.use-cases-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 768px) {
.use-cases {
padding: 60px 0;
}
.use-case-card {
padding: 24px;
}
.use-case-demo {
padding: 16px 12px;
}
}
/* ===========================================
AI Prompt Demo Component - Modern Design
=========================================== */
.ai-prompt-demo {
width: 100%;
padding: 16px 8px;
position: relative;
}
.ai-prompt-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
opacity: 0.6;
pointer-events: none;
animation: ai-glow-pulse 3s ease-in-out infinite;
}
@keyframes ai-glow-pulse {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.4;
}
}
.ai-prompt-container {
position: relative;
display: flex;
gap: 16px;
padding: 20px;
background: linear-gradient(135deg, var(--surface) 0%, var(--bg-alt) 100%);
border-radius: 20px;
border: 1px solid var(--border);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.ai-prompt-avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, var(--accent) 0%, #b45309 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}
.ai-prompt-avatar svg {
width: 26px;
height: 26px;
}
.ai-prompt-content {
flex: 1;
min-width: 0;
}
.ai-prompt-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
margin-bottom: 8px;
}
.ai-prompt-input {
font-size: 1rem;
font-weight: 500;
color: var(--text);
min-height: 28px;
line-height: 1.5;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.ai-prompt-text {
white-space: pre-wrap;
word-break: break-word;
}
.ai-prompt-caret {
display: inline-block;
width: 2px;
height: 1.2em;
background: var(--accent);
margin-left: 2px;
animation: caret-blink 1s step-end infinite;
vertical-align: text-bottom;
}
@keyframes caret-blink {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
.ai-prompt-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-light);
}
.ai-prompt-hint {
font-size: 0.75rem;
color: var(--text-muted);
}
.ai-prompt-actions {
display: flex;
gap: 8px;
}
.ai-prompt-action {
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--bg-warm);
border: 1px solid var(--border);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.ai-prompt-action svg {
width: 16px;
height: 16px;
}
.ai-prompt-action:hover {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
.ai-prompt-send {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.ai-prompt-send:hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
color: white;
transform: scale(1.05);
}
.ai-prompt-send.active {
background: var(--accent);
border-color: var(--accent);
animation: send-flash 0.5s ease-out;
}
@keyframes send-flash {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5);
}
50% {
transform: scale(0.95);
box-shadow: 0 0 0 8px rgba(217, 119, 6, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(217, 119, 6, 0);
}
}
.ai-prompt-examples {
display: flex;
gap: 10px;
margin-top: 16px;
justify-content: center;
flex-wrap: wrap;
}
.ai-example-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 100px;
background: var(--surface);
border: 1px solid var(--border);
font-size: 0.8125rem;
font-weight: 500;
font-family: "Inter", sans-serif;
color: var(--text-secondary);
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ai-pill-icon {
font-size: 0.875rem;
}
.ai-example-pill:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
.ai-example-pill.active {
background: var(--accent);
border-color: var(--accent);
color: white;
}
/* Responsive adjustments for AI Prompt */
@media (max-width: 768px) {
.ai-prompt-container {
padding: 16px;
gap: 12px;
}
.ai-prompt-avatar {
width: 40px;
height: 40px;
border-radius: 12px;
}
.ai-prompt-avatar svg {
width: 22px;
height: 22px;
}
.ai-prompt-input {
font-size: 0.9375rem;
}
.ai-example-pill {
padding: 6px 12px;
font-size: 0.75rem;
}
}
/* ===========================================
Clean AI Demo Component
=========================================== */
.ai-demo-clean {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ai-demo-messages {
min-height: 60px;
}
.ai-message {
display: flex;
gap: 12px;
}
.ai-message-user {
justify-content: flex-start;
}
.ai-message-content {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 18px;
font-size: 0.9375rem;
color: var(--text);
max-width: 100%;
display: flex;
align-items: center;
min-height: 48px;
}
.ai-typing-text {
white-space: pre-wrap;
word-break: break-word;
}
.ai-typing-cursor {
display: inline-block;
width: 2px;
height: 1.2em;
background: var(--accent);
margin-left: 1px;
animation: cursor-blink 1s ease-in-out infinite;
}
@keyframes cursor-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.ai-demo-input {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 16px;
transition: border-color 0.2s ease;
}
.ai-demo-input:hover {
border-color: var(--accent-soft);
}
.ai-demo-input-icon {
width: 24px;
height: 24px;
color: var(--text-secondary);
opacity: 0.5;
flex-shrink: 0;
}
.ai-demo-input-icon svg {
width: 100%;
height: 100%;
}
.ai-demo-placeholder {
flex: 1;
color: var(--text-secondary);
opacity: 0.6;
font-size: 0.9375rem;
}
.ai-demo-send {
width: 36px;
height: 36px;
border-radius: 8px;
border: none;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.ai-demo-send:hover {
background: var(--accent);
transform: scale(1.05);
}
.ai-demo-send svg {
width: 18px;
height: 18px;
}
/* ===========================================
Feature Card Mini Demos
=========================================== */
.feature-mini {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
/* Speed Indicator */
.speed-indicator {
display: flex;
align-items: center;
gap: 12px;
}
.speed-bar {
flex: 1;
height: 6px;
background: var(--bg-alt);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.speed-bar::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent) 0%, #f59e0b 100%);
border-radius: 3px;
animation: speed-fill 2s ease-out infinite;
}
@keyframes speed-fill {
0% {
width: 0%;
}
80%,
100% {
width: 100%;
}
}
.speed-indicator span {
font-size: 0.75rem;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
}
/* Suggestion Pills */
.suggestion-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mini-pill {
background: var(--accent-soft);
color: var(--accent);
padding: 4px 10px;
border-radius: 12px;
font-size: 0.6875rem;
font-weight: 500;
animation: pill-pop 0.3s ease-out;
}
@keyframes pill-pop {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Share Link Demo */
.share-link-demo {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-alt);
padding: 8px 12px;
border-radius: 8px;
font-size: 0.75rem;
border: 1px solid var(--border-light);
/* keep the container border visually neutral (grey) while allowing
the link text inside to be highlighted amber */
transition:
background 0.18s ease,
color 0.18s ease;
}
.link-icon {
font-size: 0.875rem;
}
.link-text {
/* text should be amber (accent) */
color: var(--accent);
font-family:
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.6875rem;
}
/* Amber highlight for Share Instantly on feature card hover */
.feature-card-premium:hover .share-link-demo {
/* keep border grey on hover; only background may shift if desired */
border-color: var(--border-light) !important;
}
/* Ensure link text stays amber when parent/hovers occur */
.feature-card-premium:hover .share-link-demo .link-text {
color: var(--accent);
}
/* Image to Diagram Feature Demo */
.image-demo {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--bg-alt);
border-radius: 8px;
}
.sketch-icon,
.diagram-icon {
font-size: 1.25rem;
}
.arrow-icon {
color: var(--accent);
font-weight: 600;
}
/* ========================================
Enhanced Feature Cards - Premium Design
======================================== */
.feature-card-premium {
position: relative;
overflow: hidden;
}
.feature-card-premium::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--accent) 0%,
#f59e0b 50%,
var(--accent) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-card-premium:hover::before {
opacity: 1;
}
.feature-icon-gradient {
background: linear-gradient(145deg,
var(--accent-soft) 0%,
var(--accent-light) 100%);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
.feature-icon-gradient svg {
color: var(--accent);
}
/* Enhanced Image Demo */
.image-demo-enhanced {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 16px 20px;
background: linear-gradient(145deg, var(--bg-alt) 0%, var(--surface) 100%);
border-radius: 12px;
border: 1px solid var(--border-light);
}
.demo-stage {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transition: all 0.3s ease;
}
.demo-stage svg {
width: 28px;
height: 28px;
}
.demo-stage-from {
background: var(--surface);
border: 1px dashed var(--border);
color: var(--text-muted);
}
.demo-stage-to {
background: linear-gradient(145deg,
var(--accent-soft) 0%,
var(--accent-light) 100%);
border: 1px solid var(--accent-light);
color: var(--accent);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
}
.demo-arrow {
display: flex;
align-items: center;
justify-content: center;
}
.demo-arrow svg {
width: 24px;
height: 24px;
color: var(--accent);
animation: arrow-pulse 2s ease-in-out infinite;
}
@keyframes arrow-pulse {
0%,
100% {
opacity: 0.6;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(3px);
}
}
.feature-card-premium:hover .demo-stage-from {
border-style: solid;
border-color: var(--accent);
}
.feature-card-premium:hover .demo-stage-to {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.18);
}
/* Enhanced Voice Demo */
.voice-demo-enhanced {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
background: linear-gradient(145deg, var(--bg-alt) 0%, var(--surface) 100%);
border-radius: 12px;
border: 1px solid var(--border-light);
}
.voice-visualizer {
display: flex;
align-items: flex-end;
gap: 3px;
height: 32px;
padding: 6px 10px;
background: linear-gradient(145deg,
var(--accent-soft) 0%,
var(--accent-light) 100%);
border-radius: 8px;
}
.voice-bar {
width: 4px;
height: var(--height);
background: linear-gradient(180deg, var(--accent) 0%, #f59e0b 100%);
border-radius: 2px;
animation: voice-wave-anim 0.8s ease-in-out infinite;
animation-delay: var(--delay);
}
@keyframes voice-wave-anim {
0%,
100% {
transform: scaleY(0.4);
}
50% {
transform: scaleY(1);
}
}
.voice-text-enhanced {
font-size: 0.8125rem;
color: var(--text-secondary);
font-style: italic;
font-weight: 500;
letter-spacing: -0.01em;
}
.feature-card-premium:hover .voice-bar {
animation-duration: 0.5s;
}
/* Voice Input Feature Demo - Legacy */
.voice-demo {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--bg-alt);
border-radius: 8px;
}
.voice-wave {
font-size: 1.25rem;
}
.voice-text {
font-size: 0.75rem;
color: var(--text-secondary);
font-style: italic;
}
/* Diagram Type Pills */
.diagram-type-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.type-pill {
background: var(--bg-alt);
color: var(--text-secondary);
padding: 4px 8px;
border-radius: 6px;
font-size: 0.625rem;
font-weight: 500;
}
.type-pill:last-child {
background: var(--accent-soft);
color: var(--accent);
}
/* ===========================================
Media Placeholder UI
=========================================== */
.media-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 48px 24px;
background: var(--bg-alt);
border: 2px dashed var(--border);
border-radius: 12px;
text-align: center;
min-height: 200px;
}
.hero-placeholder {
min-height: 360px;
}
.media-placeholder-icon {
width: 48px;
height: 48px;
color: var(--text-secondary);
opacity: 0.5;
}
.media-placeholder-label {
font-size: 1rem;
font-weight: 600;
color: var(--text-secondary);
}
.media-placeholder-hint {
font-size: 0.75rem;
color: var(--text-secondary);
opacity: 0.6;
}
/* Responsive for AI Demo */
@media (max-width: 768px) {
.ai-demo-clean {
padding: 16px;
}
.ai-message-content {
padding: 12px 14px;
font-size: 0.875rem;
}
.ai-demo-input {
padding: 10px 12px;
}
}
/* ===========================================
Speed Comparison Section
=========================================== */
.speed-comparison {
padding: 80px 0;
background: var(--bg);
}
.speed-race {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.race-track {
display: grid;
grid-template-columns: 180px 1fr 100px;
align-items: center;
gap: 20px;
}
.race-label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--text);
}
.race-icon {
font-size: 1.5rem;
}
.race-bar {
height: 32px;
background: var(--bg-warm);
border-radius: 16px;
overflow: hidden;
position: relative;
}
.race-progress {
height: 100%;
border-radius: 16px;
width: 0;
transition: width 2s ease-out;
}
.race-traditional .race-progress {
background: linear-gradient(90deg, #a8a29e 0%, #78716c 100%);
}
.race-codigram .race-progress {
background: linear-gradient(90deg, var(--accent) 0%, #f59e0b 100%);
box-shadow: 0 0 20px rgba(217, 119, 6, 0.4);
}
.race-time {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-muted);
text-align: right;
}
.race-codigram .race-time {
color: var(--accent);
}
.race-result {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
padding: 24px;
background: var(--accent-soft);
border-radius: 16px;
border: 2px solid var(--accent);
}
.result-number {
font-size: 3rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
.result-label {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media (max-width: 768px) {
.race-track {
grid-template-columns: 1fr;
gap: 8px;
}
.race-time {
text-align: left;
}
}
/* ===========================================
Before/After Slider Section
=========================================== */
.before-after-section {
padding: 80px 0;
background: var(--bg-alt);
}
.before-after-slider {
max-width: 800px;
margin: 0 auto;
}
.ba-container {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
background: var(--border);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.ba-before,
.ba-after {
position: relative;
padding: 40px;
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ba-before {
background: var(--bg-warm);
}
.ba-after {
background: var(--surface);
}
.ba-label {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
padding: 6px 16px;
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ba-before .ba-label {
background: var(--border);
color: var(--text-muted);
}
.ba-after .ba-label {
background: var(--accent);
color: white;
}
.ba-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.ba-placeholder svg {
width: 200px;
height: 150px;
}
.ba-sketch svg {
color: var(--text-muted);
opacity: 0.6;
}
.ba-placeholder span {
font-size: 0.875rem;
color: var(--text-muted);
}
.ba-slider-handle {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
cursor: ew-resize;
}
.ba-handle-line {
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: var(--accent);
box-shadow: 0 0 12px rgba(217, 119, 6, 0.5);
}
.ba-handle-knob {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 4px 16px rgba(217, 119, 6, 0.4);
transition: transform 0.2s ease;
}
.ba-handle-knob svg {
width: 24px;
height: 24px;
}
.ba-slider-handle:hover .ba-handle-knob {
transform: scale(1.1);
}
@media (max-width: 768px) {
.ba-container {
grid-template-columns: 1fr;
}
.ba-slider-handle {
display: none;
}
.ba-before,
.ba-after {
min-height: 200px;
padding: 32px 24px;
}
}
/* ===========================================
Platform Stats Banner - Premium Dark Theme
=========================================== */
.platform-stats {
padding: 0 0 48px;
background: var(--bg);
position: relative;
overflow: visible;
}
.stats-banner {
background:
radial-gradient(900px 300px at 15% 40%, rgba(217, 119, 6, 0.16) 0%, transparent 60%),
radial-gradient(800px 280px at 85% 60%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
position: relative;
overflow: hidden;
padding: 26px;
border-radius: 26px;
border: 1px solid rgba(28, 25, 23, 0.12);
box-shadow:
0 24px 70px rgba(28, 25, 23, 0.10),
0 10px 30px rgba(28, 25, 23, 0.06);
margin-top: -22px;
}
/* Ambient glow effect */
.stats-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 300px;
background: radial-gradient(ellipse, rgba(217, 119, 6, 0.15) 0%, transparent 70%);
pointer-events: none;
animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
0%,
100% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
}
/* Decorative grid pattern */
/* Soft vignette edges so it blends with the page */
.stats-banner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(120% 80% at 50% 0%, rgba(0, 0, 0, 0.25) 0%, transparent 55%),
radial-gradient(120% 80% at 50% 100%, rgba(0, 0, 0, 0.28) 0%, transparent 55%);
pointer-events: none;
}
/* Accent line at top */
.stats-banner::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.stats-content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
max-width: 980px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 1;
}
.stat-block {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 18px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 18px;
transition:
transform 220ms ease,
box-shadow 260ms ease,
border-color 260ms ease,
background-color 260ms ease;
position: relative;
overflow: hidden;
}
.stat-block::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.stat-block:hover {
transform: translateY(-4px);
border-color: rgba(217, 119, 6, 0.35);
background: rgba(255, 255, 255, 0.055);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(217, 119, 6, 0.06) inset;
}
.stat-block:hover::before {
opacity: 1;
}
.stat-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(217, 119, 6, 0.16);
border: 1px solid rgba(217, 119, 6, 0.35);
border-radius: 14px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.stat-icon svg {
width: 24px;
height: 24px;
stroke: rgba(255, 255, 255, 0.92);
}
.stat-info {
display: flex;
flex-direction: column;
gap: 2px;
position: relative;
z-index: 1;
}
.stat-value {
display: flex;
align-items: baseline;
gap: 2px;
}
.stat-block .stat-number {
font-size: 2.15rem;
font-weight: 700;
line-height: 1;
color: rgba(255, 255, 255, 0.98);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.stat-plus,
.stat-unit {
font-size: 1rem;
font-weight: 600;
color: var(--accent);
margin-left: 2px;
}
.stat-block .stat-label {
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.02em;
}
/* Animated entrance */
.stat-block {
opacity: 0;
transform: translateY(20px);
animation: statFadeIn 0.6s ease forwards;
}
.stat-block:nth-child(1) {
animation-delay: 0.1s;
}
.stat-block:nth-child(2) {
animation-delay: 0.2s;
}
.stat-block:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes statFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive */
@media (max-width: 900px) {
.stats-content {
grid-template-columns: 1fr;
max-width: 520px;
}
.stat-block {
padding: 18px 18px;
}
.stat-icon {
width: 40px;
height: 40px;
}
.stat-icon svg {
width: 20px;
height: 20px;
}
.stat-block .stat-number {
font-size: 1.75rem;
}
}
@media (max-width: 768px) {
.stats-banner {
padding: 18px;
border-radius: 20px;
margin-top: -14px;
}
.stats-content {
grid-template-columns: 1fr;
max-width: 520px;
}
.stats-glow {
width: 300px;
height: 200px;
}
}
@media (max-width: 480px) {
.stats-banner {
padding: 16px;
}
.stat-block {
padding: 12px 16px;
gap: 12px;
}
.stat-icon {
width: 36px;
height: 36px;
border-radius: 10px;
}
.stat-icon svg {
width: 18px;
height: 18px;
}
.stat-block .stat-number {
font-size: 1.5rem;
}
.stat-block .stat-label {
font-size: 0.75rem;
}
}
/* ===========================================
Animated Stats Section
=========================================== */
.animated-stats {
padding: 80px 0;
background: var(--primary);
color: white;
}
.stats-header {
text-align: center;
margin-bottom: 40px;
}
.stats-header h3 {
font-size: 1.25rem;
font-weight: 600;
opacity: 0.9;
letter-spacing: 0.02em;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
}
.stat-item {
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
}
.stat-number {
font-size: 3.5rem;
font-weight: 700;
line-height: 1;
background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline;
}
.stat-suffix {
font-size: 1.5rem;
font-weight: 600;
color: var(--accent-light);
margin-left: 2px;
display: inline;
margin-bottom: 8px;
}
.stat-label {
font-size: 0.9375rem;
opacity: 0.8;
font-weight: 500;
margin-top: 8px;
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.stat-number {
font-size: 2.5rem;
}
.stat-suffix {
font-size: 1.125rem;
}
}
/* ===========================================
Magic Diagram Morph Section
=========================================== */
.magic-morph {
padding: 80px 0;
background: var(--bg);
}
.morph-showcase {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.morph-input {
display: flex;
align-items: center;
gap: 8px;
padding: 20px 32px;
background: var(--bg-warm);
border-radius: 16px;
border: 1px solid var(--border);
}
.morph-quote {
font-size: 2rem;
color: var(--accent);
font-weight: 700;
line-height: 1;
}
.morph-text {
font-size: 1.125rem;
font-weight: 500;
color: var(--text);
font-style: italic;
}
.morph-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--accent-soft);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
animation: arrow-bounce 2s ease-in-out infinite;
}
@keyframes arrow-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(8px);
}
}
.morph-arrow svg {
width: 24px;
height: 24px;
}
.morph-diagrams {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.morph-card {
width: 180px;
padding: 16px;
background: var(--surface);
border-radius: 16px;
border: 2px solid var(--border);
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.morph-card:hover {
border-color: var(--accent);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(217, 119, 6, 0.15);
}
.morph-card.active {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: 0 8px 24px rgba(217, 119, 6, 0.2);
}
.morph-card-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text);
margin-bottom: 12px;
}
.morph-card.active .morph-card-label {
color: var(--accent);
}
.morph-card-preview {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.morph-card-preview svg {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.morph-input {
padding: 16px 20px;
}
.morph-text {
font-size: 1rem;
}
.morph-card {
width: 140px;
padding: 12px;
}
.morph-card-preview {
height: 80px;
}
}
/* ===========================================
Hero Video Wide Placeholder
=========================================== */
.hero-placeholder-wide {
width: 100%;
min-height: 280px;
aspect-ratio: 16 / 9;
border-radius: 0;
border: none;
}
/* ===========================================
Premium AI Demo Component
=========================================== */
.feature-demo-premium {
background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%);
border-radius: 16px;
padding: 0;
overflow: hidden;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.ai-demo-premium {
display: flex;
flex-direction: column;
height: 100%;
min-height: 240px;
}
.ai-demo-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-demo-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ai-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
animation: status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(0.95);
}
}
.ai-demo-premium .ai-demo-messages {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ai-demo-premium .ai-message-content {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 16px 20px;
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ai-demo-premium .ai-typing-cursor {
background: var(--accent);
}
.ai-demo-input-wrap {
padding: 16px 20px 20px;
background: rgba(0, 0, 0, 0.2);
}
.ai-demo-premium .ai-demo-input {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 12px 16px;
transition: all 0.2s ease;
}
.ai-demo-premium .ai-demo-input:hover {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.ai-input-action {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.ai-input-action:hover {
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.06);
}
.ai-input-action svg {
width: 18px;
height: 18px;
}
.ai-demo-premium .ai-demo-placeholder {
flex: 1;
color: rgba(255, 255, 255, 0.35);
font-size: 0.9375rem;
}
.ai-demo-premium .ai-demo-send {
width: 40px;
height: 40px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, var(--accent) 0%, #b45309 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}
.ai-demo-premium .ai-demo-send:hover {
transform: scale(1.05) translateX(2px);
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4);
}
.ai-demo-premium .ai-demo-send svg {
width: 20px;
height: 20px;
}
/* ===========================================
Feature Card Link Styling
=========================================== */
.feature-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.feature-card-link:hover {
border-color: var(--accent);
}
.feature-card-link:hover .type-pill-more {
background: var(--accent);
color: white;
}
.type-pill-more {
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
transition: all 0.2s ease;
}
/* Share link styling - non-monospace */
.share-link-demo .link-text {
font-family: inherit;
/* keep this always amber to match export/share badges */
color: var(--accent) !important;
font-size: 0.8125rem;
font-style: italic;
}
/* ===========================================
Enhanced Clickable Elements Orange Cursor
=========================================== */
/* Apply orange cursor to all clickable elements */
.feature-card,
.feature-card-link,
.use-case-card,
.pricing-card,
.pricing-toggle,
.testimonial-card,
.faq-item,
.diagram-item,
.morph-card,
.mini-pill,
.type-pill,
.tag,
.export-tags span,
.version,
[role="button"],
input[type="submit"],
input[type="button"],
select,
label[for] {
cursor: pointer;
}
.feature-card:hover,
.feature-card-link:hover,
.use-case-card:hover,
.pricing-card:hover,
.pricing-toggle:hover,
.testimonial-card:hover,
.faq-item:hover,
.diagram-item:hover,
.morph-card:hover,
.mini-pill:hover,
.type-pill:hover,
.tag:hover,
.export-tags span:hover,
.version:hover,
[role="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
select:hover,
label[for]:hover {
cursor:
url("data:image/svg+xml;utf8,") 0 0,
pointer !important;
}
/* Responsive for premium AI demo */
@media (max-width: 768px) {
.feature-demo-premium {
border-radius: 12px;
}
.ai-demo-header {
padding: 12px 16px;
}
.ai-demo-premium .ai-demo-messages {
padding: 16px;
}
.ai-demo-premium .ai-message-content {
padding: 12px 16px;
font-size: 0.875rem;
}
.ai-demo-input-wrap {
padding: 12px 16px 16px;
}
.ai-demo-premium .ai-demo-input {
padding: 10px 12px;
}
.hero-placeholder-wide {
min-height: 200px;
}
}
/* ===========================================
NEW SECTIONS - Enhanced Landing Page
=========================================== */
/* Navigation Desktop Links */
.nav-links-desktop {
display: flex;
align-items: center;
gap: 32px;
}
.nav-links-desktop .nav-link {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9375rem;
font-weight: 500;
transition: color 0.2s;
}
.nav-links-desktop .nav-link:hover {
color: var(--text);
}
@media (max-width: 900px) {
.nav-links-desktop {
display: none;
}
}
/* Hero Badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--accent-soft);
border: 1px solid var(--accent-light);
border-radius: 100px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--accent);
margin-bottom: 24px;
}
.badge-dot {
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.2);
}
}
/* Hero Trust Section */
.hero-trust {
display: flex;
align-items: center;
gap: 16px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border-light);
}
.trust-avatars {
display: flex;
align-items: center;
}
.trust-avatars .avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-warm);
border: 2px solid var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
margin-left: -8px;
}
.trust-avatars .avatar:first-child {
margin-left: 0;
}
.trust-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.trust-stars {
display: flex;
gap: 2px;
color: var(--accent);
}
.trust-stars svg {
width: 14px;
height: 14px;
}
.trust-text span {
font-size: 0.8125rem;
color: var(--text-muted);
}
.trust-text strong {
color: var(--text);
}
/* Section Badge */
.section-badge {
display: inline-block;
padding: 6px 14px;
background: var(--accent-soft);
border: 1px solid rgba(217, 119, 6, 0.2);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #b45309;
margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(217, 119, 6, 0.06);
}
/* How It Works Section */
.how-it-works {
padding: 100px 0;
background: var(--bg);
}
.steps-grid {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 24px;
align-items: start;
margin-bottom: 48px;
}
.step-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px;
text-align: center;
transition:
transform 0.2s,
box-shadow 0.2s,
border-color 0.2s;
position: relative;
display: flex;
flex-direction: column;
min-height: 280px;
}
.step-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
border-color: var(--accent-light);
}
.step-number {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 32px;
background: var(--accent);
color: white;
font-weight: 700;
font-size: 0.875rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}
.step-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
background: linear-gradient(135deg,
var(--bg-alt) 0%,
var(--accent-soft) 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.step-icon svg {
width: 28px;
height: 28px;
color: var(--accent);
transition: color 0.3s ease;
}
.step-card h3 {
font-size: 1.125rem;
margin-bottom: 8px;
}
.step-card p {
color: var(--text-secondary);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 16px;
flex-grow: 1;
}
.step-example {
background: var(--bg-alt);
border-radius: 8px;
padding: 12px;
text-align: left;
}
.example-label {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 4px;
}
.example-text {
font-size: 0.8125rem;
color: var(--text-secondary);
font-style: italic;
}
.step-visual {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.ai-processing {
display: flex;
gap: 4px;
}
.processing-dot {
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
animation: processing-bounce 1.4s ease-in-out infinite;
}
.processing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.processing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes processing-bounce {
0%,
80%,
100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
.processing-time {
font-size: 0.875rem;
font-weight: 600;
color: var(--accent);
}
.step-exports {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.export-badge {
padding: 6px 12px;
background: var(--bg-alt);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
transition: all 0.2s ease;
cursor: default;
}
.export-badge:hover {
background: var(--accent-soft);
color: var(--accent);
transform: translateY(-2px);
}
.step-connector {
display: flex;
align-items: center;
justify-content: center;
padding-top: 80px;
}
.step-connector svg {
width: 32px;
height: 32px;
color: var(--accent);
animation: arrow-pulse 2s ease-in-out infinite;
}
.how-cta {
text-align: center;
}
/* Why Codigram / Comparison Section */
.why-codigram {
padding: 100px 0;
background: var(--bg-alt);
}
.comparison-table {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
max-width: 900px;
margin: 0 auto;
}
.comparison-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
background: var(--bg-warm);
border-bottom: 1px solid var(--border);
}
.comparison-header .comparison-col {
padding: 16px 24px;
font-weight: 600;
font-size: 0.875rem;
}
.comparison-header .comparison-them {
color: var(--text-muted);
text-align: center;
}
.comparison-header .comparison-us {
color: var(--accent);
text-align: center;
background: var(--accent-soft);
}
.comparison-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border-bottom: 1px solid var(--border-light);
}
.comparison-row:last-child {
border-bottom: none;
}
.comparison-feature {
padding: 20px 24px;
font-weight: 500;
color: var(--text);
}
.comparison-row .comparison-them {
padding: 20px 24px;
text-align: center;
color: var(--text-muted);
font-size: 0.9375rem;
display: flex;
align-items: center;
justify-content: center;
}
.comparison-row .comparison-us {
padding: 20px 24px;
text-align: center;
background: rgba(254, 243, 199, 0.3);
color: var(--text);
font-size: 0.9375rem;
display: flex;
align-items: center;
justify-content: center;
}
.comparison-row .comparison-us strong {
color: var(--accent);
}
/* Responsive for new sections */
@media (max-width: 1024px) {
.steps-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.step-connector {
padding: 0;
transform: rotate(90deg);
}
.comparison-table {
font-size: 0.875rem;
}
.comparison-header .comparison-col,
.comparison-feature,
.comparison-row .comparison-them,
.comparison-row .comparison-us {
padding: 14px 16px;
}
}
@media (max-width: 768px) {
.hero-trust {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.comparison-header {
grid-template-columns: 1.5fr 1fr 1fr;
}
.comparison-row {
grid-template-columns: 1.5fr 1fr 1fr;
}
.comparison-feature {
font-size: 0.8125rem;
}
.comparison-row .comparison-them,
.comparison-row .comparison-us {
font-size: 0.8125rem;
}
}
/* ===========================================
Page Hero (for FAQ and Pricing pages)
=========================================== */
.page-hero {
padding: 120px 0 60px;
background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
text-align: center;
}
.page-hero-compact {
padding: 120px 0 40px;
background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
text-align: center;
}
.page-hero-compact .page-hero-content {
max-width: 600px;
margin: 0 auto;
}
.page-hero-compact h1 {
font-size: clamp(1.875rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 12px;
}
.page-hero-compact .page-hero-desc {
font-size: 1.0625rem;
color: var(--text-secondary);
line-height: 1.6;
}
.page-hero-content {
max-width: 700px;
margin: 0 auto;
}
.page-hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 16px;
}
.page-hero-desc {
font-size: 1.125rem;
color: var(--text-secondary);
line-height: 1.7;
}
.page-hero-desc a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.page-hero-desc a:hover {
color: var(--primary);
}
/* ===========================================
FAQ Page Styles
=========================================== */
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ===========================================
Pricing Page Styles
=========================================== */
.pricing-page {
padding: 40px 0 80px;
}
.pricing-page .pricing-toggle {
margin-bottom: 48px;
}
.pricing-page .pricing-grid {
margin-bottom: 80px;
}
.pricing-card.popular {
position: relative;
}
.popular-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: white;
padding: 4px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Comparison Section */
.comparison-section {
margin-bottom: 60px;
}
.comparison-title {
text-align: center;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 32px;
}
.comparison-table .comparison-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
border-bottom: 1px solid var(--border-light);
}
.comparison-table .comparison-row:last-child {
border-bottom: none;
}
.comparison-table .comparison-col {
padding: 16px 24px;
display: flex;
align-items: center;
font-size: 0.9375rem;
}
.comparison-table .comparison-col:first-child {
font-weight: 500;
color: var(--text);
}
.comparison-table .comparison-col:not(:first-child) {
justify-content: center;
color: var(--text-secondary);
}
.comparison-table .comparison-col.highlight {
background: var(--accent-soft);
color: var(--text);
font-weight: 500;
}
.check-icon {
width: 20px;
height: 20px;
color: var(--success);
}
.x-icon-small {
width: 20px;
height: 20px;
color: var(--text-muted);
opacity: 0.5;
}
/* Enterprise CTA */
.enterprise-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 40px;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 20px;
}
.enterprise-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 8px;
}
.enterprise-content p {
color: var(--text-secondary);
margin: 0;
}
/* Nav active state */
.nav-link.active {
color: var(--accent);
}
/* Responsive styles for new pages */
@media (max-width: 768px) {
.page-hero {
padding: 100px 0 40px;
}
.page-hero h1 {
font-size: 1.75rem;
}
.page-hero-desc {
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
}
.pricing-page {
padding: 20px 0 60px;
}
.enterprise-cta {
flex-direction: column;
text-align: center;
padding: 32px 24px;
}
.comparison-table .comparison-col {
padding: 12px 16px;
font-size: 0.8125rem;
}
.comparison-table .comparison-row {
grid-template-columns: 1.5fr 1fr 1fr;
}
}
/* ===========================================
Premium AI Visual Demo
=========================================== */
.use-case-demo-premium {
display: flex;
align-items: stretch;
justify-content: center;
gap: 20px;
padding: 24px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.9),
rgba(255, 253, 249, 0.95));
border-radius: 16px;
border: 1px solid var(--border);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
margin-top: 16px;
}
.demo-panel {
background: #ffffff;
border-radius: 12px;
border: 1px solid var(--border);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.demo-panel:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.demo-panel-before {
width: 130px;
}
.demo-panel-after {
width: 150px;
}
.demo-panel-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: linear-gradient(135deg, #f8f7f6, #f0efed);
border-bottom: 1px solid var(--border);
}
.demo-panel-icon {
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.demo-panel-icon svg {
width: 14px;
height: 14px;
}
.demo-panel-icon-ai {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}
.demo-panel-icon-diagram {
background: linear-gradient(135deg, var(--accent), #b45309);
color: white;
}
.demo-panel-title {
font-size: 11px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
white-space: nowrap;
}
.demo-text-block {
padding: 12px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.demo-text-line {
height: 5px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.04));
border-radius: 3px;
animation: text-line-shimmer 2.5s ease-in-out infinite;
}
.demo-text-line-full {
width: 100%;
}
.demo-text-line-90 {
width: 90%;
animation-delay: 0.15s;
}
.demo-text-line-85 {
width: 85%;
animation-delay: 0.2s;
}
.demo-text-line-80 {
width: 80%;
animation-delay: 0.25s;
}
.demo-text-line-75 {
width: 75%;
animation-delay: 0.3s;
}
.demo-text-line-70 {
width: 70%;
animation-delay: 0.35s;
}
.demo-text-line-60 {
width: 60%;
animation-delay: 0.4s;
}
.demo-text-line-45 {
width: 45%;
animation-delay: 0.45s;
}
@keyframes text-line-shimmer {
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 1;
}
}
.demo-transform-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 8px;
}
.demo-transform-badge {
font-size: 10px;
font-weight: 700;
color: var(--accent);
background: var(--accent-soft);
padding: 4px 10px;
border-radius: 20px;
letter-spacing: 0.02em;
white-space: nowrap;
}
.demo-transform-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--accent), #b45309);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: transform-pulse 2s ease-in-out infinite;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}
.demo-transform-icon svg {
width: 20px;
height: 20px;
stroke: white;
}
@keyframes transform-pulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
}
50% {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(217, 119, 6, 0.45);
}
}
.demo-transform-time {
font-size: 10px;
font-weight: 600;
color: var(--muted);
background: rgba(0, 0, 0, 0.04);
padding: 3px 8px;
border-radius: 10px;
}
.demo-diagram-preview {
padding: 12px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
}
.diagram-node {
background: linear-gradient(135deg, var(--accent), #c66a00);
color: white;
font-size: 8px;
font-weight: 600;
padding: 5px 10px;
border-radius: 5px;
letter-spacing: 0.02em;
box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
animation: diagram-node-pop 0.6s ease-out both;
}
.diagram-node:nth-child(1) {
animation-delay: 0.1s;
}
.diagram-node:nth-child(3) {
animation-delay: 0.3s;
}
.diagram-node:nth-child(5) {
animation-delay: 0.5s;
}
.diagram-node-start {
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 12px;
padding: 4px 12px;
}
.diagram-node-decision {
background: linear-gradient(135deg, #6366f1, #4f46e5);
transform: rotate(0deg);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
padding: 8px 14px;
}
.diagram-connector {
width: 2px;
height: 6px;
background: var(--accent);
opacity: 0;
animation: connector-grow 0.3s ease-out forwards;
}
.diagram-connector:nth-child(2) {
animation-delay: 0.2s;
}
.diagram-connector:nth-child(4) {
animation-delay: 0.4s;
}
@keyframes connector-grow {
from {
opacity: 0;
transform: scaleY(0);
}
to {
opacity: 1;
transform: scaleY(1);
}
}
.diagram-branch {
display: flex;
gap: 12px;
margin-top: 4px;
animation: branch-appear 0.4s ease-out both;
animation-delay: 0.7s;
}
.diagram-branch-line {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.branch-label {
font-size: 7px;
font-weight: 600;
color: var(--muted);
background: rgba(0, 0, 0, 0.05);
padding: 2px 6px;
border-radius: 8px;
}
.diagram-node-sm {
font-size: 7px;
padding: 4px 8px;
}
.diagram-branch-left .diagram-node-sm {
background: linear-gradient(135deg, #10b981, #059669);
}
.diagram-branch-right .diagram-node-sm {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
@keyframes diagram-node-pop {
0% {
opacity: 0;
transform: scale(0.5) translateY(8px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes branch-appear {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hover effects on featured card */
.use-case-featured:hover .demo-text-line {
animation-duration: 1s;
}
.use-case-featured:hover .demo-transform-arrow {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.3);
}
.use-case-featured:hover .demo-mini-flowchart {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(217, 119, 6, 0.15);
}
/* ===========================================
Consistent Hover Effects for All Cards
=========================================== */
/* Unified transition for all interactive cards */
.step-card,
.use-case-card,
.feature-card,
.pricing-card,
.testimonial-card,
.faq-card,
.diagram-item {
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Unified hover effect for all cards */
.step-card:hover,
.use-case-card:hover,
.feature-card:hover,
.pricing-card:hover,
.testimonial-card:hover,
.faq-card:hover {
transform: translateY(-4px);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(217, 119, 6, 0.05);
border-color: var(--accent-light);
}
/* Icon scaling on hover - consistent for all */
.step-card:hover .step-icon,
.use-case-card:hover .use-case-icon,
.feature-card:hover .feature-icon {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
/* Icon color change on hover - consistent for all */
.step-card:hover .step-icon svg,
.use-case-card:hover .use-case-icon svg,
.feature-card:hover .feature-icon svg {
color: var(--accent);
}
/* Step Cards in How It Works */
.step-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.step-card:hover .step-icon {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
.step-card:hover .step-icon svg {
color: var(--accent);
}
/* Version History Items */
.version-list .version {
transition: all 0.2s ease;
}
.version-list .version:hover:not(.active) {
background: var(--accent-soft);
transform: translateX(4px);
}
/* Export Tags */
.export-tags .tag,
.step-exports .export-badge {
transition: all 0.2s ease;
}
.export-tags .tag:hover,
.step-exports .export-badge:hover {
background: var(--accent-soft);
color: var(--accent);
transform: translateY(-2px);
}
/* FAQ Cards hover consistency */
.faq-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.faq-card:hover .faq-card-icon {
background: var(--accent-soft);
}
.faq-card:hover .faq-card-icon svg {
color: var(--accent);
}
/* Pricing Card enhancements */
.pricing-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-card:hover .pricing-cta {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
/* Testimonial Card consistency */
.testimonial-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-card:hover .testimonial-avatar {
background: var(--accent-soft);
color: var(--accent);
}
/* Diagram Item consistency */
.diagram-item {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.diagram-item:hover .diagram-item-name {
color: var(--accent);
}
/* Nav link hover state */
.nav-link {
position: relative;
transition: color 0.2s ease;
}
.nav-link::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: width 0.2s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
/* Responsive for enhanced demo */
@media (max-width: 768px) {
.use-case-demo-enhanced {
flex-direction: column;
gap: 16px;
padding: 20px 16px;
}
.demo-transform-arrow {
transform: rotate(90deg);
}
.demo-transform-arrow svg {
animation: none;
}
}
/* Demo panel: larger, centered, consistent card for diagram preview */
.use-case-demo {
display: flex;
justify-content: center;
align-items: center;
padding: 16px 12px;
background: linear-gradient(180deg, var(--bg-warm) 0%, transparent 60%);
border-radius: 10px;
/* removed heavy border and large shadow so the SVG can sit edge-to-edge */
}
.use-case-demo .demo-diagram-preview {
width: 100%;
max-width: 980px;
padding: 8px;
background: transparent;
/* removed white panel */
border: none;
border-radius: 6px;
box-shadow: none;
/* remove white card shadow */
display: flex;
justify-content: center;
align-items: center;
}
/* Make the SVG much larger and let it fill the preview area */
.demo-diagram-image {
display: block;
width: 100%;
max-width: 1200px;
max-height: 820px;
height: auto;
margin: 0 auto;
object-fit: contain;
border-radius: 4px;
}
@media (max-width: 1100px) {
.use-case-demo .demo-diagram-preview {
max-width: 980px;
}
.demo-diagram-image {
max-width: 900px;
max-height: 600px;
}
}
@media (max-width: 768px) {
.use-case-demo {
padding: 12px;
}
.use-case-demo .demo-diagram-preview {
max-width: 720px;
padding: 8px;
}
.demo-diagram-image {
max-height: 480px;
}
}
@media (max-width: 480px) {
.use-case-demo {
padding: 8px;
}
.use-case-demo .demo-diagram-preview {
max-width: 100%;
padding: 8px;
}
.demo-diagram-image {
max-height: 300px;
}
}
/* ===========================================
COMPREHENSIVE MOBILE RESPONSIVE STYLES
=========================================== */
/* Mobile Navigation - Hamburger Menu */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
padding: 0;
z-index: 101;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu-toggle:hover {
background: var(--surface-hover);
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
}
.mobile-menu-toggle:active {
transform: scale(0.95);
}
.mobile-menu-toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--text);
border-radius: 2px;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition:
transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6),
opacity 0.2s ease,
top 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6),
width 0.3s ease;
}
.mobile-menu-toggle span:nth-child(1) {
top: 11px;
}
.mobile-menu-toggle span:nth-child(2) {
top: 17px;
}
.mobile-menu-toggle span:nth-child(3) {
top: 23px;
}
.mobile-menu-toggle.active span:nth-child(1) {
top: 17px;
transform: translateX(-50%) rotate(45deg);
width: 18px;
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
transform: translateX(-100%) scaleX(0);
}
.mobile-menu-toggle.active span:nth-child(3) {
top: 17px;
transform: translateX(-50%) rotate(-45deg);
width: 18px;
}
/* Mobile Overlay - Modern Slide-in Panel */
.mobile-overlay {
position: fixed;
inset: 0;
z-index: 1002;
pointer-events: none;
visibility: hidden;
}
.mobile-overlay::before {
content: "";
position: absolute;
inset: 0;
background: rgba(28, 25, 23, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-overlay.active {
visibility: visible;
pointer-events: auto;
}
.mobile-overlay.active::before {
opacity: 1;
}
/* Slide-in Panel Container */
.mobile-overlay-panel {
position: absolute;
top: 0;
right: 0;
width: min(85vw, 380px);
height: 100%;
background: linear-gradient(180deg, #fffdf9 0%, #fbf8f3 100%);
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
.mobile-overlay.active .mobile-overlay-panel {
transform: translateX(0);
}
/* Panel Header */
.mobile-overlay-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-light);
background: rgba(255, 253, 249, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.mobile-overlay-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text);
}
.mobile-overlay-brand svg {
width: 28px;
height: 28px;
color: var(--text);
}
.mobile-overlay-brand span {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.mobile-overlay-close {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-overlay-close:hover {
background: var(--surface-hover);
border-color: var(--accent);
color: var(--text);
transform: rotate(90deg);
}
.mobile-overlay-close:active {
transform: scale(0.9) rotate(90deg);
}
.mobile-overlay-close svg {
width: 18px;
height: 18px;
}
/* Navigation Menu */
.mobile-overlay-menu {
flex: 1;
display: flex;
flex-direction: column;
padding: 20px;
gap: 8px;
overflow-y: auto;
}
.mobile-overlay-menu .nav-link {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
border-radius: 14px;
border: 1px solid transparent;
background: transparent;
position: relative;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-overlay-menu .nav-link::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(217, 119, 6, 0.08) 0%,
rgba(254, 243, 199, 0.15) 100%);
opacity: 0;
transition: opacity 0.25s ease;
}
.mobile-overlay-menu .nav-link:hover,
.mobile-overlay-menu .nav-link:focus {
background: var(--surface);
border-color: var(--border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transform: translateX(4px);
}
.mobile-overlay-menu .nav-link:hover::before,
.mobile-overlay-menu .nav-link:focus::before {
opacity: 1;
}
.mobile-overlay-menu .nav-link.active {
background: var(--accent-light);
border-color: rgba(217, 119, 6, 0.2);
color: var(--text);
}
.mobile-overlay-menu .nav-link.active::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 24px;
background: var(--accent);
border-radius: 0 3px 3px 0;
}
.mobile-overlay-menu .nav-link:active {
transform: scale(0.98);
}
/* Navigation Icons */
.mobile-nav-icon {
width: 22px;
height: 22px;
color: var(--text-muted);
flex-shrink: 0;
transition: color 0.2s ease;
}
.mobile-overlay-menu .nav-link:hover .mobile-nav-icon {
color: var(--accent);
}
.mobile-overlay-menu .nav-link.active .mobile-nav-icon {
color: var(--accent);
}
/* Menu Divider */
.mobile-menu-divider {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--border) 50%,
transparent 100%);
margin: 12px 0;
}
/* Primary CTA in Menu */
.mobile-overlay-menu .btn {
margin-top: auto;
width: 100%;
padding: 16px 24px;
justify-content: center;
border-radius: 14px;
font-size: 0.9375rem;
font-weight: 600;
background: linear-gradient(180deg,
var(--primary) 0%,
var(--primary-hover) 100%);
box-shadow: 0 4px 14px rgba(28, 25, 23, 0.15);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-overlay-menu .btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(28, 25, 23, 0.2);
}
/* User Profile Section (Bottom of Panel) */
.mobile-overlay-footer {
padding: 16px 20px;
border-top: 1px solid var(--border-light);
background: linear-gradient(180deg,
rgba(251, 248, 243, 0.5) 0%,
rgba(247, 243, 237, 0.8) 100%);
}
.mobile-user-section {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
text-decoration: none;
color: inherit;
}
.mobile-user-section:hover {
border-color: var(--accent);
box-shadow: 0 4px 16px rgba(217, 119, 6, 0.1);
transform: translateY(-2px);
}
.mobile-user-avatar {
width: 44px;
height: 44px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border: 2px solid #fed7aa;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12);
}
.mobile-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mobile-user-avatar-initials {
font-size: 1rem;
font-weight: 700;
color: #92400e;
text-transform: uppercase;
}
.mobile-user-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.mobile-user-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.mobile-user-email {
font-size: 0.8125rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
margin-top: 2px;
}
.mobile-user-actions {
display: flex;
align-items: center;
gap: 8px;
}
.mobile-user-action-btn {
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.mobile-user-action-btn:hover {
background: #fef2f2;
border-color: #fecaca;
color: #dc2626;
}
.mobile-user-action-btn svg {
width: 18px;
height: 18px;
}
/* Login CTA when not authenticated */
.mobile-login-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.mobile-login-section .btn-primary {
width: 100%;
padding: 16px 24px;
justify-content: center;
border-radius: 14px;
font-size: 0.9375rem;
font-weight: 600;
background: linear-gradient(180deg,
var(--primary) 0%,
var(--primary-hover) 100%);
box-shadow: 0 4px 14px rgba(28, 25, 23, 0.15);
text-decoration: none;
text-align: center;
display: flex;
align-items: center;
gap: 10px;
color: white;
}
.mobile-login-section .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(28, 25, 23, 0.2);
}
.mobile-login-tagline {
font-size: 0.8125rem;
color: var(--text-muted);
text-align: center;
}
/* Staggered Animation for Menu Items */
.mobile-overlay.active .mobile-overlay-menu .nav-link:nth-child(1) {
animation: slideInRight 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.1s both;
}
.mobile-overlay.active .mobile-overlay-menu .nav-link:nth-child(2) {
animation: slideInRight 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.15s both;
}
.mobile-overlay.active .mobile-overlay-menu .nav-link:nth-child(3) {
animation: slideInRight 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.2s both;
}
.mobile-overlay.active .mobile-overlay-menu .nav-link:nth-child(4) {
animation: slideInRight 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.25s both;
}
.mobile-overlay.active .mobile-overlay-footer {
animation: slideInUp 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.3s both;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Prevent body scroll when overlay is open */
body.menu-open {
overflow: hidden;
}
/* Show hamburger on mobile/tablet */
@media (max-width: 900px) {
.mobile-menu-toggle {
display: flex;
}
.nav-buttons {
display: none;
}
.nav-buttons.mobile-visible {
display: flex;
}
}
/* ===========================================
Tablet Breakpoint (768px - 1024px)
=========================================== */
@media (max-width: 1024px) {
/* Container adjustments */
.container {
padding: 0 20px;
}
/* Hero section - stack layout */
.hero .container {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.hero-content {
text-align: center;
}
.hero-desc {
margin-left: auto;
margin-right: auto;
}
.hero-actions {
justify-content: center;
}
.hero-trust {
justify-content: center;
}
.hero-preview {
max-width: 700px;
margin: 0 auto;
}
/* Hero Showcase adjustments for tablet */
.showcase-prompt-card {
max-width: 100%;
}
.diagram-frame {
padding: 16px;
}
/* How It Works - vertical stack */
.steps-grid {
grid-template-columns: 1fr;
gap: 32px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.step-connector {
display: flex;
padding: 0;
transform: rotate(90deg);
width: 40px;
height: 40px;
animation: connectorPulseVertical 2s ease-in-out infinite;
justify-content: center;
margin: 0 auto;
}
/* Features grid - 2 columns */
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.feature-main {
grid-column: span 2;
grid-template-columns: 1fr;
gap: 24px;
}
/* Use cases grid - 2 columns */
.use-cases-grid {
grid-template-columns: repeat(2, 1fr);
}
.use-case-card.use-case-featured {
grid-column: span 2;
grid-row: span 1;
}
/* Diagram showcase - stack */
.diagram-showcase {
overflow-x: hidden;
}
.diagram-showcase-grid {
grid-template-columns: 1fr;
gap: 32px;
max-width: 100%;
}
.diagram-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
gap: 8px;
padding-bottom: 12px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.diagram-list::-webkit-scrollbar {
display: none;
}
.diagram-item {
width: auto;
flex: 0 0 auto;
}
.diagram-preview-panel {
position: static;
}
/* Pricing grid */
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 700px;
}
.pricing-grid.pricing-grid-two {
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
}
/* Footer */
.footer-main {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-nav {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
/* ===========================================
Mobile Breakpoint (max-width: 768px)
=========================================== */
@media (max-width: 768px) {
/* Base typography adjustments */
h1 {
font-size: clamp(1.75rem, 8vw, 2.5rem);
}
h2 {
font-size: clamp(1.5rem, 6vw, 2rem);
}
/* Section padding adjustments */
.hero {
padding: 100px 0 120px;
min-height: auto;
}
.how-it-works,
.use-cases,
.features,
.diagram-showcase,
.testimonials,
.pricing-page,
.why-codigram {
padding: 60px 0;
}
/* Hero adjustments */
.hero-badge {
font-size: 0.75rem;
padding: 6px 12px;
}
.hero-desc {
font-size: 1rem;
margin: 20px 0 28px;
}
.hero-actions {
flex-direction: column;
width: 100%;
gap: 12px;
}
.hero-actions .btn {
width: 100%;
justify-content: center;
}
.btn-xl {
padding: 14px 28px;
font-size: 0.9375rem;
}
.hero-preview {
max-width: 100%;
}
.preview-window {
border-radius: 12px;
}
.window-body {
min-height: 200px;
}
.hero-video-wrap {
min-height: 180px;
}
/* Hero Showcase - Mobile */
.showcase-container {
gap: 16px;
}
.showcase-prompt-card {
padding: 16px;
}
.prompt-text {
font-size: 0.875rem;
}
.showcase-magic {
gap: 12px;
}
.magic-line {
width: 40px;
}
.magic-icon {
width: 36px;
height: 36px;
}
.magic-icon svg {
width: 16px;
height: 16px;
}
.diagram-frame {
padding: 12px;
border-radius: 14px;
}
.diagram-badge {
font-size: 0.7rem;
padding: 6px 10px;
right: 12px;
bottom: -10px;
}
.showcase-types {
margin-top: 16px;
gap: 8px;
flex-wrap: nowrap;
}
.showcase-types .hide-mobile {
display: none;
}
.type-pill {
padding: 6px 12px;
font-size: 0.75rem;
}
/* Hero Trust - stack on mobile */
.hero-trust {
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.trust-text {
align-items: center;
}
/* Section headers */
.section-header {
margin-bottom: 32px;
}
.section-header p {
font-size: 0.9375rem;
}
.section-badge {
font-size: 0.6875rem;
padding: 6px 12px;
}
/* Steps Grid - single column */
.steps-grid {
gap: 24px;
}
.step-card {
padding: 24px 20px;
}
.step-icon {
width: 56px;
height: 56px;
}
.step-icon svg {
width: 24px;
height: 24px;
}
.step-connector {
padding: 8px 0;
transform: rotate(90deg);
width: 40px;
height: 40px;
animation: connectorPulseVertical 2s ease-in-out infinite;
justify-content: center;
margin: 0 auto;
display: flex;
}
.step-connector svg {
width: 24px;
height: 24px;
}
/* Features - single column */
.features-grid {
grid-template-columns: 1fr;
}
.feature-main {
grid-column: span 1;
padding: 20px;
}
.feature-card {
padding: 20px;
}
.feature-demo {
padding: 5px;
}
.feature-icon {
width: 44px;
height: 44px;
}
.feature-icon svg {
width: 22px;
height: 22px;
}
/* AI Input showcase */
.ai-input-card {
border-radius: 16px;
}
.ai-input-body {
padding: 20px 16px;
min-height: 60px;
}
.ai-input-field {
font-size: 1rem;
}
.ai-input-footer {
padding: 12px 16px;
flex-wrap: wrap;
gap: 12px;
}
.ai-tool-btn {
width: 38px;
height: 38px;
}
.ai-send-btn {
width: 42px;
height: 42px;
}
/* Use Cases - single column */
.use-cases-grid {
grid-template-columns: 1fr;
}
.use-case-card.use-case-featured {
grid-column: span 1;
padding: 24px;
}
.use-case-card {
padding: 24px;
}
.use-case-icon {
width: 44px;
height: 44px;
}
.use-case-featured .use-case-icon {
width: 48px;
height: 48px;
}
/* Diagram list - horizontal scroll */
.diagram-showcase {
padding: 60px 0;
overflow-x: hidden;
}
.diagram-showcase-grid {
grid-template-columns: 1fr;
gap: 24px;
max-width: 100%;
overflow: hidden;
}
.diagram-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
padding: 4px 0 12px 0;
gap: 8px;
max-width: 100%;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.diagram-list::-webkit-scrollbar {
display: none;
}
.diagram-item {
flex-shrink: 0;
padding: 10px 14px;
min-width: auto;
width: auto;
}
.diagram-item-name {
font-size: 0.8125rem;
white-space: nowrap;
}
.diagram-item-desc {
display: none;
}
.diagram-preview-panel {
position: static;
width: 100%;
max-width: 100%;
}
.diagram-preview-window {
border-radius: 12px;
max-width: 100%;
overflow: hidden;
}
.diagram-preview-content {
width: 100%;
max-width: 100%;
min-height: 220px;
overflow: hidden;
padding: 16px;
aspect-ratio: 4 / 3;
}
.diagram-preview-content .demo-diagram-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
/* Testimonials */
.testimonials {
padding: 60px 0 40px;
}
.testimonials-content {
gap: 16px;
}
.testimonial-card {
width: 300px;
padding: 20px;
}
.testimonial-text {
font-size: 0.875rem;
}
/* Pricing */
.pricing-grid,
.pricing-grid.pricing-grid-two {
grid-template-columns: 1fr;
max-width: 400px;
margin: 0 auto;
}
.pricing-card.popular {
order: -1;
}
.pricing-card {
padding: 24px;
}
.pricing-toggle {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.pricing-badge {
margin-left: 0;
}
/* Footer - Compact Mobile Layout */
.footer {
padding: 40px 0 24px;
}
.footer-main {
gap: 16px;
padding-bottom: 24px;
padding-top: 0;
}
/* Hide logo and description on mobile */
.footer-brand {
display: none;
}
.footer-nav {
display: grid;
grid-template-columns: auto auto 1fr;
justify-content: flex-start;
gap: 16px;
text-align: left;
padding-top: 0;
width: 100%;
}
.footer-col {
min-width: 0;
}
.footer-col:first-child {
padding-right: 0;
}
.footer-col h4 {
font-size: 0.75rem;
margin-bottom: 8px;
text-align: left;
color: var(--accent);
}
.footer-col a {
padding: 4px 0;
font-size: 0.875rem;
text-align: left;
display: block;
}
.footer-col.footer-contact {
margin-top: 0;
text-align: left;
}
.footer-col.footer-contact h4 {
text-align: left;
color: var(--accent);
}
.footer-email-link {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 8px 10px !important;
font-size: 0.75rem;
white-space: nowrap;
max-width: 100%;
margin-top: 4px;
}
.footer-email-link svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.footer-bottom {
padding-top: 16px;
font-size: 0.75rem;
}
/* CTA Section */
.cta {
padding: 60px 0 80px;
}
.cta-content {
padding: 40px 28px;
margin: 0 16px;
max-width: calc(100% - 32px);
text-align: center;
border-radius: 20px;
}
.cta h2 {
font-size: 1.375rem;
margin-bottom: 20px;
}
.cta-badge {
padding: 8px 16px;
font-size: 0.75rem;
margin-bottom: 20px;
}
.cta-content .btn-xl {
margin-bottom: 16px;
width: 100%;
justify-content: center;
}
.cta-subtext {
margin-top: 16px;
}
.cta-features {
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: center;
gap: 8px 16px;
max-width: 300px;
margin: 0 auto;
transform: translateX(-12px);
}
.cta-features .cta-feature:last-child {
grid-column: 1 / -1;
justify-self: center;
}
/* Page Hero (FAQ/Pricing) */
.page-hero {
padding: 100px 0 40px;
}
.page-hero h1 {
font-size: clamp(1.5rem, 7vw, 2rem);
}
.page-hero-desc {
font-size: 1rem;
}
/* Comparison table */
.comparison-table .comparison-col {
padding: 12px 12px;
font-size: 0.75rem;
}
.comparison-table .comparison-row {
grid-template-columns: 1.5fr 1fr 1fr;
}
.comparison-header {
grid-template-columns: 1.5fr 1fr 1fr;
}
/* Enterprise CTA */
.enterprise-cta {
flex-direction: column;
text-align: center;
padding: 24px 20px;
gap: 20px;
}
/* Ticker */
.ticker {
padding: 12px 0;
}
.ticker-content {
gap: 12px;
padding-right: 12px;
}
.ticker-content span {
font-size: 0.75rem;
}
}
/* ===========================================
Small Mobile Breakpoint (max-width: 480px)
=========================================== */
@media (max-width: 480px) {
/* Container */
.container {
padding: 0 16px;
}
/* Navigation */
.nav-inner {
padding: 0 16px;
height: 56px;
}
.logo {
font-size: 1rem;
}
.logo-icon {
width: 24px;
height: 24px;
}
/* Hero */
.hero {
padding: 80px 0 100px;
}
h1 {
font-size: 1.625rem;
}
.hero-desc {
font-size: 0.9375rem;
line-height: 1.6;
}
.btn-xl {
padding: 12px 24px;
font-size: 0.875rem;
}
/* Step cards */
.step-card {
padding: 20px 16px;
}
.step-number {
width: 28px;
height: 28px;
font-size: 0.75rem;
}
.step-card h3 {
font-size: 1rem;
}
.step-card p {
font-size: 0.875rem;
}
.step-example {
padding: 10px;
}
.example-text {
font-size: 0.75rem;
}
/* Feature cards */
.feature-card {
padding: 20px;
border-radius: 16px;
}
.feature-card h3 {
font-size: 1rem;
margin: 16px 0 8px;
}
.feature-card p {
font-size: 0.875rem;
}
/* Use case cards */
.use-case-card {
padding: 20px;
border-radius: 16px;
}
.use-case-card h3 {
font-size: 1rem;
}
.use-case-card p {
font-size: 0.8125rem;
}
.use-case-tags {
gap: 4px;
}
.use-case-tag {
padding: 4px 8px;
font-size: 0.6875rem;
}
/* Pricing */
.pricing-card {
padding: 20px;
border-radius: 16px;
}
.pricing-name {
font-size: 1.25rem;
}
.pricing-desc {
font-size: 0.875rem;
min-height: auto;
}
.pricing-amount {
font-size: 2.5rem;
}
.pricing-features li {
font-size: 0.875rem;
padding: 8px 0;
}
.pricing-toggle span {
font-size: 0.875rem;
}
/* Testimonials */
.testimonial-card {
width: 280px;
padding: 16px;
}
.testimonial-text {
font-size: 0.8125rem;
margin-bottom: 16px;
}
.testimonial-avatar {
width: 36px;
height: 36px;
}
.testimonial-info h4 {
font-size: 0.875rem;
}
.testimonial-info span {
font-size: 0.75rem;
}
/* Footer - Extra Small Mobile */
.footer {
padding: 32px 0 20px;
}
.footer-main {
gap: 16px;
padding-bottom: 20px;
padding-top: 0;
}
.footer-brand {
display: none;
}
.footer-nav {
display: grid;
grid-template-columns: auto auto auto;
justify-content: flex-start;
gap: 24px;
padding-top: 0;
}
.footer-col h4 {
font-size: 0.6875rem;
margin-bottom: 6px;
color: var(--accent);
}
.footer-col:first-child {
padding-right: 0;
}
.footer-col a {
font-size: 0.8125rem;
padding: 3px 0;
}
.footer-col.footer-contact {
margin-top: 0;
}
.footer-email-link {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 6px 8px !important;
font-size: 10px;
white-space: nowrap;
max-width: calc(100vw - 160px);
overflow: hidden;
text-overflow: ellipsis;
margin-top: 4px;
}
.footer-email-link svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.footer-bottom {
padding-top: 12px;
font-size: 0.6875rem;
}
/* Page Hero */
.page-hero {
padding: 80px 0 32px;
}
.page-hero h1 {
font-size: 1.5rem;
}
/* CTA */
.cta {
padding: 48px 0 64px;
}
.cta-content {
padding: 32px 24px;
margin: 0 12px;
max-width: calc(100% - 24px);
border-radius: 16px;
}
.cta h2 {
font-size: 1.25rem;
margin-bottom: 16px;
}
.cta-badge {
padding: 6px 12px;
font-size: 0.6875rem;
margin-bottom: 16px;
}
.cta-subtext {
font-size: 0.8125rem;
margin-top: 12px;
}
/* Diagram showcase */
.diagram-showcase {
padding: 48px 0;
}
.diagram-showcase .section-header {
margin-bottom: 24px;
}
.diagram-list {
gap: 6px;
padding: 4px 0 10px 0;
}
.diagram-item {
padding: 8px 12px;
border-radius: 8px;
}
.diagram-item-name {
font-size: 0.75rem;
}
.diagram-preview-window {
border-radius: 10px;
}
.preview-window-bar {
padding: 10px 12px;
}
.preview-window-bar .dot {
width: 8px;
height: 8px;
}
.preview-window-title {
font-size: 0.6875rem;
}
.diagram-preview-content {
min-height: 180px;
padding: 12px;
aspect-ratio: 4 / 3;
}
.diagram-preview-content .demo-diagram-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* Section headers */
.section-header h2 {
font-size: 1.375rem;
}
.section-header p {
font-size: 0.875rem;
}
}
/* ===========================================
Touch Device Optimizations
=========================================== */
@media (hover: none) and (pointer: coarse) {
/* Remove hover-only transforms on touch devices */
.step-card:hover,
.use-case-card:hover,
.feature-card:hover,
.pricing-card:hover,
.testimonial-card:hover,
.diagram-item:hover {
transform: none;
}
/* Larger touch targets */
.btn {
min-height: 44px;
}
.nav-link {
min-height: 44px;
display: flex;
align-items: center;
}
.diagram-item {
min-height: 44px;
}
.faq-question {
min-height: 56px;
}
}
/* ===========================================
Landscape Mobile Orientation
=========================================== */
@media (max-height: 500px) and (orientation: landscape) {
.hero {
padding: 80px 0 40px;
min-height: auto;
}
.page-hero {
padding: 80px 0 32px;
}
/* Ensure overlay still covers full viewport in landscape */
.mobile-overlay {
inset: 0;
}
}
/* User Menu Styles */
.user-menu-container {
position: relative;
display: none;
/* Hidden by default, shown by auth.js */
}
.user-avatar-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface);
cursor: pointer;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.user-avatar-btn:hover {
border-color: var(--text-muted);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.user-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar-placeholder {
width: 100%;
height: 100%;
background: var(--accent-light);
color: var(--accent);
font-weight: 600;
font-size: 1.125rem;
display: flex;
align-items: center;
justify-content: center;
}
.user-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
max-width: 320px;
width: max-content;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 100;
}
.user-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-info {
padding: 12px;
border-bottom: 1px solid var(--border-light);
margin-bottom: 8px;
}
.user-name {
font-weight: 600;
color: var(--text);
font-size: 0.9375rem;
display: block;
}
.user-email {
font-size: 0.8125rem;
color: var(--text-muted);
display: block;
margin-top: 2px;
word-break: break-word;
line-height: 1.4;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: none;
background: none;
text-align: left;
font-size: 0.875rem;
color: var(--text-secondary);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
}
.dropdown-item:hover {
background: var(--bg-alt);
color: var(--text);
}
.dropdown-item.text-red {
color: #ef4444;
}
.dropdown-item.text-red:hover {
background: #fef2f2;
color: #dc2626;
}
/* ===========================================
User Avatar & Dropdown (Landing Pages)
Matches main app styling
=========================================== */
.user-avatar-container {
position: relative;
display: inline-block;
}
.user-avatar-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #fed7aa;
background: #fffbeb;
padding: 0;
cursor: pointer;
transition: all 0.2s ease;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.user-avatar-btn:hover {
border-color: #fdb45c;
background: #fef3c7;
box-shadow:
0 1px 3px 0 rgb(0 0 0 / 0.1),
0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.user-avatar-btn:active {
transform: scale(0.98);
}
.user-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar-initials {
font-size: 14px;
font-weight: 600;
color: #44403c;
text-transform: uppercase;
user-select: none;
}
.user-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: white;
border: 1px solid rgba(229, 229, 229, 0.8);
border-radius: 12px;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s;
z-index: 100000;
overflow: hidden;
/* Keep a small inner gutter to match the app popover (p-2) */
padding: 8px;
}
.user-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-dropdown-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid #f5f5f4;
}
.user-dropdown-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.user-dropdown-avatar-initials {
width: 36px;
height: 36px;
border-radius: 50%;
background: #fffbeb;
border: 1px solid #fed7aa;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: #44403c;
text-transform: uppercase;
flex-shrink: 0;
}
.user-dropdown-info {
flex: 1;
min-width: 0;
overflow: hidden;
}
.user-dropdown-name {
font-size: 14px;
font-weight: 600;
color: #292524;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-dropdown-email {
font-size: 12px;
color: #78716c;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0;
}
.user-dropdown-divider {
display: none;
}
.user-dropdown-item {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
/* px-3 py-2.5 */
background: transparent;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #57534e;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
/* Replicate app popover inner padding (p-2) and mt-1 */
margin: 0;
margin-top: 4px;
/* mt-1 to match app spacing */
}
.user-dropdown-item:hover {
background: #fef2f2;
color: #dc2626;
}
.user-dropdown-item:hover .user-dropdown-icon {
color: #ef4444;
}
.user-dropdown-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #a8a29e;
transition: color 0.2s ease;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.user-dropdown {
right: -8px;
min-width: 220px;
}
}
/* ============================================
PRO BADGE & USER SECTION
============================================ */
.pro-badge {
display: inline-flex;
align-items: center;
padding: 2px 6px;
background: var(--accent-light);
color: var(--accent);
border: 1px solid rgba(217, 119, 6, 0.2);
border-radius: 4px;
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: 6px;
vertical-align: middle;
}
.user-avatar-container {
position: relative;
}
.user-avatar-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #FED7AA;
background: #FFFBEB;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.user-avatar-btn:hover {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-light);
}
.user-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-avatar-initials {
font-size: 0.875rem;
font-weight: 600;
color: #44403C;
}
.user-dropdown {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 240px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
padding: 8px;
display: none;
z-index: 1000;
transform-origin: top right;
}
.user-dropdown.active {
display: block;
animation: dropdownEnter 0.2s ease-out;
}
@keyframes dropdownEnter {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.user-dropdown-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
}
.user-dropdown-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #FFFBEB;
border: 1px solid #FED7AA;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #44403C;
overflow: hidden;
}
.user-dropdown-info {
flex: 1;
min-width: 0;
}
.user-dropdown-name {
font-weight: 600;
color: var(--text);
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 4px;
}
.user-dropdown-email {
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-dropdown-divider {
height: 1px;
background: var(--border-light);
margin: 4px 0;
}
.user-dropdown-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: none;
background: transparent;
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
border-radius: 8px;
text-align: left;
transition: all 0.2s ease;
}
.user-dropdown-item:hover {
background: var(--bg-warm);
color: var(--text);
}
.user-dropdown-item[data-action="logout"]:hover {
background: #fef2f2;
color: #ef4444;
}
.user-dropdown-icon {
width: 16px;
height: 16px;
opacity: 0.7;
}
/* Mobile User Section */
.mobile-user-section {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--bg-alt);
border-radius: 12px;
margin-bottom: 16px;
}
.mobile-user-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: #FFFBEB;
border: 1px solid #FED7AA;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #44403C;
overflow: hidden;
}
.mobile-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mobile-user-info {
flex: 1;
min-width: 0;
}
.mobile-user-name {
font-weight: 600;
color: var(--text);
font-size: 0.9375rem;
display: flex;
align-items: center;
gap: 6px;
}
.mobile-user-email {
font-size: 0.8125rem;
color: var(--text-muted);
}
/* Scroll Reveal Animations */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.fade-in {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}