/* ═══ Kacinka — Common Base Styles ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#050810;color:#e2e8f0;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:#a78bfa;text-decoration:none;transition:color .25s}
a:hover{color:#c4b5fd}
:root{--brand:#7c3aed;--brand-light:#a78bfa;--brand-dark:#6d28d9;--brand-glow:rgba(124,58,237,.15);--surface:#0a0e17;--surface-2:#111827;--surface-3:#1e293b;--border:rgba(255,255,255,.06);--border-hover:rgba(255,255,255,.12);--text:#e2e8f0;--text-dim:#94a3b8;--text-muted:#8b95a5;--success:#34d399;--warning:#fbbf24;--danger:#f87171;--radius:16px;--radius-lg:24px;--radius-full:9999px;--max:1200px;--gutter:clamp(1rem,4vw,3rem);--glass:rgba(255,255,255,.03);--glass-border:rgba(255,255,255,.06)}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
img{max-width:100%;height:auto}

/* ═══ Navigation ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(5,8,16,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.nav.scrolled{background:rgba(5,8,16,.97)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.nav-logo{display:flex;align-items:center;gap:.75rem;font-weight:800;font-size:1.25rem;letter-spacing:-.03em;color:#fff;text-decoration:none}
.nav-logo-mark{width:36px;height:36px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.875rem;color:#fff;box-shadow:0 2px 16px rgba(124,58,237,.3)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:.875rem;color:var(--text-muted);font-weight:500;text-decoration:none;transition:color .25s}
.nav-links a:hover{color:#fff}

/* ═══ Buttons ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 2rem;border-radius:var(--radius);font-weight:600;font-size:.9375rem;transition:all .3s;white-space:nowrap;text-decoration:none;cursor:pointer;border:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 24px rgba(124,58,237,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(124,58,237,.35);color:#fff}
.btn-ghost{background:var(--glass);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface-3);color:#fff}
.btn-sm{padding:.625rem 1.25rem;font-size:.8125rem;border-radius:12px}
.btn-lg{padding:1.125rem 2.5rem;font-size:1.0625rem;border-radius:var(--radius)}
.nav-cta{display:flex;align-items:center;gap:.75rem}
.nav-mobile-toggle{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}

/* ═══ Text Utilities ═══ */
.text-gradient{background:linear-gradient(135deg,#a78bfa,#7c3aed,#6d28d9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-brand{color:var(--brand-light)}
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.text-dim{color:var(--text-dim)}

/* ═══ Section Layouts ═══ */
.section{padding:6rem 0}
.section-header{text-align:center;max-width:720px;margin:0 auto 4rem}
.section-header h2{font-size:clamp(2rem,4vw,2.75rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem;color:#fff}
.section-header p{font-size:1.0625rem;color:var(--text-dim);line-height:1.8}
.section-label{display:inline-block;padding:.375rem 1rem;border-radius:var(--radius-full);background:var(--brand-glow);color:var(--brand-light);font-size:.8125rem;font-weight:600;letter-spacing:.04em;margin-bottom:1.25rem}

/* ═══ Glass Card ═══ */
.glass{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius)}
.card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:2rem;transition:all .3s}
.card:hover{border-color:var(--border-hover);transform:translateY(-2px)}

/* ═══ Grid Helpers ═══ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}

/* ═══ Hero ═══ */
.hero{padding:10rem 0 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-30%;width:100%;height:200%;background:radial-gradient(ellipse at 30% 50%,rgba(124,58,237,.08),transparent 60%);pointer-events:none}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:1.5rem;color:#fff}
.hero .hero-sub{font-size:clamp(1.0625rem,2vw,1.25rem);color:var(--text-dim);max-width:640px;line-height:1.8;margin-bottom:2.5rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ═══ Feature Grid ═══ */
.feature-card{padding:2rem;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);transition:all .35s}
.feature-card:hover{border-color:var(--brand);background:rgba(124,58,237,.04);transform:translateY(-3px)}
.feature-icon{width:48px;height:48px;border-radius:12px;background:var(--brand-glow);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.25rem}
.feature-card h3{font-size:1.125rem;font-weight:700;color:#fff;margin-bottom:.5rem}
.feature-card p{font-size:.9375rem;color:var(--text-dim);line-height:1.7}

/* ═══ Process Steps ═══ */
.process{display:flex;gap:0;position:relative}
.process::before{content:'';position:absolute;top:32px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-light),var(--brand));opacity:.3}
.process-step{flex:1;text-align:center;padding:0 1rem;position:relative}
.process-num{width:64px;height:64px;border-radius:50%;background:var(--surface-2);border:2px solid var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;color:var(--brand-light);margin-bottom:1.25rem;position:relative;z-index:2}
.process-step h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.375rem}
.process-step p{font-size:.8125rem;color:var(--text-dim);line-height:1.6}

/* ═══ Comparison Table ═══ */
.comparison-table{width:100%;border-collapse:collapse;margin:2rem 0}
.comparison-table th,.comparison-table td{padding:1rem 1.25rem;border:1px solid var(--border);text-align:left;font-size:.875rem}
.comparison-table th{background:var(--surface-2);color:#fff;font-weight:600}
.comparison-table td{color:var(--text-dim)}
.comparison-table tr:hover td{background:rgba(124,58,237,.03)}
.comparison-table .highlight{font-weight:700;color:var(--brand-light)}

/* ═══ Pricing Inline ═══ */
.price-tag{font-size:2rem;font-weight:800;color:#fff}
.price-tag span{font-size:.875rem;font-weight:400;color:var(--text-muted)}

/* ═══ FAQ ═══ */
.faq-item{border-bottom:1px solid var(--border)}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;background:none;border:none;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;text-align:left;font-family:inherit}
.faq-btn:hover{color:var(--brand-light)}
.faq-icon{font-size:1.25rem;transition:transform .3s;color:var(--text-muted)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s;padding:0}
.faq-answer.open{max-height:500px;padding:0 0 1.25rem}
.faq-answer p{color:var(--text-dim);font-size:.9375rem;line-height:1.7}

/* ═══ CTA Banner ═══ */
.cta-banner{text-align:center;padding:5rem 0;position:relative}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(124,58,237,.12),transparent 70%);pointer-events:none}
.cta-banner h2{font-size:clamp(2rem,4vw,2.75rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem;color:#fff}
.cta-banner p{font-size:1.0625rem;color:var(--text-dim);margin-bottom:2rem;max-width:540px;margin-left:auto;margin-right:auto}

/* ═══ Breadcrumb ═══ */
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.8125rem;color:var(--text-muted);padding-top:6rem;margin-bottom:-4rem}
.breadcrumb a{color:var(--text-dim);text-decoration:none}
.breadcrumb a:hover{color:var(--brand-light)}
.breadcrumb span{color:var(--text-muted)}

/* ═══ Testimonial ═══ */
.testimonial{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:2rem}
.testimonial blockquote{font-size:1rem;color:var(--text-dim);font-style:italic;line-height:1.8;margin-bottom:1rem}
.testimonial .author{font-size:.875rem;font-weight:600;color:#fff}
.testimonial .role{font-size:.8125rem;color:var(--text-muted)}

/* ═══ Stack / Tech Icons ═══ */
.tech-grid{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.tech-badge{padding:.5rem 1.25rem;border-radius:var(--radius);background:var(--glass);border:1px solid var(--glass-border);font-size:.875rem;font-weight:500;color:var(--text-dim);transition:all .3s}
.tech-badge:hover{border-color:var(--brand);color:var(--brand-light)}

/* ═══ Contact Form ═══ */
.form-group{margin-bottom:1.5rem}
.form-label{display:block;font-size:.875rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
.form-input,.form-textarea,.form-select{width:100%;padding:.875rem 1rem;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:inherit;font-size:.9375rem;transition:border-color .25s}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--brand)}
.form-textarea{resize:vertical;min-height:120px}
.form-select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}

/* ═══ Footer ═══ */
.footer{border-top:1px solid var(--border);padding:4rem 0 2rem;background:rgba(0,0,0,.2)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand p{color:var(--text-muted);font-size:.8125rem;margin-top:.75rem;line-height:1.7;max-width:280px}
.footer-col .footer-heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:1rem}
.footer-col a{display:block;font-size:.8125rem;color:var(--text-dim);padding:.25rem 0;transition:color .25s;text-decoration:none}
.footer-col a:hover{color:var(--brand-light)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:2rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--text-muted)}
.footer-bottom a{color:var(--text-dim);text-decoration:none;transition:color .25s}
.footer-bottom a:hover{color:var(--brand-light)}

/* ═══ Scroll Reveal ═══ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ═══ Responsive ═══ */
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.process{flex-wrap:wrap}.process::before{display:none}.process-step{flex:0 0 50%}}
@media(max-width:768px){.nav-links{display:none}.nav-mobile-toggle{display:block}.grid-2,.grid-3{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}.hero h1{font-size:clamp(2rem,6vw,3rem)}.section{padding:4rem 0}.hero{padding:8rem 0 3rem}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.process-step{flex:0 0 100%}}
@media print{.nav,.footer,.cta-banner{display:none}body{background:#fff;color:#000}}

/* ═══ Light Mode ═══ */
@media(prefers-color-scheme:light){
:root{--brand:#7c3aed;--brand-light:#6d28d9;--brand-dark:#5b21b6;--brand-glow:rgba(124,58,237,.08);--surface:#ffffff;--surface-2:#f8fafc;--surface-3:#f1f5f9;--border:rgba(0,0,0,.08);--border-hover:rgba(0,0,0,.15);--text:#1e293b;--text-dim:#475569;--text-muted:#64748b;--success:#059669;--warning:#d97706;--danger:#dc2626;--glass:rgba(0,0,0,.02);--glass-border:rgba(0,0,0,.06)}
body{background:#fff;color:#1e293b}
a{color:#7c3aed}a:hover{color:#6d28d9}
.nav{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(0,0,0,.08)}
.nav.scrolled{background:rgba(255,255,255,.97)}
.nav-logo{color:#1e293b}
.nav-links a:hover{color:#1e293b}
.hero h1,.section-header h2,.cta-banner h2,.feature-card h3,.process-step h3,
.faq-btn,.legal-content h2,.legal-content h3,.footer-col .footer-heading,
.testimonial .author,.comparison-table th,.legal-toc h3{color:#1e293b}
.hero::before{background:radial-gradient(ellipse at 30% 50%,rgba(124,58,237,.06),transparent 60%)}
.cta-banner::before{background:radial-gradient(ellipse at center,rgba(124,58,237,.06),transparent 70%)}
.footer{background:rgba(0,0,0,.02);border-top:1px solid rgba(0,0,0,.08)}
.text-gradient{background:linear-gradient(135deg,#7c3aed,#6d28d9,#5b21b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.comparison-table th{background:#f8fafc;color:#1e293b}
.comparison-table td{color:#475569}
.form-input,.form-textarea,.form-select{background:#f8fafc;border-color:rgba(0,0,0,.12);color:#1e293b}
}