/* ============================================================

InsightAI — Premium Design System

============================================================ */

/* --- Global Reset --- */

*, *::before, *::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

svg {

max-width: 100%;

max-height: 100%;

}

.app-icon-wrap {

display: inline-flex;

align-items: center;

justify-content: center;

flex-shrink: 0;

vertical-align: middle;

}

.app-icon-wrap svg {

width: 100% !important;

height: 100% !important;

}

html, body, #root {

height: 100%;

margin: 0;

padding: 0;

}

body {

min-height: 100vh;

}

/* --- Design Tokens --- */

:root {

font-family: "Inter", "Segoe UI Variable", system-ui, sans-serif;

color: #0f1f44;

background:

radial-gradient(circle at top left, rgba(66, 95, 172, 0.12), transparent 28%),

radial-gradient(circle at top right, rgba(103, 139, 255, 0.14), transparent 24%),

linear-gradient(180deg, #f9fbff 0%, #eef3ff 100%);

line-height: 1.5;

font-weight: 400;

color-scheme: light;

font-synthesis: none;

text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

--ink: #0f1f44;

--ink-dark: #0a1628;

--ink-soft: #51607f;

--ink-light: #7a8ba8;

--navy: #183c88;

--blue: #4f6ef7;

--blue-soft: #dce6ff;

--accent: #4f6ef7;

--accent-glow: rgba(79, 110, 247, 0.35);

--surface: #fafbfc;

--surface-2: #f0f4ff;

--panel: rgba(255, 255, 255, 0.88);

--panel-strong: rgba(255, 255, 255, 0.96);

--border: rgba(24, 60, 136, 0.12);

--shadow: 0 24px 48px rgba(23, 42, 91, 0.08);

--shadow-sm: 0 4px 20px rgba(16, 32, 61, 0.04);

--shadow-lg: 0 20px 60px rgba(16, 32, 61, 0.12);

--radius: 18px;

--radius-lg: 28px;

}

/* --- Keyframes --- */

@keyframes fadeInUp {

from { opacity: 0; transform: translateY(28px); }

to { opacity: 1; transform: translateY(0); }

}

@keyframes fadeInScale {

from { opacity: 0; transform: scale(0.92); }

to { opacity: 1; transform: scale(1); }

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}

@keyframes float {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-16px); }

}

@keyframes shimmer {

0% { transform: translateX(-100%); }

100% { transform: translateX(100%); }

}

@keyframes pulseGlow {

0%, 100% { box-shadow: 0 0 12px var(--accent-glow), 0 14px 28px rgba(79, 110, 247, 0.22); }

50% { box-shadow: 0 0 28px var(--accent-glow), 0 14px 28px rgba(79, 110, 247, 0.32); }

}

@keyframes gradientShift {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

@keyframes particleDrift {

0% { transform: translate(0, 0) scale(1); opacity: 0.4; }

25% { transform: translate(30px, -50px) scale(1.2); opacity: 0.7; }

50% { transform: translate(-20px, -100px) scale(0.8); opacity: 0.3; }

75% { transform: translate(40px, -140px) scale(1.1); opacity: 0.6; }

100% { transform: translate(0, -200px) scale(1); opacity: 0; }

}

@keyframes barGrow {

from { transform: scaleY(0); }

to { transform: scaleY(1); }

}

@keyframes slideInRight {

from { opacity: 0; transform: translateX(40px); }

to { opacity: 1; transform: translateX(0); }

}

@keyframes breathe {

0%, 100% { transform: scale(1); opacity: 0.6; }

50% { transform: scale(1.15); opacity: 1; }

}

@keyframes countUp {

from { opacity: 0; transform: translateY(12px); }

to { opacity: 1; transform: translateY(0); }

}

@keyframes dropzonePulse {

0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

50% { transform: scale(1.05); box-shadow: 0 8px 24px var(--accent-glow); }

}

@keyframes glowBorder {

0%, 100% { box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.1); }

50% { box-shadow: 0 0 0 5px rgba(79, 110, 247, 0.2); }

}

@keyframes lineDraw {

to { stroke-dashoffset: 0; }

}

/* --- Animation Utilities --- */

.anim-fade-up {

animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.anim-fade-scale {

animation: fadeInScale 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.anim-slide-right {

animation: slideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.delay-1 { animation-delay: 0.1s; }

.delay-2 { animation-delay: 0.2s; }

.delay-3 { animation-delay: 0.3s; }

.delay-4 { animation-delay: 0.4s; }

.delay-5 { animation-delay: 0.5s; }

.delay-6 { animation-delay: 0.6s; }

.delay-7 { animation-delay: 0.7s; }

.delay-8 { animation-delay: 0.8s; }

/* --- Global Reset --- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {

margin: 0;

min-width: 320px;

min-height: 100vh;

color: var(--ink);

background: transparent;

}

body::before {

content: '';

position: fixed;

inset: 0;

pointer-events: none;

background:

linear-gradient(135deg, rgba(79, 110, 247, 0.08), transparent 35%),

radial-gradient(circle at 70% 10%, rgba(79, 110, 247, 0.08), transparent 26%);

}

button, input, select, textarea { font: inherit; }

button {

border: none;

border-radius: var(--radius);

cursor: pointer;

transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, opacity 0.18s ease, background 0.22s ease;

}

button:hover { transform: translateY(-2px); }

button:active { transform: translateY(0) scale(0.98); }

button:disabled, input:disabled, select:disabled, textarea:disabled {

opacity: 0.6;

cursor: not-allowed;

}

input, select, textarea {

width: 100%;

padding: 0.95rem 1rem;

border-radius: 14px;

border: 1px solid var(--border);

color: var(--ink);

background: rgba(255, 255, 255, 0.92);

outline: none;

transition: border-color 0.25s ease, box-shadow 0.25s ease;

}

input:focus, select:focus, textarea:focus {

border-color: var(--accent);

box-shadow: 0 0 0 4px rgba(79, 110, 247, 0.12);

}

textarea { resize: vertical; min-height: 160px; }

a { color: inherit; }

#root { min-height: 100vh; }

.app-shell {

min-height: 100vh;

padding: 1rem;

}

/* --- Shared Components --- */

.topbar {

position: sticky;

top: 0;

z-index: 20;

display: flex;

align-items: center;

justify-content: space-between;

gap: 0.75rem;

padding: 0.8rem 1.5rem;

margin-bottom: 1rem;

border-bottom: 1px solid rgba(255,255,255,0.2);

background: rgba(249, 251, 255, 0.72);

backdrop-filter: blur(24px) saturate(180%);

-webkit-backdrop-filter: blur(24px) saturate(180%);

}

.brand {

display: inline-flex;

align-items: center;

gap: 0.8rem;

text-decoration: none;

color: inherit;

background: transparent;

padding: 0;

text-align: left;

}

.brand-mark {

width: 42px;

height: 42px;

color: white;

background: linear-gradient(135deg, #183c88, #4f6ef7);

display: grid;

place-items: center;

border-radius: 12px;

flex: none;

animation: pulseGlow 3s ease-in-out infinite;

}

.brand-mark svg {

width: 20px;

height: 20px;

fill: none;

stroke: currentColor;

stroke-width: 1.8;

stroke-linecap: round;

stroke-linejoin: round;

}

.brand-name {

font-weight: 800;

font-size: 1.25rem;

letter-spacing: -0.04em;

color: var(--ink-dark);

}

.topbar-actions {

display: flex;

align-items: center;

gap: 0.75rem;

}

.text-button {

background: transparent;

color: var(--ink-soft);

font-weight: 600;

padding: 0.6rem 1rem;

font-size: 0.95rem;

}

.text-button:hover { color: var(--ink); }

.primary-button,

.secondary-button {

min-height: 48px;

padding: 0.9rem 1.4rem;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 0.4rem;

font-weight: 700;

text-decoration: none;

border-radius: 14px;

font-size: 0.95rem;

}

.primary-button {

color: #fff;

background: linear-gradient(135deg, #183c88, #4f6ef7);

box-shadow: 0 12px 28px rgba(24, 60, 136, 0.25);

position: relative;

overflow: hidden;

}

.primary-button::after {

content: '';

position: absolute;

top: 0; left: -100%; width: 50%; height: 100%;

background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);

transform: skewX(-20deg);

transition: all 0.5s ease;

}

.primary-button:hover::after {

left: 150%;

transition: all 0.7s ease-in-out;

}

.primary-button:hover {

box-shadow: 0 16px 36px rgba(24, 60, 136, 0.35);

}

.secondary-button {

color: var(--navy);

background: rgba(255, 255, 255, 0.96);

border: 1px solid rgba(24, 60, 136, 0.16);

}

.secondary-button:hover {

background: #fff;

border-color: var(--accent);

}

/* ============================================================

INTRO PAGE (Landing)

============================================================ */

.intro-main {

overflow: hidden;

}

.intro-hero {

position: relative;

}

/* Floating particles background */

.intro-particles {

position: absolute;

inset: 0;

overflow: hidden;

pointer-events: none;

z-index: 0;

}

.intro-particle {

position: absolute;

width: 6px;

height: 6px;

border-radius: 50%;

background: var(--accent);

opacity: 0;

animation: particleDrift 8s linear infinite;

}

.intro-particle:nth-child(1) { left: 10%; bottom: 20%; animation-delay: 0s; animation-duration: 7s; }

.intro-particle:nth-child(2) { left: 25%; bottom: 10%; animation-delay: 1.5s; animation-duration: 9s; width: 4px; height: 4px; }

.intro-particle:nth-child(3) { left: 55%; bottom: 15%; animation-delay: 3s; animation-duration: 6s; width: 8px; height: 8px; }

.intro-particle:nth-child(4) { left: 75%; bottom: 25%; animation-delay: 0.8s; animation-duration: 10s; width: 5px; height: 5px; }

.intro-particle:nth-child(5) { left: 90%; bottom: 5%; animation-delay: 2s; animation-duration: 8s; }

.intro-particle:nth-child(6) { left: 40%; bottom: 30%; animation-delay: 4s; animation-duration: 7.5s; width: 3px; height: 3px; }

.intro-particle:nth-child(7) { left: 65%; bottom: 8%; animation-delay: 1s; animation-duration: 11s; width: 7px; height: 7px; }

.intro-particle:nth-child(8) { left: 15%; bottom: 40%; animation-delay: 5s; animation-duration: 9s; width: 4px; height: 4px; }

.intro-container {

width: min(100%, 820px);

padding: 18px 26px 42px;

margin: 0 auto;

}

.intro-hero-grid {

display: grid;

gap: 2rem;

position: relative;

z-index: 1;

}

.intro-hero-copy {

animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.intro-eyebrow {

display: inline-flex;

align-items: center;

gap: 6px;

text-transform: uppercase;

letter-spacing: 0.14em;

font-size: 0.7rem;

font-weight: 700;

color: var(--accent);

background: rgba(79, 110, 247, 0.08);

padding: 0.5rem 1rem;

border-radius: 999px;

border: 1px solid rgba(79, 110, 247, 0.15);

margin-bottom: 1.2rem;

}

.intro-hero-copy h1 {

font-size: clamp(2.4rem, 6vw, 3.6rem);

line-height: 1.05;

letter-spacing: -0.04em;

color: var(--ink-dark);

margin: 0 0 1rem;

font-weight: 800;

}

.intro-hero-copy p {

color: var(--ink-soft);

font-size: 1.05rem;

line-height: 1.65;

max-width: 480px;

margin: 0;

}

.intro-cta-row {

margin-top: 1.8rem;

display: flex;

flex-direction: column;

align-items: flex-start;

gap: 12px;

}

.intro-get-started,

.intro-demo-button {

min-height: 52px;

width: min(100%, 300px);

border-radius: 14px;

font-size: 1rem;

}

.intro-hero-visual {

animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;

position: relative;

}

.intro-visual-backdrop {

position: absolute;

inset: -20px;

background: radial-gradient(circle at center, rgba(79, 110, 247, 0.08), transparent 70%);

border-radius: 50%;

animation: breathe 6s ease-in-out infinite;

z-index: 0;

}

.intro-chart-wrap {

position: relative;

border-radius: 20px;

padding: 16px 14px 0;

background: rgba(255, 255, 255, 0.75);

backdrop-filter: blur(12px);

border: 1px solid rgba(24, 60, 136, 0.08);

box-shadow: var(--shadow);

overflow: hidden;

z-index: 1;

}

/* Shimmer overlay on chart */

.intro-chart-wrap::after {

content: '';

position: absolute;

inset: 0;

background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);

animation: shimmer 3s ease-in-out infinite;

pointer-events: none;

}

.intro-chart-tooltip {

position: absolute;

top: 8px;

width: 100%;

display: flex;

justify-content: center;

padding-left: 18%;

z-index: 10;

}

.intro-growth-pill {

display: inline-flex;

align-items: center;

justify-content: center;

border-radius: 999px;

background: var(--ink-dark);

color: #fff;

font-size: 0.65rem;

font-weight: 700;

padding: 5px 10px;

white-space: nowrap;

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

}

.intro-chart-bars {

display: grid;

grid-template-columns: repeat(5, minmax(0, 1fr));

align-items: end;

gap: 14px;

height: 170px;

padding-top: 28px;

}

.intro-bar {

display: block;

width: 100%;

border-radius: 6px 6px 0 0;

background: rgba(195, 210, 235, 0.6);

min-height: 18px;

transform-origin: bottom;

animation: barGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.intro-bar:nth-child(1) { animation-delay: 0.3s; }

.intro-bar:nth-child(2) { animation-delay: 0.4s; }

.intro-bar:nth-child(3) { animation-delay: 0.5s; }

.intro-bar:nth-child(4) { animation-delay: 0.6s; }

.intro-bar:nth-child(5) { animation-delay: 0.7s; }

.intro-bar-accent {

background: linear-gradient(180deg, #4f6ef7, #274c9f);

box-shadow: 0 4px 16px rgba(79, 110, 247, 0.3);

}

.intro-recommendation {

width: 100%;

display: flex;

align-items: flex-start;

gap: 12px;

margin-top: 14px;

padding: 14px 16px;

border-radius: 18px;

background: rgba(255, 255, 255, 0.85);

backdrop-filter: blur(8px);

border: 1px solid rgba(16, 39, 78, 0.08);

text-align: left;

box-shadow: 0 8px 24px rgba(0,0,0,0.04);

animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;

z-index: 1;

position: relative;

}

.intro-reco-icon {

width: 36px;

height: 36px;

border-radius: 50%;

background: linear-gradient(135deg, rgba(79, 110, 247, 0.15), rgba(79, 110, 247, 0.05));

color: var(--accent);

display: grid;

place-items: center;

flex: none;

}

.intro-reco-icon svg { width: 16px; height: 16px; }

.intro-recommendation p {

margin: 0;

color: var(--ink-soft);

font-size: 0.8rem;

line-height: 1.55;

}

.intro-recommendation strong {

display: block;

margin-bottom: 4px;

color: var(--ink-dark);

font-size: 0.85rem;

}

/* --- How It Works --- */

.intro-how-it-works {

margin-top: 3rem;

animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;

}

.intro-how-it-works h2 {

margin: 0 0 0.5rem;

font-size: clamp(1.6rem, 4vw, 2.2rem);

color: var(--ink-dark);

letter-spacing: -0.04em;

font-weight: 800;

text-align: left;

}

.intro-how-it-works > p {

color: var(--ink-soft);

font-size: 0.95rem;

margin: 0 0 1.5rem;

}

.how-steps {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 1rem;

}

.how-step {

background: rgba(255, 255, 255, 0.8);

backdrop-filter: blur(8px);

border: 1px solid rgba(24, 60, 136, 0.08);

border-radius: 20px;

padding: 1.5rem;

text-align: center;

transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;

animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.how-step:nth-child(1) { animation-delay: 0.4s; }

.how-step:nth-child(2) { animation-delay: 0.55s; }

.how-step:nth-child(3) { animation-delay: 0.7s; }

.how-step:hover {

transform: translateY(-6px);

box-shadow: 0 16px 40px rgba(16, 32, 61, 0.1);

}

.how-step-num {

width: 40px;

height: 40px;

border-radius: 12px;

background: linear-gradient(135deg, #183c88, #4f6ef7);

color: #fff;

display: flex;

align-items: center;

justify-content: center;

font-weight: 800;

font-size: 1.1rem;

margin: 0 auto 1rem;

box-shadow: 0 8px 20px rgba(79, 110, 247, 0.25);

}

.how-step-icon {

width: 48px;

height: 48px;

margin: 0 auto 1rem;

border-radius: 14px;

background: var(--surface-2);

display: flex;

align-items: center;

justify-content: center;

color: var(--accent);

}

.how-step-icon svg { width: 24px; height: 24px; }

.how-step h3 {

margin: 0 0 0.4rem;

font-size: 1rem;

color: var(--ink-dark);

font-weight: 700;

}

.how-step p {

margin: 0;

font-size: 0.85rem;

color: var(--ink-soft);

line-height: 1.5;

}

/* --- Stats Counter --- */

.intro-stats-bar {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 1rem;

margin-top: 2.5rem;

animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;

}

.stat-counter {

text-align: center;

padding: 1.2rem 0.5rem;

border-radius: 16px;

background: rgba(255,255,255,0.6);

backdrop-filter: blur(8px);

border: 1px solid rgba(24, 60, 136, 0.06);

transition: transform 0.3s ease;

}

.stat-counter:hover { transform: translateY(-4px); }

.stat-counter-val {

display: block;

font-size: clamp(1.8rem, 4vw, 2.6rem);

font-weight: 800;

color: var(--ink-dark);

letter-spacing: -0.03em;

animation: countUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.stat-counter:nth-child(1) .stat-counter-val { animation-delay: 0.6s; }

.stat-counter:nth-child(2) .stat-counter-val { animation-delay: 0.75s; }

.stat-counter:nth-child(3) .stat-counter-val { animation-delay: 0.9s; }

.stat-counter-val .accent { color: var(--accent); }

.stat-counter-label {

display: block;

font-size: 0.8rem;

color: var(--ink-soft);

font-weight: 500;

margin-top: 0.3rem;

}

/* --- Feature Cards --- */

.intro-feature-block {

margin-top: 3rem;

animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;

}

.intro-feature-block h2 {

margin: 0 0 1.2rem;

color: var(--ink-dark);

font-size: clamp(1.8rem, 5vw, 2.6rem);

line-height: 1.05;

letter-spacing: -0.04em;

text-align: left;

font-weight: 800;

}

.intro-feature-list {

display: grid;

gap: 1rem;

}

.intro-feature-card {

display: flex;

align-items: flex-start;

gap: 14px;

padding: 1.2rem 1rem;

border-radius: 20px;

background: rgba(255, 255, 255, 0.85);

backdrop-filter: blur(8px);

border: 1px solid rgba(16, 39, 78, 0.06);

box-shadow: 0 8px 24px rgba(16, 39, 78, 0.04);

text-align: left;

transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;

animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.intro-feature-card:nth-child(1) { animation-delay: 0.5s; }

.intro-feature-card:nth-child(2) { animation-delay: 0.6s; }

.intro-feature-card:nth-child(3) { animation-delay: 0.7s; }

.intro-feature-card:hover {

transform: translateY(-4px);

box-shadow: 0 16px 40px rgba(16, 39, 78, 0.1);

border-color: rgba(79, 110, 247, 0.2);

}

.intro-feature-icon {

width: 48px;

height: 48px;

border-radius: 14px;

background: linear-gradient(135deg, rgba(79, 110, 247, 0.12), rgba(79, 110, 247, 0.04));

color: var(--accent);

display: grid;

place-items: center;

flex: none;

}

.intro-feature-icon svg { width: 22px; height: 22px; }

.intro-feature-card h3 {

margin: 0 0 6px;

font-size: 1.05rem;

color: var(--ink-dark);

letter-spacing: -0.03em;

font-weight: 700;

}

.intro-feature-card p {

margin: 0;

color: var(--ink-soft);

font-size: 0.85rem;

line-height: 1.6;

}

/* --- CTA Callout --- */

.intro-callout {

width: 100%;

margin-top: 3rem;

background: linear-gradient(135deg, #0a1628, #183c88);

background-size: 200% 200%;

animation: gradientShift 8s ease infinite;

padding: 3.5rem 1.5rem;

text-align: center;

color: #fff;

position: relative;

overflow: hidden;

}

.intro-callout::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: radial-gradient(circle, rgba(79, 110, 247, 0.15) 0%, transparent 60%);

animation: float 10s ease-in-out infinite;

pointer-events: none;

}

.intro-callout h2 {

margin: 0;

font-size: clamp(1.8rem, 5vw, 2.8rem);

line-height: 1.08;

letter-spacing: -0.04em;

font-weight: 800;

position: relative;

z-index: 1;

}

.intro-callout p {

margin: 1rem auto 0;

max-width: 420px;

color: rgba(255, 255, 255, 0.75);

font-size: 0.95rem;

line-height: 1.6;

position: relative;

z-index: 1;

}

.intro-callout .intro-cta-row {

flex-direction: row;

flex-wrap: wrap;

justify-content: center;

align-items: center;

position: relative;

z-index: 1;

width: 100%;

}

.intro-get-started-alt {

min-height: 52px;

width: min(100%, 300px);

border-radius: 14px;

font-size: 1rem;

background: rgba(255,255,255,0.15);

color: #fff;

border: 1px solid rgba(255,255,255,0.3);

backdrop-filter: blur(4px);

}

.intro-get-started-alt:hover {

background: rgba(255,255,255,0.25);

}

.intro-demo-button {

background: rgba(255, 255, 255, 0.08);

color: #fff;

border: 1px solid rgba(255, 255, 255, 0.25);

}

.intro-demo-button:hover {

background: rgba(255, 255, 255, 0.15);

}

/* --- Footer --- */

.intro-footer {

width: 100%;

background: #fff;

padding: 2.5rem 1.5rem 3rem;

display: flex;

flex-direction: column;

align-items: center;

gap: 1rem;

text-align: center;

}

.intro-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-dark); font-weight: 700; }

.intro-brand-name { font-size: 1.05rem; letter-spacing: -0.03em; }

.intro-brand-mark {

width: 26px; height: 26px; border-radius: 50%;

background: linear-gradient(135deg, #1a376e, #4b6fe8);

color: #fff; box-shadow: none;

display: grid; place-items: center;

}

.intro-brand-mark svg { width: 14px; height: 14px; }

.intro-brand-footer { justify-content: center; margin-bottom: 4px; }

.intro-footer-links {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 14px 20px;

color: var(--ink-soft);

font-size: 0.78rem;

}

.intro-footer-links a {

color: inherit;

text-decoration: none;

transition: color 0.2s;

}

.intro-footer-links a:hover { color: var(--accent); }

.intro-copyright {

color: var(--ink-light);

font-size: 0.75rem;

line-height: 1.5;

}

/* ============================================================

AUTH PAGE

============================================================ */

.auth-page-container {

display: flex;

min-height: 100vh;

width: 100%;

background: #fdfefe;

}

.auth-form-section {

flex: 1;

display: flex;

flex-direction: column;

padding: 40px;

position: relative;

}

.auth-back-button {

display: inline-flex;

align-items: center;

gap: 8px;

background: transparent;

color: var(--ink-soft);

font-size: 0.9rem;

font-weight: 500;

width: fit-content;

padding: 8px 12px;

margin-bottom: auto;

border-radius: 8px;

transition: background 0.2s, color 0.2s;

}

.auth-back-button svg { width: 18px; height: 18px; }

.auth-back-button:hover {

background: rgba(0, 0, 0, 0.04);

color: var(--ink-dark);

}

.auth-form-wrapper {

margin: auto;

width: 100%;

max-width: 440px;

animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;

}

.auth-brand {

display: flex;

align-items: center;

gap: 10px;

margin-bottom: 2.5rem;

}

.auth-brand .brand-mark {

background: var(--accent);

color: #fff;

width: 36px;

height: 36px;

border-radius: 10px;

display: grid;

place-items: center;

animation: pulseGlow 3s ease-in-out infinite;

}

.auth-brand .brand-name {

font-weight: 800;

font-size: 1.4rem;

color: var(--ink-dark);

}

.auth-header h1 {

font-size: 2rem;

color: var(--ink-dark);

margin: 0 0 8px 0;

letter-spacing: -0.04em;

font-weight: 800;

}

.auth-header p {

color: var(--ink-soft);

margin: 0 0 2rem 0;

line-height: 1.55;

}

.auth-tabs {

display: flex;

gap: 6px;

background: #f1f4f9;

padding: 4px;

border-radius: 12px;

margin-bottom: 1.5rem;

}

.auth-tabs button {