/* ═══════════════════════════════════════════
   Velcord.net — LucentUI Theme Styles
   ═══════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
    --color-primary: 222 100% 50%;
    --color-secondary: 217 100% 69%;
    --color-neutral: 220 25% 85%;
    --color-base: 220 28% 12%;
    --color-muted: 220 15% 40%;
    --color-background: 220 20% 98%;
    --color-background-secondary: 220 14% 94%;
    --color-success: 142 71% 45%;
    --color-error: 0 75% 60%;
    --color-warning: 25 95% 53%;
    --color-info: 210 100% 60%;
}
.dark {
    --color-neutral: 220 25% 29%;
    --color-base: 100 100% 100%;
    --color-muted: 220 15% 55%;
    --color-background: 221 39% 11%;
    --color-background-secondary: 217 33% 16%;
}
[x-cloak] { display: none !important; }

/* ── Reset & Base ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Figtree', sans-serif;
    background-color: hsl(var(--color-background));
    color: hsl(var(--color-base));
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
ul { list-style:none; }

/* ── Page Load Animations ── */
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
@keyframes slideDown {
    from { opacity:0; transform:translateY(-16px); }
    to   { opacity:1; transform:translateY(0); }
}
.anim-fade-up   { opacity:0; animation:fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-fade-in   { opacity:0; animation:fadeIn 0.6s ease forwards; }
.anim-slide-down { opacity:0; animation:slideDown 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.anim-d1 { animation-delay:0.1s; }
.anim-d2 { animation-delay:0.2s; }
.anim-d3 { animation-delay:0.35s; }
.anim-d4 { animation-delay:0.5s; }
.anim-d5 { animation-delay:0.65s; }

/* ── Utility Colors ── */
.text-primary { color:hsl(var(--color-primary)); }
.text-muted   { color:hsl(var(--color-muted)); }
.text-success { color:hsl(var(--color-success)); }
.text-warning { color:hsl(var(--color-warning)); }
.text-purple  { color:hsl(270 60% 60%); }
.text-orange  { color:hsl(25 95% 53%); }

/* ── Container ── */
.container { max-width:1280px; margin:0 auto; padding:0 1rem; }

/* ── Section Header ── */
.section-header { text-align:center; margin-bottom:4rem; }
.section-header h2 { font-size:2.25rem; font-weight:700; margin-bottom:1rem; }
.section-header p { font-size:1.125rem; color:hsl(var(--color-muted)); max-width:42rem; margin:0 auto; line-height:1.6; }

/* ═══ Animations ═══ */
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes enter { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes float { 0%,100%{transform:translateY(0) scale(1.15)} 50%{transform:translateY(-16px) scale(1.15)} }
@keyframes ping { 75%,100%{transform:scale(2);opacity:0} }
@keyframes gradientX { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.animate-fade-in-down { animation:fadeInDown 0.6s ease-out both; }
.animate-enter { animation:enter 0.7s ease-out both; }
.animate-float { animation:float 4s ease-in-out infinite; }
.delay-100{animation-delay:100ms} .delay-200{animation-delay:200ms} .delay-300{animation-delay:300ms} .delay-400{animation-delay:400ms} .delay-800{animation-delay:800ms}
.animate-nav-in { animation:slideInNav 0.6s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes slideInNav { from{opacity:0;transform:translateY(-24px)} to{opacity:1;transform:translateY(0)} }

/* ═══ Grid Background ═══ */
.grid-bg { position:absolute; inset:0; z-index:0; pointer-events:none; height:32rem; width:100%;
    mask-image:radial-gradient(100% 100% at top right,white,transparent);
    -webkit-mask-image:radial-gradient(100% 100% at top right,white,transparent);
}
.grid-bg svg { width:100%; height:100%; }

/* Cursor-following grid spotlight */
.grid-cursor {
    position:fixed; inset:0; z-index:1; pointer-events:none;
    width:100%; height:100%;
    opacity:0; transition:opacity 0.4s ease;
}
.grid-cursor.active { opacity:1; }
.grid-cursor svg { width:100%; height:100%; }

/* ═══════════════════════════════════════════
   Navbar — Helkor-style
   Always fixed full-width. Inner bar animates on scroll:
   at top = transparent, aligned with hero content
   scrolled = pill with blur bg, shifted right (narrower via padding)
   ═══════════════════════════════════════════ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 0;
    transition: padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar.is-scrolled {
    padding: 0.625rem 4% 0;
}

.navbar-inner {
    display:flex; align-items:center; justify-content:space-between;
    position:relative;
    height:4rem; max-width:1280px; margin:0 auto;
    padding: 0 2rem;
    border-radius: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.4s, border-color 0.4s, border-radius 0.4s, box-shadow 0.4s, padding 0.4s;
}
.navbar.is-scrolled .navbar-inner {
    border-radius: 0.75rem;
    background: hsl(var(--color-background-secondary) / 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: hsl(var(--color-neutral) / 0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 0 1.5rem;
}
.dark .navbar.is-scrolled .navbar-inner {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.navbar-left { display:flex; align-items:center; gap:1.5rem; }
.logo-link { display:flex; align-items:center; gap:0.5rem; transition:transform 0.3s; flex-shrink:0; }
.logo-link:hover { transform:scale(1.05); }
.logo-link img { height:2.5rem; width:auto; }
.logo-text { font-size:1.25rem; font-weight:800; letter-spacing:-0.025em; }
.nav-links { display:flex; gap:0.25rem; margin-left:0.5rem; }
.nav-links a {
    padding:0.5rem 1rem; font-size:0.875rem; font-weight:600;
    color:hsl(var(--color-base) / 0.8); border-radius:0.5rem; transition:all 0.2s;
}
.nav-links a:hover { background:hsl(var(--color-neutral) / 0.3); color:hsl(var(--color-primary)); transform:scale(1.05); }
.nav-actions { display:flex; align-items:center; gap:0.75rem; }

.btn-nav {
    display:flex; align-items:center; gap:0.5rem; padding:0.625rem 1.25rem;
    font-size:0.875rem; font-weight:500; border-radius:0.75rem;
    border:1px solid hsl(var(--color-primary) / 0.5); transition:all 0.3s;
}
.btn-nav:hover { transform:scale(1.05); box-shadow:0 8px 24px hsl(var(--color-primary) / 0.3); }
.btn-nav.primary { background:hsl(var(--color-primary)); color:#fff; }
.btn-nav.primary:hover { background:hsl(var(--color-primary) / 0.95); }
.btn-nav.secondary { background:hsl(var(--color-primary) / 0.8); color:#fff; }
.btn-nav.secondary:hover { background:hsl(var(--color-primary) / 0.85); }
.btn-nav svg { width:1rem; height:1rem; }

/* Theme toggle */
.theme-toggle {
    display:flex; align-items:center; justify-content:center;
    width:2.5rem; height:2.5rem; border-radius:0.75rem;
    background:hsl(var(--color-neutral) / 0.2); border:1px solid hsl(var(--color-neutral) / 0.3);
    color:hsl(var(--color-base) / 0.7); cursor:pointer; transition:all 0.3s;
}
.theme-toggle:hover { background:hsl(var(--color-primary) / 0.1); color:hsl(var(--color-primary)); transform:scale(1.1); }
.theme-toggle svg { width:1.25rem; height:1.25rem; }
html:not(.dark) .theme-toggle .icon-sun { display:none; }
html:not(.dark) .theme-toggle .icon-moon { display:block; }
html.dark .theme-toggle .icon-sun { display:block; }
html.dark .theme-toggle .icon-moon { display:none; }

/* Mobile */
.mobile-toggle {
    display:none; width:3rem; height:3rem; align-items:center; justify-content:center;
    border-radius:0.75rem; background:hsl(var(--color-background)); border:none; color:hsl(var(--color-base) / 0.8);
    position:relative; cursor:pointer;
}
.mobile-toggle svg { width:1.5rem; height:1.5rem; transition:transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s; }
.mobile-toggle .icon-close { position:absolute; opacity:0; transform:rotate(-90deg); }
.mobile-toggle .icon-menu { opacity:1; transform:rotate(0); }
@media (max-width:1023px) {
    .nav-links, .nav-actions .btn-nav { display:none; }
    .mobile-toggle { display:flex; }

    /* Navbar transparent at top on mobile, pill on scroll */
    .navbar { padding: 0.5rem 3% 0; }
    .navbar.is-scrolled { padding: 0.5rem 5% 0; }
    .navbar-inner {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: transparent;
        border-radius: 0.75rem;
        box-shadow: none;
    }
    .navbar.is-scrolled .navbar-inner {
        background: hsl(var(--color-background-secondary) / 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-color: hsl(var(--color-neutral) / 0.5);
        box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    }
    .dark .navbar.is-scrolled .navbar-inner { box-shadow: 0 4px 24px rgba(0,0,0,0.35); }
    /* When menu is open, always show bg regardless of scroll */
    .navbar.menu-open .navbar-inner {
        background: hsl(var(--color-background-secondary) / 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-color: hsl(var(--color-neutral) / 0.5);
        box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    }
    .dark .navbar.menu-open .navbar-inner { box-shadow: 0 4px 24px rgba(0,0,0,0.35); }

    /* Hamburger icon animation */
    .navbar.menu-open .mobile-toggle .icon-menu { opacity:0; transform:rotate(90deg); }
    .navbar.menu-open .mobile-toggle .icon-close { opacity:1; transform:rotate(0); }
}

/* Mobile menu dropdown */
.mobile-menu {
    display:flex; flex-direction:column; gap:0.25rem;
    padding:0 1.5rem;
    max-height:0; overflow:hidden;
    opacity:0;
    background: hsl(var(--color-background-secondary) / 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 0.75rem 0.75rem;
    margin: 0 -0.01rem;
    border: 1px solid hsl(var(--color-neutral) / 0.5);
    border-top: none;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1),
                opacity 0.3s ease,
                padding 0.4s cubic-bezier(0.4,0,0.2,1);
}
.navbar.menu-open .mobile-menu {
    max-height:500px;
    opacity:1;
    padding:0.75rem 1.5rem 1.5rem;
}
/* When menu open, square off bottom of navbar-inner */
.navbar.menu-open .navbar-inner {
    border-radius: 0.75rem 0.75rem 0 0;
    border-bottom-color: hsl(var(--color-neutral) / 0.2);
}
.mobile-menu a {
    padding:0.75rem 1rem; font-size:0.95rem; font-weight:600;
    color:hsl(var(--color-base) / 0.8); border-radius:0.5rem; transition:all 0.3s;
    transform:translateY(-8px); opacity:0;
}
.navbar.menu-open .mobile-menu a {
    transform:translateY(0); opacity:1;
}
.navbar.menu-open .mobile-menu a:nth-child(1) { transition-delay:0.05s; }
.navbar.menu-open .mobile-menu a:nth-child(2) { transition-delay:0.08s; }
.navbar.menu-open .mobile-menu a:nth-child(3) { transition-delay:0.11s; }
.navbar.menu-open .mobile-menu a:nth-child(4) { transition-delay:0.14s; }
.navbar.menu-open .mobile-menu a:nth-child(5) { transition-delay:0.17s; }
.mobile-menu a:hover { background:hsl(var(--color-neutral) / 0.3); color:hsl(var(--color-primary)); }
.mobile-menu-actions {
    display:flex; flex-direction:column; gap:0.5rem; margin-top:0.75rem;
    transform:translateY(-8px); opacity:0; transition:all 0.3s ease 0.2s;
}
.navbar.menu-open .mobile-menu-actions { transform:translateY(0); opacity:1; }
.mobile-menu-actions .btn-nav { display:flex; justify-content:center; }
@media (min-width:768px) { .mobile-menu { display:none !important; } }

/* ═══ Hero ═══ */
.hero { position:relative; overflow:hidden; padding:6rem 2rem 10rem; }
.hero-grid { display:grid; grid-template-columns:1fr; gap:3rem; max-width:1280px; margin:0 auto; align-items:center; }
@media (min-width:1024px) { .hero-grid { grid-template-columns:7fr 5fr; } }

.hero-badge {
    display:inline-flex; align-items:center; gap:0.75rem; padding:0.75rem 1.5rem;
    background:hsl(var(--color-primary) / 0.1); border:1px solid hsl(var(--color-primary) / 0.2);
    border-radius:9999px; backdrop-filter:blur(8px); margin-bottom:2.5rem;
}
.dot { position:relative; width:0.625rem; height:0.625rem; }
.dot-ping { position:absolute; inset:0; border-radius:9999px; background:hsl(var(--color-primary)); opacity:0.75; animation:ping 1.2s cubic-bezier(0,0,0.2,1) infinite; }
.dot-core { position:relative; display:block; width:0.625rem; height:0.625rem; border-radius:9999px; background:hsl(var(--color-primary)); }
.hero-badge-text { font-size:1rem; font-weight:600; color:hsl(var(--color-primary)); }

.hero h1 { font-size:clamp(3rem,6vw,5rem); font-weight:700; line-height:1.05; letter-spacing:-0.025em; margin-bottom:0.5rem; }
.gradient-text {
    background:linear-gradient(90deg,hsl(var(--color-primary)),hsl(var(--color-secondary)));
    background-size:200% 100%; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; animation:gradientX 3s ease infinite;
}
.hero-desc { font-size:1.25rem; color:hsl(var(--color-muted)); max-width:42rem; line-height:1.7; margin:2rem 0 3rem; }

.hero-cta { display:flex; flex-wrap:wrap; gap:1.25rem; margin-bottom:3rem; }
.hero-cta a { display:inline-flex; align-items:center; gap:0.5rem; padding:1.25rem 2.5rem; font-weight:600; font-size:1.125rem; color:#fff; border-radius:0.75rem; transition:all 0.3s; }
.hero-cta a svg { width:1.5rem; height:1.5rem; transition:transform 0.3s; }
.cta-primary { background:hsl(var(--color-primary)); box-shadow:0 8px 32px hsl(var(--color-primary) / 0.3); }
.cta-primary:hover { background:hsl(var(--color-primary) / 0.9); transform:scale(1.05); }
.cta-primary:hover .arrow { transform:translateX(4px); }
.cta-secondary { background:hsl(var(--color-primary) / 0.9); box-shadow:0 8px 32px hsl(var(--color-primary) / 0.2); }
.cta-secondary:hover { background:hsl(var(--color-primary) / 0.8); transform:scale(1.05); }

.trust-badges { display:flex; flex-wrap:wrap; gap:1.25rem; }
.trust-badge { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background:hsl(var(--color-success) / 0.1); border:1px solid hsl(var(--color-success) / 0.3); border-radius:9999px; color:hsl(var(--color-success)); font-weight:500; font-size:0.875rem; }
.trust-badge svg { width:1.25rem; height:1.25rem; }

.hero-illustration { position:relative; display:none; }
@media (min-width:1024px) { .hero-illustration { display:block; } }
.hero-illustration .glow { position:absolute; border-radius:9999px; pointer-events:none; z-index:-1; }
.glow-1 { left:50%;top:50%;transform:translate(-50%,-50%);width:350px;height:350px;background:linear-gradient(to top right,hsl(var(--color-primary)/0.3),hsl(var(--color-secondary)/0.3));opacity:0.5;filter:blur(60px); }
.glow-2 { left:25%;top:25%;width:250px;height:250px;background:linear-gradient(to bottom right,hsl(var(--color-secondary)/0.2),hsl(var(--color-primary)/0.2));opacity:0.4;filter:blur(40px); }
.glow-3 { right:25%;bottom:25%;width:300px;height:300px;background:linear-gradient(to top left,hsl(var(--color-primary)/0.25),hsl(var(--color-secondary)/0.25));opacity:0.45;filter:blur(60px); }
.hero-image-wrap { position:relative; animation:float 4s ease-in-out infinite; }
.hero-image-wrap img { width:100%; height:auto; object-fit:contain; user-select:none; -webkit-user-drag:none; }

/* ═══ Statistics ═══ */
.stats-section { padding:2rem; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; max-width:1280px; margin:0 auto; }
@media (min-width:1024px) { .stats-grid { grid-template-columns:repeat(4,1fr); } }
.stat-card { text-align:center; padding:1.5rem; border-radius:0.75rem; background:linear-gradient(to bottom right,hsl(var(--color-background-secondary)/0.5),hsl(var(--color-background)/0.5)); border:1px solid hsl(var(--color-neutral)/0.5); transition:all 0.3s; }
.stat-card:hover { transform:scale(1.05); }
.stat-icon { display:inline-flex; align-items:center; justify-content:center; width:3.5rem; height:3.5rem; border-radius:0.75rem; margin-bottom:1rem; }
.stat-icon svg { width:1.75rem; height:1.75rem; }
.stat-icon.success { background:hsl(var(--color-success)/0.1); color:hsl(var(--color-success)); }
.stat-icon.primary { background:hsl(var(--color-primary)/0.1); color:hsl(var(--color-primary)); }
.stat-icon.purple { background:hsl(270 60% 60%/0.1); color:hsl(270 60% 60%); }
.stat-icon.orange { background:hsl(25 95% 53%/0.1); color:hsl(25 95% 53%); }
.stat-value { font-size:1.875rem; font-weight:700; margin-bottom:0.5rem; }
.stat-label { font-size:0.875rem; font-weight:600; }
.stat-sub { font-size:0.75rem; color:hsl(var(--color-muted)); margin-top:0.25rem; }

/* ═══ Features ═══ */
.features-section { padding:5rem 2rem; }
.features-grid { display:grid; gap:1.5rem; grid-template-columns:1fr; max-width:1280px; margin:0 auto; }
@media (min-width:768px)  { .features-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .features-grid { grid-template-columns:repeat(3,1fr); } }
.feature-card { padding:2rem; border-radius:0.75rem; background:linear-gradient(to bottom right,hsl(var(--color-primary)/0.05),transparent); border:1px solid hsl(var(--color-primary)/0.2); transition:all 0.3s; }
.feature-card:hover { border-color:hsl(var(--color-primary)/0.4); transform:translateY(-4px); }
.feature-icon { display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:0.75rem; background:hsl(var(--color-primary)/0.1); color:hsl(var(--color-primary)); margin-bottom:1.5rem; }
.feature-icon svg { width:1.5rem; height:1.5rem; }
.feature-card h3 { font-size:1.25rem; font-weight:700; margin-bottom:0.75rem; }
.feature-card p { color:hsl(var(--color-muted)); line-height:1.6; }

/* ═══ Services ═══ */
.services-section { padding:5rem 2rem; }
.services-grid { display:grid; gap:1.5rem; grid-template-columns:1fr; max-width:1280px; margin:0 auto; }
@media (min-width:768px)  { .services-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .services-grid { grid-template-columns:repeat(3,1fr); } }
.service-card { border-radius:0.75rem; overflow:hidden; background:hsl(var(--color-background-secondary)); border:1px solid hsl(var(--color-neutral)/0.5); transition:all 0.3s; }
.service-card:hover { border-color:hsl(var(--color-primary)/0.5); transform:scale(1.02); }
.service-img { height:12rem; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
.service-card:hover .service-img svg { transform:scale(1.1); }
.service-img svg { transition:transform 0.3s; }
.service-body { padding:1.5rem; }
.service-body h3 { font-size:1.25rem; font-weight:700; margin-bottom:0.5rem; transition:color 0.3s; }
.service-card:hover .service-body h3 { color:hsl(var(--color-primary)); }
.service-body .desc { font-size:0.875rem; color:hsl(var(--color-muted)); margin-bottom:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.view-link { display:inline-flex; align-items:center; gap:0.5rem; color:hsl(var(--color-primary)); font-weight:600; transition:gap 0.3s; }
.view-link:hover { gap:0.75rem; }
.view-link svg { width:1rem; height:1rem; }

/* ═══ Testimonials ═══ */
.testimonials-section { padding:5rem 2rem; }
.testimonials-grid { display:grid; gap:2rem; grid-template-columns:1fr; max-width:1280px; margin:0 auto; }
@media (min-width:768px) { .testimonials-grid { grid-template-columns:repeat(3,1fr); } }
.testimonial-card { padding:2rem; border-radius:0.75rem; background:hsl(var(--color-background-secondary)/0.8); border:1px solid hsl(var(--color-neutral)/0.5); transition:all 0.3s; }
.testimonial-card:hover { border-color:hsl(var(--color-primary)/0.3); }
.testimonial-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.testimonial-avatar { width:3rem; height:3rem; border-radius:9999px; background:linear-gradient(to bottom right,hsl(var(--color-primary)),hsl(var(--color-primary)/0.6)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; flex-shrink:0; }
.testimonial-header h4 { font-weight:700; }
.testimonial-role { font-size:0.875rem; color:hsl(var(--color-muted)); }
.testimonial-card .quote { color:hsl(var(--color-muted)); font-style:italic; margin-bottom:1rem; line-height:1.6; }
.stars { display:flex; gap:0.25rem; }
.stars svg { width:1rem; height:1rem; color:hsl(var(--color-warning)); fill:currentColor; }

/* ═══ FAQ — smooth animation ═══ */
.faq-section { padding:5rem 2rem; }
.faq-list { max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.faq-item { border:1px solid hsl(var(--color-neutral)/0.5); border-radius:0.75rem; overflow:hidden; background:hsl(var(--color-background-secondary)); transition:border-color 0.3s; }
.faq-item:hover { border-color:hsl(var(--color-primary)/0.3); }
.faq-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.5rem; text-align:left; background:none; border:none; color:hsl(var(--color-base)); font-size:1.125rem; font-weight:600; }
.faq-icon { flex-shrink:0; color:hsl(var(--color-primary)); font-size:1.5rem; font-weight:300; transition:transform 0.3s ease; }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.35s ease; }
.faq-answer.open { grid-template-rows:1fr; }
.faq-answer-inner { overflow:hidden; color:hsl(var(--color-muted)); line-height:1.6; }
.faq-answer-inner > div { padding:0 1.5rem 1.5rem; }

/* ═══ CTA ═══ */
.cta-section { padding:6rem 2rem; }
.cta-box { max-width:1280px; margin:0 auto; background:linear-gradient(to bottom right,hsl(var(--color-primary)/0.1),hsl(var(--color-secondary)/0.05),hsl(var(--color-background))); border:1px solid hsl(var(--color-neutral)/0.1); border-radius:1.5rem; padding:3rem; box-shadow:0 20px 40px rgba(0,0,0,0.1); backdrop-filter:blur(12px); display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
.dark .cta-box { box-shadow:0 20px 40px rgba(0,0,0,0.3); }
@media (min-width:768px) { .cta-box { grid-template-columns:1fr 1fr; } }
.cta-box h2 { font-size:clamp(1.875rem,3vw,2.25rem); font-weight:700; margin-bottom:1.5rem; }
.cta-gradient-text { background:linear-gradient(90deg,hsl(var(--color-primary)),hsl(var(--color-secondary))); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cta-subtitle { font-size:1.25rem; color:hsl(var(--color-muted)); }
.cta-buttons { display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-start; }
@media (min-width:768px) { .cta-buttons { justify-content:flex-end; } }
.cta-buttons a { display:inline-flex; align-items:center; gap:0.5rem; padding:1rem 2rem; font-weight:600; border-radius:0.75rem; transition:all 0.3s; }
.cta-buttons a svg { width:1.25rem; height:1.25rem; }
.cta-btn-primary { background:linear-gradient(90deg,hsl(var(--color-primary)),hsl(var(--color-secondary))); color:#fff; box-shadow:0 8px 24px hsl(var(--color-primary)/0.3); }
.cta-btn-primary:hover { box-shadow:0 12px 32px hsl(var(--color-primary)/0.5); }
.cta-btn-secondary { background:hsl(var(--color-background)); border:1px solid hsl(var(--color-primary)/0.3); color:hsl(var(--color-base)); }
.cta-btn-secondary:hover { background:hsl(var(--color-primary)/0.1); }

/* ═══ Footer ═══ */
.site-footer { margin:2rem 2.5rem; border-radius:0.75rem; background:hsl(var(--color-background-secondary)/0.8); backdrop-filter:blur(12px); border:1px solid hsl(var(--color-neutral)/0.5); }
.footer-inner { padding:3rem 2.5rem; }
.footer-cols { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:768px) { .footer-cols { grid-template-columns:1.5fr 1fr 1fr 1fr; } }
.footer-brand { }
.footer-brand-logo { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; }
.footer-brand-logo img { height:3rem; width:auto; }
.footer-brand-logo span { font-size:1.125rem; font-weight:700; }
.footer-brand p { font-size:0.875rem; color:hsl(var(--color-muted)); line-height:1.6; }
.footer-brand-socials { display:flex; gap:0.75rem; margin-top:1rem; }
.footer-brand-socials a {
    display:flex; align-items:center; justify-content:center;
    width:2.25rem; height:2.25rem; border-radius:0.5rem;
    background:hsl(var(--color-neutral)/0.2); color:hsl(var(--color-muted));
    transition:all 0.2s;
}
.footer-brand-socials a:hover { background:hsl(var(--color-primary)/0.15); color:hsl(var(--color-primary)); transform:scale(1.1); }
.footer-brand-socials svg { width:1.125rem; height:1.125rem; }
.footer-section h4 { font-weight:600; margin-bottom:0.75rem; }
.footer-section li { font-size:0.875rem; color:hsl(var(--color-muted)); padding:0.25rem 0; }
.footer-section a { color:hsl(var(--color-muted)); transition:color 0.2s; }
.footer-section a:hover { color:hsl(var(--color-primary)); }
.footer-copyright { font-size:0.75rem; color:hsl(var(--color-muted)/0.5); text-align:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid hsl(var(--color-neutral)/0.3); }

/* ═══ Service Detail Pages ═══ */
.page-hero { padding:7rem 2rem 4rem; text-align:center; }
.page-hero h1 { font-size:clamp(2.5rem,5vw,3.5rem); font-weight:700; margin-bottom:1rem; }
.page-hero p { font-size:1.25rem; color:hsl(var(--color-muted)); max-width:48rem; margin:0 auto 3rem; line-height:1.7; }

/* ── Tier Tabs (Budget / Extreme toggle) ── */
.tier-tabs { display:flex; justify-content:center; gap:0.5rem; margin-bottom:2.5rem; }
.tier-tab {
    padding:0.75rem 2rem; font-size:0.875rem; font-weight:600; border-radius:0.5rem;
    background:hsl(var(--color-neutral)/0.15); border:1px solid hsl(var(--color-neutral)/0.3);
    color:hsl(var(--color-muted)); cursor:pointer; transition:all 0.25s;
}
.tier-tab:hover { border-color:hsl(var(--color-primary)/0.3); color:hsl(var(--color-base)); }
.tier-tab.active {
    background:hsl(var(--color-primary)); border-color:hsl(var(--color-primary));
    color:#fff; box-shadow:0 4px 16px hsl(var(--color-primary)/0.3);
}
.tier-panel { display:none; }
.tier-panel.active { display:block; }

.tier-section { padding:2rem 2rem 5rem; }
.tier-label { text-align:center; margin-bottom:2rem; }
.tier-label h2 { font-size:1.5rem; font-weight:700; margin-bottom:0.5rem; }
.tier-label p { font-size:0.875rem; color:hsl(var(--color-muted)); max-width:36rem; margin:0 auto; line-height:1.5; }

.pricing-grid { display:grid; gap:1.5rem; grid-template-columns:1fr; max-width:1280px; margin:0 auto; }
@media (min-width:640px) { .pricing-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .pricing-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1440px) { .pricing-grid { grid-template-columns:repeat(4,1fr); } }

.pricing-card {
    padding:2rem; border-radius:0.75rem;
    background:hsl(var(--color-background-secondary)); border:1px solid hsl(var(--color-neutral)/0.5);
    transition:all 0.3s; display:flex; flex-direction:column;
}
.pricing-card:hover { border-color:hsl(var(--color-primary)/0.5); transform:translateY(-4px); }
.pricing-card h3 { font-size:1rem; font-weight:700; margin-bottom:1rem; color:hsl(var(--color-primary)); }
.pricing-card .price { font-size:2rem; font-weight:700; margin-bottom:1.5rem; }
.pricing-card .price small { font-size:0.875rem; font-weight:400; color:hsl(var(--color-muted)); }
.pricing-card .specs { list-style:none; margin-bottom:1.5rem; flex-grow:1; }
.pricing-card .specs li { padding:0.375rem 0; font-size:0.875rem; color:hsl(var(--color-muted)); display:flex; align-items:center; gap:0.5rem; }
.pricing-card .specs li svg { width:1rem; height:1rem; color:hsl(var(--color-success)); flex-shrink:0; }
.pricing-card .buy-btn {
    display:block; text-align:center; padding:0.875rem; border-radius:0.5rem;
    background:hsl(var(--color-primary)); color:#fff; font-weight:600; transition:all 0.3s;
}
.pricing-card .buy-btn:hover { background:hsl(var(--color-primary)/0.85); transform:scale(1.02); }

.custom-cta { text-align:center; padding:3rem 2rem; max-width:48rem; margin:0 auto; }
.custom-cta h3 { font-size:1.5rem; font-weight:700; margin-bottom:1rem; }
.custom-cta p { color:hsl(var(--color-muted)); margin-bottom:1.5rem; font-size:1rem; line-height:1.6; }
.custom-cta a { display:inline-flex; align-items:center; gap:0.5rem; padding:1rem 2rem; background:hsl(var(--color-primary)); color:#fff; font-weight:600; border-radius:0.75rem; transition:all 0.3s; }
.custom-cta a:hover { transform:scale(1.05); }

.vds-notice {
    max-width:48rem; margin:0 auto; padding:3rem; border-radius:0.75rem; text-align:center;
    background:linear-gradient(to bottom right,hsl(var(--color-primary)/0.08),hsl(var(--color-secondary)/0.04));
    border:1px solid hsl(var(--color-primary)/0.2);
}
.vds-notice h3 { font-size:1.5rem; font-weight:700; margin-bottom:1rem; }
.vds-notice p { color:hsl(var(--color-muted)); margin-bottom:1.5rem; line-height:1.6; }
.vds-notice p a { color:hsl(var(--color-primary)); text-decoration:underline; }
.vds-notice > a { display:inline-flex; align-items:center; gap:0.5rem; padding:1rem 2rem; background:hsl(var(--color-primary)); color:#fff; font-weight:600; border-radius:0.75rem; transition:all 0.3s; }
.vds-notice > a:hover { transform:scale(1.05); }