/* ============================================
   STACKWORKS - Design System & Styles
   ============================================ */
:root {
  --color-primary: #0F172A;
  --color-secondary: #3B82F6;
  --color-accent: #10B981;
  --color-accent-hover: #059669;
  --color-secondary-hover: #2563EB;
  --color-surface: #F8FAFC;
  --color-surface-alt: #F1F5F9;
  --color-white: #FFFFFF;
  --color-text: #1E293B;
  --color-text-light: #64748B;
  --color-text-lighter: #94A3B8;
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem;
  --max-width: 1200px; --max-width-narrow: 800px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--font-main); font-size:16px; line-height:1.7; color:var(--color-text); background:var(--color-white); }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:700; line-height:1.2; color:var(--color-primary); }
h1 { font-size:clamp(2.25rem,5vw,3.5rem); letter-spacing:-0.03em; }
h2 { font-size:clamp(1.75rem,3.5vw,2.5rem); letter-spacing:-0.02em; }
h3 { font-size:clamp(1.25rem,2vw,1.5rem); letter-spacing:-0.01em; }
h4 { font-size:1.125rem; }
p { color:var(--color-text-light); max-width:65ch; }
.text-center p { margin-left:auto; margin-right:auto; }
.container { width:100%; max-width:var(--max-width); margin:0 auto; padding:0 var(--space-xl); }
.container--narrow { max-width:var(--max-width-narrow); }
.section { padding:var(--space-5xl) 0; }
.section--surface { background:var(--color-surface); }
.section--dark { background:var(--color-primary); color:var(--color-white); }
.section--dark h2,.section--dark h3,.section--dark h4 { color:var(--color-white); }
.section--dark p { color:var(--color-text-lighter); }
.grid { display:grid; gap:var(--space-xl); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:768px) { .grid--2,.grid--3,.grid--4 { grid-template-columns:1fr; } }
@media(min-width:769px) and (max-width:1024px) { .grid--3 { grid-template-columns:repeat(2,1fr); } .grid--4 { grid-template-columns:repeat(2,1fr); } }
.section-header { text-align:center; margin-bottom:var(--space-3xl); }
.section-label { display:inline-block; font-size:0.8125rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-secondary); margin-bottom:var(--space-md); }
.section--dark .section-label { color:var(--color-accent); }
.section-header h2 { margin-bottom:var(--space-md); }
.section-header p { font-size:1.125rem; margin:0 auto; }
.btn { display:inline-flex; align-items:center; gap:var(--space-sm); padding:0.875rem 1.75rem; font-family:var(--font-main); font-size:0.9375rem; font-weight:600; border-radius:var(--radius-md); border:none; cursor:pointer; transition:all var(--transition-base); text-decoration:none; line-height:1; }
.btn--primary { background:var(--color-secondary); color:var(--color-white); }
.btn--primary:hover { background:var(--color-secondary-hover); transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn--secondary { background:transparent; color:var(--color-text); border:1.5px solid var(--color-border); }
.btn--secondary:hover { border-color:var(--color-text-light); background:var(--color-surface); }
.btn--accent { background:var(--color-accent); color:var(--color-white); }
.btn--accent:hover { background:var(--color-accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn--large { padding:1rem 2rem; font-size:1rem; }
.btn--white { background:var(--color-white); color:var(--color-primary); }
.btn--white:hover { background:var(--color-surface); transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.btn--ghost-white { background:transparent; color:var(--color-white); border:1.5px solid rgba(255,255,255,0.3); }
.btn--ghost-white:hover { border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.05); }
.btn-group { display:flex; gap:var(--space-md); flex-wrap:wrap; }
.btn svg { width:16px; height:16px; transition:transform var(--transition-fast); }
.btn:hover svg { transform:translateX(3px); }
.card { background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-2xl); transition:all var(--transition-base); }
.card:hover { box-shadow:var(--shadow-lg); border-color:var(--color-border-light); transform:translateY(-2px); }
.card__icon { width:48px; height:48px; background:var(--color-surface); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-lg); color:var(--color-secondary); }
.card__icon svg { width:24px; height:24px; }
.card h3 { margin-bottom:var(--space-sm); }
.card p { font-size:0.9375rem; }
.card--feature { text-align:center; padding:var(--space-3xl) var(--space-2xl); }
.card--feature .card__icon { margin:0 auto var(--space-lg); width:56px; height:56px; }
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--color-border); transition:all var(--transition-base); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:72px; max-width:var(--max-width); margin:0 auto; padding:0 var(--space-xl); }
.nav__logo { font-size:1.25rem; font-weight:800; color:var(--color-primary); letter-spacing:-0.03em; display:flex; align-items:center; gap:var(--space-sm); }
.nav__logo span { background:var(--color-secondary); color:white; width:28px; height:28px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; font-size:0.875rem; }
.nav__links { display:flex; align-items:center; gap:var(--space-xl); list-style:none; }
.nav__links a { font-size:0.9375rem; font-weight:500; color:var(--color-text-light); transition:color var(--transition-fast); }
.nav__links a:hover,.nav__links a.active { color:var(--color-primary); }
.nav__cta { display:flex; align-items:center; gap:var(--space-md); }
.nav__toggle { display:none; background:none; border:none; cursor:pointer; padding:var(--space-sm); color:var(--color-primary); }
.nav__toggle svg { width:24px; height:24px; }
@media(max-width:960px) { .nav__links,.nav__cta { display:none; } .nav__toggle { display:flex; } .nav__links.active { display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0; background:var(--color-white); border-bottom:1px solid var(--color-border); padding:var(--space-xl); gap:var(--space-lg); box-shadow:var(--shadow-lg); } .nav__cta.active { display:flex; flex-direction:column; position:absolute; top:calc(72px + var(--space-xl)); left:0; right:0; background:var(--color-white); padding:0 var(--space-xl) var(--space-xl); } }
.hero { padding:calc(72px + var(--space-5xl)) 0 var(--space-5xl); text-align:center; background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-white) 100%); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(59,130,246,0.06) 0%,transparent 70%); pointer-events:none; }
.hero h1 { margin-bottom:var(--space-lg); position:relative; }
.hero p { font-size:1.25rem; margin:0 auto var(--space-2xl); max-width:600px; position:relative; }
.hero .btn-group { justify-content:center; position:relative; }
.hero__badge { display:inline-flex; align-items:center; gap:var(--space-sm); padding:var(--space-xs) var(--space-md); background:var(--color-white); border:1px solid var(--color-border); border-radius:100px; font-size:0.8125rem; font-weight:500; color:var(--color-text-light); margin-bottom:var(--space-xl); position:relative; }
.hero__badge .dot { width:6px; height:6px; background:var(--color-accent); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
.stats-bar { display:flex; justify-content:center; gap:var(--space-3xl); padding:var(--space-3xl) 0; margin-top:var(--space-3xl); border-top:1px solid var(--color-border); position:relative; }
.stat { text-align:center; }
.stat__number { font-size:2rem; font-weight:800; color:var(--color-primary); letter-spacing:-0.03em; line-height:1; margin-bottom:var(--space-xs); }
.stat__label { font-size:0.8125rem; color:var(--color-text-lighter); font-weight:500; }
@media(max-width:640px) { .stats-bar { flex-direction:column; gap:var(--space-xl); } }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xl); counter-reset:step; }
.step { position:relative; text-align:center; padding:var(--space-xl); }
.step__number { width:48px; height:48px; background:var(--color-secondary); color:var(--color-white); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:1.125rem; margin-bottom:var(--space-lg); }
.step h3 { margin-bottom:var(--space-sm); font-size:1.125rem; }
.step p { font-size:0.875rem; margin:0 auto; }
.step:not(:last-child)::after { content:''; position:absolute; top:44px; right:-12px; width:calc(100% - 48px); height:2px; background:var(--color-border); transform:translateX(50%); }
@media(max-width:768px) { .steps { grid-template-columns:1fr; gap:var(--space-lg); } .step:not(:last-child)::after { display:none; } }
.industry-card { background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-2xl); transition:all var(--transition-base); display:flex; flex-direction:column; }
.industry-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:var(--color-secondary); }
.industry-card__icon { font-size:2rem; margin-bottom:var(--space-lg); }
.industry-card h3 { margin-bottom:var(--space-sm); }
.industry-card p { font-size:0.9375rem; flex-grow:1; }
.industry-card__link { display:inline-flex; align-items:center; gap:var(--space-xs); margin-top:var(--space-lg); font-size:0.875rem; font-weight:600; color:var(--color-secondary); transition:gap var(--transition-fast); }
.industry-card:hover .industry-card__link { gap:var(--space-sm); }
.cta-section { background:var(--color-primary); padding:var(--space-5xl) 0; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; background:radial-gradient(circle,rgba(59,130,246,0.15) 0%,transparent 70%); pointer-events:none; }
.cta-section h2 { color:var(--color-white); margin-bottom:var(--space-md); position:relative; }
.cta-section p { color:var(--color-text-lighter); font-size:1.125rem; margin:0 auto var(--space-2xl); max-width:500px; position:relative; }
.cta-section .btn-group { justify-content:center; position:relative; }
.footer { background:var(--color-primary); color:var(--color-text-lighter); padding:var(--space-4xl) 0 var(--space-2xl); border-top:1px solid rgba(255,255,255,0.05); }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-3xl); margin-bottom:var(--space-3xl); }
.footer__brand p { font-size:0.9375rem; margin-top:var(--space-md); max-width:300px; }
.footer h4 { color:var(--color-white); font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:var(--space-lg); }
.footer__links { list-style:none; display:flex; flex-direction:column; gap:var(--space-sm); }
.footer__links a { font-size:0.9375rem; color:var(--color-text-lighter); transition:color var(--transition-fast); }
.footer__links a:hover { color:var(--color-white); }
.footer__bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:var(--space-2xl); display:flex; justify-content:space-between; align-items:center; font-size:0.8125rem; }
@media(max-width:768px) { .footer__grid { grid-template-columns:1fr; gap:var(--space-2xl); } .footer__bottom { flex-direction:column; gap:var(--space-md); text-align:center; } }
.form-group { margin-bottom:var(--space-lg); }
.form-group label { display:block; font-size:0.875rem; font-weight:600; color:var(--color-text); margin-bottom:var(--space-sm); }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:0.75rem 1rem; font-family:var(--font-main); font-size:0.9375rem; border:1.5px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-white); color:var(--color-text); transition:border-color var(--transition-fast); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--color-secondary); box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); }
@media(max-width:640px) { .form-grid { grid-template-columns:1fr; } }
.feature-list { list-style:none; display:flex; flex-direction:column; gap:var(--space-md); }
.feature-list li { display:flex; align-items:flex-start; gap:var(--space-md); font-size:0.9375rem; color:var(--color-text-light); }
.feature-list li svg { width:20px; height:20px; color:var(--color-accent); flex-shrink:0; margin-top:2px; }
.page-header { padding:calc(72px + var(--space-4xl)) 0 var(--space-3xl); background:var(--color-surface); text-align:center; }
.page-header h1 { margin-bottom:var(--space-md); }
.page-header p { font-size:1.125rem; margin:0 auto; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3xl); align-items:center; }
.split--reverse { direction:rtl; }
.split--reverse > * { direction:ltr; }
.split__content h2 { margin-bottom:var(--space-md); }
.split__content p { margin-bottom:var(--space-xl); }
.split__visual { background:var(--color-surface); border-radius:var(--radius-xl); padding:var(--space-2xl); border:1px solid var(--color-border); min-height:360px; display:flex; align-items:center; justify-content:center; }
@media(max-width:768px) { .split,.split--reverse { grid-template-columns:1fr; direction:ltr; } }
.console-preview { background:var(--color-primary); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-xl); }
.console-preview__bar { display:flex; align-items:center; gap:6px; padding:var(--space-md) var(--space-lg); background:rgba(255,255,255,0.05); }
.console-preview__dot { width:10px; height:10px; border-radius:50%; }
.console-preview__dot--red { background:#EF4444; }
.console-preview__dot--yellow { background:#F59E0B; }
.console-preview__dot--green { background:#10B981; }
.console-preview__body { padding:var(--space-xl); }
.console-module { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-md); padding:var(--space-lg); margin-bottom:var(--space-md); display:flex; align-items:center; justify-content:space-between; }
.console-module:last-child { margin-bottom:0; }
.console-module__name { color:var(--color-white); font-weight:600; font-size:0.9375rem; }
.console-module__status { display:flex; align-items:center; gap:var(--space-sm); font-size:0.8125rem; color:var(--color-accent); font-weight:500; }
.console-module__status .dot { width:6px; height:6px; background:var(--color-accent); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
.time-saved { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); border-radius:var(--radius-md); padding:var(--space-lg); text-align:center; margin-top:var(--space-md); }
.time-saved__number { font-size:2rem; font-weight:800; color:var(--color-accent); line-height:1; }
.time-saved__label { font-size:0.75rem; color:var(--color-text-lighter); text-transform:uppercase; letter-spacing:0.05em; margin-top:4px; }
.pricing-card { background:var(--color-white); border:1.5px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-2xl); display:flex; flex-direction:column; transition:all var(--transition-base); }
.pricing-card:hover { box-shadow:var(--shadow-xl); transform:translateY(-4px); }
.pricing-card--featured { border-color:var(--color-secondary); position:relative; }
.pricing-card--featured::before { content:'Most Popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--color-secondary); color:white; font-size:0.75rem; font-weight:600; padding:4px 12px; border-radius:100px; }
.pricing-card h3 { margin-bottom:var(--space-sm); }
.pricing-card__price { font-size:2.5rem; font-weight:800; color:var(--color-primary); letter-spacing:-0.03em; margin:var(--space-lg) 0; line-height:1; }
.pricing-card__price span { font-size:0.875rem; font-weight:500; color:var(--color-text-lighter); }
.pricing-card .feature-list { flex-grow:1; margin-bottom:var(--space-xl); }
.fade-in { opacity:0; transform:translateY(20px); transition:all 0.6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }
.fade-in-delay-1 { transition-delay:0.1s; }
.fade-in-delay-2 { transition-delay:0.2s; }
.fade-in-delay-3 { transition-delay:0.3s; }
.fade-in-delay-4 { transition-delay:0.4s; }
.text-center { text-align:center; }
.text-left { text-align:left; }
.mt-0 { margin-top:0; } .mt-1 { margin-top:var(--space-md); } .mt-2 { margin-top:var(--space-xl); } .mt-3 { margin-top:var(--space-2xl); }
.mb-0 { margin-bottom:0; } .mb-1 { margin-bottom:var(--space-md); } .mb-2 { margin-bottom:var(--space-xl); } .mb-3 { margin-bottom:var(--space-2xl); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.proof-bar { display:flex; align-items:center; justify-content:center; gap:var(--space-3xl); padding:var(--space-2xl) 0; opacity:0.5; }
.proof-bar img { height:24px; filter:grayscale(100%); }