/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',sans-serif;background:#0a0a0f;color:#e8e8f0;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:'Syne',sans-serif;font-weight:700;line-height:1.2}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}

/* ── Brand tokens ── */
:root{
  --brand-300:#fdba74;
  --brand-400:#fb923c;
  --brand-500:#f97316;
  --brand-600:#ea580c;
  --dark-900:#0a0a0f;
  --dark-800:#111118;
  --dark-700:#1a1a26;
  --gray-300:#d1d5db;
  --gray-400:#9ca3af;
  --gray-500:#6b7280;
  --gray-600:#4b5563;
  --gray-700:#374151;
}

/* ── Grain overlay ── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:9999;will-change:auto}

/* ── Background helpers ── */
.hero-bg{background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(249,115,22,.18) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 80%,rgba(249,115,22,.07) 0%,transparent 50%),#0a0a0f}
.mesh-bg{background:radial-gradient(ellipse 70% 50% at 10% 0%,rgba(249,115,22,.14) 0%,transparent 55%),#0a0a0f}
.mesh-alt{background:radial-gradient(ellipse 60% 40% at 80% 80%,rgba(249,115,22,.07) 0%,transparent 50%),#0a0a0f}

/* ── Buttons ── */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;font-family:'Syne',sans-serif;font-weight:700;padding:.85rem 1.75rem;border-radius:.5rem;text-decoration:none;transition:transform .25s,box-shadow .25s;border:none;cursor:pointer;white-space:nowrap}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(249,115,22,.5)}
.btn-secondary{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#e8e8f0;font-family:'Syne',sans-serif;font-weight:600;padding:.85rem 1.75rem;border-radius:.5rem;text-decoration:none;transition:background .25s,border-color .25s;cursor:pointer}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}

/* ── Components ── */
.tag{display:inline-block;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);color:#fb923c;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .65rem;border-radius:99px;line-height:1.4}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:1rem;padding:1.5rem;transition:border-color .25s,transform .25s}
.card:hover{border-color:rgba(249,115,22,.3);transform:translateY(-2px)}
.stat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:1.25rem 1.5rem;text-align:center}
.toc{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1.5rem 2rem}
.toc a{color:#9ca3af;text-decoration:none;font-size:.875rem;line-height:2.1;display:block;transition:color .2s}
.toc a:hover{color:#fb923c}
.affiliate-notice{background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.25);border-radius:.75rem;padding:.75rem 1.25rem;display:flex;align-items:flex-start;gap:.75rem}
.affiliate-notice p{color:#fb923c;font-size:.8rem;line-height:1.5}
.rating-bar{height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:.4rem}
.rating-fill{height:100%;background:linear-gradient(90deg,#f97316,#fb923c);border-radius:99px}
.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:rgba(10,10,15,.97);border-top:1px solid rgba(249,115,22,.3);padding:.85rem 1.5rem;display:none;z-index:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.calc-slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;outline:none;cursor:pointer;background:rgba(255,255,255,.1);width:100%}
.calc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#f97316;cursor:pointer;box-shadow:0 0 8px rgba(249,115,22,.4)}
.calc-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#f97316;cursor:pointer;border:none}
.spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.1);border-top-color:#f97316;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 1.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Navigation ── */
.nav-dropdown{position:relative}
.dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:.5rem;display:none;z-index:200}
.nav-dropdown:hover .dropdown-menu{display:block}
.dropdown-inner{background:#111118;border:1px solid rgba(255,255,255,.12);border-radius:.85rem;padding:.5rem;min-width:220px;box-shadow:0 24px 48px rgba(0,0,0,.7)}
.dropdown-menu a{display:block;padding:.65rem 1rem;color:#9ca3af;font-size:.875rem;text-decoration:none;border-radius:.5rem;transition:background .15s,color .15s}
.dropdown-menu a:hover{background:rgba(249,115,22,.1);color:#fb923c}
#mobile-menu{display:none}
#mobile-menu.open{display:block}

/* ── Prose (article body) ── */
.prose h2{font-family:'Syne',sans-serif;font-weight:700;font-size:1.65rem;color:#fff;margin:3rem 0 1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06)}
.prose h3{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;color:#fb923c;margin:2rem 0 .6rem}
.prose p{color:#9ca3af;line-height:1.9;margin-bottom:1.2rem;font-size:.97rem}
.prose strong{color:#e8e8f0}
.prose ul,.prose ol{color:#9ca3af;line-height:1.85;padding-left:1.5rem;margin-bottom:1.2rem;font-size:.97rem}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin-bottom:.4rem}
.prose a{color:#fb923c;text-decoration:underline}
.prose blockquote{border-left:3px solid #f97316;padding:.75rem 1.25rem;background:rgba(249,115,22,.06);border-radius:0 .5rem .5rem 0;margin:1.5rem 0}
.prose blockquote p{color:#e8e8f0;margin:0}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.88rem}
.prose th{background:rgba(249,115,22,.12);color:#fb923c;font-family:'Syne',sans-serif;padding:.7rem 1rem;text-align:left;border:1px solid rgba(255,255,255,.08)}
.prose td{padding:.65rem 1rem;color:#9ca3af;border:1px solid rgba(255,255,255,.06)}
.prose tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* ── Comparison table ── */
.comp-table{width:100%;border-collapse:collapse;font-size:.85rem}
.comp-table th{background:rgba(255,255,255,.05);color:#9ca3af;font-family:'Syne',sans-serif;font-weight:600;padding:.8rem 1rem;text-align:left;border:1px solid rgba(255,255,255,.07)}
.comp-table td{padding:.7rem 1rem;border:1px solid rgba(255,255,255,.06);color:#9ca3af}
.comp-table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.comp-table .ghl,.ghl-col{color:#fb923c!important;font-weight:700}
.win{color:#4ade80!important;font-weight:600}

/* ── FAQ ── */
.faq-item{border-bottom:1px solid rgba(255,255,255,.07)}
.faq-btn{width:100%;text-align:left;background:none;border:none;color:#e8e8f0;font-family:'Syne',sans-serif;font-weight:600;font-size:.97rem;padding:1.1rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-btn .icon{flex-shrink:0;width:22px;height:22px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:transform .3s,background .2s}
.faq-btn[aria-expanded="true"] .icon{transform:rotate(45deg);background:#f97316;border-color:#f97316}
.faq-content{display:none;padding:0 0 1rem;color:#9ca3af;font-size:.9rem;line-height:1.85}
.faq-content.open{display:block}

/* ── Accessibility ── */
.skip-link{position:absolute;top:-100px;left:1rem;background:#f97316;color:#fff;padding:.5rem 1rem;border-radius:.5rem;font-weight:700;text-decoration:none;z-index:9999;transition:top .2s}
.skip-link:focus{top:1rem}
:focus-visible{outline:2px solid #f97316;outline-offset:3px}

/* ── Display font ── */
.font-display{font-family:'Syne',sans-serif}
.font-body{font-family:'DM Sans',sans-serif}

/* ══ Tailwind utility classes (only those used on site) ══ */

/* Layout */
.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}
.flex{display:flex}.grid{display:grid}.hidden{display:none}.contents{display:contents}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-shrink-0{flex-shrink:0}
.flex-1{flex:1 1 0%}.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}
.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.col-span-1{grid-column:span 1 / span 1}

/* Position */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.inset-0{inset:0}
.z-40{z-index:40}.z-50{z-index:50}.z-200{z-index:200}.z-500{z-index:500}

/* Sizing */
.w-full{width:100%}.h-1\.5{height:.375rem}.h-full{height:100%}
.min-h-screen{min-height:100vh}
.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-lg{max-width:32rem}
.max-w-md{max-width:28rem}

/* Spacing - padding */
.p-2{padding:.5rem}.p-8{padding:2rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}
.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pb-8{padding-bottom:2rem}.pb-20{padding-bottom:5rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}

/* Spacing - margin */
.mx-auto{margin-left:auto;margin-right:auto}
.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}
.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}
.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}
.my-5{margin-top:1.25rem;margin-bottom:1.25rem}
.space-y-2>*+*{margin-top:.5rem}.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}.space-y-6>*+*{margin-top:1.5rem}
.space-y-10>*+*{margin-top:2.5rem}

/* Typography */
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.font-normal{font-weight:400}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.leading-tight{line-height:1.25}.leading-snug{line-height:1.375}.leading-relaxed{line-height:1.625}
.uppercase{text-transform:uppercase}.underline{text-decoration:underline}
.text-center{text-align:center}.text-left{text-align:left}
.tracking-wide{letter-spacing:.025em}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.resize-none{resize:none}
.placeholder-gray-600::placeholder{color:#4b5563}

/* Colors - text */
.text-white{color:#fff}.text-gray-300{color:#d1d5db}.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}
.text-brand-400{color:#fb923c}.text-brand-500{color:#f97316}
.text-green-400{color:#4ade80}.text-red-400{color:#f87171}

/* Colors - bg */
.bg-transparent{background-color:transparent}
.bg-dark-900{background-color:#0a0a0f}
.bg-white\/5{background-color:rgba(255,255,255,.05)}

/* Borders */
.border{border-width:1px;border-style:solid}.border-0{border-width:0}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-y{border-top-width:1px;border-bottom-width:1px;border-style:solid}
.border-white\/5{border-color:rgba(255,255,255,.05)}

/* Border radius */
.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}
.rounded-full{border-radius:9999px}

/* Overflow */
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}

/* Backdrop */
.backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}

/* Cursor */
.cursor-pointer{cursor:pointer}

/* Object fit */
.object-cover{object-fit:cover}

/* Outline */
.outline-none{outline:none}

/* Opacity */
.opacity-0{opacity:0}.opacity-100{opacity:1}

/* Transition */
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.duration-300{transition-duration:300ms}

/* Group hover */
.group:hover .group-hover\:text-brand-400{color:#fb923c}
.group:hover .group-hover\:text-white{color:#fff}

/* Hover states */
.hover\:text-white:hover{color:#fff}
.hover\:text-gray-300:hover{color:#d1d5db}
.hover\:text-gray-400:hover{color:#9ca3af}
.hover\:text-gray-500:hover{color:#6b7280}
.hover\:text-brand-300:hover{color:#fdba74}
.hover\:text-brand-400:hover{color:#fb923c}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.1)}
.hover\:underline:hover{text-decoration:underline}
.hover\:text-gray-400:hover{color:#9ca3af}

/* Responsive */
@media(min-width:768px){
  .md\:flex{display:flex}.md\:hidden{display:none}
  .md\:inline-flex{display:inline-flex}.md\:block{display:block}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:col-span-1{grid-column:span 1 / span 1}
  .hidden.md\:inline-flex{display:inline-flex}
  .hidden.md\:flex{display:flex}
}
@media(max-width:767px){
  .md\:hidden{display:block}
}
@media(min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}