/* ═══════════════════════════════════════════
   Velcord.net — Website 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-foreground: 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-foreground: 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;
    position: relative;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}

body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(80rem 46rem at 88% -8%, hsl(var(--color-primary) / 0.14), transparent 70%),
        radial-gradient(70rem 40rem at 8% 28%, hsl(var(--color-secondary) / 0.1), transparent 72%),
        radial-gradient(78rem 44rem at 92% 58%, hsl(var(--color-primary) / 0.11), transparent 72%),
        radial-gradient(64rem 38rem at 14% 86%, hsl(var(--color-secondary) / 0.09), transparent 72%);
    background-repeat: no-repeat;
}

/* Slightly softer typography for service detail pages. */
body.smooth-font-page {
    font-family: 'Manrope', 'Figtree', sans-serif;
}

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); }
}
@keyframes loaderPulse {
    0%, 100% { opacity:1; transform:scale(1); }
    50% { opacity:0.6; transform:scale(0.95); }
}
@keyframes loaderBar {
    0% { width:0%; }
    50% { width:70%; }
    100% { width:100%; }
}
.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; }

/* Shared loader + transition across all pages */
.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(220, 20%, 98%);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.loader-inner {
    text-align: center;
}
.loader-logo {
    height: 4rem;
    width: auto;
    max-width: none;
    margin: 0 auto 1.5rem;
    animation: loaderPulse 1.5s ease-in-out infinite;
}
.loader-track {
    width: 160px;
    height: 3px;
    background: hsl(220, 25%, 90%);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}
.loader-bar {
    height: 100%;
    width: 0%;
    background: hsl(222, 100%, 50%);
    border-radius: 3px;
    animation: loaderBar 1.2s ease-in-out forwards;
}
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: hsl(220, 20%, 98%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
html.dark .loader-overlay {
    background: hsl(222, 28%, 7%);
}
html.dark .loader-track {
    background: hsl(220, 20%, 18%);
}
html.dark .page-transition {
    background: hsl(222, 28%, 7%);
}
#loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── 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; }

@media (max-width: 767px) {
    body::before {
        background:
            radial-gradient(36rem 22rem at 90% -8%, hsl(var(--color-primary) / 0.12), transparent 70%),
            radial-gradient(32rem 20rem at 12% 32%, hsl(var(--color-secondary) / 0.09), transparent 72%),
            radial-gradient(34rem 22rem at 88% 66%, hsl(var(--color-primary) / 0.1), transparent 72%),
            radial-gradient(28rem 18rem at 8% 92%, hsl(var(--color-secondary) / 0.08), transparent 72%);
    }
}

/* ═══ 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 floatSync {
    0%,100% { transform:translate3d(0,0,0) scale(calc(var(--float-scale, 1) * var(--hover-scale, 1))); }
    25% { transform:translate3d(0,-4px,0) scale(calc(var(--float-scale, 1) * var(--hover-scale, 1))); }
    50% { transform:translate3d(0,-10px,0) scale(calc(var(--float-scale, 1) * var(--hover-scale, 1))); }
    75% { transform:translate3d(0,-4px,0) scale(calc(var(--float-scale, 1) * var(--hover-scale, 1))); }
}
@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;
    width: 100%;
    z-index: 1000;
    padding: 1.25rem 2rem;
    transition: padding 0.4s;
}
.navbar.is-scrolled { padding: 0.75rem 2rem; }

.navbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    display:flex; align-items:center; justify-content:space-between;
    min-height: 3.5rem;
    border: 1px solid transparent;
    background: transparent;
    position: relative;
    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.32rem 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; flex-wrap:nowrap; }
.nav-links a {
    padding:0.58rem 1rem; font-size:0.875rem; font-weight:600;
    color:hsl(var(--color-base) / 0.8); border-radius:0.5rem; transition:all 0.2s; white-space:nowrap;
}
.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.68rem 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.65rem; height:2.65rem; 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) {
    .navbar { padding: 1rem; }
    .navbar.is-scrolled { padding: 0.75rem 1rem; }

    .navbar-inner {
        border-radius: 0.75rem;
        box-shadow: none;
    }

    .nav-links { display:none; }
    .nav-actions > .btn-nav { display:none; }
    .mobile-toggle { display:flex; }

    .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:1024px) { .mobile-menu { display:none !important; } }

@media (max-width:1200px) {
    .navbar { padding: 1rem 1.25rem; }
    .navbar.is-scrolled { padding: 0.75rem 1.25rem; }
    .nav-links { gap: 0; margin-left: 0.25rem; }
    .nav-links a { padding: 0.52rem 0.78rem; font-size: 0.84rem; }
    .btn-nav { padding: 0.62rem 1.05rem; font-size: 0.84rem; }
}

/* ═══ 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 {
    display:inline-block;
    color:hsl(var(--color-primary));
    background:linear-gradient(90deg,hsl(var(--color-primary)),hsl(var(--color-secondary)));
    background-size:200% 100%;
    animation:gradientX 3s ease infinite;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
    .gradient-text {
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
        color:transparent;
    }
}
.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.7rem;
    padding:1rem 1.4rem;
    min-width:16rem;
    font-weight:600;
    font-size:1.08rem;
    color:#fff;
    border-radius:0.75rem;
    transition:all 0.3s;
}
.hero-cta .cta-icon {
    width:1.55rem;
    height:1.55rem;
    object-fit:contain;
    flex-shrink:0;
}
html:not(.dark) .hero-cta .cta-secondary .cta-icon {
    filter: brightness(0) saturate(100%) opacity(0.85);
}
html.dark .hero-cta .cta-secondary .cta-icon {
    filter: none;
}
.cta-label-group {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.12rem;
    line-height:1.1;
}
.cta-label { font-weight:700; }
.cta-micro {
    font-size:0.75rem;
    font-weight:600;
    opacity:0.88;
    letter-spacing:0.01em;
}
.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-secondary {
    background:hsl(var(--color-background-secondary) / 0.45);
    color:hsl(var(--color-base));
    border:2px solid hsl(var(--color-primary));
    box-shadow:inset 0 1px 0 hsl(0 0% 100% / 0.08);
}
.hero-cta a.cta-secondary {
    color:hsl(var(--color-base));
}
.cta-secondary:hover {
    background:hsl(var(--color-background-secondary) / 0.7);
    border-color:hsl(var(--color-primary));
    box-shadow:0 10px 24px hsl(var(--color-primary) / 0.22);
    transform:scale(1.05);
}
@media (max-width:640px) {
    .hero-cta a {
        min-width:100%;
        justify-content:flex-start;
    }
}

.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;
    min-height:40rem;
    top:2.2rem;
}
@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:45%;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:20%;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:30%;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;
    --float-scale: 1.15;
    animation:floatSync 5.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    will-change:transform;
}
.hero-image-wrap img { width:100%; height:auto; object-fit:contain; user-select:none; -webkit-user-drag:none; }

.hero-side-badge {
    --badge-accent: var(--color-primary);
    --float-scale: 1;
    --hover-scale: 1;
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:0.52rem;
    min-width:9.7rem;
    padding:0.52rem 0.62rem;
    border-radius:0.74rem;
    border:1px solid hsl(var(--color-neutral) / 0.34);
    background:hsl(var(--color-background-secondary) / 0.7);
    box-shadow:0 6px 14px rgba(5, 10, 24, 0.18);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    animation:floatSync 5.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    transition:box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change:transform;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
}
.hero-side-badge:hover {
    --hover-scale: 1.03;
    border-color:hsl(var(--badge-accent) / 0.45);
    box-shadow:0 10px 24px hsl(var(--badge-accent) / 0.26);
}
.hero-side-badge-icon {
    width:1.72rem;
    height:1.72rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:0.5rem;
    color:hsl(var(--badge-accent));
    border:1px solid hsl(var(--color-neutral) / 0.3);
    background:hsl(var(--badge-accent) / 0.12);
    transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-side-badge:hover .hero-side-badge-icon {
    transform:scale(1.04);
    border-color:hsl(var(--badge-accent) / 0.5);
    background:hsl(var(--badge-accent) / 0.16);
}
.hero-side-badge-icon svg { width:0.84rem; height:0.84rem; }
.hero-side-badge-copy {
    display:flex;
    flex-direction:column;
    line-height:1.05;
    gap:0.12rem;
}
.hero-side-badge-label {
    font-size:0.55rem;
    font-weight:600;
    letter-spacing:0.09em;
    color:hsl(var(--color-muted));
    text-transform:uppercase;
}
.hero-side-badge-value {
    font-family:'Figtree', sans-serif;
    font-size:0.86rem;
    font-weight:700;
    color:hsl(var(--color-base));
    letter-spacing:0;
}

.hero-side-badge-launch { --badge-accent: var(--color-primary); top:21.5%; left:9%; }
.hero-side-badge-storage { --badge-accent: var(--color-primary); top:56%; left:4%; }
.hero-side-badge-protect { --badge-accent: var(--color-primary); right:3.5%; bottom:33%; }

@media (max-width:1280px) and (min-width:1024px) {
    .hero-illustration { min-height:35rem; top:2.4rem; }
    .glow-1 { top:47%; }
    .glow-2 { top:22%; }
    .glow-3 { bottom:27%; }
    .hero-side-badge { min-width:8.8rem; padding:0.46rem 0.52rem; gap:0.42rem; }
    .hero-side-badge-icon { width:1.56rem; height:1.56rem; }
    .hero-side-badge-icon svg { width:0.76rem; height:0.76rem; }
    .hero-side-badge-value { font-size:0.8rem; }
    .hero-side-badge-label { font-size:0.52rem; }
    .hero-side-badge-launch { top:20%; left:7%; }
    .hero-side-badge-storage { top:53%; left:3%; }
    .hero-side-badge-protect { right:2.8%; bottom:29%; }
}

/* ═══ Statistics ═══ */
.stats-section { padding:2.25rem 2rem 3rem; position:relative; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; max-width:1280px; margin:0 auto; }
@media (min-width:1024px) { .stats-grid { grid-template-columns:repeat(4,1fr); } }
.stat-card {
    --stat-accent: var(--color-primary);
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:1.6rem 1.3rem;
    border-radius:0.9rem;
    background:linear-gradient(170deg,hsl(var(--color-background-secondary)/0.92),hsl(var(--color-background)/0.7));
    border:1px solid hsl(var(--stat-accent)/0.4);
    box-shadow:0 12px 28px hsl(var(--stat-accent)/0.14), inset 0 1px 0 hsl(0 0% 100%/0.06);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.stat-card::before {
    content:"";
    position:absolute;
    inset:-28% -10% auto;
    height:78%;
    border-radius:999px;
    background:radial-gradient(circle,hsl(var(--stat-accent)/0.34) 0%, hsl(var(--stat-accent)/0) 70%);
    filter:blur(18px);
    opacity:0.7;
    animation:statBreath 3.2s ease-in-out infinite;
    pointer-events:none;
}
.stat-card::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,hsl(var(--stat-accent)/0.08),hsl(var(--stat-accent)/0.02) 45%,transparent 100%);
    pointer-events:none;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 18px 36px hsl(var(--stat-accent)/0.2), inset 0 1px 0 hsl(0 0% 100%/0.1); }
.stat-card > * { position:relative; z-index:1; }

.stat-card[data-accent="success"] { --stat-accent: 142 71% 45%; }
.stat-card[data-accent="primary"] { --stat-accent: 222 100% 50%; }
.stat-card[data-accent="purple"] { --stat-accent: 282 82% 58%; }
.stat-card[data-accent="orange"] { --stat-accent: 25 95% 53%; }

.stat-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:3.65rem;
    height:3.65rem;
    border-radius:0.9rem;
    margin-bottom:1rem;
    border:1px solid hsl(var(--stat-accent)/0.45);
    background:linear-gradient(180deg,hsl(var(--stat-accent)/0.28),hsl(var(--stat-accent)/0.14));
    box-shadow:0 10px 22px hsl(var(--stat-accent)/0.28), inset 0 1px 0 hsl(0 0% 100%/0.3);
    color:hsl(var(--stat-accent));
}
.stat-icon svg { width:1.9rem; height:1.9rem; stroke-width:2.2; }
.stat-value {
    font-size:2.1rem;
    font-weight:800;
    letter-spacing:-0.01em;
    margin-bottom:0.4rem;
    color:hsl(var(--stat-accent));
    text-shadow:0 0 20px hsl(var(--stat-accent)/0.35);
}
.stat-label { font-size:0.92rem; font-weight:700; color:hsl(var(--color-foreground)); }
.stat-sub { font-size:0.76rem; color:hsl(var(--color-muted)); margin-top:0.25rem; }

@keyframes statBreath {
    0%, 100% { transform:scale(0.96); opacity:0.58; }
    50% { transform:scale(1.06); opacity:0.92; }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card::before { animation:none; }
}

/* ═══ 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; }

/* ═══ Live Deployment ═══ */
.deployment-section {
    padding: 1rem 2rem 5rem;
}
.deployment-header { margin-bottom: 3rem; }
.deployment-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.44rem 0.8rem;
    margin-bottom: 1rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--color-primary) / 0.35);
    background: hsl(var(--color-primary) / 0.1);
    color: hsl(var(--color-secondary));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.deployment-eyebrow-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: hsl(var(--color-success));
    box-shadow: 0 0 0 0 hsl(var(--color-success) / 0.5);
    animation: deploymentEyebrowPulse 2s ease-out infinite;
}
.deployment-header h2 { max-width: 58rem; margin: 0 auto 1rem; }

.deployment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
}
@media (min-width:1024px) {
    .deployment-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: center;
        gap: 2.5rem;
    }
}

.deployment-copy h3 {
    font-size: clamp(1.5rem, 2.3vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.9rem;
}
.deployment-copy > p {
    color: hsl(var(--color-muted));
    line-height: 1.7;
    margin-bottom: 1.6rem;
    max-width: 34rem;
}
.deployment-steps {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    margin-bottom: 1.8rem;
}
.deployment-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: hsl(var(--color-muted));
    line-height: 1.55;
    font-size: 0.96rem;
}
.deployment-steps li b { color: hsl(var(--color-base)); }
.deployment-step-num {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--color-primary) / 0.12);
    border: 1px solid hsl(var(--color-primary) / 0.38);
    color: hsl(var(--color-primary));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.deployment-cta-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.deployment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 0.72rem;
    padding: 0.82rem 1.15rem;
    font-weight: 600;
    font-size: 0.93rem;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}
.deployment-btn:hover { transform: translateY(-1px); }
.deployment-btn.primary {
    background: hsl(var(--color-primary));
    color: #fff;
    box-shadow: 0 10px 24px hsl(var(--color-primary) / 0.28);
}
.deployment-btn.primary:hover { background: hsl(var(--color-primary) / 0.9); }
.deployment-btn.ghost {
    background: hsl(var(--color-background-secondary));
    border-color: hsl(var(--color-neutral) / 0.55);
    color: hsl(var(--color-base));
}
.deployment-btn.ghost:hover {
    border-color: hsl(var(--color-primary) / 0.45);
    color: hsl(var(--color-primary));
}
.deployment-btn svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

.deployment-terminal {
    border-radius: 0.95rem;
    overflow: hidden;
    background: linear-gradient(180deg, hsl(222 45% 7%), hsl(222 45% 5%));
    border: 1px solid hsl(var(--color-primary) / 0.35);
    box-shadow: 0 30px 50px hsl(220 60% 4% / 0.5), 0 0 40px hsl(var(--color-primary) / 0.24);
}
.deployment-terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.95rem;
    border-bottom: 1px solid hsl(var(--color-neutral) / 0.35);
    background: hsl(222 44% 9%);
}
.deployment-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
}
.deployment-dot.red { background: #ff5f57; }
.deployment-dot.yellow { background: #febc2e; }
.deployment-dot.green { background: #28c840; }
.deployment-terminal-title {
    margin-left: 0.4rem;
    margin-right: auto;
    color: hsl(220 15% 70%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
    font-size: 0.72rem;
}
.deployment-terminal-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: hsl(var(--color-success));
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.deployment-terminal-live::before {
    content: "";
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 9999px;
    background: hsl(var(--color-success));
    box-shadow: 0 0 12px hsl(var(--color-success));
    animation: deploymentPulse 1.8s ease-out infinite;
}

.deployment-terminal-body {
    min-height: 21rem;
    padding: 1.2rem 1.35rem;
    color: hsl(220 16% 84%);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
    font-size: 0.82rem;
    line-height: 1.85;
}
.deployment-term-line {
    display: block;
    opacity: 0;
}
.deployment-term-line.shown {
    opacity: 1;
    animation: deploymentLineIn 0.2s ease;
}
.deployment-term-prompt { color: hsl(var(--color-secondary)); font-weight: 700; }
.deployment-term-cmd { color: hsl(0 0% 96%); }
.deployment-term-out { color: hsl(220 13% 66%); }
.deployment-term-info { color: hsl(213 100% 76%); }
.deployment-term-highlight { color: hsl(40 98% 66%); }
.deployment-term-ok { color: hsl(var(--color-success)); font-weight: 700; }
.deployment-term-cursor {
    display: inline-block;
    width: 0.5rem;
    height: 0.92rem;
    margin-left: 0.2rem;
    background: hsl(var(--color-secondary));
    vertical-align: -2px;
    animation: deploymentCursorBlink 1s steps(1) infinite;
}

.deployment-terminal-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: hsl(var(--color-neutral) / 0.4);
    border-top: 1px solid hsl(var(--color-neutral) / 0.35);
}
.deployment-stat {
    background: hsl(222 45% 7%);
    padding: 0.82rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.deployment-stat-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.62rem;
    color: hsl(220 13% 60%);
    font-weight: 700;
}
.deployment-stat-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
    font-size: 0.93rem;
    font-weight: 700;
    color: hsl(0 0% 96%);
}
.deployment-stat-value.good {
    color: hsl(var(--color-success));
    text-shadow: 0 0 14px hsl(var(--color-success) / 0.3);
}

@keyframes deploymentPulse {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--color-success) / 0.45); }
    65% { box-shadow: 0 0 0 8px hsl(var(--color-success) / 0); }
}
@keyframes deploymentEyebrowPulse {
    0% { box-shadow: 0 0 0 0 hsl(var(--color-success) / 0.45); }
    70% { box-shadow: 0 0 0 7px hsl(var(--color-success) / 0); }
    100% { box-shadow: 0 0 0 0 hsl(var(--color-success) / 0); }
}
@keyframes deploymentLineIn {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes deploymentCursorBlink {
    50% { opacity: 0; }
}

@media (max-width:767px) {
    .deployment-section { padding: 0.5rem 1rem 4rem; }
    .deployment-terminal-body {
        min-height: 18rem;
        font-size: 0.77rem;
        padding: 1rem;
    }
    .deployment-btn {
        width: 100%;
    }
}

/* ═══ 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.85rem;
    overflow:hidden;
    background:hsl(var(--color-background-secondary));
    border:1px solid hsl(var(--color-neutral)/0.45);
    transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    border-color:hsl(var(--color-primary)/0.55);
    transform:translateY(-4px);
    box-shadow:0 18px 38px hsl(var(--color-primary)/0.18);
}
.service-img {
    height:12rem;
    overflow:hidden;
    position:relative;
}
.service-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.45s ease, filter 0.45s ease;
}
.service-card:hover .service-img img { transform:scale(1.05); }

.service-media-overlay {
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:
        radial-gradient(120% 70% at 50% 44%, hsl(0 0% 100%/0.1) 0%, hsl(0 0% 100%/0) 62%),
        linear-gradient(180deg,hsl(0 0% 0%/0.04) 0%, hsl(216 94% 55%/0.38) 74%, hsl(222 47% 11%/0.86) 100%);
}
.service-media-overlay span {
    font-size:clamp(2rem, 3.5vw, 3.2rem);
    font-weight:900;
    line-height:1;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:hsl(0 0% 100%/0.96);
    text-shadow:0 12px 30px hsl(222 47% 10%/0.58);
}

.service-card-minecraft .service-img img { object-position:center 45%; filter:saturate(1.08) contrast(1.03); }
.service-card-vps .service-img img { object-position:center 28%; filter:saturate(1.02) hue-rotate(-8deg); }
.service-card-vds .service-img img { object-position:center 70%; filter:saturate(0.94) hue-rotate(12deg); }

.service-card-minecraft .service-media-overlay { background:linear-gradient(180deg,hsl(0 0% 0%/0.02) 0%, hsl(213 93% 56%/0.44) 72%, hsl(222 47% 11%/0.86) 100%); }
.service-card-vps .service-media-overlay { background:linear-gradient(180deg,hsl(0 0% 0%/0.02) 0%, hsl(216 96% 55%/0.4) 72%, hsl(222 47% 11%/0.86) 100%); }
.service-card-vds .service-media-overlay { background:linear-gradient(180deg,hsl(0 0% 0%/0.02) 0%, hsl(217 98% 54%/0.36) 72%, hsl(222 47% 11%/0.86) 100%); }

.service-card-minecraft .service-media-overlay span {
    font-family: "Minecraft", monospace;
    letter-spacing:0.02em;
    text-shadow:0 10px 26px hsl(222 47% 10%/0.55), 0 2px 0 hsl(0 0% 0%/0.35);
}

.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:flex-start; gap:1rem; margin-bottom:1rem; }
.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-meta { min-width:0; width:100%; }
.testimonial-header h4 { font-weight:700; }
.testimonial-role { font-size:0.875rem; color:hsl(var(--color-muted)); }
.testimonial-rating {
    display:flex;
    align-items:center;
    gap:0.45rem;
    width:fit-content;
    margin-top:0.55rem;
}
.testimonial-card .quote {
    color:hsl(var(--color-muted));
    font-style:italic;
    margin-top:0.15rem;
    line-height:1.6;
}
.stars { display:flex; gap:0.22rem; }
.stars svg {
    width:0.95rem;
    height:0.95rem;
    color:hsl(var(--color-warning));
    fill:currentColor;
    filter:drop-shadow(0 0 8px hsl(var(--color-warning)/0.45));
}
.rating-score {
    font-size:0.82rem;
    font-weight:700;
    color:hsl(var(--color-warning));
    text-shadow:0 0 10px hsl(var(--color-warning)/0.35);
}

/* ═══ 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.65rem;
    padding:0.9rem 1.15rem;
    min-width:17.5rem;
    font-weight:600;
    border-radius:0.75rem;
    transition:all 0.3s;
}
.cta-buttons a svg {
    width:1.2rem;
    height:1.2rem;
    flex-shrink:0;
}
.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); }
@media (max-width:768px) {
    .cta-buttons a {
        min-width:100%;
    }
}

/* ═══ 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 h1 .gradient-text { font-weight:900; }
.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.featured-plan,
.pricing-card.has-tag {
    position:relative;
    border-color:hsl(var(--color-primary)/0.65);
    box-shadow:0 14px 32px hsl(var(--color-primary)/0.22);
    transform:translateY(-4px);
}
.pricing-card.has-tag { position:relative; }
.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; }
.plan-badge {
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    padding:0.3rem 0.8rem;
    border-radius:999px;
    background:hsl(var(--color-primary));
    color:#fff;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.02em;
}
.plan-context {
    color:hsl(var(--color-primary));
    font-size:0.875rem;
    font-weight:700;
    margin-bottom:0.5rem;
}
.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.featured-plan .buy-btn,
.pricing-card.has-tag .buy-btn { box-shadow:0 10px 24px hsl(var(--color-primary)/0.28); }
.pricing-card .buy-btn:hover { background:hsl(var(--color-primary)/0.85); transform:scale(1.02); }
.plan-fit {
    margin-top:0.65rem;
    font-size:0.78rem;
    color:hsl(var(--color-muted));
    text-align:center;
}

.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); }

/* Floating Discord CTA */
@keyframes discordFabGlow {
    0%, 100% { box-shadow:0 8px 20px hsl(228 94% 52% / 0.26), 0 0 18px hsl(228 94% 56% / 0.2); }
    50% { box-shadow:0 10px 24px hsl(228 94% 52% / 0.34), 0 0 24px hsl(228 94% 56% / 0.28); }
}

.discord-fab {
    position:fixed;
    right:1.5rem;
    bottom:1.4rem;
    width:96px;
    height:96px;
    display:grid;
    place-items:center;
    z-index:60;
    border-radius:9999px;
}
.discord-fab-core {
    width:54px;
    height:54px;
    border-radius:9999px;
    display:grid;
    place-items:center;
    color:#ffffff;
    background:linear-gradient(145deg, hsl(228 93% 62%), hsl(234 88% 58%));
    box-shadow:0 8px 20px hsl(228 94% 52% / 0.26), 0 0 18px hsl(228 94% 56% / 0.2);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    animation:discordFabGlow 2.4s ease-in-out infinite;
}
.discord-fab-core svg {
    width:30px;
    height:30px;
}
.discord-fab-status {
    position:absolute;
    right:20px;
    bottom:19px;
    width:14px;
    height:14px;
    border-radius:9999px;
    background:hsl(142 90% 45%);
    border:2px solid hsl(var(--color-background));
    box-shadow:0 0 14px hsl(142 90% 45% / 0.65);
}
.discord-fab:hover .discord-fab-core {
    transform:scale(1.14) translateY(-2px);
    box-shadow:0 12px 28px hsl(228 94% 52% / 0.38), 0 0 28px hsl(228 94% 56% / 0.34);
}

@media (max-width:768px) {
    .discord-fab {
        right:1rem;
        bottom:1rem;
        width:80px;
        height:80px;
    }
    .discord-fab-core {
        width:46px;
        height:46px;
    }
    .discord-fab-core svg {
        width:25px;
        height:25px;
    }
    .discord-fab-status {
        right:16px;
        bottom:15px;
        width:12px;
        height:12px;
    }
}