/* =====================================================================
   GROWTHIVA · Modern Layer (v2)
   Loaded after style.css + animations.css. Overrides where needed.
   Type: Inter (body), Space Grotesk (display), JetBrains Mono (accents).
   Color theme unchanged — mint #69C291, red #FA454E, amber #FBB344.
   Aesthetic direction: editorial sans, generous whitespace, sharper
   hierarchy, restrained motion. Sketch fonts retired from main pages.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
    /* Type stack — modern, professional */
    --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Override the legacy sketch tokens so they cascade everywhere */
    --font-primary:   var(--font-display);
    --font-secondary: var(--font-body);

    /* Type scale (1.25 ratio) */
    --fs-xs:   12px;
    --fs-sm:   14px;
    --fs-base: 16px;
    --fs-md:   18px;
    --fs-lg:   22px;
    --fs-xl:   28px;
    --fs-2xl:  36px;
    --fs-3xl:  48px;
    --fs-4xl:  64px;
    --fs-5xl:  84px;

    /* Refined neutrals (OKLCH-style ink) */
    --ink-1: #0E0F11;
    --ink-2: #1A1C20;
    --ink-3: #36383F;
    --ink-4: #6A6E78;
    --ink-5: #A1A6B0;
    --paper-1: #FFFFFF;
    --paper-2: #F7F8F7;
    --paper-3: #ECEDEB;

    /* Accents anchored to existing brand tokens */
    --mint:   #69C291;
    --mint-2: #33A165;
    --mint-3: #1F7345;
    --red:    #FA454E;
    --amber:  #FBB344;

    /* Easing */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

    /* Elevation */
    --el-1: 0 1px 2px rgba(15,17,20,0.04), 0 2px 6px rgba(15,17,20,0.04);
    --el-2: 0 6px 18px rgba(15,17,20,0.06), 0 2px 6px rgba(15,17,20,0.04);
    --el-3: 0 24px 64px -24px rgba(15,17,20,0.18), 0 4px 12px rgba(15,17,20,0.04);
    --el-mint: 0 24px 60px -22px rgba(105,194,145,0.55);
}

/* ---------- 2. RESET / BASE ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body) !important;
    font-size: 16.5px;
    line-height: 1.6;
    letter-spacing: -0.005em;
    color: var(--ink-2);
    background: var(--paper-1);
    -webkit-font-smoothing: antialiased;
}

/* Kill the legacy sketch script everywhere except the doodles */
h1, h2, h3, h4, h5, h6,
.section-title, .hero-title, .page-hero h1,
.cta-content h2, .step-content h3, .feature-card h3,
.service-card h3, .pricing-card h3, .footer-links h4,
.footer-newsletter h4, .testimonial-author strong,
.contact-info-text h4, .contact-form h3, .contact-info-side h2,
.exp-number, .stat-number, .award-number, .step-number,
.pricing-card .price, .freelancer-card h3, .pkg-card-header h3,
.logo, .logo-mark, .logo-text, .logo-code,
.section-tag, .page-hero-tag, .pricing-badge,
.btn, .marquee-track .client-logo, .clients-label,
.faq-question h4 {
    font-family: var(--font-display) !important;
    letter-spacing: -0.02em;
}

/* Mono for tagged accents */
.section-tag, .page-hero-tag, .pricing-badge, .portfolio-category,
.clients-label, .stat-label, .award-label, .freelancer-rate span,
.pkg-keywords {
    font-family: var(--font-mono) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em !important;
    font-weight: 500;
    font-size: 11px !important;
}

/* Body copy */
p, li, .hero-subtitle, .section-subtitle, .about-text {
    font-family: var(--font-body) !important;
    letter-spacing: -0.005em;
}

/* ---------- 3. KILL ARTIFACTS WE NO LONGER WANT ---------- */
/* Old hand-drawn underline under gradient text — too sketchy for the new direction */
.section-title .gradient-text::after,
.hero-title .gradient-text::after,
.page-hero h1 .gradient-text::after,
.cta-content .gradient-text::after { display: none !important; }

/* Custom cursor — kill it; not on-brand for a professional site */
.cursor, .cursor-follower { display: none !important; }
body { cursor: auto !important; }

/* Doodles toned right down for main pages — barely there ambient */
.sketch-doodles .doodle { opacity: 0.5 !important; filter: saturate(0.85); }

/* ---------- 4. NAV ---------- */
.navbar { padding: 18px 0; transition: padding 0.25s var(--ease-out), background 0.25s ease; }
.navbar.scrolled {
    padding: 10px 0;
    background: rgba(255,255,255,0.78);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(15,17,20,0.06);
    box-shadow: 0 1px 0 rgba(15,17,20,0.02), 0 8px 24px -16px rgba(15,17,20,0.08);
}
.logo { font-size: 26px; font-weight: 700; }
.logo-mark { font-size: 30px; }
.logo-text { letter-spacing: -0.02em; }
.logo-code { font-family: var(--font-mono) !important; opacity: 0.55; }

.nav-links { gap: 4px; }
.nav-links a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink-3) !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.nav-links > li > a:hover,
.nav-links > li > a.active {
    background: rgba(105,194,145,0.10) !important;
    color: var(--mint-3) !important;
}

.dropdown-menu {
    border: 1px solid rgba(15,17,20,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px -20px rgba(15,17,20,0.18), 0 4px 14px rgba(15,17,20,0.04);
    padding: 6px;
}
.dropdown-menu a {
    font-size: 13.5px !important;
    padding: 9px 12px !important;
    border-radius: 8px;
    color: var(--ink-3) !important;
}
.dropdown-menu a:hover { background: var(--paper-2) !important; color: var(--ink-1) !important; }
.dropdown-menu i { color: var(--mint-2) !important; }

.btn-nav {
    background: var(--ink-1) !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    box-shadow: 0 4px 14px -4px rgba(15,17,20,0.3) !important;
}
.btn-nav:hover { background: var(--mint-3) !important; transform: translateY(-1px); }

/* ---------- 5. HERO ---------- */
.hero {
    min-height: 92vh;
    padding: 140px 24px 100px;
    background:
        radial-gradient(1100px 540px at 18% 20%, rgba(105,194,145,0.16), transparent 60%),
        radial-gradient(900px 480px at 86% 18%, rgba(251,179,68,0.10), transparent 60%),
        radial-gradient(800px 460px at 50% 100%, rgba(250,69,78,0.06), transparent 60%),
        #FBFCFB;
    position: relative;
}

/* Subtle grain over the hero */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.hero-content { max-width: 920px; }
.hero-badge {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(15,17,20,0.08);
    color: var(--ink-2) !important;
    padding: 7px 14px;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    box-shadow: 0 6px 18px -10px rgba(15,17,20,0.15);
}
.hero-badge .badge-dot { background: var(--mint-2); box-shadow: 0 0 0 4px rgba(105,194,145,0.18); }

.hero-title {
    font-family: var(--font-display) !important;
    font-size: clamp(44px, 7vw, 96px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
    font-weight: 700 !important;
    color: var(--ink-1) !important;
    margin-bottom: 26px !important;
}
/* Replace gradient-text with a single-color emphasis (skill rule: no gradient text) */
.hero-title .gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--mint-3) !important;
    color: var(--mint-3) !important;
    font-style: italic;
    font-weight: 700;
}

.hero-subtitle {
    font-size: clamp(16px, 1.6vw, 19px) !important;
    line-height: 1.6 !important;
    color: var(--ink-3) !important;
    max-width: 640px !important;
    margin: 0 auto 36px !important;
}

/* Hero tagline (the inline-styled one) */
.hero .hero-subtitle[style*="font-family"] {
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    color: var(--mint-3) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    margin-bottom: 18px !important;
}

.hero-cta { gap: 12px; margin-bottom: 72px; }

.hero-stats {
    border-top: 1px solid rgba(15,17,20,0.08);
    padding-top: 44px;
    gap: 64px;
}
.stat-number {
    font-family: var(--font-display) !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    color: var(--ink-1) !important;
    letter-spacing: -0.03em;
    -webkit-text-fill-color: var(--ink-1) !important;
    background: none !important;
}
.stat-label {
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    color: var(--ink-4) !important;
    letter-spacing: 0.16em !important;
    margin-top: 6px !important;
    text-transform: uppercase;
}
.stat::after { display: none !important; }

/* ---------- 6. BUTTONS ---------- */
.btn {
    font-family: var(--font-display) !important;
    border-radius: 12px !important;
    padding: 13px 22px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    transition: transform 0.25s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.25s ease, color 0.25s ease;
}
.btn::before { display: none !important; }
.btn-lg { padding: 16px 28px !important; font-size: 15.5px !important; }
.btn-primary {
    background: var(--ink-1) !important;
    color: var(--paper-1) !important;
    box-shadow: 0 10px 28px -10px rgba(15,17,20,0.4) !important;
}
.btn-primary:hover {
    background: var(--mint-3) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--el-mint) !important;
}
.btn-outline {
    background: transparent !important;
    color: var(--ink-1) !important;
    border: 1.5px solid rgba(15,17,20,0.18) !important;
}
.btn-outline:hover {
    background: var(--ink-1) !important;
    color: var(--paper-1) !important;
    border-color: var(--ink-1) !important;
    transform: translateY(-2px) !important;
}
.btn-white {
    background: var(--paper-1) !important;
    color: var(--ink-1) !important;
    box-shadow: 0 10px 28px -10px rgba(0,0,0,0.45) !important;
}
.btn-white:hover { background: var(--mint) !important; color: var(--ink-1) !important; }
.btn-outline-white {
    background: transparent !important;
    color: var(--paper-1) !important;
    border: 1.5px solid rgba(255,255,255,0.32) !important;
}
.btn-outline-white:hover { background: rgba(255,255,255,0.10) !important; }

/* ---------- 7. SECTION SHELL ---------- */
.section-tag, .page-hero-tag {
    background: rgba(15,17,20,0.04) !important;
    border: 1px solid rgba(15,17,20,0.08) !important;
    color: var(--ink-3) !important;
    padding: 6px 12px !important;
    border-radius: 100px !important;
    box-shadow: none !important;
}
.section-tag::before { display: none !important; }
.section-tag i, .page-hero-tag i { color: var(--mint-3) !important; }

.section-header { margin-bottom: 64px !important; }

.section-title {
    font-family: var(--font-display) !important;
    font-size: clamp(34px, 4.4vw, 56px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    font-weight: 700 !important;
    color: var(--ink-1) !important;
    margin-bottom: 18px !important;
}
.section-title .gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--mint-3) !important;
    color: var(--mint-3) !important;
    font-style: italic;
}

.section-subtitle {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: var(--ink-4) !important;
    max-width: 56ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- 8. SERVICES GRID ---------- */
.services-grid { gap: 18px !important; }
.service-card {
    background: var(--paper-1) !important;
    border: 1px solid rgba(15,17,20,0.07) !important;
    border-radius: 18px !important;
    box-shadow: var(--el-1) !important;
    transition: transform 0.4s var(--ease-quart), box-shadow 0.4s var(--ease-quart), border-color 0.3s ease !important;
    overflow: hidden;
}
.service-card::before { display: none !important; }
.service-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(15,17,20,0.12) !important;
    box-shadow: var(--el-3) !important;
}
.service-icon { height: 220px !important; }
.service-icon img { transition: transform 0.6s var(--ease-quart) !important; }
.service-card:hover .service-icon img { transform: scale(1.04) !important; }
.icon-overlay { background: rgba(15,17,20,0.78) !important; }
.icon-overlay i { color: var(--mint) !important; }
.service-card h3 {
    margin: 28px 28px 10px !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink-1) !important;
}
.service-card p {
    margin: 0 28px 20px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--ink-4) !important;
}
.service-link {
    margin: 0 28px 26px !important;
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.14em !important;
    color: var(--ink-2) !important;
    font-weight: 500 !important;
}
.service-card:hover .service-link { color: var(--mint-3) !important; }

/* "Why You'll Enjoy" alt cards */
.services-grid .service-card[style*="cursor: default"] {
    border-radius: 18px !important;
}
.services-grid .service-card[style*="cursor: default"] .service-icon {
    height: auto !important;
    padding: 28px 28px 0 !important;
}
.services-grid .service-card[style*="cursor: default"] .icon-overlay {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: rgba(105,194,145,0.10) !important;
    color: var(--mint-3) !important;
}
.services-grid .service-card[style*="cursor: default"] .icon-overlay i {
    color: var(--mint-3) !important;
    font-size: 22px !important;
}

/* ---------- 9. ABOUT ---------- */
.about { background: var(--paper-2) !important; }
.about-img-main img { border-radius: 22px !important; }
.about-img-secondary { border-radius: 18px !important; }
.about-experience {
    background: var(--paper-1) !important;
    border: 1px solid rgba(15,17,20,0.06) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    box-shadow: var(--el-2) !important;
}
.about-experience .exp-number { color: var(--ink-1) !important; font-size: 36px !important; font-weight: 700 !important; }
.about-experience .exp-text { color: var(--ink-4) !important; font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: 0.14em !important; }

.feature-icon {
    background: rgba(105,194,145,0.10) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--mint-3) !important;
    border-radius: 12px !important;
    width: 44px !important;
    height: 44px !important;
}
.feature h4 {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    color: var(--ink-1) !important;
    letter-spacing: -0.01em !important;
}
.feature > div p { font-size: 13.5px !important; color: var(--ink-4) !important; }

/* ---------- 10. AWARDS / DARK STATS ---------- */
.awards-bar {
    background:
        radial-gradient(900px 540px at 22% 30%, rgba(105,194,145,0.18), transparent 60%),
        radial-gradient(800px 480px at 82% 70%, rgba(250,69,78,0.10), transparent 60%),
        #0E0F11 !important;
    padding: 100px 0 !important;
}
.awards-bar .section-title {
    color: var(--paper-1) !important;
    font-style: normal;
}
.awards-bar .section-title span {
    color: var(--mint) !important;
    -webkit-text-fill-color: var(--mint) !important;
    font-style: italic;
}
.awards-bar .section-subtitle { color: rgba(255,255,255,0.62) !important; }

.award-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
    padding: 36px 24px !important;
    backdrop-filter: blur(6px);
}
.award-item:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(105,194,145,0.35) !important;
}
.award-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    background: rgba(105,194,145,0.14) !important;
    color: var(--mint) !important;
    margin: 0 auto 16px !important;
}
.award-number { color: var(--paper-1) !important; font-size: 44px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; }
.award-label { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: 0.16em !important; color: rgba(255,255,255,0.55) !important; }

/* ---------- 11. COMPARISON ---------- */
.comparison-col {
    border-radius: 18px !important;
    border: 1px solid rgba(15,17,20,0.08) !important;
    background: var(--paper-1) !important;
    overflow: hidden;
}
.comparison-col:hover { border-color: rgba(15,17,20,0.16) !important; box-shadow: var(--el-2) !important; }
.comparison-col.featured {
    border-color: var(--mint-2) !important;
    box-shadow: 0 30px 70px -22px rgba(105,194,145,0.4), 0 0 0 1px rgba(105,194,145,0.18) inset !important;
}
.comparison-header {
    padding: 32px 22px !important;
    color: var(--paper-1) !important;
}
.comparison-header h3 {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
.comparison-list li {
    font-size: 14px !important;
    color: var(--ink-3) !important;
    border-bottom: 1px solid rgba(15,17,20,0.06) !important;
    padding: 12px 0 !important;
}
.comparison-list .comparison-price {
    border-bottom: none !important;
    margin-top: 10px !important;
    font-family: var(--font-display) !important;
    font-size: 15px !important;
    color: var(--ink-1) !important;
}

/* ---------- 12. PROCESS ---------- */
.process { background: var(--paper-1) !important; }
.process-timeline { gap: 18px !important; }
.process-timeline::before {
    background: linear-gradient(to right, transparent, rgba(105,194,145,0.4), transparent) !important;
    height: 1px !important;
}
.step-number {
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mint-3) !important;
    -webkit-text-fill-color: var(--mint-3) !important;
    background: none !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 14px !important;
}
.step-content {
    border: 1px solid rgba(15,17,20,0.07) !important;
    background: var(--paper-1) !important;
    border-radius: 18px !important;
    padding: 32px 26px !important;
    box-shadow: var(--el-1) !important;
}
.step-content:hover {
    border-color: rgba(105,194,145,0.4) !important;
    box-shadow: 0 24px 50px -22px rgba(105,194,145,0.35) !important;
    transform: translateY(-4px);
}
.step-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: rgba(105,194,145,0.10) !important;
    color: var(--mint-3) !important;
    border: none !important;
    margin: 0 auto 18px !important;
    font-size: 20px !important;
    transition: transform 0.4s var(--ease-quart);
}
.step-content:hover .step-icon { transform: scale(1.06); }
.step-content h3 {
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink-1) !important;
    margin-bottom: 8px !important;
}
.step-content p {
    font-size: 14px !important;
    color: var(--ink-4) !important;
    line-height: 1.6 !important;
}

/* ---------- 13. PORTFOLIO ---------- */
.portfolio { background: var(--paper-2) !important; }
.portfolio-item { border-radius: 18px !important; box-shadow: var(--el-1) !important; }
.portfolio-item:hover { transform: translateY(-4px) !important; box-shadow: var(--el-3) !important; }
.portfolio-overlay {
    background: linear-gradient(to top, rgba(14,15,17,0.92) 0%, rgba(14,15,17,0.4) 50%, transparent 100%) !important;
    padding: 28px !important;
}
.portfolio-category {
    background: var(--mint) !important;
    color: var(--ink-1) !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}
.portfolio-overlay h3 {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
.portfolio-overlay p { font-size: 13.5px !important; color: rgba(255,255,255,0.78) !important; }

/* ---------- 14. TESTIMONIALS ---------- */
.testimonials { background: #0E0F11 !important; padding: 110px 0 !important; }
.testimonial-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 22px !important;
    padding: 56px !important;
}
.testimonial-card::before { display: none !important; }
.testimonial-card > p {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: -0.015em !important;
    color: rgba(255,255,255,0.92) !important;
    font-style: normal !important;
}
.testimonial-author strong { font-family: var(--font-display) !important; font-weight: 600 !important; }
.testimonial-author span { font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: 0.12em !important; }

.testimonial-btn {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
.testimonial-btn:hover { background: var(--mint) !important; border-color: var(--mint) !important; color: var(--ink-1) !important; }

/* ---------- 15. FAQ ---------- */
.faq-section { background: var(--paper-2) !important; }
.faq-grid { gap: 14px; }
.faq-item {
    border: 1px solid rgba(15,17,20,0.08) !important;
    border-radius: 14px !important;
    background: var(--paper-1) !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item:hover {
    border-color: rgba(105,194,145,0.4) !important;
    transform: none !important;
    box-shadow: var(--el-1) !important;
}
.faq-item.active {
    border-color: var(--mint-2) !important;
    box-shadow: 0 14px 28px -16px rgba(105,194,145,0.35) !important;
}
.faq-question { padding: 20px 24px !important; }
.faq-question h4 {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink-1) !important;
}
.faq-question i {
    width: 28px !important;
    height: 28px !important;
    background: rgba(15,17,20,0.04) !important;
    color: var(--ink-3) !important;
    border-radius: 50% !important;
}
.faq-item.active .faq-question i { background: var(--mint-3) !important; color: var(--paper-1) !important; }
.faq-answer p { font-size: 14.5px !important; color: var(--ink-4) !important; line-height: 1.6 !important; }

/* ---------- 16. CTA ---------- */
.cta-section {
    padding: 130px 0 !important;
    background:
        radial-gradient(900px 480px at 18% 30%, rgba(105,194,145,0.20), transparent 60%),
        radial-gradient(800px 460px at 84% 70%, rgba(250,69,78,0.15), transparent 60%),
        #0E0F11 !important;
}
.cta-content h2 {
    font-family: var(--font-display) !important;
    font-size: clamp(36px, 4.6vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    color: var(--paper-1) !important;
    font-weight: 700 !important;
}
.cta-content h2 .gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--mint) !important;
    color: var(--mint) !important;
    font-style: italic;
}
.cta-content p {
    font-size: 18px !important;
    color: rgba(255,255,255,0.7) !important;
    max-width: 56ch !important;
    margin: 0 auto 40px !important;
}

/* ---------- 17. FOOTER ---------- */
.footer { background: #0E0F11 !important; padding: 96px 0 0 !important; }
.footer-grid { gap: 48px !important; }
.footer-brand p { font-size: 14px !important; color: rgba(255,255,255,0.5) !important; line-height: 1.55 !important; }
.footer-links h4, .footer-newsletter h4 {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55) !important;
    font-weight: 500 !important;
    margin-bottom: 22px !important;
}
.footer-links ul a {
    font-size: 14px !important;
    color: rgba(255,255,255,0.78) !important;
    transition: color 0.2s ease, padding-left 0.25s var(--ease-out);
}
.footer-links ul a:hover { color: var(--mint) !important; padding-left: 6px; }
.footer-socials a {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.78) !important;
    border-radius: 10px !important;
}
.footer-socials a:hover { background: var(--mint) !important; color: var(--ink-1) !important; transform: translateY(-2px) rotate(0deg) !important; box-shadow: 0 10px 22px -10px rgba(105,194,145,0.6) !important; }
.newsletter-form {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.newsletter-form button { background: var(--mint) !important; color: var(--ink-1) !important; }
.footer-contact-info p { font-size: 13px !important; color: rgba(255,255,255,0.55) !important; }
.footer-bottom { padding: 28px 0 !important; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 48px; }
.footer-bottom p, .footer-bottom-links a { font-size: 12px !important; font-family: var(--font-mono) !important; }

/* ---------- 18. MARQUEE ---------- */
.clients-marquee { padding: 64px 0 !important; background: var(--paper-1) !important; border: none !important; }
.clients-label, .clients-label[style] {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    color: var(--ink-4) !important;
    text-transform: uppercase;
    font-weight: 500 !important;
    margin-bottom: 30px !important;
}
.marquee-track .client-logo {
    background: var(--paper-1) !important;
    border: 1px solid rgba(15,17,20,0.08) !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-family: var(--font-display) !important;
    font-size: 16.5px !important;
    font-weight: 500 !important;
    color: var(--ink-2) !important;
    letter-spacing: -0.01em !important;
}
.marquee-track .client-logo:hover {
    border-color: var(--ink-2) !important;
    color: var(--ink-1) !important;
}

/* ---------- 19. PAGE HERO (inner) ---------- */
.page-hero {
    padding: 180px 0 100px !important;
    background:
        radial-gradient(900px 460px at 18% 28%, rgba(105,194,145,0.12), transparent 60%),
        radial-gradient(800px 460px at 84% 24%, rgba(251,179,68,0.08), transparent 60%),
        var(--paper-2) !important;
}
.page-hero h1 {
    font-family: var(--font-display) !important;
    font-size: clamp(42px, 5.4vw, 80px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    font-weight: 700 !important;
    color: var(--ink-1) !important;
    margin-bottom: 22px !important;
}
.page-hero h1 .gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--mint-3) !important;
    color: var(--mint-3) !important;
    font-style: italic;
}
.page-hero p {
    font-size: 18px !important;
    color: var(--ink-4) !important;
    max-width: 56ch !important;
    line-height: 1.6 !important;
}

/* ---------- 20. SERVICE DETAIL ---------- */
.service-detail-content h2 {
    font-family: var(--font-display) !important;
    font-size: clamp(32px, 3.6vw, 44px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    color: var(--ink-1) !important;
}
.service-detail-content h2 .gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--mint-3) !important;
    color: var(--mint-3) !important;
    font-style: italic;
}
.service-detail-content p { font-size: 17px !important; color: var(--ink-4) !important; line-height: 1.6 !important; }
.service-detail-image img { border-radius: 20px !important; }
.service-detail-list li { font-size: 15px !important; color: var(--ink-3) !important; padding: 6px 0 !important; }
.service-detail-list li i {
    width: 22px !important;
    height: 22px !important;
    background: rgba(105,194,145,0.14) !important;
    border-radius: 50% !important;
    color: var(--mint-3) !important;
    font-size: 11px !important;
}

/* Feature & Pricing cards */
.feature-card {
    border: 1px solid rgba(15,17,20,0.07) !important;
    border-radius: 18px !important;
    padding: 36px 28px !important;
    background: var(--paper-1) !important;
    box-shadow: var(--el-1) !important;
}
.feature-card:hover { border-color: rgba(105,194,145,0.4) !important; box-shadow: var(--el-2) !important; transform: translateY(-4px) !important; }
.feature-card-icon {
    width: 56px !important;
    height: 56px !important;
    background: rgba(105,194,145,0.10) !important;
    border-radius: 14px !important;
    color: var(--mint-3) !important;
    border: none !important;
    margin: 0 auto 22px !important;
    font-size: 22px !important;
}
.feature-card h3 {
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--ink-1) !important;
    margin-bottom: 8px !important;
}
.feature-card p { font-size: 14px !important; color: var(--ink-4) !important; line-height: 1.6 !important; }

.pricing-card {
    border: 1px solid rgba(15,17,20,0.08) !important;
    border-radius: 22px !important;
    padding: 44px 32px !important;
    background: var(--paper-1) !important;
}
.pricing-card.popular {
    border-color: var(--mint-2) !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5FCF8 100%) !important;
    box-shadow: 0 30px 80px -28px rgba(105,194,145,0.4) !important;
}
.pricing-card h3 { font-size: 20px !important; font-weight: 600 !important; }
.pricing-card .price {
    font-family: var(--font-display) !important;
    font-size: 52px !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    color: var(--ink-1) !important;
}
.pricing-card .price span { font-family: var(--font-mono) !important; font-size: 13px !important; color: var(--ink-4) !important; }
.pricing-features li { font-size: 14px !important; color: var(--ink-3) !important; }
.pricing-features li i { color: var(--mint-3) !important; }
.pricing-badge {
    background: var(--ink-1) !important;
    color: var(--paper-1) !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
}

/* ---------- 21. CONTACT ---------- */
.contact-form {
    border: 1px solid rgba(15,17,20,0.08) !important;
    border-radius: 22px !important;
    padding: 44px !important;
    background: var(--paper-1) !important;
    box-shadow: var(--el-2) !important;
}
.contact-form h3 { font-size: 26px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
.form-group label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: var(--ink-4) !important;
    font-weight: 500 !important;
}
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--paper-1) !important;
    border: 1px solid rgba(15,17,20,0.10) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    padding: 13px 16px !important;
    color: var(--ink-1) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--mint-2) !important;
    box-shadow: 0 0 0 4px rgba(105,194,145,0.16) !important;
}
.contact-info-card {
    border: 1px solid rgba(15,17,20,0.07) !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    background: var(--paper-1) !important;
}
.contact-info-card .info-icon,
.contact-info-card .contact-info-icon {
    width: 44px !important;
    height: 44px !important;
    background: rgba(105,194,145,0.10) !important;
    color: var(--mint-3) !important;
    border-radius: 12px !important;
    border: none !important;
}

/* ---------- 22. SEO PACKAGES ---------- */
.pkg-card { border-radius: 22px !important; border: 1px solid rgba(15,17,20,0.08) !important; }
.pkg-card-popular { border-color: var(--mint-2) !important; }
.pkg-table thead th { background: var(--ink-1) !important; color: var(--paper-1) !important; font-family: var(--font-mono) !important; font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; font-weight: 500 !important; }

/* ---------- 23. WHATSAPP FLOAT ---------- */
.whatsapp-float {
    box-shadow: 0 8px 24px rgba(37,211,102,0.45);
    animation: waPulse 2.6s ease-out infinite;
}
.whatsapp-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    opacity: 0;
    animation: waRipple 2.6s ease-out infinite;
}
@keyframes waPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes waRipple { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- 24. ACCESSIBILITY ---------- */
:focus-visible {
    outline: 2px solid var(--mint-2);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---------- 25. WIDE SCREENS ---------- */
@media (min-width: 1500px) {
    :root { --container-width: 1320px; }
}

/* ---------- 26. MOBILE ---------- */
@media (max-width: 768px) {
    .hero { min-height: auto; padding: 120px 18px 80px; }
    .hero-title { font-size: clamp(36px, 9vw, 56px) !important; }
    .hero-subtitle { font-size: 15.5px !important; }
    .hero-cta { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .hero-cta .btn { flex: 1 1 auto; min-width: 140px; }
    .hero-stats { gap: 24px; padding-top: 32px; }
    .stat-number { font-size: 32px !important; }
    .stat-label { font-size: 9px !important; }

    .section-header { margin-bottom: 40px !important; }
    .section-title { font-size: clamp(28px, 7vw, 40px) !important; }
    .section-subtitle { font-size: 15px !important; }

    .service-card h3 { font-size: 20px !important; margin: 24px 22px 8px !important; }
    .service-card p { margin: 0 22px 16px !important; font-size: 14px !important; }
    .service-link { margin: 0 22px 22px !important; }
    .service-icon { height: 180px !important; }

    .step-content { padding: 26px 22px !important; }

    .testimonial-card { padding: 36px 24px !important; }
    .testimonial-card > p { font-size: 18px !important; }

    .cta-content h2 { font-size: clamp(32px, 8vw, 44px) !important; }
    .cta-content p { font-size: 15.5px !important; padding: 0 12px !important; }

    .page-hero { padding: 130px 0 70px !important; }
    .page-hero h1 { font-size: clamp(34px, 8vw, 52px) !important; }

    .footer { padding: 64px 0 0 !important; }
    .footer-grid { gap: 36px !important; }

    .contact-form { padding: 28px 22px !important; }
    .contact-form h3 { font-size: 22px !important; }

    .feature-card { padding: 28px 22px !important; }
    .pricing-card { padding: 32px 24px !important; }

    .award-item { padding: 24px 18px !important; }
    .award-number { font-size: 32px !important; }

    .comparison-list li { font-size: 13px !important; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 38px !important; line-height: 1 !important; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .hero-stats .stat { display: block; }
}

/* ---------- 27. PRINT ---------- */
@media print {
    .preloader, .navbar, .whatsapp-float, .cursor, .cursor-follower,
    .hero-scroll, .testimonial-nav, .clients-marquee { display: none !important; }
    body { color: #000; background: #FFF; }
}

/* ---------- 30. PROCESS CARDS · equal height + tighter type ---------- */
.process-timeline { align-items: stretch; }
.process-step { display: flex; flex-direction: column; }
.process-step .step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.step-content h3 {
    min-height: 24px;
    text-wrap: balance;
}
.step-content p {
    text-wrap: pretty;
}

/* Prevent gradient-text emphasis from breaking awkwardly */
.section-title .gradient-text,
.hero-title .gradient-text,
.cta-content h2 .gradient-text,
.page-hero h1 .gradient-text {
    white-space: nowrap;
}

/* Allow wrapping on tiny screens to avoid horizontal overflow */
@media (max-width: 480px) {
    .section-title .gradient-text,
    .hero-title .gradient-text,
    .cta-content h2 .gradient-text,
    .page-hero h1 .gradient-text {
        white-space: normal;
    }
}

/* Process timeline rule lower */
.process-timeline::before {
    top: 28px !important;
}