@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.003 250);
  --foreground: oklch(0.155 0.044 260);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.155 0.044 260);
  --primary: oklch(0.488 0.217 264);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.955 0.008 250);
  --secondary-foreground: oklch(0.25 0.04 260);
  --muted: oklch(0.955 0.008 250);
  --muted-foreground: oklch(0.48 0.03 260);
  --accent: oklch(0.588 0.158 195);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27);
  --border: oklch(0.915 0.008 250);
  --input: oklch(0.915 0.008 250);
  --ring: oklch(0.488 0.217 264);
  --accent-soft: oklch(0.955 0.035 195);
  --section-alt: oklch(0.975 0.005 250);
  --chart-4: oklch(0.828 0.189 84);
  --gradient-primary: linear-gradient(135deg, oklch(0.488 0.217 264), oklch(0.588 0.158 195));
  --gradient-hero: linear-gradient(160deg, oklch(0.155 0.044 260) 0%, oklch(0.22 0.07 255) 50%, oklch(0.30 0.10 210) 100%);
  --shadow-card: 0 1px 3px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-card-hover: 0 10px 25px oklch(0 0 0 / 0.08), 0 4px 10px oklch(0 0 0 / 0.05);
}

html{scroll-behavior:smooth}
body{background:var(--background);color:var(--foreground);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{list-style:none;padding:0}
*{border-color:var(--border)}

.container{max-width:1280px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}

.section-padding{padding:5rem 0}
@media(min-width:768px){.section-padding{padding:7rem 0}}

.gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-bg{background:var(--gradient-primary)}
.hero-gradient{background:var(--gradient-hero)}

.card-hover{box-shadow:var(--shadow-card);transition:box-shadow .3s ease,transform .3s ease}
.card-hover:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}

.glass{background:oklch(1 0 0 / 0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.5rem;background:var(--gradient-primary);padding:.875rem 1.5rem;font-size:.875rem;font-weight:600;color:var(--primary-foreground);border:none;cursor:pointer;transition:opacity .2s}
.btn-primary:hover{opacity:.9}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.5rem;border:1px solid var(--border);background:var(--card);padding:.875rem 1.5rem;font-size:.875rem;font-weight:600;color:var(--foreground);cursor:pointer;transition:background .2s}
.btn-secondary:hover{background:var(--muted)}

/* Grid */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* Animations */
@keyframes fade-in-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 oklch(0.488 0.217 264 / 0.4)}50%{box-shadow:0 0 20px 6px oklch(0.488 0.217 264 / 0.15)}}

.animate-float{animation:float 6s ease-in-out infinite}
.animate-pulse-glow{animation:pulse-glow 3s ease-in-out infinite}
.scroll-animate{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out}
.scroll-animate.visible{opacity:1;transform:translateY(0)}

/* Header */
.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .3s;background:oklch(0.985 0.003 250 / 0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.header.scrolled{background:oklch(0.985 0.003 250 / 0.95);backdrop-filter:blur(16px);box-shadow:0 1px 3px oklch(0 0 0 / 0.06);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
@media(min-width:1024px){.header-inner{height:5rem}}
.logo{display:flex;align-items:center;gap:.625rem;font-size:1.25rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif}
.logo img{height:2.25rem;width:2.25rem}
.nav-desktop{display:none;align-items:center;gap:2rem}
@media(min-width:1024px){.nav-desktop{display:flex}}
.nav-desktop a{font-size:.875rem;font-weight:500;color:var(--muted-foreground);transition:color .2s}
.nav-desktop a:hover,.nav-desktop a.active{color:var(--foreground)}
.nav-cta{display:none}
@media(min-width:1024px){.nav-cta{display:flex}}
.hamburger{display:flex;padding:.5rem;border-radius:.375rem;background:none;border:none;color:var(--foreground);cursor:pointer}
@media(min-width:1024px){.hamburger{display:none}}
.mobile-menu{display:none;padding:1rem;background:var(--background);border-top:1px solid var(--border)}
.mobile-menu.open{display:block}
@media(min-width:1024px){.mobile-menu{display:none!important}}
.mobile-menu a{display:block;padding:.625rem .75rem;border-radius:.375rem;font-weight:500;color:var(--foreground);transition:background .2s}
.mobile-menu a:hover{background:var(--muted)}

/* Footer */
.footer{background:var(--foreground);color:var(--background)}
.footer a{color:oklch(1 0 0 / 0.7);transition:color .2s}
.footer a:hover{color:var(--background)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;padding:4rem 0}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-bottom{padding:1.5rem 0;border-top:1px solid oklch(1 0 0 / 0.1);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;font-size:.875rem;color:oklch(1 0 0 / 0.5)}
.social-link{width:2.25rem;height:2.25rem;border-radius:50%;background:oklch(1 0 0 / 0.1);display:flex;align-items:center;justify-content:center;transition:background .2s}
.social-link:hover{background:oklch(1 0 0 / 0.2)}

/* Cards */
.feature-card{background:var(--card);border-radius:.75rem;padding:1.5rem;border:1px solid var(--border)}
@media(min-width:1024px){.feature-card{padding:2rem}}
.feature-icon{width:3rem;height:3rem;border-radius:.5rem;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.feature-card:hover .feature-icon{transform:scale(1.1)}

/* Stats */
.stat-value{font-size:1.875rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif}
@media(min-width:640px){.stat-value{font-size:2.25rem}}
@media(min-width:1024px){.stat-value{font-size:3rem}}

/* Hero */
.hero{position:relative;overflow:hidden;padding:6rem 0 4rem}
@media(min-width:1024px){.hero{padding:8rem 0 6rem}}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;background:var(--accent-soft);padding:.375rem 1rem;font-size:.875rem;font-weight:500;color:var(--accent);margin-bottom:1.5rem}
.hero-title{font-size:2.25rem;font-weight:700;color:var(--foreground);letter-spacing:-.02em}
@media(min-width:640px){.hero-title{font-size:3rem}}
@media(min-width:1024px){.hero-title{font-size:3.75rem}}
.hero-img-wrap{position:relative;border-radius:1rem;overflow:hidden;box-shadow:0 20px 50px oklch(0 0 0 / 0.12)}
.hero-float{position:absolute;bottom:-1rem;left:-1rem;background:var(--card);border-radius:.75rem;padding:1rem;box-shadow:0 10px 25px oklch(0 0 0 / 0.08);border:1px solid var(--border)}

/* Partners */
.partners-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;align-items:center}
@media(min-width:640px){.partners-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.partners-grid{grid-template-columns:repeat(8,1fr)}}
.partner-item{display:flex;flex-direction:column;align-items:center;padding:1rem .5rem;border-radius:.5rem;transition:background .2s}
.partner-item:hover{background:oklch(0 0 0 / 0.03)}
.partner-icon{width:3rem;height:3rem;border-radius:.5rem;background:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;font-family:'Plus Jakarta Sans',sans-serif;color:var(--muted-foreground);transition:all .2s}
.partner-item:hover .partner-icon{background:oklch(0.488 0.217 264 / 0.1);color:var(--primary)}

/* FAQ */
.faq-item{background:var(--card);border-radius:.75rem;border:1px solid var(--border);overflow:hidden}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.25rem;text-align:left;background:none;border:none;cursor:pointer;font-size:.875rem;font-weight:600;color:var(--foreground);transition:background .2s}
.faq-btn:hover{background:oklch(0 0 0 / 0.02)}
.faq-btn svg{width:1.25rem;height:1.25rem;color:var(--muted-foreground);transition:transform .3s;flex-shrink:0}
.faq-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq-answer.open{max-height:15rem;padding:0 1.25rem 1.25rem}
.faq-answer p{font-size:.875rem;color:var(--muted-foreground);line-height:1.7}

/* CTA */
.cta-section{position:relative;overflow:hidden;border-radius:1rem;padding:2.5rem;text-align:center}
@media(min-width:640px){.cta-section{padding:4rem}}
.cta-section::before,.cta-section::after{content:'';position:absolute;border-radius:50%;background:oklch(1 0 0 / 0.05)}
.cta-section::before{top:0;right:0;width:16rem;height:16rem;transform:translate(50%,-50%)}
.cta-section::after{bottom:0;left:0;width:12rem;height:12rem;transform:translate(-50%,50%)}

/* Pricing */
.plan-card{position:relative;background:var(--card);border-radius:.75rem;padding:1.5rem;border:1px solid var(--border);display:flex;flex-direction:column}
@media(min-width:1024px){.plan-card{padding:2rem}}
.plan-card.popular{border-color:var(--primary);box-shadow:0 10px 25px oklch(0 0 0 / 0.08);outline:2px solid oklch(0.488 0.217 264 / 0.2)}
.plan-badge{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);border-radius:9999px;background:var(--gradient-primary);padding:.25rem 1rem;font-size:.75rem;font-weight:600;color:var(--primary-foreground);white-space:nowrap}
.plan-price{font-size:2.25rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif}
.plan-features{flex:1;margin-top:1.5rem}
.plan-features li{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem;color:var(--foreground);padding:.375rem 0}
.plan-features li svg{width:1rem;height:1rem;margin-top:.125rem;flex-shrink:0;color:var(--accent)}

/* Blog */
.blog-card{background:var(--card);border-radius:.75rem;border:1px solid var(--border);overflow:hidden}
.blog-card img{transition:transform .5s}
.blog-card:hover img{transform:scale(1.05)}
.blog-card:hover h3{color:var(--primary)}
.blog-category{display:inline-block;border-radius:9999px;background:var(--accent-soft);padding:.25rem .75rem;font-size:.75rem;font-weight:500;color:var(--accent)}
.blog-content h2{font-size:1.25rem;font-weight:600;color:var(--foreground);margin:2.5rem 0 .75rem}
.blog-content p{color:var(--muted-foreground);line-height:1.7;margin:.75rem 0}
.blog-content ul{list-style:disc;padding-left:1.5rem;margin:.75rem 0}
.blog-content li{color:var(--muted-foreground);line-height:1.7;padding:.25rem 0}
.blog-content strong{color:var(--foreground)}

/* Cookie Banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:50;padding:1rem;animation:fade-in-up .5s ease-out forwards}
.cookie-inner{max-width:56rem;margin:0 auto;background:var(--card);border-radius:.75rem;box-shadow:0 10px 25px oklch(0 0 0 / 0.12);border:1px solid var(--border);padding:1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.cookie-inner p{flex:1;font-size:.875rem;color:var(--muted-foreground);line-height:1.6;min-width:200px}
.cookie-inner a{color:var(--primary);text-decoration:underline}
.cookie-btns{display:flex;gap:.75rem;flex-shrink:0}
.cookie-btn-decline{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--muted-foreground);border:1px solid var(--border);border-radius:.5rem;background:none;cursor:pointer;transition:background .2s}
.cookie-btn-decline:hover{background:var(--muted)}
.cookie-btn-accept{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--primary-foreground);background:var(--gradient-primary);border:none;border-radius:.5rem;cursor:pointer;transition:opacity .2s}
.cookie-btn-accept:hover{opacity:.9}

/* About */
.about-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1fr}}

/* Contact */
.form-group label{display:block;font-size:.875rem;font-weight:500;color:var(--foreground);margin-bottom:.375rem}
.form-input{width:100%;border-radius:.5rem;border:1px solid var(--input);background:var(--card);padding:.75rem 1rem;font-size:.875rem;color:var(--foreground);outline:none;transition:box-shadow .2s}
.form-input:focus{box-shadow:0 0 0 2px var(--ring)}
.form-input::placeholder{color:var(--muted-foreground)}
textarea.form-input{resize:none}
.contact-grid{display:grid;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:3fr 2fr}}

/* Prose (legal) */
.prose h2{font-size:1.25rem;font-weight:600;color:var(--foreground);margin:2.5rem 0 .75rem}
.prose h3{font-size:1rem;font-weight:600;color:var(--foreground);margin:1.5rem 0 .5rem}
.prose p{color:var(--muted-foreground);line-height:1.7;margin:.5rem 0}
.prose ul{list-style:disc;padding-left:1.5rem}
.prose li{color:var(--muted-foreground);line-height:1.7;padding:.125rem 0}
.prose strong{color:var(--foreground)}

/* Utilities */
.text-center{text-align:center}
.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mt-16{margin-top:4rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-16{margin-bottom:4rem}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.rounded-full{border-radius:9999px}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-lg{border-radius:.5rem}
.bg-section-alt{background:var(--section-alt)}
.hidden{display:none}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.relative{position:relative}
.z-10{z-index:10}
.pt-20{padding-top:5rem}
.shrink-0{flex-shrink:0}
.leading-relaxed{line-height:1.7}
.overflow-hidden{overflow:hidden}
.w-full{width:100%}
.aspect-video{aspect-ratio:16/9}
.object-cover{object-fit:cover}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.border-b{border-bottom:1px solid var(--border)}
.pb-8{padding-bottom:2rem}
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}
.space-y-6>*+*{margin-top:1.5rem}
.inline-block{display:inline-block}
.block{display:block}