/* Forge Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}
body {
    min-height: 100dvh;
    line-height: 1.5;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
    border: none;
    background: none;
}
a {
    color: inherit;
    text-decoration: none;
}
ul, ol {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    font-weight: inherit;
    font-size: inherit;
}
p {
    overflow-wrap: break-word;
}
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* Forge Design Tokens */
:root {
    /* ── Colors: Dark Theme ── */
    --color-bg:             #0a0a0f;
    --color-bg-raised:      #12121a;
    --color-bg-overlay:     #1a1a25;
    --color-bg-hover:       #22222f;
    --color-bg-input:       #15151f;
    --color-surface:        #1e1e2a;
    --color-surface-hover:  #282838;
    --color-border:         #2a2a3a;
    --color-border-subtle:  #1f1f2f;
    --color-border-focus:   var(--color-primary);
    /* Text */
    --color-text:           #f0f0f5;
    --color-text-secondary: #b0b0c8;
    --color-text-muted:     #9898b0;
    --color-text-inverse:   #0a0a0f;
    /* Primary — Electric Indigo (AA contrast on white: 5.1:1) */
    --color-primary:        #4f46e5;
    --color-primary-hover:  #6366f1;
    --color-primary-active: #4338ca;
    --color-primary-subtle: rgba(99, 102, 241, 0.12);
    /* Accent — Amber/Gold (crédits) */
    --color-accent:         #f59e0b;
    --color-accent-hover:   #fbbf24;
    --color-accent-subtle:  rgba(245, 158, 11, 0.12);
    /* Semantic */
    --color-success:        #10b981;
    --color-success-subtle: rgba(16, 185, 129, 0.12);
    --color-warning:        #f59e0b;
    --color-warning-subtle: rgba(245, 158, 11, 0.12);
    --color-error:          #ef4444;
    --color-error-subtle:   rgba(239, 68, 68, 0.12);
    --color-info:           #3b82f6;
    --color-info-subtle:    rgba(59, 130, 246, 0.12);
    /* ── Typography ── */
    --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', monospace;
    --text-xs:              clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);     /* ~11-12px */
    --text-sm:              clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);    /* ~13-14px */
    --text-base:            clamp(0.875rem, 0.85rem + 0.1vw, 1rem);         /* ~14-16px */
    --text-lg:              clamp(1.0625rem, 1rem + 0.2vw, 1.25rem);        /* ~17-20px */
    --text-xl:              clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);         /* ~20-24px */
    --text-2xl:             clamp(1.5rem, 1.3rem + 0.6vw, 2rem);           /* ~24-32px */
    --text-3xl:             clamp(1.875rem, 1.5rem + 1vw, 2.5rem);         /* ~30-40px */
    --leading-tight:        1.25;
    --leading-normal:       1.5;
    --leading-relaxed:      1.75;
    --weight-normal:        400;
    --weight-medium:        500;
    --weight-semibold:      600;
    --weight-bold:          700;
    --weight-extrabold:     800;
    /* ── Spacing ── */
    --space-1:              0.25rem;    /* 4px */
    --space-2:              0.5rem;     /* 8px */
    --space-3:              0.75rem;    /* 12px */
    --space-4:              1rem;       /* 16px */
    --space-5:              1.25rem;    /* 20px */
    --space-6:              1.5rem;     /* 24px */
    --space-8:              2rem;       /* 32px */
    --space-10:             2.5rem;     /* 40px */
    --space-12:             3rem;       /* 48px */
    --space-16:             4rem;       /* 64px */
    --space-20:             5rem;       /* 80px */
    /* ── Shadows ── */
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:            0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl:            0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --shadow-glow:          0 0 20px rgba(99, 102, 241, 0.3);
    --shadow-gold:          0 0 20px rgba(245, 158, 11, 0.3);
    /* ── Radii ── */
    --radius-sm:            0.375rem;   /* 6px */
    --radius-md:            0.5rem;     /* 8px */
    --radius-lg:            0.75rem;    /* 12px */
    --radius-xl:            1rem;       /* 16px */
    --radius-2xl:           1.5rem;     /* 24px */
    --radius-full:          9999px;
    /* ── Transitions ── */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;
    /* ── Z-index ── */
    --z-dropdown:           10;
    --z-sticky:             20;
    --z-overlay:            30;
    --z-modal:              40;
    --z-toast:              50;
    /* ── Layout ── */
    --sidebar-width:        260px;
    --header-height:        64px;
    --container-max:        1280px;
}
/* Forge Typography */
body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}
h1, .h1 {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: -0.025em;
}
h2, .h2 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}
h3, .h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
}
h4, .h4 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
}
h5, .h5 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
}
h6, .h6 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leading-tight { line-height: var(--leading-tight); }
.leading-relaxed { line-height: var(--leading-relaxed); }
body { font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-text); }
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); }
.grid { display: grid; gap: var(--space-6); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.text-center { text-align: center; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-semibold); border-radius: var(--radius-md); transition: all var(--transition-fast); white-space: nowrap; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.btn-primary { background-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background-color: var(--color-primary-hover); box-shadow: var(--shadow-glow); }
.btn-secondary { background-color: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost { background-color: transparent; color: var(--color-text-secondary); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
/* Forge Landing Page */
/* ── Nav ── */
.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-subtle);
}
.landing-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.landing-nav-links a:not(.btn) {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}
.landing-nav-links a:not(.btn):hover {
    color: var(--color-text);
}
/* ── Hero ── */
.hero {
    padding: calc(var(--header-height) + var(--space-20)) 0 var(--space-20);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
    pointer-events: none;
}
.hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--weight-extrabold);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 800px;
    margin: 0 auto var(--space-6);
}
.hero h1 .text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-8);
    line-height: var(--leading-relaxed);
}
.hero-cta {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    margin-bottom: var(--space-4);
}
.hero-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
/* ── Sections ── */
.landing-section {
    padding: var(--space-20) 0;
}
.landing-section:nth-child(even) {
    background: var(--color-bg-raised);
}
.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-12);
}
.section-header h2 {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    margin-bottom: var(--space-4);
}
.section-header p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}
/* ── Features ── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.feature-card {
    padding: var(--space-6);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
}
.feature-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}
.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    font-size: 24px;
}
.feature-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}
.feature-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}
/* ── Stats banner ── */
.stats-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    text-align: center;
    padding: var(--space-12) 0;
}
.stat-item .stat-number {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-accent);
    line-height: 1;
}
.stat-item .stat-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}
/* ── FAQ ── */
.faq-list {
    max-width: 720px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-item summary {
    padding: var(--space-5) 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::after {
    content: '+';
    font-size: var(--text-xl);
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}
.faq-item[open] summary::after {
    transform: rotate(45deg);
}
.faq-answer {
    padding: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}
/* ── CTA final ── */
.cta-section {
    text-align: center;
    padding: var(--space-20) 0;
    background: linear-gradient(180deg, var(--color-bg) 0%, rgba(99, 102, 241, 0.05) 100%);
}
/* ── Footer ── */
.landing-footer {
    padding: var(--space-12) 0 var(--space-8);
    background: var(--color-bg-raised);
    border-top: 1px solid var(--color-border);
}
/* ── Responsive ── */
@media (max-width: 768px) {
    .landing-nav-links a:not(.btn) { display: none; }
    .feature-grid { grid-template-columns: 1fr; }
    .stats-banner { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
    .hero-cta { flex-direction: column; align-items: center; }
    .landing-footer .grid-cols-4 { grid-template-columns: 1fr 1fr; }
}
/* Forge Pricing Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    align-items: start;
}
.pricing-card {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.pricing-card-popular {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
    transform: scale(1.03);
}
.pricing-card-popular:hover {
    transform: scale(1.03) translateY(-4px);
}
.pricing-badge {
    position: absolute;
    top: calc(var(--space-3) * -1);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    white-space: nowrap;
}
.pricing-name {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2);
}
.pricing-credits {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-1);
}
.pricing-credits-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.pricing-price {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-1);
}
.pricing-unit {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}
.pricing-description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    min-height: 40px;
}
.pricing-cta {
    width: 100%;
}
/* Animation on scroll */
.pricing-card {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp var(--transition-slow) ease forwards;
}
.pricing-card:nth-child(1) { animation-delay: 0ms; }
.pricing-card:nth-child(2) { animation-delay: 100ms; }
.pricing-card:nth-child(3) { animation-delay: 200ms; }
.pricing-card:nth-child(4) { animation-delay: 300ms; }
.pricing-card-popular {
    opacity: 0;
    transform: scale(1.03) translateY(20px);
    animation: pricingPopIn var(--transition-slow) ease forwards;
}
@keyframes pricingPopIn {
    to { opacity: 1; transform: scale(1.03) translateY(0); }
}
@media (max-width: 768px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr !important; }
    .landing-nav-links a:not(.btn) { display: none; }
    .hero h1 { font-size: clamp(1.5rem, 5vw, 2.5rem) !important; }
    .hero-cta { flex-direction: column; align-items: center; }
    .feature-grid { grid-template-columns: 1fr !important; }
    .stats-banner { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-6) !important; }
    .pricing-grid { grid-template-columns: 1fr !important; }
    .pricing-card-popular { transform: none !important; }
    .btn-lg { width: 100%; }
    .landing-footer .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}