Загрузка...
Секция с трехуровневыми ценами и FAQ: адаптивный дизайн, переключатель месяцев/лет, анимация. Идеально для страниц с ценами продуктов.
<section class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll lg:px-6 lg:pt-12 lg:pb-12 animate max-w-6xl mr-auto ml-auto pt-24 pr-4 pb-24 pl-4">
<div class="md:p-8 bg-gradient-to-br from-blue-500/10 via-blue-500/0 to-blue-500/10 rounded-[28px] pt-6 pr-6 pb-6 pl-6 shadow-[0_40px_120px_rgba(0,0,0,0.95)]" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0), rgba(59, 130, 246, 0.2)); --border-radius-before: 28px">
<section class="lg:pb-0 lg:pl-0 lg:pr-0 max-w-6xl mr-auto ml-auto pr-0 pb-0 pl-0" id="pricing">
<div class="flex flex-col items-start gap-6 lg:flex-row lg:items-end lg:justify-between">
<div class="">
<p class="text-[10px] uppercase text-slate-500 font-geist" style="">
Pricing
</p>
<h2 class="mt-2 text-2xl sm:text-3xl text-slate-50 font-geist font-light tracking-tighter" style="">
Start small, scale to every workflow
</h2>
<p class="mt-3 text-sm sm:text-base text-slate-400 max-w-xl font-geist" style="">
Pick a plan that matches where you are today. All plans
include secure search, audit logs and SOC2‑ready controls.
</p>
</div>
<div class="flex items-center gap-2 text-[11px] text-slate-400 font-geist" style="">
<div class="inline-flex bg-black/70 border-white/10 border rounded-full pt-1 pr-1 pb-1 pl-1 items-center">
<button class="px-4 py-1.5 rounded-full bg-slate-50 text-slate-900 text-[11px] font-geist" style="">
Monthly
</button>
<button class="px-4 py-1.5 rounded-full text-[11px] text-slate-400 hover:text-slate-200 font-geist" style="">
Yearly
</button>
</div>
</div>
</div>
<div class="grid gap-4 md:grid-cols-3 mt-8 gap-x-4 gap-y-4">
<!-- Plan 1 -->
<div class="group relative flex flex-col bg-gradient-to-br from-blue-500/10 to-blue-500/0 hover:from-orange-500/10 hover:to-orange-500/0 rounded-2xl pt-4 pr-4 pb-4 pl-4 shadow-[0_18px_45px_rgba(0,0,0,0.8)] transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_30px_60px_rgba(251,146,60,0.15)]" style="--border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 16px">
<!-- Hover Border Overlay -->
<div class="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" style="padding: 1px; background: linear-gradient(135deg, rgba(251, 146, 60, 0.5), rgba(251, 146, 60, 0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;"></div>
<!-- Hover Glow -->
<div class="h-px bg-gradient-to-r from-transparent via-amber-400/70 to-transparent absolute top-0 right-6 left-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="flex items-center justify-between">
<div class="">
<h3 class="text-sm sm:text-base text-slate-50 font-geist" style="">
Starter
</h3>
<p class="mt-1 text-xs text-slate-400 font-geist" style="">
For small teams testing AI workflows.
</p>
</div>
<span class="inline-flex items-center justify-center text-slate-200 bg-slate-900 w-8 h-8 rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:stars-minimalistic-bold-duotone" class="iconify text-base iconify--solar">
<path fill="currentColor" d="M10.08 7.897C11.157 5.966 11.695 5 12.5 5s1.343.966 2.42 2.897l.278.5c.306.549.46.823.698 1.004s.535.248 1.13.383l.54.122c2.091.473 3.137.71 3.385 1.51c.249.8-.464 1.633-1.89 3.3l-.368.43c-.405.474-.607.711-.699 1.004c-.09.293-.06.609.001 1.24l.056.576c.216 2.224.323 3.336-.328 3.83s-1.63.044-3.587-.857l-.507-.234c-.556-.256-.834-.384-1.129-.384s-.573.128-1.13.384l-.506.234c-1.957.9-2.936 1.352-3.587.857c-.651-.494-.543-1.606-.328-3.83l.056-.575c.061-.632.092-.948 0-1.24c-.09-.294-.293-.53-.698-1.004l-.369-.432c-1.425-1.666-2.138-2.5-1.89-3.3c.25-.8 1.295-1.036 3.386-1.509l.54-.122c.595-.135.892-.202 1.13-.383c.239-.18.392-.455.698-1.004z" class=""></path>
<path fill="currentColor" d="M4.868 2.5c.03-.105.217-.106.248 0c.14.482.4 1.194.793 1.585c.393.39 1.108.646 1.59.783c.107.03.107.217.002.248c-.482.14-1.195.4-1.586.793c-.39.393-.645 1.108-.782 1.59c-.03.107-.218.107-.249.002c-.14-.482-.4-1.195-.793-1.586c-.393-.39-1.107-.645-1.59-.782c-.106-.03-.107-.218-.001-.249c.482-.14 1.194-.4 1.585-.793c.39-.393.646-1.107.783-1.59" opacity=".5" class=""></path>
<path fill="currentColor" fill-rule="evenodd" d="M19 3.25a.75.75 0 0 1 .75.75v.25H20a.75.75 0 0 1 0 1.5h-.25V6a.75.75 0 0 1-1.5 0v-.25H18a.75.75 0 0 1 0-1.5h.25V4a.75.75 0 0 1 .75-.75" clip-rule="evenodd" opacity=".5" class=""></path>
</svg>
</span>
</div>
<div class="mt-4 flex items-baseline gap-1">
<span class="text-2xl text-slate-50 font-geist font-light tracking-tighter" style="">
$29
</span>
<span class="text-[11px] text-slate-500 font-geist" style="">
seat / month
</span>
</div>
<ul class="mt-4 space-y-1.5 text-xs text-slate-400 font-geist flex-1" style="">
<li class="flex items-center gap-2 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify text-[13px] text-emerald-400 iconify--solar" style="">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path>
<path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0" class=""></path>
</svg>
Up to 25 teammates
</li>
<li class="flex items-center gap-2 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify text-[13px] text-emerald-400 iconify--solar" style="">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path>
<path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0" class=""></path>
</svg>
5 core integrations
</li>
</ul>
<button class="mt-4 inline-flex w-full items-center justify-center rounded-xl bg-slate-100 text-slate-950 text-xs py-2 group-hover:bg-gradient-to-r group-hover:from-amber-400 group-hover:to-orange-500 hover:bg-gradient-to-r hover:from-amber-400 hover:to-orange-500 font-geist transition-all duration-300" style="">
Start free trial
</button>
</div>
<!-- Plan 2 – Scale -->
<!-- Modified to match Starter default, highlights on hover -->
<div class="group relative flex flex-col bg-gradient-to-br from-blue-500/10 to-blue-500/0 hover:from-orange-500/10 hover:to-orange-500/0 rounded-2xl pt-4 pr-4 pb-4 pl-4 shadow-[0_18px_45px_rgba(0,0,0,0.8)] transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_30px_60px_rgba(251,146,60,0.15)]" style="--border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 16px">
<!-- Hover Border Overlay -->
<div class="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" style="padding: 1px; background: linear-gradient(135deg, rgba(251, 146, 60, 0.5), rgba(251, 146, 60, 0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;"></div>
<!-- Hover Glow (originally visible) -->
<div class="h-px bg-gradient-to-r from-transparent via-amber-400/70 to-transparent absolute top-0 right-6 left-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="flex items-center justify-between" style="">
<div class="">
<div class="inline-flex items-center gap-1 rounded-full bg-amber-500/15 px-2 py-0.5 border border-amber-400/40 text-[10px] text-amber-100 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:fire-bold-duotone" class="iconify text-xs iconify--solar">
<path fill="currentColor" d="M12.832 21.801c3.126-.626 7.168-2.875 7.168-8.69c0-5.291-3.873-8.815-6.658-10.434c-.619-.36-1.342.113-1.342.828v1.828c0 1.442-.606 4.074-2.29 5.169c-.86.559-1.79-.278-1.894-1.298l-.086-.838c-.1-.974-1.092-1.565-1.87-.971C4.461 8.46 3 10.33 3 13.11C3 20.221 8.289 22 10.933 22q.232 0 .484-.015c.446-.056 0 .099 1.415-.185" opacity=".5" class=""></path>
<path fill="currentColor" d="M8 18.444c0 2.62 2.111 3.43 3.417 3.542c.446-.056 0 .099 1.415-.185C13.871 21.434 15 20.492 15 18.444c0-1.297-.819-2.098-1.46-2.473c-.196-.115-.424.03-.441.256c-.056.718-.746 1.29-1.215.744c-.415-.482-.59-1.187-.59-1.638v-.59c0-.354-.357-.59-.663-.408C9.495 15.008 8 16.395 8 18.445" class=""></path>
</svg>
Most popular
</div>
<h3 class="mt-2 text-sm sm:text-base text-slate-50 font-geist" style="">
Scale
</h3>
<p class="mt-1 text-xs text-slate-300 font-geist" style="">
For teams rolling NeuroDesk out across orgs.
</p>
</div>
<span class="inline-flex items-center justify-center text-slate-200 bg-slate-900 w-8 h-8 rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(226, 232, 240); width: 16px; height: 16px" class="iconify iconify--solar text-base w-[16px] h-[16px]" aria-hidden="true" role="img" data-icon="solar:stars-minimalistic-bold-duotone" data-solar="fire-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
<path fill="#e2e8f0" d="M12.832 21.801c3.126-.626 7.168-2.875 7.168-8.69c0-5.291-3.873-8.815-6.658-10.434c-.619-.36-1.342.113-1.342.828v1.828c0 1.442-.606 4.074-2.29 5.169c-.86.559-1.79-.278-1.894-1.298l-.086-.838c-.1-.974-1.092-1.565-1.87-.971C4.461 8.46 3 10.33 3 13.11C3 20.221 8.289 22 10.933 22q.232 0 .484-.015c.446-.056 0 .099 1.415-.185" opacity=".5" class=""></path>
<path fill="#e2e8f0" d="M8 18.444c0 2.62 2.111 3.43 3.417 3.542c.446-.056 0 .099 1.415-.185C13.871 21.434 15 20.492 15 18.444c0-1.297-.819-2.098-1.46-2.473c-.196-.115-.424.03-.441.256c-.056.718-.746 1.29-1.215.744c-.415-.482-.59-1.187-.59-1.638v-.59c0-.354-.357-.59-.663-.408C9.495 15.008 8 16.395 8 18.445" class=""></path>
</svg>
</span>
</div>
<div class="mt-4 flex items-baseline gap-1">
<span class="text-2xl text-slate-50 font-geist font-light tracking-tighter">
$59
</span>
<span class="text-[11px] text-slate-400 font-geist" style="">
seat / month
</span>
</div>
<ul class="mt-4 space-y-1.5 text-xs text-slate-300 font-geist flex-1" style="">
<li class="flex items-center gap-2 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify text-[13px] text-amber-300 iconify--solar">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path>
<path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0" class=""></path>
</svg>
Unlimited teammates
</li>
<li class="flex items-center gap-2 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify text-[13px] text-amber-300 iconify--solar">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path>
<path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0" class=""></path>
</svg>
All integrations + API access
</li>
</ul>
<button class="inline-flex text-xs text-slate-950 font-geist bg-slate-100 group-hover:bg-gradient-to-r group-hover:from-amber-400 group-hover:to-orange-500 hover:bg-gradient-to-r hover:from-amber-400 hover:to-orange-500 w-full rounded-xl mt-4 pt-2 pb-2 items-center justify-center transition-all duration-300" style="">
Talk to sales
</button>
</div>
<!-- Plan 3 -->
<div class="group relative rounded-2xl border border-white/10 hover:border-white/0 bg-slate-950/80 hover:bg-slate-900 p-4 shadow-[0_18px_45px_rgba(0,0,0,0.8)] flex flex-col transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_30px_60px_rgba(251,146,60,0.15)]" style="">
<!-- Hover Border Overlay -->
<div class="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" style="padding: 1px; background: linear-gradient(135deg, rgba(251, 146, 60, 0.5), rgba(251, 146, 60, 0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;"></div>
<!-- Hover Glow -->
<div class="h-px bg-gradient-to-r from-transparent via-amber-400/70 to-transparent absolute top-0 right-6 left-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="flex items-center justify-between">
<div class="">
<h3 class="text-sm sm:text-base text-slate-50 font-geist" style="">
Enterprise
</h3>
<p class="mt-1 text-xs text-slate-400 font-geist" style="">
For regulated, global and high‑volume teams.
</p>
</div>
<span class="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-slate-900 text-slate-100" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:buildings-3-bold-duotone" class="iconify iconify--solar text-base w-[16px] h-[16px]" stroke-width="2" data-icon-replaced="true" style="width: 16px; height: 16px; color: rgb(241, 245, 249)">
<path fill="currentColor" fill-rule="evenodd" d="M10.75 2h2c1.886 0 2.828 0 3.414.586S16.75 4.114 16.75 6v15.25h5a.75.75 0 0 1 0 1.5h-20a.75.75 0 0 1 0-1.5h5V6c0-1.886 0-2.828.586-3.414S8.864 2 10.75 2M9 12a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4A.75.75 0 0 1 9 12m0 3a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4A.75.75 0 0 1 9 15m2.75 3.25a.75.75 0 0 1 .75.75v2.25H11V19a.75.75 0 0 1 .75-.75M9.25 7a2.75 2.75 0 1 1 5.5 0a2.75 2.75 0 0 1-5.5 0" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="M10.75 7a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.55.889c.337.504.337 1.206.337 2.611v12.75h.5a.75.75 0 0 1 0 1.5h-20a.75.75 0 1 1 0-1.5h.5V8.5c0-1.405 0-2.107.337-2.611a2 2 0 0 1 .552-.552c.441-.295 2.537-.332 3.618-.336q-.005.437-.004.91V7.25H4.25a.75.75 0 1 0 0 1.5h2.503v1.5H4.25a.75.75 0 0 0 0 1.5h2.503v1.5H4.25a.75.75 0 0 0 0 1.5h2.503v6.5h10v-6.5h2.497a.75.75 0 1 0 0-1.5h-2.497v-1.5h2.497a.75.75 0 1 0 0-1.5h-2.497v-1.5h2.497a.75.75 0 0 0 0-1.5h-2.497V5.91q.001-.471-.004-.91c1.081.005 3.17.042 3.612.337a2 2 0 0 1 .552.552" opacity=".5" class=""></path>
</svg>
</span>
</div>
<div class="mt-4 flex items-baseline gap-1">
<span class="text-2xl text-slate-50 font-geist font-light tracking-tighter" style="">
Custom
</span>
</div>
<ul class="mt-4 space-y-1.5 text-xs text-slate-400 font-geist flex-1" style="">
<li class="flex items-center gap-2 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify text-[13px] text-emerald-400 iconify--solar" style="">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path>
<path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0" class=""></path>
</svg>
Private cloud or on‑prem options
</li>
<li class="flex items-center gap-2 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify text-[13px] text-emerald-400 iconify--solar" style="">
<path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path>
<path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0" class=""></path>
</svg>
Custom compliance (SOC2, ISO 27001)
</li>
</ul>
<button class="mt-4 inline-flex w-full items-center justify-center rounded-xl bg-slate-100 text-slate-950 text-xs py-2 group-hover:bg-gradient-to-r group-hover:from-amber-400 group-hover:to-orange-500 hover:bg-gradient-to-r hover:from-amber-400 hover:to-orange-500 font-geist transition-all duration-300" style="">
Contact enterprise
</button>
</div>
</div>
<div class="mt-10">
<script>
if (typeof window.neuroToggleFaq === 'undefined') {
window.neuroToggleFaq = function(el) {
const container = el.closest('.faq-item');
const answer = container.querySelector('.faq-answer');
const icon = container.querySelector('.faq-icon');
const isHidden = answer.classList.contains('hidden');
if (isHidden) {
answer.classList.remove('hidden');
answer.classList.add('block');
icon.style.transform = 'rotate(180deg)';
} else {
answer.classList.add('hidden');
answer.classList.remove('block');
icon.style.transform = 'rotate(0deg)';
}
}
}
</script>
<div class="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent w-full mt-8 mb-8"></div>
<h3 class="sm:text-base text-sm text-slate-50 font-geist mb-4" style="">
FAQ
</h3>
<div class="space-y-4">
<!-- Item 1 -->
<div class="faq-item flex flex-col sm:flex-row sm:items-center sm:justify-between bg-gradient-to-br from-blue-500/10 to-blue-500/0 rounded-2xl pt-3 pr-4 pb-3 pl-4 gap-x-2 gap-y-2 cursor-pointer group select-none transition-colors hover:from-blue-500/20 hover:to-blue-500/5" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 16px" onclick="window.neuroToggleFaq(this)">
<div class="flex-1 pr-2">
<p class="text-xs sm:text-sm text-slate-50 font-geist group-hover:text-white transition-colors" style="">
What payment methods do you accept?
</p>
<p class="faq-answer mt-1 text-xs text-slate-400 font-geist" style="">
We accept all major credit cards, including Visa,
Mastercard, and American Express. We also support
payments through PayPal.
</p>
</div>
<div class="faq-icon shrink-0 inline-flex text-slate-300 bg-slate-900 w-7 h-7 rounded-full items-center justify-center transition-transform duration-300 transform rotate-180" style="position: relative; --border-gradient: linear-gradient(315deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 9999px">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px] text-slate-300">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</div>
</div>
<!-- Item 2 -->
<div class="faq-item flex flex-col sm:flex-row sm:items-center sm:justify-between bg-gradient-to-br from-blue-500/10 to-blue-500/0 rounded-2xl pt-3 pr-4 pb-3 pl-4 gap-x-2 gap-y-2 cursor-pointer group select-none transition-colors hover:from-blue-500/20 hover:to-blue-500/5" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 16px" onclick="window.neuroToggleFaq(this)">
<div class="flex-1 pr-2">
<p class="text-xs sm:text-sm text-slate-50 font-geist group-hover:text-white transition-colors" style="">
Can I change my plan later?
</p>
<p class="faq-answer hidden mt-1 text-xs text-slate-400 font-geist" style="">
Yes, you can easily upgrade or downgrade your plan at
any time from your account settings. Changes take effect
immediately.
</p>
</div>
<div class="faq-icon shrink-0 inline-flex text-slate-300 bg-slate-900 w-7 h-7 rounded-full items-center justify-center transition-transform duration-300 transform rotate-0" style="position: relative; --border-gradient: linear-gradient(315deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 9999px">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px] text-slate-300">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</div>
</div>
<!-- Item 3 -->
<div class="faq-item flex flex-col sm:flex-row sm:items-center sm:justify-between bg-gradient-to-br from-blue-500/10 to-blue-500/0 rounded-2xl pt-3 pr-4 pb-3 pl-4 gap-x-2 gap-y-2 cursor-pointer group select-none transition-colors hover:from-blue-500/20 hover:to-blue-500/5" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 16px" onclick="window.neuroToggleFaq(this)">
<div class="flex-1 pr-2">
<p class="text-xs sm:text-sm text-slate-50 font-geist group-hover:text-white transition-colors" style="">
Do you offer refunds?
</p>
<p class="faq-answer hidden mt-1 text-xs text-slate-400 font-geist" style="">
We offer a 30-day money-back guarantee for all new
subscriptions. Contact our support team for any billing
inquiries.
</p>
</div>
<div class="faq-icon shrink-0 inline-flex text-slate-300 bg-slate-900 w-7 h-7 rounded-full items-center justify-center transition-transform duration-300 transform rotate-0" style="position: relative; --border-gradient: linear-gradient(315deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 9999px">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px] text-slate-300">
<path d="m6 9 6 6 6-6" class=""></path>
</svg>
</div>
</div>
</div>
</div>
</section>
<!-- ⭐ DIVIDER -->
<!-- ⭐ THIRD ROW BELOW BOTH COLUMNS -->
</div>
</section>