@charset "UTF-8";
/* css/main.css */
/**
 * Design System principal - startup-delivery.ro
 *
 * Ultima modificare: 2026-10-22 22:16
 * Modificari:
 *   2026-10-22 22:16 — Primul ecran al fiecarei pagini (prima sectiune din #main-content) fara animatia AOS de intrare:
 *                       titlul si textul se vad din primul desen (Google le ia in calcul la LCP)
 *   2026-10-18 23:51 — /noutati/: steagurile de tara ca imagini (.wn-ico-flag, .wn-flag-inline)
 *   2026-10-18 23:17 — /noutati/: descriere aerisita (paragrafe, liste, titluri de sectiune, 0.92rem / 1.7),
 *                       chipuri Soft / Baza de date / data, icoane colorate in locul emoji-urilor
 *   2026-10-01 00:00 — Preturi: cardul "featured" se mareste din sus (nu mai urca peste comutatorul
 *                       Lunar/Anual la hover) + mai mult spatiu sub comutator
 *   2026-08-27 00:25 — Footer: icoane pe titlurile de coloana, sageata animata la hover pe linkuri
 *                       (+ starea „pagina curenta"), linia de crestere sub wordmark, icoane gri pe
 *                       linkurile legale din bara de jos
 */


/* ==========================================================================
   1. CSS VARIABLES (ROOT)
   ========================================================================== */

:root {
    /* Colors - Primary */
    --color-primary: #6366f1;
    --color-primary-dark: #4f46e5;
    --color-primary-light: #818cf8;

    /* Colors - Secondary */
    --color-secondary: #8b5cf6;
    --color-secondary-dark: #7c3aed;

    /* Colors - Accent */
    --color-accent-green: #10b981;
    --color-accent-cyan: #67e8f9;

    /* Colors - Neutral */
    --color-bg: #ffffff;
    --color-surface: #f8fafc;
    --color-text-dark: #111827;
    --color-text-medium: #4b5563;
    --color-text-light: #9ca3af;
    --color-border: #e5e7eb;
    --color-shadow: rgba(99, 102, 241, 0.1);

    /* Fonts */
    --font-display: 'Space Grotesk', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-admin: 'Inter', sans-serif;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-hero: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}


/* ==========================================================================
   2. @FONT-FACE DECLARATIONS
   ========================================================================== */

/* Space Grotesk - Display font (latin) */
@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/fonts/space-grotesk/SpaceGrotesk-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/fonts/space-grotesk/SpaceGrotesk-SemiBold-latin-ext.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/fonts/space-grotesk/SpaceGrotesk-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/assets/fonts/space-grotesk/SpaceGrotesk-Bold-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Outfit - Heading font (latin) */
@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/outfit/Outfit-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/outfit/Outfit-Medium-latin-ext.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/outfit/Outfit-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/outfit/Outfit-SemiBold-latin-ext.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/outfit/Outfit-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    src: url('/assets/fonts/outfit/Outfit-Bold-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans - Body font (latin) */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Regular-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Medium-latin-ext.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-SemiBold-latin-ext.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/fonts/plus-jakarta-sans/PlusJakartaSans-Bold-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter - Admin font (latin) */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter/Inter-Regular-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter/Inter-Medium-latin-ext.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter/Inter-SemiBold-latin-ext.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   3. BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Hide reCAPTCHA v3 badge globally */
.grecaptcha-badge {
    visibility: hidden !important;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* clip, nu hidden: overflow-x:hidden pe html/body creeaza scroll-container si RUPE
       position:sticky la descendenti (ex: nav-ul de sectiuni de pe /cloudshop).
       clip taie overflow-ul la fel, fara scroll container. Fallback hidden pt browsere vechi. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    background-color: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-x: clip;
}

::selection {
    background-color: var(--color-primary);
    color: #ffffff;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-dark);
}

h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--color-text-dark);
}

h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.3;
    color: var(--color-text-dark);
}

h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--color-text-dark);
}

h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
}

.lead {
    font-size: 1.125rem;
    color: var(--color-text-medium);
    line-height: 1.7;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Typewriter effect */
.typewriter-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Typewriter în hero — text alb pe fundal gradient închis */
.hero-section .typewriter-text {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #ffffff;
    background-clip: unset;
    color: #ffffff;
    border-bottom: 3px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 2px;
}

.typewriter-cursor {
    display: inline-block;
    font-weight: 300;
    animation: blink 0.8s infinite;
    margin-left: 2px;
}

/* Cursor alb în hero, primary în restul paginii */
.typewriter-cursor {
    color: var(--color-primary);
}

.hero-section .typewriter-cursor {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}


/* Secțiunile 5 (NAVBAR) și 6 (MEGA DROPDOWN) sunt acum exclusiv în navbar.css */


/* ==========================================================================
   6B. SERVICE CONTENT BODY — stiluri pentru conținut din DB (row/col + imagini)
   ========================================================================== */

.service-content-body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text);
}

.service-content-body h2 {
    font-family: var(--font-heading-2);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.service-content-body h3 {
    font-family: var(--font-heading-2);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.service-content-body p {
    margin-bottom: 1rem;
    color: var(--color-text);
}

.service-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.service-content-body .row {
    margin-bottom: 3rem;
}

.service-content-body .row:last-child {
    margin-bottom: 0;
}

.service-content-body ul {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.service-content-body ul li {
    margin-bottom: 0.5rem;
}


/* ==========================================================================
   7. BUTTONS (Bootstrap overrides)
   ========================================================================== */

.btn {
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    padding: 0.625rem 1.5rem;
}

.btn-primary {
    background: var(--gradient-primary);
    border: none;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
    background: var(--gradient-primary);
    color: #ffffff;
}

.btn-primary:active,
.btn-primary:focus {
    background: var(--gradient-primary);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

.btn-outline-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline-primary:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-2px);
}
.btn-outline-primary:hover .text-muted {
    color: rgba(255,255,255,0.85) !important;
}

.btn-outline-primary:active,
.btn-outline-primary:focus {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #ffffff;
}

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.0625rem;
}

.btn-success {
    background: var(--color-accent-green);
    border-color: var(--color-accent-green);
}

.btn-success:hover {
    background: #059669;
    border-color: #059669;
    transform: translateY(-2px);
}


/* ==========================================================================
   8. SECTIONS
   ========================================================================== */

section {
    padding: 5rem 0;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.section-badge {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-2xl);
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.section-title {
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--color-text-medium);
    font-size: 1.0625rem;
}


/* ==========================================================================
   9. HERO SECTION (.hero-section)
   ========================================================================== */

.hero-section {
    min-height: auto;
    display: flex;
    align-items: center;
    padding: 7rem 0 4rem;
    background: var(--gradient-hero);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-title {
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 600px;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Butoanele hero cu icoana (set Lucide, acelasi cu navbarul). Butonul devine flex
   ca sa nu ramana spatiu inegal intre icoana si text; centrarea conteaza pe mobil,
   unde butoanele trec pe latime completa. */
.hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.hero-cta-icon {
    font-size: 1.05em;
    line-height: 1;
    transition: transform 0.25s cubic-bezier(0.22, 0.68, 0.36, 1);
}

/* Scanteia de pe „Demo Gratis" clipeste discret; eticheta de pret se inclina la hover. */
.hero-cta-icon--spark {
    animation: sdHeroSpark 3.4s ease-in-out infinite;
}

.hero-actions .btn:hover .hero-cta-icon--spark {
    animation: none;
    transform: scale(1.18) rotate(-8deg);
}

.hero-actions .btn:hover .hero-cta-icon--tag {
    transform: rotate(-12deg) scale(1.1);
}

@keyframes sdHeroSpark {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    45%      { transform: scale(1.14) rotate(-8deg); opacity: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta-icon { animation: none !important; transition: none; }
}

.hero-image {
    position: relative;
    border-radius: var(--radius-xl, 1rem);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-2xl);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}


/* ==========================================================================
   10. CARDS
   ========================================================================== */

.card {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-body {
    padding: 1.5rem;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: #ffffff;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-card .feature-icon {
    margin: 0 auto 1rem;
}

.feature-card .feature-description {
    color: var(--color-text-medium);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* Inline variant: icon pe aceeași linie cu titlul */
.feature-card-inline {
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
}

.feature-icon-inline {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary);
    font-size: 1.25rem;
    transition: background var(--transition-base), color var(--transition-base);
}

.feature-card-inline:hover .feature-icon-inline {
    background: var(--gradient-primary);
    color: #ffffff;
}

.feature-card-content .feature-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.feature-card-content .feature-description {
    font-size: 0.875rem;
    line-height: 1.55;
}

.feature-card-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--color-primary);
}


/* ==========================================================================
   10b. SEO INDEX PAGE — service cards with icons, category groups
   ========================================================================== */

/* Category group header */
.seo-category-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.seo-category-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #ffffff;
    flex-shrink: 0;
}

.seo-category-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

/* Service cards */
.seo-service-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: var(--radius-xl);
    background: #ffffff;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    position: relative;
    overflow: hidden;
}

.seo-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.seo-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.2);
}

.seo-service-card:hover::before {
    opacity: 1;
}

.seo-service-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(99, 102, 241, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
    transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.seo-service-card:hover .seo-service-card-icon {
    background: var(--gradient-primary);
    color: #ffffff;
    transform: scale(1.08);
}

.seo-service-card-title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--color-text);
    margin-bottom: 0.6rem;
    line-height: 1.35;
}

.seo-service-card-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-medium);
    margin-bottom: 1.25rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.seo-service-card-cta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    transition: gap var(--transition-base);
    gap: 0;
}

.seo-service-card:hover .seo-service-card-cta {
    gap: 4px;
}

.seo-service-card-cta .fa-arrow-right {
    font-size: 0.7rem;
    transition: transform var(--transition-base);
}

.seo-service-card:hover .seo-service-card-cta .fa-arrow-right {
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 767.98px) {
    .seo-service-card {
        padding: 1.25rem;
    }
    .seo-service-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }
    .seo-category-title {
        font-size: 1.1rem;
    }
}

/* Section label (TEHNICI SEO, TRAFIC ORGANIC, OFERTE) */
.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

/* ---------- SEO Techniques cards ---------- */
.seo-technique-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.seo-technique-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.seo-technique-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: rgba(99, 102, 241, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.seo-technique-card h3 {
    font-size: 1.1rem;
    font-weight: 650;
    margin-bottom: 0.75rem;
}

.seo-technique-card p {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-text-medium);
    margin: 0;
}

/* ---------- SEO Metrics (progress bars) ---------- */
.seo-metric-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
}

.seo-metric-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.seo-metric-header i {
    font-size: 1.15rem;
    color: var(--color-primary);
}

.seo-metric-header h4 {
    font-size: 1rem;
    font-weight: 650;
    margin: 0;
}

.seo-metric-bar {
    width: 100%;
    height: 28px;
    background: var(--color-surface, #f1f5f9);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.seo-metric-fill {
    height: 100%;
    width: 0;
    background: var(--gradient-primary);
    border-radius: 14px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
}

.seo-metric-card p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-medium);
    margin: 0;
}

/* ---------- SEO Pricing cards ---------- */
.seo-price-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    position: relative;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.seo-price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.12);
}

.seo-price-featured {
    border-color: var(--color-primary);
    border-width: 2px;
}

.seo-price-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 1rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.seo-price-header h3 {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
}

.seo-price-amount {
    margin-bottom: 1.5rem;
}

.seo-price-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}

.seo-price-currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    vertical-align: super;
}

.seo-price-period {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.seo-price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
}

.seo-price-features li {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--color-text-medium);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-price-features li:last-child {
    border-bottom: none;
}

.seo-price-features li i {
    color: var(--color-accent-green, #10b981);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ---------- Responsive SEO sections ---------- */
@media (max-width: 767.98px) {
    .seo-technique-card,
    .seo-metric-card,
    .seo-price-card {
        padding: 1.25rem;
    }
    .seo-price-value {
        font-size: 2.25rem;
    }
}


/* ==========================================================================
   11. PRICING PAGE — hero, toggle, cards, trust bar
   ========================================================================== */

/* --- Pricing Hero (dark compact, similar blog-hero) --- */
.pricing-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: white;
    padding: 1rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}

.pricing-hero::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
    top: -140px;
    right: -80px;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.pricing-hero .breadcrumb-inline {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.75rem;
}

.pricing-hero .breadcrumb-inline a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s;
}

.pricing-hero .breadcrumb-inline a:hover {
    color: white;
}

.pricing-hero .breadcrumb-inline .sep {
    margin: 0 0.375rem;
}

.pricing-hero-content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.pricing-hero h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.25rem;
    color: white;
}

.pricing-hero .hero-subtitle {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.55);
    max-width: 480px;
}

.pricing-hero-stats {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
}

.pricing-hero-stat {
    text-align: center;
}

.pricing-hero-stat-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: #a5b4fc;
    line-height: 1.2;
}

.pricing-hero-stat-label {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Contact Hero Dark --- */
.contact-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: white;
    padding: 1rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}

.contact-hero::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
    top: -140px;
    right: -80px;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.contact-hero .breadcrumb-inline {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.75rem;
}

.contact-hero .breadcrumb-inline a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s;
}

.contact-hero .breadcrumb-inline a:hover {
    color: white;
}

.contact-hero .breadcrumb-inline .sep {
    margin: 0 0.375rem;
}

.contact-hero-content {
    /* Stack vertical: titlu mare → descriere → stats jos */
    display: block;
    position: relative;
    z-index: 1;
}
.contact-hero-content .hero-subtitle {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
}
.contact-hero-content .contact-hero-stats {
    margin-top: 1rem;
}

.contact-hero h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.25rem;
    color: white;
}

.contact-hero .hero-subtitle {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.55);
    max-width: 480px;
}

.contact-hero-stats {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
}

.contact-hero-stat {
    text-align: center;
}

.contact-hero-stat-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: #a5b4fc;
    line-height: 1.2;
}

.contact-hero-stat-label {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Service Hero Dark (pagini solutii, domenii) --- */
.service-hero-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: white;
    padding: 1rem 0 3.5rem;
    position: relative;
    overflow: hidden;
}

.service-hero-dark::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
    top: -140px;
    right: -80px;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.service-hero-dark .breadcrumb-inline {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1.25rem;
}

.service-hero-dark .breadcrumb-inline a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s;
}

.service-hero-dark .breadcrumb-inline a:hover {
    color: white;
}

.service-hero-dark .breadcrumb-inline .sep {
    margin: 0 0.375rem;
}

.service-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.service-hero-dark h1 {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    color: white;
}

.service-hero-subtitle {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 600px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.service-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.service-hero-actions .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.service-hero-actions .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* --- Toggle Lunar / Anual --- */
.pricing-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 3.25rem; /* aer intre comutator si badge-ul "Cel mai popular" (iese 14px peste card) */
}

.pricing-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--color-surface);
    border-radius: 50px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.pricing-toggle-btn {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: var(--color-text-medium);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pricing-toggle-btn.active {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.pricing-toggle-badge {
    display: inline-block;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 50px;
    margin-left: 0.375rem;
}

/* Badge alb cand butonul e activ (pe fundal purple) */
.pricing-toggle-btn.active .pricing-toggle-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* --- Header sectiune pachete (stil CloudShop: eyebrow + titlu + subtitlu) --- */
.pricing-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 44px;
}
.pricing-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6366f1;
    margin-bottom: 12px;
    padding: 4px 12px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 100px;
}
.pricing-section-header h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 14px;
}
.pricing-section-header h2 .grad {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pricing-section-header p {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

/* --- Pricing Cards (redesigned) --- */
.pricing-card {
    border-radius: var(--radius-2xl);
    overflow: visible; /* badge-ul "Recomandat" iese peste marginea de sus (ca la CloudShop) */
    position: relative;
    background: #ffffff;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.pricing-card.featured {
    border: 2px solid var(--color-primary);
    transform: scale(1.05);
    /* Creste doar in jos — din centru urca ~30px si intra peste comutatorul Lunar/Anual */
    transform-origin: center top;
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.15);
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-6px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
}

/* Badge pill "Recomandat" — identic cu "Cel mai popular" de la CloudShop */
.pricing-featured-badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.4);
    white-space: nowrap;
    z-index: 2;
}

/* Icon patrat gradient per pachet — identic cu CloudShop */
.pricing-plan-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 18px;
}
.pricing-plan-icon.alt1 { background: linear-gradient(135deg, #10b981, #059669); }
.pricing-plan-icon.alt2 { background: linear-gradient(135deg, #f59e0b, #f97316); }

/* Header */
.pricing-header {
    padding: 2rem 2rem 1.25rem;
    text-align: center;
}

/* Font titlu + descriere — identic cu cardurile CloudShop (Outfit 800 / tagline slate) */
.pricing-plan-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.pricing-plan-desc {
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 1.25rem;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.pricing-amount {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.pricing-currency {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-medium);
}

.pricing-period-text {
    font-size: 0.875rem;
    color: var(--color-text-light);
    font-weight: 400;
}

.pricing-annual-save {
    display: none;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 50px;
    margin-left: 0.25rem;
}

/* Nota setup sub pret (text liber, ca la CloudShop) */
.pricing-setup-note {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0.375rem 0 0;
}

/* Creditul de personalizare (acelasi limbaj vizual ca pe CloudShop) — se citeste ca ceva
   PRIMIT, nu ca o taxa in plus: de-aia e verde, cu bifa, si spune „inclus" langa cifra. */
.pricing-credit {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0.75rem 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.09);
    border: 1px solid rgba(16, 185, 129, 0.28);
    text-align: left;
}
.pricing-credit > i {
    flex: none;
    margin-top: 1px;
    font-size: 0.95rem;
    color: #059669;
}
.pricing-credit-txt   { font-size: 0.8rem; line-height: 1.45; color: #334155; }
.pricing-credit-sum   { font-weight: 800; color: #047857; }
.pricing-credit-hours { display: block; color: #64748b; font-size: 0.74rem; margin-top: 1px; }
.pricing-credit-hours a { color: #059669; text-decoration: underline; text-underline-offset: 2px; }

/* Ce acopera creditul — panou sub cardurile de pret */
.pricing-creditbox {
    margin: 44px auto 0;
    max-width: 1040px;
    padding: 30px 32px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 50px -30px rgba(15, 23, 42, 0.35);
}
.pricing-creditbox-head { text-align: center; margin-bottom: 24px; }
.pricing-creditbox-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #047857; background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.26);
    padding: 5px 12px; border-radius: 100px;
}
.pricing-creditbox-head h3 { margin: 12px 0 8px; font-size: 1.32rem; color: #0f172a; }
.pricing-creditbox-head p  { margin: 0 auto; max-width: 720px; font-size: 0.92rem; color: #64748b; line-height: 1.6; }
.pricing-creditbox-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px;
}
.pricing-creditbox-list li {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 10px 0; border-bottom: 1px dashed #e8ecf4;
    font-size: 0.88rem; color: #334155; line-height: 1.5;
}
.pricing-creditbox-list li > i { flex: none; margin-top: 3px; width: 17px; text-align: center; color: #6366f1; }
.pricing-creditbox-list li > span { flex: 1; }
.pricing-creditbox-list li b { color: #0f172a; }
.pricing-creditbox-list li > em {
    flex: none; font-style: normal; font-size: 0.76rem; font-weight: 700;
    color: #64748b; white-space: nowrap; padding-top: 2px;
}
.pricing-creditbox-foot {
    margin: 20px 0 0; text-align: center;
    font-size: 0.85rem; color: #64748b; line-height: 1.6;
}
@media (max-width: 860px) {
    .pricing-creditbox      { padding: 24px 20px; border-radius: 20px; }
    .pricing-creditbox-list { grid-template-columns: 1fr; gap: 0; }
}

/* One-time fee (taxa unica) */
.pricing-setup-fee {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.pricing-setup-amount {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1;
}

.pricing-setup-currency {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-medium);
}

.pricing-setup-label {
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-weight: 400;
}

.pricing-setup-divider {
    text-align: center;
    margin-bottom: 0.25rem;
}

.pricing-setup-divider span {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding: 0 0.75rem;
}

.pricing-setup-divider span::before,
.pricing-setup-divider span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 2rem;
    height: 1px;
    background: var(--color-border);
}

.pricing-setup-divider span::before {
    right: 100%;
}

.pricing-setup-divider span::after {
    left: 100%;
}

/* Features list */
.pricing-features {
    padding: 0 2rem 1rem;
    flex: 1;
}

.pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-features li {
    padding: 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--color-text-medium);
}

.pricing-features li i.fa-check {
    color: var(--color-accent-green);
    font-size: 0.75rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.pricing-features li i.fa-times {
    color: #d1d5db;
    font-size: 0.75rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.pricing-features li.not-included {
    color: var(--color-text-light);
}

/* Feature bonus (ex: articol blog lunar) */
.pricing-features li.feature-bonus {
    color: var(--color-text-dark);
    font-weight: 600;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin: 0.35rem 0;
}

.pricing-features li.feature-bonus i {
    color: #6366f1 !important;
    font-size: 0.95rem !important;
    width: 18px !important;
}

.feature-bonus-pill {
    display: inline-block;
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 999px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

/* Footer */
.pricing-footer {
    padding: 0 2rem 2rem;
    margin-top: auto;
}

.pricing-footer .btn {
    width: 100%;
    padding: 0.75rem;
    font-weight: 600;
}

/* CTA cu sageata animata (si la /preturi si la CloudShop) */
.pricing-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.pricing-cta-arrow {
    transition: transform 0.25s ease;
}
.pricing-card.featured .pricing-cta-arrow {
    animation: cta-arrow-nudge 1.6s ease-in-out infinite;
}
.pricing-cta-btn:hover .pricing-cta-arrow {
    animation: none;
    transform: translateX(5px);
}
@keyframes cta-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5px); }
}

/* --- Trust Bar --- */
.pricing-trust-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 0;
}

.pricing-trust-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--color-text-medium);
    font-size: 0.875rem;
    font-weight: 500;
}

.pricing-trust-item i {
    font-size: 1.25rem;
    color: var(--color-primary);
}

/* --- Annual savings text (visible when toggle = annual) --- */
.pricing-annual-savings {
    display: none;
    text-align: center;
    font-size: 0.75rem;
    color: #059669;
    font-weight: 500;
    margin-top: 0.375rem;
}

/* --- Guarantee Badge --- */
.pricing-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
    border: 1px solid #86efac;
    border-radius: 12px;
    margin-top: 2rem;
}

.pricing-guarantee-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pricing-guarantee-badge i {
    color: white;
    font-size: 1.25rem;
}

.pricing-guarantee-text strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text-dark);
    margin-bottom: 0.125rem;
}

.pricing-guarantee-text span {
    font-size: 0.8125rem;
    color: var(--color-text-medium);
}

/* --- "Nu esti sigur?" Help Section --- */
.pricing-help-section {
    background: var(--color-bg-white);
}

.pricing-help-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 16px;
}

.pricing-help-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pricing-help-icon i {
    color: white;
    font-size: 1.375rem;
}

.pricing-help-content {
    flex: 1;
}

.pricing-help-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--color-text-dark);
}

.pricing-help-content p {
    font-size: 0.875rem;
    color: var(--color-text-medium);
    margin-bottom: 0;
}

.pricing-help-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* --- Comparison Table --- */
.pricing-comparison-section {
    overflow: hidden;
}

.pricing-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pricing-comparison-table thead th {
    padding: 1rem;
    font-weight: 600;
    text-align: center;
    background: #f8fafc;
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-dark);
}

.pricing-comparison-table thead th:first-child {
    text-align: left;
    width: 40%;
}

.pricing-comparison-table thead th.featured {
    background: rgba(99, 102, 241, 0.08);
    color: var(--color-primary);
}

.pricing-comparison-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--color-text-medium);
}

.pricing-comparison-table tbody td.featured {
    background: rgba(99, 102, 241, 0.03);
}

.pricing-comparison-table tbody tr:hover td {
    background: #f8fafc;
}

.pricing-comparison-table tbody tr:hover td.featured {
    background: rgba(99, 102, 241, 0.06);
}

.pricing-comparison-table .fa-check {
    font-size: 0.875rem;
}

.pricing-comparison-table .fa-times {
    font-size: 0.75rem;
}

/* --- Testimonials --- */
.pricing-testimonials-section {
    background: var(--color-bg-white);
}

.pricing-testimonial-card {
    background: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pricing-testimonial-stars {
    margin-bottom: 0.75rem;
}

.pricing-testimonial-stars i {
    color: #fbbf24;
    font-size: 0.8125rem;
}

.pricing-testimonial-text {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--color-text-medium);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 1rem;
}

.pricing-testimonial-author strong {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-dark);
}

.pricing-testimonial-author span {
    font-size: 0.75rem;
    color: var(--color-text-light);
}


/* ==========================================================================
   12. CLIENT LOGOS (.client-logos)
   ========================================================================== */

.client-logos {
    overflow: hidden;
}

.client-logo,
.client-logo-item {
    opacity: 0.85;
    transition: opacity var(--transition-base);
}

.client-logo-item img {
    max-height: 32px;
    max-width: 80px;
    width: auto;
    object-fit: contain;
}

.client-logo:hover,
.client-logo-item:hover {
    opacity: 1;
}


/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */

/* Testimonial carousel */
.testimonial-carousel {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.testimonial-carousel-track {
    position: relative;
    overflow: hidden;
    min-height: 250px;
}

.testimonial-slide {
    display: none;
    animation: testimonialFadeIn 0.4s ease;
}

.testimonial-slide.active {
    display: block;
}

@keyframes testimonialFadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 2rem;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 1.5rem;
    color: var(--color-text-medium);
    line-height: 1.7;
    font-size: 1rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-author strong {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text-dark);
}

.testimonial-author span {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

/* Săgeți testimoniale */
.testimonial-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
    font-size: 0.8rem;
    transition: background var(--transition-fast),
                box-shadow var(--transition-fast);
}

.testimonial-arrow:hover {
    box-shadow: var(--shadow-md);
    color: var(--color-primary);
}

.testimonial-arrow--left {
    left: -56px;
}

.testimonial-arrow--right {
    right: -56px;
}

/* Dots / indicatori */
.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast);
}

.testimonial-dot.active {
    background: var(--color-primary);
}


/* ==========================================================================
   14. CONTACT FORM
   ========================================================================== */

.form-control {
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    font-family: var(--font-body);
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

.form-control::placeholder {
    color: var(--color-text-light);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}


/* ==========================================================================
   15. FOOTER (.site-footer)
   ========================================================================== */

.site-footer {
    background: #111827;
    color: #9ca3af;
    padding: 4rem 0 2rem;
}

.footer-title {
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.footer-links,
ul.footer-links,
.site-footer .footer-links,
.site-footer ul.footer-links {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0;
}

.footer-links li,
ul.footer-links li,
.site-footer .footer-links li {
    margin-bottom: 0.5rem;
    list-style: none !important;
    list-style-type: none !important;
}

.footer-links li::before,
.footer-links li::marker,
.site-footer .footer-links li::before,
.site-footer .footer-links li::marker {
    content: none !important;
    display: none !important;
}

.footer-links li a {
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.85em; /* -15% fata de body (cerere user 2026-05-24) */
    /* inline-flex: sageata din ::before sta pe acelasi rand, in fata numelui.
       Deplasarea la hover o face sageata (latime + margin), nu padding-left. */
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.footer-links li a:hover {
    color: #ffffff;
}

.footer-social {
    display: flex;
    gap: 0.5rem;
}

.footer-social a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    transition: background var(--transition-fast),
                color var(--transition-fast);
    text-decoration: none;
}

.footer-social a:hover {
    background: var(--color-primary);
    color: #ffffff;
}

/* Footer brand — wordmark + badges (2026-08-10) */
.footer-brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-brand-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem; font-weight: 700; color: #fff; letter-spacing: -0.01em;
}
.footer-brand-name span { color: var(--color-primary, #6366f1); }
.footer-badges { list-style: none; padding: 0; margin: 14px 0 18px; }
.footer-badges li {
    display: flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,.72); font-size: .85rem; padding: 3px 0;
}
.footer-badges li i {
    color: #10b981; font-size: .72rem;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(16,185,129,.14); border: 1px solid rgba(16,185,129,.35);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.footer-brand {
    /* +0.35rem fata de 1rem: loc pentru linia de crestere desenata sub wordmark */
    margin-bottom: 1.35rem;
}

.footer-brand img {
    height: 35px;
    width: auto;
}

.footer-description {
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Lista de contact din footer — fără bullets/cercuri/markers */
.footer-contact,
ul.footer-contact,
.site-footer .footer-contact,
.site-footer ul.footer-contact {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
}

.footer-contact li,
ul.footer-contact li,
.site-footer .footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.765rem; /* -15% fata de 0.9rem anterior (cerere user 2026-05-24) */
    list-style: none !important;
    list-style-type: none !important;
}

.footer-contact li::before,
.footer-contact li::marker,
.site-footer .footer-contact li::before,
.site-footer .footer-contact li::marker {
    content: none !important;
    display: none !important;
}

.footer-contact li i {
    color: var(--color-primary-light);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

/* Contactele au deja iconita lor in fata — la hover ea face pasul inainte,
   in loc sa mai adaugam o sageata peste. */
.footer-contact li:hover i {
    color: #c7d2fe;
    transform: translateX(2px);
}

.footer-contact li a {
    color: #9ca3af;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-contact li a:hover {
    color: #ffffff;
}

.footer-contact li span {
    color: #9ca3af;
}

.footer-separator {
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    margin-top: 2rem;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.875rem;
}

.footer-bottom a {
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.745rem; /* -15% fata de 0.875rem (Termeni / Privacy — cerere user 2026-05-24) */
    transition: color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.34em;
}

/* --------------------------------------------------------------------------
   Footer — icoane, sageata la linkuri, linia de crestere (2026-08-27)
   -------------------------------------------------------------------------- */

/* Sageata desenata ca masca SVG: nu depinde de niciun font de icoane si isi ia
   culoarea din background-color, deci ramane corecta pe orice fundal. */
.site-footer {
    --footer-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h13'/%3E%3Cpath d='M12.5 6.5 18.5 12l-6 5.5'/%3E%3C/svg%3E");
}

/* Icoana de pe titlul coloanei (Solutii / Resurse / Contact) — set Lucide,
   acelasi cu meniul de sus; e singurul set incarcat pe TOATE paginile
   alaturi de Font Awesome (icon-sets.css e doar pe blog/solutii). */
.footer-title > i {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    line-height: 1;
    border-radius: 8px;
    color: var(--color-primary-light, #818cf8);
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(129, 140, 248, 0.3);
}

/* Sageata apare la hover si ramane aprinsa pe linkul paginii curente.
   Se deschide din latime + margin, deci textul e impins lin, fara salt. */
.footer-links li a::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 1em;
    margin-right: 0;
    opacity: 0;
    transform: translateX(-4px);
    background-color: var(--color-primary-light, #818cf8);
    -webkit-mask: var(--footer-arrow) center / contain no-repeat;
            mask: var(--footer-arrow) center / contain no-repeat;
    transition: width 0.24s cubic-bezier(0.22, 0.68, 0.36, 1),
                margin-right 0.24s cubic-bezier(0.22, 0.68, 0.36, 1),
                opacity 0.18s ease,
                transform 0.24s cubic-bezier(0.22, 0.68, 0.36, 1);
}

.footer-links li a:hover::before,
.footer-links li a:focus-visible::before,
.footer-links li a.is-current::before {
    width: 1em;
    margin-right: 0.34em;
    opacity: 1;
    transform: none;
}

/* Pagina curenta: text aprins + sageata care respira usor. */
.footer-links li a.is-current {
    color: #ffffff;
    font-weight: 600;
}

.footer-links li a.is-current::before {
    animation: sdFooterArrowNudge 2.6s ease-in-out infinite;
}

@keyframes sdFooterArrowNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}

/* Linkurile legale din bara de jos: iconita gri, discreta, care se lumineaza la hover. */
.footer-bottom a > i {
    font-size: 0.95em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.38);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-bottom a:hover > i,
.footer-bottom a.is-current > i {
    color: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

.footer-bottom a.is-current {
    color: #e5e7eb;
}

/* Linia de crestere de sub wordmark — acelasi marcaj cu cel din footerul
   magazinelor CloudShop. Sageata trage linia dupa ea (acelasi timing linear pe
   ambele, deci varful sta mereu pe capul liniei), urca la cot si apoi se stinge.
   Un ciclu = 4s. */
.sd-growth {
    position: relative;
    display: inline-block;
    padding-right: 1.5em;
    white-space: nowrap;
}

.sd-growth-graph {
    position: absolute;
    left: 0;
    bottom: -0.46em;
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
    stroke: var(--color-primary-light, #818cf8);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.sd-growth-path {
    stroke-linecap: butt;
    stroke-dasharray: 133;
    stroke-dashoffset: 133;
    animation: sdGrowthDraw 4s linear infinite;
}

.sd-growth-arrow {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: sdGrowthTip 4s linear infinite;
}

@keyframes sdGrowthDraw {
    0%    { stroke-dashoffset: 133; opacity: 1; }
    48.5% { stroke-dashoffset: 29; }
    50.5% { stroke-dashoffset: 29; }
    62%   { stroke-dashoffset: 0; }
    85%   { stroke-dashoffset: 0; opacity: 1; }
    100%  { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes sdGrowthTip {
    0%    { transform: translate(2px, 40px) rotate(0deg); opacity: 0; }
    3%    { opacity: 1; }
    48.5% { transform: translate(106px, 40px) rotate(0deg); }
    50.5% { transform: translate(106px, 40px) rotate(-51.5deg); }
    62%   { transform: translate(124px, 17.4px) rotate(-51.5deg); opacity: 1; }
    85%   { transform: translate(124px, 17.4px) rotate(-51.5deg); opacity: 1; }
    100%  { transform: translate(124px, 17.4px) rotate(-51.5deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sd-growth-path { stroke-dashoffset: 0; animation: none; }
    .sd-growth-arrow { animation: none; transform: translate(124px, 17.4px) rotate(-51.5deg); }
    .footer-links li a.is-current::before { animation: none; }
    .footer-links li a::before { transition: none; }
}

/* ============================================================
   SHOP ANIMATION partial (.sd-shop-anim) — folosit pe /studii-de-caz/ + /cloudshop/
   Storefront cu copertina + monede plutitoare + data flow lines
   ============================================================ */
.sd-shop-anim {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    margin: 0 auto;
    z-index: 1;
}
@media (max-width: 991px) {
    .sd-shop-anim {
        max-width: 280px;
        margin: 1.5rem auto 0.5rem;
    }
    .sd-shop-floater {
        font-size: 0.6rem !important;
        padding: 4px 8px !important;
    }
    .sd-shop-floater i { font-size: 0.7rem !important; }
    .sd-shop-floater-1 { top: 4%; left: -4%; }
    .sd-shop-floater-2 { top: 4%; right: -4%; }
    .sd-shop-floater-3 { bottom: 4%; left: -4%; }
    .sd-shop-testimonial {
        max-width: 180px;
        bottom: -4%;
        right: -4%;
        padding: 6px 8px;
    }
    .sd-shop-testimonial-avatar { width: 26px; height: 26px; font-size: 0.6rem; }
    .sd-shop-testimonial-text { font-size: 0.6rem; }
    .sd-shop-testimonial-name { font-size: 0.55rem; }
    .sd-shop-testimonial-stars { font-size: 0.55rem; }
}
.sd-shop-anim svg { width: 100%; height: 100%; overflow: visible; }
.sd-shop-anim::before {
    content: '';
    position: absolute;
    inset: 12%;
    background: radial-gradient(circle at 50% 55%,
                rgba(139, 92, 246, .35) 0%,
                rgba(99, 102, 241, .18) 35%,
                transparent 70%);
    filter: blur(28px);
    z-index: 0;
    animation: sdShopHalo 5s ease-in-out infinite;
}
@keyframes sdShopHalo {
    0%, 100% { transform: scale(1);    opacity: .85; }
    50%      { transform: scale(1.08); opacity: 1; }
}

.sd-shop-anim .sd-anim-grid { stroke: rgba(165, 180, 252, .12); stroke-width: .5; }
.sd-shop-anim .sd-shop-line {
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;
    filter: drop-shadow(0 0 4px rgba(165, 180, 252, .55));
}
.sd-shop-anim .sd-shop-stroke {
    stroke: url(#sdShopGradient);
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    animation: sdShopDraw 8s ease-in-out infinite;
}
@keyframes sdShopDraw {
    0%   { stroke-dashoffset: 1800; opacity: 0; }
    8%   { opacity: 1; }
    55%  { stroke-dashoffset: 0; opacity: 1; }
    85%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -1800; opacity: 0; }
}
.sd-shop-anim .sd-shop-fill {
    fill: rgba(165, 180, 252, .06); stroke: none; opacity: 0;
    animation: sdShopFill 8s ease-in-out infinite;
}
@keyframes sdShopFill {
    0%, 40%  { opacity: 0; }
    55%, 85% { opacity: 1; }
    100%     { opacity: 0; }
}
.sd-shop-anim .sd-awning-fill {
    fill: rgba(245, 158, 11, .18); stroke: none; opacity: 0;
    animation: sdShopFill 8s ease-in-out infinite;
}
.sd-shop-anim .sd-awning-scallop {
    fill: none; stroke: #fb923c; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; opacity: 0;
    filter: drop-shadow(0 0 3px rgba(251, 146, 60, .6));
    animation: sdShopFill 8s ease-in-out infinite;
    animation-delay: .2s;
}
.sd-shop-anim .sd-shop-display {
    opacity: 0;
    animation: sdShopFill 8s ease-in-out infinite;
    animation-delay: .4s;
}
.sd-shop-anim .sd-awning-stripe {
    stroke: rgba(255, 255, 255, .55); stroke-width: 1.2;
    stroke-linecap: round; opacity: 0;
    animation: sdAwningOn 8s ease-in-out infinite;
}
.sd-shop-anim .sd-awning-stripe:nth-child(n+2):nth-child(-n+5) { animation-delay: .15s; }
@keyframes sdAwningOn {
    0%, 30%  { opacity: 0; }
    40%, 85% { opacity: 1; }
    100%     { opacity: 0; }
}
.sd-shop-anim .sd-flow-line {
    stroke-width: 1.5; stroke-linecap: round; fill: none;
    stroke-dasharray: 6 12; opacity: 0;
}
.sd-shop-anim .sd-flow-1 { stroke: #67e8f9; animation: sdFlow 3.5s linear infinite; animation-delay: .2s; }
.sd-shop-anim .sd-flow-2 { stroke: #10b981; animation: sdFlow 4s   linear infinite; animation-delay: 1.1s; }
.sd-shop-anim .sd-flow-3 { stroke: #f59e0b; animation: sdFlow 3.8s linear infinite; animation-delay: 2s; }
.sd-shop-anim .sd-flow-4 { stroke: #8b5cf6; animation: sdFlow 4.2s linear infinite; animation-delay: 2.6s; }
@keyframes sdFlow {
    0%   { opacity: 0;  stroke-dashoffset: 0; }
    15%  { opacity: .9; }
    85%  { opacity: .9; }
    100% { opacity: 0;  stroke-dashoffset: -180; }
}
.sd-shop-anim .sd-coin { transform-origin: center; transform-box: fill-box; opacity: 0; }
.sd-shop-anim .sd-coin-circle { fill: url(#sdCoinGradient); filter: drop-shadow(0 0 6px rgba(245, 158, 11, .6)); }
.sd-shop-anim .sd-coin-text {
    fill: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 800;
    font-size: 14px; text-anchor: middle; dominant-baseline: central;
}

/* Monede care zboara in 5 directii naturale, cu arc parabolic — ca un firework de bani */
.sd-shop-anim .sd-coin-1 { animation: sdCoinFlyUp     4.5s ease-out infinite; animation-delay: 0s; }
.sd-shop-anim .sd-coin-2 { animation: sdCoinFlyRight  4.8s ease-out infinite; animation-delay: .9s; }
.sd-shop-anim .sd-coin-3 { animation: sdCoinFlyLeft   4.6s ease-out infinite; animation-delay: 1.8s; }
.sd-shop-anim .sd-coin-4 { animation: sdCoinFlyUpRight 4.7s ease-out infinite; animation-delay: 2.7s; }
.sd-shop-anim .sd-coin-5 { animation: sdCoinFlyUpLeft  4.4s ease-out infinite; animation-delay: 3.6s; }

@keyframes sdCoinFlyUp {
    0%   { opacity: 0; transform: translate(0, 0)        scale(.3) rotate(0); }
    15%  { opacity: 1; transform: translate(0, -20px)    scale(1)  rotate(80deg); }
    60%  { opacity: 1; transform: translate(2px, -110px) scale(1)  rotate(300deg); }
    100% { opacity: 0; transform: translate(0, -160px)   scale(.6) rotate(420deg); }
}
@keyframes sdCoinFlyRight {
    0%   { opacity: 0; transform: translate(0, 0)         scale(.3) rotate(0); }
    15%  { opacity: 1; transform: translate(15px, -25px)  scale(1)  rotate(60deg); }
    55%  { opacity: 1; transform: translate(85px, -65px)  scale(1)  rotate(240deg); }
    100% { opacity: 0; transform: translate(130px, -40px) scale(.5) rotate(380deg); }
}
@keyframes sdCoinFlyLeft {
    0%   { opacity: 0; transform: translate(0, 0)          scale(.3) rotate(0); }
    15%  { opacity: 1; transform: translate(-15px, -25px)  scale(1)  rotate(-60deg); }
    55%  { opacity: 1; transform: translate(-85px, -65px)  scale(1)  rotate(-240deg); }
    100% { opacity: 0; transform: translate(-130px, -40px) scale(.5) rotate(-380deg); }
}
@keyframes sdCoinFlyUpRight {
    0%   { opacity: 0; transform: translate(0, 0)         scale(.3) rotate(0); }
    15%  { opacity: 1; transform: translate(20px, -30px)  scale(1)  rotate(45deg); }
    55%  { opacity: 1; transform: translate(60px, -95px)  scale(1)  rotate(220deg); }
    100% { opacity: 0; transform: translate(85px, -135px) scale(.5) rotate(360deg); }
}
@keyframes sdCoinFlyUpLeft {
    0%   { opacity: 0; transform: translate(0, 0)          scale(.3) rotate(0); }
    15%  { opacity: 1; transform: translate(-20px, -30px)  scale(1)  rotate(-45deg); }
    55%  { opacity: 1; transform: translate(-60px, -95px)  scale(1)  rotate(-220deg); }
    100% { opacity: 0; transform: translate(-85px, -135px) scale(.5) rotate(-360deg); }
}

/* Animatie pe schimbarea valorii floater (fade+scale pop) */
.sd-shop-floater .val {
    display: inline-block;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.sd-shop-floater .val.flash,
.sd-shop-testimonial-text.flash,
.sd-shop-testimonial-name.flash {
    animation: sdValPop .55s ease-out;
}
@keyframes sdValPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.5); filter: brightness(1.4); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Testimonial callout — colt dreapta-jos, langa linia data flow */
.sd-shop-testimonial {
    position: absolute;
    bottom: -8%;
    right: -8%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    max-width: 260px;
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 28px -6px rgba(15,10,46,.55);
    z-index: 3;
    animation: sdTestimonialFloat 7s ease-in-out infinite;
}
@keyframes sdTestimonialFloat {
    0%, 100% { transform: translateY(0)   rotate(-1deg); }
    50%      { transform: translateY(-8px) rotate(1deg); }
}

.sd-shop-testimonial-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, rgba(255,255,255,.15));
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,.3);
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
    transition: background .4s ease;
}

.sd-shop-testimonial-body { min-width: 0; }

.sd-shop-testimonial-stars {
    color: #fbbf24;
    font-size: .65rem;
    line-height: 1;
    letter-spacing: 1px;
    margin-bottom: 2px;
    filter: drop-shadow(0 0 3px rgba(251,191,36,.6));
}

.sd-shop-testimonial-text {
    display: block;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.25;
    margin-bottom: 2px;
}

.sd-shop-testimonial-name {
    display: block;
    color: rgba(255,255,255,.7);
    font-size: .62rem;
    font-weight: 500;
}

@media (max-width: 480px) {
    .sd-shop-testimonial { max-width: 200px; bottom: -2%; right: -2%; padding: 8px 10px; }
    .sd-shop-testimonial-avatar { width: 28px; height: 28px; font-size: .65rem; }
}
.sd-shop-anim .sd-pulse-ring {
    fill: none; stroke: #6366f1; stroke-width: 1.5; opacity: 0;
    transform-origin: center; transform-box: fill-box;
}
.sd-shop-anim .sd-pulse-1 { animation: sdPulseRing 3s ease-out infinite; }
.sd-shop-anim .sd-pulse-2 { animation: sdPulseRing 3s ease-out infinite; animation-delay: 1s; }
.sd-shop-anim .sd-pulse-3 { animation: sdPulseRing 3s ease-out infinite; animation-delay: 2s; }
@keyframes sdPulseRing {
    0%   { opacity: .7; transform: scale(.3); }
    100% { opacity: 0;  transform: scale(1.8); }
}

.sd-shop-floater {
    position: absolute;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 100px;
    font-size: .72rem; font-weight: 700; color: #fff;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    white-space: nowrap; z-index: 2;
    box-shadow: 0 8px 24px -4px rgba(15,10,46,.5);
}
.sd-shop-floater i { font-size: .85rem; }
.sd-shop-floater .val { color: #67e8f9; }
/* 4 colturi — fiecare floater unde incepe linia data flow corespunzatoare */
.sd-shop-floater-1 { top: 6%;     left: -8%;  animation: sdShopFloat 6s   ease-in-out infinite; }   /* TL — Comenzi azi */
.sd-shop-floater-2 { top: 6%;     right: -8%; animation: sdShopFloat 6.5s ease-in-out infinite; animation-delay: 1s; } /* TR — Plata OK */
.sd-shop-floater-3 { bottom: 6%;  left: -8%;  animation: sdShopFloat 5.8s ease-in-out infinite; animation-delay: 2s; } /* BL — In livrare */
.sd-shop-floater-2 .val { color: #10b981; }
.sd-shop-floater-3 .val { color: #f59e0b; }
@keyframes sdShopFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .sd-shop-anim *,
    .sd-shop-anim::before { animation: none !important; }
    .sd-shop-anim .sd-shop-stroke { stroke-dashoffset: 0; }
}

.footer-bottom a:hover {
    color: #ffffff;
}


/* ==========================================================================
   16. PAGINA DE CONTACT (.contact-info-*)
   ========================================================================== */

.contact-info-card {
    padding: 16px 20px;
    border-radius: 10px;
    background: #f9fafb;
    transition: background var(--transition-fast);
}

.contact-info-card:hover {
    background: #f0f0ff;
}

.contact-info-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 6px;
}

.contact-info-title i {
    font-size: 1.3rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.contact-info-value {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.95rem;
    margin-left: 34px;
    display: block;
    transition: color var(--transition-fast);
}

a.contact-info-value:hover {
    color: var(--color-primary);
}

.contact-form-wrapper .form-label {
    font-weight: 500;
    color: #374151;
}

/* ==========================================================================
   17. PAGINA DOCUMENTAȚIE (.doc-*)
   ========================================================================== */

/* Sidebar navigare */
.doc-sidebar {
    position: sticky;
    top: 100px;
}

.doc-sidebar-title {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-primary);
}

.doc-sidebar-nav {
    margin: 0;
    padding: 0;
}

.doc-sidebar-link {
    display: block;
    padding: 8px 12px;
    color: #4b5563;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.doc-sidebar-link:hover {
    color: var(--color-primary);
    background: rgba(99, 102, 241, 0.06);
    text-decoration: none;
}

.doc-sidebar-item.active .doc-sidebar-link {
    color: var(--color-primary);
    background: rgba(99, 102, 241, 0.1);
    font-weight: 600;
}

/* Sidebar collapsible section (Integrări) */
.doc-sidebar-section {
    margin-bottom: 2px;
}

.doc-sidebar-section-toggle {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: #1f2937;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.doc-sidebar-section-toggle:hover {
    color: var(--color-primary);
    background: rgba(99, 102, 241, 0.06);
    text-decoration: none;
}

.doc-sidebar-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}

.doc-sidebar-section-toggle.open .doc-sidebar-chevron {
    transform: rotate(90deg);
}

.doc-sidebar-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 12px;
}

.doc-sidebar-submenu.open {
    max-height: 500px;
}

/* Doc cards (index page) */
.doc-card {
    text-decoration: none;
}

.doc-card:hover {
    text-decoration: none;
}

.doc-card .card {
    border: 1px solid #e5e7eb;
    transition: all var(--transition-fast);
}

.doc-card:hover .card {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.doc-card .btn-link {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Articol documentație */
.doc-article-body a {
    color: var(--color-primary);
    text-decoration: none;
}

.doc-article-body a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   18. ADMIN BAR — toolbar navigare rapida pe frontend (utilizatori logati)
   ========================================================================== */

.admin-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1e293b;
    height: 36px;
    font-size: 0.8125rem;
}

.admin-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1rem;
    max-width: 100%;
}

.admin-bar-left,
.admin-bar-right {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.admin-bar-logo {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    text-decoration: none;
}

.admin-bar-logo img {
    height: 20px;
    width: auto;
    object-fit: contain;
    border-radius: 3px;
}

.admin-bar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
    white-space: nowrap;
}

.admin-bar-link:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.admin-bar-edit {
    color: #a5b4fc;
}

.admin-bar-edit:hover {
    color: white;
    background: rgba(99, 102, 241, 0.25);
}

.admin-bar-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    color: #64748b;
    font-size: 0.7rem;
}

.admin-bar-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    animation: admin-bar-pulse 1.5s ease-in-out infinite;
}

@keyframes admin-bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.admin-bar-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 0.2rem;
}

.admin-bar-visitors {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0 0.25rem;
    font-size: 0.7rem;
    color: #64748b;
}

.admin-bar-vitem {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15rem;
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    transition: background 0.12s;
    cursor: default;
}

.admin-bar-vitem:hover {
    background: rgba(255, 255, 255, 0.06);
}

.admin-bar-vitem span {
    font-weight: 600;
    color: #94a3b8;
    font-size: 0.725rem;
}

.admin-bar-vitem small {
    font-size: 0.6rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-bar-user,
a.admin-bar-user,
a.admin-bar-user:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    color: #64748b;
    font-size: 0.75rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

a.admin-bar-user:hover {
    background: rgba(99, 102, 241, 0.12);
    color: #c7d2fe;
    text-decoration: none;
}

/* Offsets when admin bar is visible — push navbar + spacer down */
body.has-admin-bar .site-navbar {
    top: 36px;
}

body.has-admin-bar .navbar-spacer {
    height: 108px; /* 72px navbar + 36px admin bar */
}

@media (max-width: 575.98px) {
    .admin-bar-link span {
        display: none;
    }

    .admin-bar-user span:not(.fas):not(.far):not(.fa) {
        display: none;
    }

    .admin-bar-user {
        padding: 0.25rem;
    }

    .admin-bar-status,
    .admin-bar-sep,
    .admin-bar-visitors {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .admin-bar-hide-mobile {
        display: none !important;
    }
}


/* ==========================================================================
   18b. SEO TOOLBAR — sub admin bar, date SEO per pagina (.seo-toolbar)
   ========================================================================== */

.seo-toolbar {
    position: fixed;
    top: 36px;
    left: 0;
    right: 0;
    z-index: 9998;
    height: 40px;
    background: linear-gradient(180deg, #0f172a 0%, #131c2e 100%);
    border-bottom: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease;
    overflow: hidden;
}

.seo-toolbar.seo-toolbar-open {
    transform: translateY(0);
    opacity: 1;
}

.seo-toolbar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.seo-toolbar-inner::-webkit-scrollbar {
    display: none;
}

.seo-toolbar-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.75rem;
    color: #cbd5e1;
    font-size: 0.8rem;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1;
}

.seo-toolbar-metric strong {
    font-weight: 600;
    color: #e2e8f0;
}

.seo-toolbar-icon {
    font-size: 0.7rem;
    color: #818cf8;
}

.seo-toolbar-dim {
    color: #475569;
    font-size: 0.75rem;
}

.seo-toolbar-kw {
    color: #e2e8f0;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seo-toolbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Position color badges */
.seo-toolbar-pos {
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.78rem;
}

.seo-pos-top3 {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.seo-pos-top10 {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
}

.seo-pos-top20 {
    background: rgba(249, 115, 22, 0.15);
    color: #fb923c;
}

.seo-pos-low {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.seo-pos-na {
    color: #475569;
}

/* Trend arrows */
.seo-trend-up {
    color: #34d399;
    font-weight: 700;
    font-size: 0.78rem;
}

.seo-trend-down {
    color: #f87171;
    font-weight: 700;
    font-size: 0.78rem;
}

.seo-trend-flat {
    color: #64748b;
    font-size: 0.78rem;
}

/* Meta length colors */
.seo-meta-ok {
    color: #34d399 !important;
}

.seo-meta-warn {
    color: #fbbf24 !important;
}

.seo-meta-bad {
    color: #f87171 !important;
}

/* Toggle switch in admin bar */
.seo-toggle-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
}

.seo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s;
    margin: 0;
    user-select: none;
}

.seo-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}

.seo-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.seo-toggle-track {
    position: relative;
    width: 30px;
    height: 16px;
    background: #334155;
    border-radius: 8px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.seo-toggle-input:checked + .seo-toggle-track {
    background: #6366f1;
}

.seo-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #e2e8f0;
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.seo-toggle-input:checked + .seo-toggle-track .seo-toggle-thumb {
    transform: translateX(14px);
    background: #fff;
}

.seo-toggle-label {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.seo-toggle-input:checked ~ .seo-toggle-label {
    color: #a5b4fc;
}

/* Loading and error states */
.seo-toolbar-loading {
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 0 0.5rem;
}

.seo-toolbar-loading i {
    color: #6366f1;
    margin-right: 0.3rem;
}

.seo-toolbar-error {
    color: #f87171;
    font-size: 0.8rem;
}

.seo-toolbar-error i {
    margin-right: 0.3rem;
}

.seo-toolbar-na {
    color: #64748b;
    font-size: 0.8rem;
    font-style: italic;
}

.seo-toolbar-na i {
    margin-right: 0.3rem;
}

/* Body offsets when SEO toolbar is visible */
body.has-admin-bar.has-seo-toolbar .site-navbar {
    top: 76px; /* 36px admin bar + 40px seo toolbar */
}

body.has-admin-bar.has-seo-toolbar .navbar-spacer {
    height: 148px; /* 72px navbar + 36px admin bar + 40px seo toolbar */
}

/* Responsive: hide on mobile */
@media (max-width: 767.98px) {
    .seo-toolbar {
        display: none !important;
    }

    body.has-admin-bar.has-seo-toolbar .site-navbar {
        top: 36px;
    }

    body.has-admin-bar.has-seo-toolbar .navbar-spacer {
        height: 108px;
    }

    .seo-toggle-wrap {
        display: none !important;
    }
}


/* ==========================================================================
   19. COOKIE BANNER — popup card bottom-right (.cookie-banner)
   ========================================================================== */

.cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1050;
    max-width: 380px;
    background: rgba(17, 24, 39, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #ffffff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: translateY(calc(100% + 2rem));
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
    pointer-events: none;
}

.cookie-banner.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.cookie-banner .cookie-banner-text {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

.cookie-banner .cookie-banner-text a {
    color: var(--color-accent-cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner .cookie-banner-text a:hover {
    color: #a5f3fc;
}

.cookie-banner .cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cookie-banner .cookie-banner-actions .btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    border-radius: 10px;
}

.btn-cookie-decline {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    cursor: pointer;
    padding: 0.5rem 0.5rem;
    transition: color var(--transition-fast);
}

.btn-cookie-decline:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Mobile: full-width bottom */
@media (max-width: 575.98px) {
    .cookie-banner {
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .cookie-banner.show {
        transform: translateY(0);
    }
}


/* ==========================================================================
   17. 404 ERROR PAGE
   ========================================================================== */

.error-404-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-top: 6rem;
    text-align: center;
}

.error-404-title {
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 1rem;
}

.error-404-subtitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

.error-404-text {
    color: var(--color-text-medium);
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.error-404-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ==========================================================================
   18. UTILITY CLASSES
   ========================================================================== */

.bg-surface {
    background: var(--color-surface);
}

.bg-gradient {
    background: var(--gradient-primary);
}

.text-primary-custom {
    color: var(--color-primary);
}

.fw-medium {
    font-weight: 500;
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}


/* ==========================================================================
   20. PLATFORMS SECTION (homepage)
   ========================================================================== */

.platform-logo-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.75rem;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
}

.platform-logo-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.platform-logo-item img {
    max-height: 22px;
    width: auto;
    object-fit: contain;
}


/* ==========================================================================
   21. SHOWCASE SECTIONS (alternating image + text)
   ========================================================================== */

.section-showcase {
    overflow: hidden;
}

.section-showcase img {
    border-radius: var(--radius-xl);
}

.badge-label {
    display: inline-block;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.9rem;
    border-radius: 50px;
    margin-bottom: 0.75rem;
}

.section-showcase h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 1rem;
}

.section-showcase p {
    color: var(--color-text-medium);
    line-height: 1.7;
}


/* ==========================================================================
   22. SUPPORT SECTION
   ========================================================================== */

.support-card {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

.support-card:hover {
    background: rgba(99, 102, 241, 0.05);
}

.support-card h5 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

.support-card img {
    flex-shrink: 0;
}


/* ==========================================================================
   23. BLOG CARDS + CAROUSEL (homepage)
   ========================================================================== */

/* --- carousel wrapper --- */
.blog-carousel-wrapper {
    position: relative;
    padding: 0 48px;
}

.blog-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.blog-carousel-track::-webkit-scrollbar {
    display: none;
}

.blog-carousel-slide {
    flex: 0 0 calc((100% - 4.5rem) / 4);
    scroll-snap-align: start;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .blog-carousel-slide {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 767.98px) {
    .blog-carousel-wrapper {
        padding: 0 36px;
    }
    .blog-carousel-slide {
        flex: 0 0 100%;
    }
}

/* --- chevron buttons --- */
.blog-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text-dark);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.blog-carousel-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.blog-carousel-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.blog-carousel-prev {
    left: 0;
}

.blog-carousel-next {
    right: 0;
}

/* --- card styles --- */
.blog-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    height: 100%;
}

.blog-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.blog-card-image {
    overflow: hidden;
    height: 180px;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-body h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    flex: 1;
}

.blog-card-date {
    font-size: 0.8rem;
    color: var(--color-text-light);
}


/* ==========================================================================
   23b. TESTIMONIAL CAROUSEL (service pages)
   ========================================================================== */

.section-testimonials {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
}

/* --- carousel wrapper --- */
.testimonial-carousel-wrapper {
    position: relative;
    padding: 0 48px;
}

.testimonial-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.testimonial-carousel-track::-webkit-scrollbar {
    display: none;
}

.testimonial-carousel-slide {
    flex: 0 0 calc((100% - 3rem) / 3);
    scroll-snap-align: start;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .testimonial-carousel-slide {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 767.98px) {
    .testimonial-carousel-wrapper {
        padding: 0 36px;
    }
    .testimonial-carousel-slide {
        flex: 0 0 100%;
    }
}

/* --- chevron buttons (identical to blog carousel) --- */
.testimonial-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
    font-size: 1rem;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.testimonial-carousel-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.testimonial-carousel-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.testimonial-carousel-prev {
    left: 0;
}

.testimonial-carousel-next {
    right: 0;
}

/* --- card --- */
.testimonial-card-carousel {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.testimonial-card-carousel:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* quote mark decorativ */
.testimonial-quote {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(99, 102, 241, 0.07);
    font-family: Georgia, "Times New Roman", serif;
    pointer-events: none;
}

/* stars */
.testimonial-carousel-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 0.75rem;
    color: #f59e0b;
    font-size: 0.8125rem;
}

/* text */
.testimonial-carousel-text {
    font-style: italic;
    color: var(--color-text-medium);
    font-size: 0.9375rem;
    line-height: 1.65;
    flex: 1;
    margin-bottom: 1.25rem;
}

/* author */
.testimonial-carousel-author {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.testimonial-carousel-author strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

.testimonial-carousel-role {
    font-size: 0.8rem;
    color: var(--color-text-light);
}


/* ==========================================================================
   24. DOWNLOAD SECTION
   ========================================================================== */

.section-download {
    background: var(--color-surface);
}

.section-download h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
}

.section-download img.rounded {
    border-radius: var(--radius-xl) !important;
}


/* ==========================================================================
   25. LOGO CAROUSEL (.logo-carousel)
   Carusel orizontal cu auto-scroll și săgeți manuale
   ========================================================================== */

.logo-carousel {
    position: relative;
    overflow: hidden;
    padding: 10px 0;
    /* Lasa loc pentru sageti laterale ca primul/ultimul logo sa nu fie tăiate */
    padding-left: 60px;
    padding-right: 60px;
}

.logo-carousel-track {
    display: flex;
    align-items: center;
    gap: 2rem;
    will-change: transform;
}

/* Featured logos — mai mari (folosit pe clientii CloudShop noi) */
.logo-carousel-item--featured img {
    height: 56px !important;
    max-width: 170px !important;
}
.logo-carousel-item--featured {
    opacity: 1 !important;
}

.logo-carousel-track.animating {
    transition: transform 0.4s ease;
}

.logo-carousel-track.no-transition {
    transition: none;
}

.logo-carousel-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity var(--transition-base);
}

.logo-carousel-item:hover {
    opacity: 1;
}

.logo-carousel-item img {
    height: 36px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* Varianta platforme — imagini în carduri (dimensiuni identice cu gridul original) */
.logo-carousel--platforms .logo-carousel-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.25rem 0.6rem;
    filter: none;
    opacity: 1;
}

.logo-carousel--platforms .logo-carousel-track {
    gap: 1rem;
}

.logo-carousel--platforms .logo-carousel-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.logo-carousel--platforms .logo-carousel-item img {
    height: 45px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* Săgeți navigare */
.logo-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
    font-size: 1rem;
    transition: all var(--transition-base);
}

.logo-carousel-arrow:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.logo-carousel-arrow--left {
    left: 4px;
}

.logo-carousel-arrow--right {
    right: 4px;
}

/* Fade edges */
.logo-carousel::before,
.logo-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 1;
    pointer-events: none;
}

.logo-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--color-surface), transparent);
}

.logo-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--color-surface), transparent);
}

/* Pe fundal alb */
.logo-carousel--white::before {
    background: linear-gradient(to right, #ffffff, transparent);
}

.logo-carousel--white::after {
    background: linear-gradient(to left, #ffffff, transparent);
}

/* Platforme — fara fade edges, padding pentru sageti */
.logo-carousel--platforms::before,
.logo-carousel--platforms::after {
    display: none;
}

.logo-carousel--platforms .logo-carousel-spacer {
    flex-shrink: 0;
    width: 36px;
}

/* ==========================================================================
   26. PLATFORMS GRID (.platforms-grid) — flex centrat, fără carusel
   ========================================================================== */

.platforms-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    max-width: 820px;
    margin: 0 auto;
}

.platform-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.35rem 0.75rem;
    transition: box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

.platform-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.platform-item img {
    height: 50px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
}

/* ==========================================================================
   Pagina Noutati — Hero + Timeline
   ========================================================================== */

.whatsnew-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: white;
    padding: 1rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}

.whatsnew-hero::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
    top: -120px;
    right: -100px;
    pointer-events: none;
}

.whatsnew-hero .breadcrumb-inline {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.75rem;
}

.whatsnew-hero .breadcrumb-inline a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s;
}

.whatsnew-hero .breadcrumb-inline a:hover {
    color: white;
}

.whatsnew-hero .breadcrumb-inline .sep {
    margin: 0 0.375rem;
}

.whatsnew-hero-content h1 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: white;
}

.whatsnew-hero-content .hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    line-height: 1.6;
}

.whatsnew-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 1.5rem;
}

.whatsnew-hero-stat {
    text-align: left;
}

.whatsnew-hero-stat-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: #a5b4fc;
    line-height: 1.2;
}

.whatsnew-hero-stat-label {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Timeline --- */

.whatsnew-timeline {
    position: relative;
    padding-left: 3rem;
}

.whatsnew-timeline::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary) 0%, #e2e8f0 30%, #e2e8f0 70%, transparent 100%);
}

.whatsnew-item {
    display: flex;
    gap: 1rem;
    position: relative;
    margin-bottom: 0.9rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #eef2f7;
}

.whatsnew-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.whatsnew-hidden {
    display: none;
}

.whatsnew-icon {
    position: absolute;
    left: -3rem;
    top: 0.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.whatsnew-icon.bg-success { background: #16a34a; }
.whatsnew-icon.bg-info { background: #0ea5e9; }
.whatsnew-icon.bg-warning { background: #f59e0b; }
.whatsnew-icon.bg-danger { background: #ef4444; }
.whatsnew-icon.bg-primary { background: var(--primary); }
.whatsnew-icon.bg-purple { background: #8b5cf6; }

/* Punctul de pe linia timeline-ului (icoana propriu-zisa sta acum langa titlu) */
.whatsnew-icon.wn-dot {
    left: calc(-3rem + 1.25rem - 0.5rem + 1px);
    top: 1.05rem;
    width: 1rem;
    height: 1rem;
    background: var(--wn-c, #6366f1);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--wn-bg, rgba(99, 102, 241, 0.2));
}

.whatsnew-content {
    flex: 1;
    min-width: 0;
}

/* --- Header clickabil (badge + titlu + chevron) --- */

.whatsnew-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: 0.6rem 0 0.4rem;
    user-select: none;
}

/* --- Versiuni pe fiecare intrare: Soft · Baza de date · data --- */
.whatsnew-vers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.wn-ver {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.wn-ver b {
    font-weight: 700;
    color: #1e293b;
}

.wn-ver i {
    font-size: 0.8rem;
    line-height: 1;
    opacity: 0.85;
}

.wn-ver-app { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.22); color: #4f46e5; }
.wn-ver-app b { color: #3730a3; }
.wn-ver-db  { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); color: #047857; }
.wn-ver-db b { color: #065f46; }
.wn-ver-date.is-warn { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.35); color: #b45309; }

.whatsnew-header:hover .whatsnew-title {
    color: var(--primary);
}

.whatsnew-toggle-icon {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-top: 0.6rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.whatsnew-expanded .whatsnew-toggle-icon {
    transform: rotate(180deg);
}

/* Data actualizarii. Culoarea de fundal vine dintr-o clasa salvata in whatsnew.json (CDM).
   ATENTIE: fundalul implicit e OBLIGATORIU — daca CDM trimite o clasa pe care situl nu o
   cunoaste, textul alb ar ramane pe card alb = data INVIZIBILA (pais 2026-08-02 cu clasele
   ck-chip--*, folosite in CDM). Cu fundalul implicit, orice clasa noua ramane lizibila. */
.whatsnew-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    background: var(--color-primary, #6366f1);
    margin-bottom: 0.25rem;
}

.whatsnew-badge.bg-success { background: #16a34a; }
.whatsnew-badge.bg-info { background: #0ea5e9; }
.whatsnew-badge.bg-warning { background: #f59e0b; }
.whatsnew-badge.bg-danger { background: #ef4444; }
/* ATENTIE: variabila sitului e --color-primary. `var(--primary)` NU exista aici si regula
   cade in gol (fundal transparent) — badge-ul parea albastru doar pentru ca .bg-primary de la
   Bootstrap dadea el fundalul. */
.whatsnew-badge.bg-primary { background: var(--color-primary, #6366f1); }
.whatsnew-badge.bg-purple { background: #8b5cf6; }
/* Echivalentele claselor de chip folosite in CDM (whatsnew.json e fisierul comun) */
.whatsnew-badge.ck-chip--acc { background: var(--color-primary, #6366f1); }
.whatsnew-badge.ck-chip--warn { background: #f59e0b; }
.whatsnew-badge.ck-chip--ok { background: #16a34a; }
.whatsnew-badge.ck-chip--err { background: #ef4444; }

/* --- Intro peste timeline --- */
.whatsnew-intro {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.75rem;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.55;
}
.whatsnew-intro i {
    color: #6366f1;
    font-size: 1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* --- Meta chips per item (versiune / nr. imbunatatiri / timp citire) --- */
.whatsnew-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.whatsnew-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}
.whatsnew-chip i { font-size: 0.62rem; }
.whatsnew-chip.version { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.whatsnew-chip.count   { background: rgba(16, 185, 129, 0.1); color: #059669; }
.whatsnew-chip.read    { background: #f1f5f9; color: #64748b; font-weight: 600; }

/* --- Excerpt afisat doar cand cardul e inchis --- */
.whatsnew-excerpt {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0.4rem 0 0;
}
.whatsnew-expanded .whatsnew-excerpt { display: none; }

/* --- Ultima versiune: card evidentiat, mereu deschis --- */
.whatsnew-latest {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    border-radius: 16px;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 10px 28px -12px rgba(99, 102, 241, 0.25);
}
.whatsnew-latest-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
    animation: wn-latest-pulse 2.2s ease-in-out infinite;
}
@keyframes wn-latest-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

.whatsnew-title {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-family: var(--font-heading);
    font-size: 1.06rem;
    font-weight: 650;
    color: #1e293b;
    margin-bottom: 0;
    line-height: 1.45;
    transition: color 0.15s;
}

.whatsnew-title .wn-ico-title {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    font-size: 1.05rem;
    margin-top: -0.2rem;
}

.whatsnew-title .wn-title-text {
    min-width: 0;
}

/* Chip-urile, rezumatul si descrierea se aliniaza cu textul titlului (dupa icoana) */
@media (min-width: 769px) {
    .whatsnew-content .whatsnew-meta,
    .whatsnew-content .whatsnew-excerpt,
    .whatsnew-content .whatsnew-desc {
        padding-left: 2.8rem;
    }
}

/* --- Descrierea: inchisa implicit, se deschide la click ---
   Deschiderea foloseste grid-template-rows 0fr -> 1fr (nu max-height): inaltimea reala, oricat de
   lunga e intrarea, fara text taiat si fara intarziere la inchidere. */

.whatsnew-desc {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #334155;
}

.whatsnew-desc > .wn-body {
    overflow: hidden;
    min-height: 0;
    max-width: 72ch;
}

/* spatiul de sus e continut (nu padding), ca sa dispara complet cand cardul e inchis */
.wn-body::before {
    content: '';
    display: block;
    height: 0.85rem;
}

.whatsnew-expanded .whatsnew-desc {
    grid-template-rows: 1fr;
}

.wn-body p {
    margin: 0 0 0.95rem;
}

.wn-body > :last-child {
    margin-bottom: 0.4rem;
}

/* Titlu mic de sectiune (bold-ul de la inceputul unui paragraf) */
.wn-body .wn-sec {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.6rem 0 0.45rem;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
    color: #0f172a;
}

.wn-body > .wn-sec:first-child {
    margin-top: 0;
}

/* Lista cu „•" */
.wn-body .wn-list {
    list-style: none;
    margin: 0.2rem 0 1.1rem;
    padding: 0;
}

.wn-body .wn-list li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.55rem;
}

.wn-body .wn-list li::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.66em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
}

/* Randuri care incepeau cu emoji: icoana in loc de buline */
.wn-body .wn-ilist {
    list-style: none;
    margin: 0.2rem 0 1.1rem;
    padding: 0;
}

.wn-body .wn-ilist li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}

.wn-body .wn-ilist li > div {
    flex: 1;
    min-width: 0;
}

.wn-body .wn-ilist .wn-ico {
    margin-top: 0.12rem;
}

.wn-body b,
.wn-body strong,
.wn-body .text-bold {
    color: #0f172a;
    font-weight: 650;
}

.wn-body a {
    color: #4f46e5;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.wn-body a:hover {
    color: #3730a3;
}

.wn-body code {
    font-size: 0.85em;
    background: #f1f5f9;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
}

/* --- Icoanele care inlocuiesc emoji-urile (patrat mic rotunjit, culoare pe ton) --- */
.wn-tone-indigo { --wn-c: #6366f1; --wn-bg: rgba(99, 102, 241, 0.12); }
.wn-tone-violet { --wn-c: #8b5cf6; --wn-bg: rgba(139, 92, 246, 0.12); }
.wn-tone-sky    { --wn-c: #0284c7; --wn-bg: rgba(14, 165, 233, 0.12); }
.wn-tone-green  { --wn-c: #059669; --wn-bg: rgba(16, 185, 129, 0.13); }
.wn-tone-amber  { --wn-c: #d97706; --wn-bg: rgba(245, 158, 11, 0.14); }
.wn-tone-orange { --wn-c: #ea580c; --wn-bg: rgba(249, 115, 22, 0.13); }
.wn-tone-red    { --wn-c: #dc2626; --wn-bg: rgba(239, 68, 68, 0.12); }
.wn-tone-pink   { --wn-c: #db2777; --wn-bg: rgba(236, 72, 153, 0.12); }
.wn-tone-slate  { --wn-c: #475569; --wn-bg: rgba(100, 116, 139, 0.13); }

.wn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 7px;
    background: var(--wn-bg, rgba(99, 102, 241, 0.12));
    color: var(--wn-c, #6366f1);
    font-size: 0.88rem;
    line-height: 1;
    flex: 0 0 auto;
}

.wn-ico i {
    font-size: inherit;
    line-height: 1;
    font-style: normal;
}

/* Steag de tara in locul icoanei (🇮🇹, 🇫🇷…): poza, fara patratul colorat */
.wn-ico.wn-ico-flag {
    background: none;
}

.wn-ico-flag .wn-flag {
    display: block;
    width: 1.5rem;
    height: 1rem;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.wn-body .wn-flag-inline {
    display: inline-block;
    width: 1.3rem;
    height: 0.87rem;
    margin: 0 0.15rem 0 0.1rem;
    border-radius: 2px;
    vertical-align: -0.12rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}


/* --- CTA Section --- */

.whatsnew-cta {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.whatsnew-cta h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .whatsnew-hero-content h1 {
        font-size: 1.625rem;
    }

    .whatsnew-hero-stats {
        gap: 0.9rem 1.5rem;
    }

    .whatsnew-hero-stat-number {
        font-size: 1.25rem;
    }

    .whatsnew-timeline {
        padding-left: 2.5rem;
    }

    .whatsnew-timeline::before {
        left: 0.875rem;
    }

    .whatsnew-icon {
        left: -2.5rem;
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.65rem;
    }

    .whatsnew-icon.wn-dot {
        left: calc(-2.5rem + 0.875rem - 0.5rem + 1px);
        width: 1rem;
        height: 1rem;
    }

    .whatsnew-title {
        font-size: 0.98rem;
        gap: 0.6rem;
    }

    .whatsnew-title .wn-ico-title {
        width: 1.85rem;
        height: 1.85rem;
        font-size: 0.95rem;
    }

    .whatsnew-desc {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .wn-ver {
        font-size: 0.7rem;
        padding: 0.18rem 0.55rem;
    }
}

/* ==========================================================================
   PRIMUL ECRAN FARA ANIMATIA DE INTRARE (22 oct 2026)
   AOS porneste elementele cu opacity:0 si le arata abia la scroll/animatie, deci titlul si
   subtitlul din primul ecran nu erau candidate LCP (Lighthouse lua in loc bula asistentului AI
   sau textul din header, mult mai tarziu). In prima sectiune a paginii (hero-ul) elementele
   apar direct; restul paginii isi pastreaza animatiile.
   ========================================================================== */
#main-content > section:first-of-type[data-aos],
#main-content > section:first-of-type [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* css/components.css */
/**
 * Componente CSS reutilizabile - startup-delivery.ro
 *
 * Ultima modificare: 2026-02-06 21:30
 * Modificari:
 *   2026-02-06 21:30 — Redus height solution cards (280→220 desktop, 240→200 tableta, 220→180 mobil)
 *   2026-02-06 12:00 — H2 section headers cu icon, testimonial cards, blog section pe solutii
 *   2026-02-03 20:30 — Solution cards cu imagini, overlay gradient, hover zoom, responsive grid
 *   2026-02-01 23:15 — Redesign CTA section — glow orbs, dark bg, buton luminos, animatii
 */

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumb {
    background: transparent;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb-item a {
    color: var(--color-text-medium);
    text-decoration: none;
    transition: var(--transition-base);
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-item.active {
    color: var(--color-primary);
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    display: inline-block;
    padding-right: 0.5rem;
    color: var(--color-text-light);
}

/* ==========================================================================
   FEATURE GRID
   ========================================================================== */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-item {
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: white;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--color-primary);
    font-size: 1.5rem;
}

.feature-title {
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-text {
    color: var(--color-text-medium);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ==========================================================================
   CTA SECTION — glow design
   ========================================================================== */

.cta-section {
    position: relative;
    padding: 6rem 0;
    background: #0f172a;
    color: white;
    text-align: center;
    overflow: hidden;
}

/* Glow orbs — animated background blobs */
.cta-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
    will-change: transform;
}

.cta-glow--1 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.6), transparent 70%);
    top: -120px;
    left: -80px;
    animation: ctaFloat1 8s ease-in-out infinite;
}

.cta-glow--2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 70%);
    bottom: -100px;
    right: -60px;
    animation: ctaFloat2 10s ease-in-out infinite;
}

.cta-glow--3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(103, 232, 249, 0.3), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ctaFloat3 12s ease-in-out infinite;
}

@keyframes ctaFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, 30px) scale(1.1); }
}

@keyframes ctaFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, -40px) scale(1.15); }
}

@keyframes ctaFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
}

/* Content z-index above glow */
.cta-inner {
    position: relative;
    z-index: 1;
}

.cta-section h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    color: white;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Primary glow button */
.btn-cta-glow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: var(--radius-xl);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow:
        0 0 20px rgba(99, 102, 241, 0.4),
        0 0 60px rgba(139, 92, 246, 0.2);
}

.btn-cta-glow:hover {
    transform: translateY(-3px) scale(1.02);
    color: white;
    box-shadow:
        0 0 30px rgba(99, 102, 241, 0.6),
        0 0 80px rgba(139, 92, 246, 0.35);
}

.btn-cta-glow:active {
    transform: translateY(-1px) scale(1);
}

/* Small trust line under button */
.cta-trust {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
}

.cta-trust i {
    color: #10b981;
    margin-right: 0.25rem;
}

/* Legacy classes kept for backwards compat */
.cta-text {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cta-white {
    background: white;
    color: var(--color-primary);
    font-weight: 600;
    border-radius: var(--radius-lg);
    padding: 0.75rem 2rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition-base);
}

.btn-cta-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    color: var(--color-primary);
}

.btn-cta-outline {
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    border-radius: var(--radius-lg);
    padding: 0.75rem 2rem;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition-base);
}

.btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
}

/* ==========================================================================
   STATS COUNTER
   ========================================================================== */

.stats-section {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.stat-label {
    color: var(--color-text-medium);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   ICON BOX
   ========================================================================== */

.icon-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.icon-box-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.icon-box-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.icon-box-text {
    color: var(--color-text-medium);
    font-size: 0.875rem;
}

/* ==========================================================================
   STEPS / PROCESS
   ========================================================================== */

.process-steps {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.process-step {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.step-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.step-text {
    color: var(--color-text-medium);
    font-size: 0.875rem;
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.faq-section .accordion-item {
    border: none;
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.faq-section .accordion-button {
    font-family: var(--font-body);
    font-weight: 500;
    padding: 1.25rem 1.5rem;
    background: white;
}

.faq-section .accordion-button:not(.collapsed) {
    color: var(--color-primary);
    background: var(--color-surface);
}

.faq-section .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-section .accordion-body {
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text-medium);
}

/* ==========================================================================
   TABS NAVIGATION
   ========================================================================== */

.nav-tabs-custom {
    border-bottom: 2px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-tabs-custom .nav-link {
    color: var(--color-text-medium);
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    position: relative;
    text-decoration: none;
    display: block;
    cursor: pointer;
    background: transparent;
    transition: var(--transition-base);
}

.nav-tabs-custom .nav-link:hover {
    color: var(--color-primary);
}

.nav-tabs-custom .nav-link.active {
    color: var(--color-primary);
}

.nav-tabs-custom .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
}

/* ==========================================================================
   BADGE CUSTOM
   ========================================================================== */

.badge-primary {
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-2xl);
    display: inline-block;
}

.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-accent-green);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-2xl);
    display: inline-block;
}

.badge-new {
    background: rgba(251, 191, 36, 0.1);
    color: #f59e0b;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-2xl);
    display: inline-block;
}

/* ==========================================================================
   PAGINATION CUSTOM
   ========================================================================== */

.pagination-custom {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.pagination-custom .page-item .page-link {
    border: none;
    color: var(--color-text-medium);
    border-radius: var(--radius-md);
    margin: 0 0.125rem;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition-base);
    cursor: pointer;
    background: transparent;
}

.pagination-custom .page-item.active .page-link {
    background: var(--gradient-primary);
    color: white;
}

.pagination-custom .page-item .page-link:hover {
    background: var(--color-surface);
}

.pagination-custom .page-item.active .page-link:hover {
    background: var(--gradient-primary);
}

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */

#back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: calc(2rem + 8px);
    z-index: 1040;
    width: 36px;
    height: 32px;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.55);
    backdrop-filter: blur(6px);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: var(--transition-base);
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

@media (max-width: 991px) {
    #back-to-top {
        right: calc(1.25rem + 10px);
    }
}

#back-to-top.visible {
    display: flex;
}

#back-to-top:hover {
    background: rgba(79, 70, 229, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    color: white;
}

/* ==========================================================================
   SOCIAL SHARE
   ========================================================================== */

.social-share {
    display: flex;
    gap: 0.5rem;
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    color: var(--color-text-medium);
    background: var(--color-surface);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.share-btn:hover {
    color: white;
}

.share-btn.facebook:hover {
    background: #1877f2;
}

.share-btn.twitter:hover {
    background: #1da1f2;
}

.share-btn.linkedin:hover {
    background: #0a66c2;
}

.share-btn.whatsapp:hover {
    background: #25d366;
}

/* ==========================================================================
   SOLUTIONS PAGE — cards cu imagini, overlay si hover
   ========================================================================== */

/* Section header */
.solutions-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.solutions-section-header h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.solutions-section-header h2 i {
    color: var(--color-primary);
    margin-right: 0.5rem;
    font-size: 1.25rem;
}

.solutions-section-header p {
    color: var(--color-text-medium);
    font-size: 0.9375rem;
    margin: 0;
}

/* Legacy badge styles (keep for backwards compat) */
.solutions-section-header .badge-primary,
.solutions-section-header .badge-success,
.solutions-section-header .badge-new {
    font-size: 0.9375rem;
    padding: 0.5rem 1.25rem;
    letter-spacing: 0.02em;
}

/* Card container */
.solution-card {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: 220px;
    box-shadow: var(--shadow-md);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.solution-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

/* Image layer */
.solution-card-img {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.solution-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.solution-card:hover .solution-card-img img {
    transform: scale(1.08);
}

/* Gradient overlay */
.solution-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.05) 30%,
        rgba(0, 0, 0, 0.55) 70%,
        rgba(0, 0, 0, 0.8) 100%
    );
    border-radius: var(--radius-xl);
    transition: background 0.35s ease;
}

.solution-card:hover .solution-card-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

/* Title */
.solution-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.375rem;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Description */
.solution-card-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}

.solution-card:hover .solution-card-desc {
    max-height: 80px;
    opacity: 1;
}

/* CTA link */
.solution-card-cta {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent-cyan);
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.solution-card:hover .solution-card-cta {
    opacity: 1;
    transform: translateY(0);
}

.solution-card-cta i {
    transition: transform 0.2s ease;
}

.solution-card:hover .solution-card-cta i {
    transform: translateX(4px);
}

/* Alternate section background */
.solutions-section.bg-light {
    background: var(--color-surface);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .solution-card {
        height: 200px;
    }
    .solution-card-desc {
        max-height: none;
        opacity: 1;
        font-size: 0.8rem;
    }
    .solution-card-cta {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575.98px) {
    .solution-card {
        height: 180px;
    }
    .solution-card-title {
        font-size: 1.125rem;
    }
    .solutions-section-header {
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   TESTIMONIAL CARDS
   ========================================================================== */

.testimonial-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.testimonial-stars {
    display: flex;
    gap: 0.15rem;
    margin-bottom: 1rem;
    color: #f59e0b;
    font-size: 0.875rem;
}

.testimonial-text {
    color: var(--color-text-medium);
    font-size: 0.9375rem;
    line-height: 1.65;
    flex: 1;
    margin-bottom: 1.25rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.testimonial-author-info strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

.testimonial-author-info span {
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

/* Blog section on solutions page */
.solutions-blog-section .blog-card {
    height: 100%;
}

.solutions-testimonials-section.bg-light {
    background: var(--color-surface);
}

/* css/animations.css */
/**
 * Animații CSS - startup-delivery.ro
 *
 * Ultima modificare: 2026-01-30 22:30
 * Modificare: Creare animații CSS (orbit, pulse, float, fade)
 */

/* ==========================================================================
   ORBIT ANIMATION - Particule orbitând în jurul unui element central
   ========================================================================== */

.orbit-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.3);
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.orbit-ring-1 {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    animation: orbit-rotate 20s linear infinite;
}

.orbit-ring-2 {
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    animation: orbit-rotate 30s linear infinite reverse;
}

.orbit-ring-3 {
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    animation: orbit-rotate 25s linear infinite;
}

.orbit-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent-cyan);
}

/* Particule pe ring-ul 1 */
.orbit-ring-1 .orbit-particle:nth-child(1) {
    top: 0;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
}

.orbit-ring-1 .orbit-particle:nth-child(2) {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    margin-bottom: -5px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-bottom: -6px;
    background: var(--color-primary);
}

.orbit-ring-1 .orbit-particle:nth-child(3) {
    top: 50%;
    right: 0;
    margin-top: -5px;
    margin-right: -5px;
    background: var(--color-secondary);
}

/* Particule pe ring-ul 2 */
.orbit-ring-2 .orbit-particle:nth-child(1) {
    top: 15%;
    right: 5%;
    width: 12px;
    height: 12px;
    background: var(--color-accent-green);
}

.orbit-ring-2 .orbit-particle:nth-child(2) {
    bottom: 10%;
    left: 8%;
    background: var(--color-primary);
}

.orbit-ring-2 .orbit-particle:nth-child(3) {
    top: 50%;
    left: 0;
    margin-top: -5px;
    margin-left: -5px;
    width: 12px;
    height: 12px;
    background: var(--color-accent-cyan);
}

/* Particule pe ring-ul 3 */
.orbit-ring-3 .orbit-particle:nth-child(1) {
    top: 5%;
    left: 30%;
    background: var(--color-secondary);
}

.orbit-ring-3 .orbit-particle:nth-child(2) {
    bottom: 8%;
    right: 15%;
    width: 12px;
    height: 12px;
    background: var(--color-accent-green);
}

.orbit-ring-3 .orbit-particle:nth-child(3) {
    top: 60%;
    left: 0;
    margin-left: -5px;
    background: var(--color-primary);
}

.orbit-ring-3 .orbit-particle:nth-child(4) {
    top: 20%;
    right: 0;
    margin-right: -5px;
    width: 12px;
    height: 12px;
    background: var(--color-accent-cyan);
}

@keyframes orbit-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   PULSE ANIMATION
   ========================================================================== */

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse-dot {
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.5);
    }
}

/* ==========================================================================
   FLOAT ANIMATION
   ========================================================================== */

.float {
    animation: float 3s ease-in-out infinite;
}

.float-delayed {
    animation: float 3s ease-in-out infinite 1.5s;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ==========================================================================
   GRADIENT SHIFT
   ========================================================================== */

.gradient-shift {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ==========================================================================
   SHIMMER EFFECT - Pentru stări de încărcare
   ========================================================================== */

.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   FADE IN VARIANTS
   ========================================================================== */

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-down {
    animation: fadeInDown 0.6s ease forwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.6s ease forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 0.6s ease forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   SCALE IN
   ========================================================================== */

.scale-in {
    animation: scaleIn 0.4s ease forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   SLIDE UP - Pentru elemente care apar la scroll
   ========================================================================== */

.slide-up {
    animation: slideUp 0.5s ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   TYPEWRITER EFFECT - Pentru secțiunea hero
   ========================================================================== */

.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--color-accent-cyan);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: var(--color-accent-cyan);
    }
}

/* ==========================================================================
   COUNTER ANIMATION TRIGGER
   Clasa folosită de JS pentru a declanșa animația de numărare
   ========================================================================== */

.count-up {
    /* Clasă marker - animația este controlată via JavaScript */
}

/* ==========================================================================
   HOVER LIFT - Pentru elemente interactive
   ========================================================================== */

.hover-lift {
    transition: var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   BORDER GLOW - Efect de strălucire pe margini
   ========================================================================== */

.border-glow {
    position: relative;
    overflow: hidden;
}

.border-glow::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        var(--color-primary),
        var(--color-accent-cyan),
        var(--color-secondary),
        var(--color-accent-green)
    );
    background-size: 400%;
    border-radius: inherit;
    z-index: -1;
    animation: border-glow-rotate 3s linear infinite;
}

@keyframes border-glow-rotate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ==========================================================================
   ACCESIBILITATE - Respect pentru preferințele utilizatorului
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* css/responsive.css */
/**
 * Stiluri responsive - startup-delivery.ro
 *
 * Ultima modificare: 2026-09-22 00:25
 * Modificari:
 *   2026-09-22 00:25 — Mobil (<992px): butoanele CTA/cookie/sageti carusel la minim 44px; subsolul lasa loc
 *                      butoanelor plutitoare (WhatsApp + chat) ca sa nu acopere ultimele randuri
 *   2026-02-02 03:30 — Responsive service-hero-dark (pagini solutii/domenii)
 */

/* ==========================================================================
   EXTRA LARGE SCREENS (>= 1400px)
   ========================================================================== */

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ==========================================================================
   LARGE SCREENS (max-width: 1199px)
   ========================================================================== */

@media (max-width: 1199px) {
    .mega-dropdown {
        padding: 1.5rem;
    }

    section {
        padding: 4rem 0;
    }

    .hero-section {
        min-height: auto;
        padding: 8rem 0 4rem;
    }
}

/* ==========================================================================
   MEDIUM SCREENS / TABLETS (max-width: 991px)
   ========================================================================== */

@media (max-width: 991px) {
    /* Stilurile navbar mobil sunt acum exclusiv în navbar.css */

    /* Hero */
    .hero-section {
        text-align: center;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-image {
        margin-top: 2rem;
    }

    /* Pricing */
    .pricing-card.featured {
        transform: none;
    }

    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }

    .pricing-hero-content,
    .contact-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .pricing-hero-stats,
    .contact-hero-stats {
        width: 100%;
        justify-content: flex-start;
    }

    /* Nav link — fără border-radius pe mobil */
    .nav-link {
        border-radius: 0;
    }

    /* Process Steps */
    .process-steps {
        flex-direction: column;
    }

    /* Stats */
    .stats-section .row > div {
        margin-bottom: 2rem;
    }

    /* Footer */
    .footer .row > [class*="col"] {
        margin-bottom: 1.5rem;
    }

    /* Service Hero Dark */
    .service-hero-dark {
        padding: 1rem 0 2.5rem;
    }

    /* CTA Section */
    .cta-section {
        padding: 3rem 0;
    }

    .cta-section h2 {
        font-size: 1.75rem;
    }

    .cta-subtitle {
        font-size: 1rem;
    }

    /* Service content — imagini și coloane responsiv */
    .service-content-body .row {
        margin-bottom: 2rem;
    }

    .service-content-body img {
        margin-bottom: 1rem;
    }
}

/* ==========================================================================
   SMALL SCREENS / MOBILE (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
    section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    /* Hero */
    .hero-section {
        padding: 6rem 0 3rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions .btn {
        width: 100%;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Pricing */
    .pricing-card {
        margin-bottom: 1.5rem;
    }

    .pricing-hero h1,
    .contact-hero h1 {
        font-size: 1.75rem;
    }

    .pricing-hero .hero-subtitle,
    .contact-hero .hero-subtitle {
        font-size: 0.875rem;
    }

    .pricing-hero-stats,
    .contact-hero-stats {
        gap: 1.25rem;
    }

    .pricing-hero-stat-number,
    .contact-hero-stat-number {
        font-size: 1.35rem;
    }

    .pricing-toggle-btn {
        padding: 0.4rem 1rem;
        font-size: 0.8125rem;
    }

    .pricing-trust-bar {
        gap: 1rem;
    }

    .pricing-trust-item {
        flex: 0 0 calc(50% - 0.5rem);
        font-size: 0.8125rem;
    }

    .pricing-help-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .pricing-help-actions {
        flex-direction: column;
        width: 100%;
    }

    .pricing-help-actions .btn {
        width: 100%;
    }

    .pricing-guarantee {
        flex-direction: column;
        text-align: center;
    }

    .pricing-comparison-table thead th:first-child {
        width: 30%;
    }

    /* Error 404 */
    .error-404-title {
        font-size: 6rem;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 1.5rem;
    }

    /* Pricing */
    .pricing-header {
        padding: 1.5rem;
    }

    .pricing-features {
        padding: 1rem 1.5rem;
    }

    /* Client Logos */
    .client-logos {
        flex-wrap: wrap;
    }

    /* Service Hero Dark */
    .service-hero-dark h1 {
        font-size: 2rem;
    }

    .service-hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .service-hero-actions .btn {
        width: 100%;
    }

    /* CTA */
    .cta-actions {
        flex-direction: column;
    }

    /* Footer */
    .footer-col {
        margin-bottom: 2rem;
    }

    .footer-bottom {
        text-align: center;
    }
}

/* ==========================================================================
   EXTRA SMALL SCREENS (max-width: 575px)
   ========================================================================== */

@media (max-width: 575px) {
    body {
        font-size: 0.9375rem;
    }

    .btn-lg {
        padding: 0.625rem 1.5rem;
        font-size: 1rem;
    }

    .hero-title {
        margin-bottom: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
        text-align: center;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .orbit-container {
        width: 200px;
        height: 200px;
        transform: scale(0.8);
    }

    .stat-number {
        font-size: 2rem;
    }

    .pricing-amount {
        font-size: 2rem;
    }

    .pricing-header {
        padding: 1.5rem 1.5rem 1rem;
    }

    .pricing-features {
        padding: 0 1.5rem 0.75rem;
    }

    .pricing-footer {
        padding: 0 1.5rem 1.5rem;
    }

    .pricing-trust-item {
        flex: 0 0 100%;
        justify-content: center;
    }

    .pricing-comparison-table {
        font-size: 0.75rem;
    }

    .pricing-comparison-table thead th,
    .pricing-comparison-table tbody td {
        padding: 0.5rem;
    }

    .pricing-setup-amount {
        font-size: 1.375rem;
    }

    .service-hero-dark h1 {
        font-size: 1.75rem;
    }

    .service-hero-subtitle {
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .site-navbar,
    .site-footer,
    .cookie-banner,
    #back-to-top,
    .cta-section {
        display: none;
    }

    body {
        font-size: 12pt;
        color: black;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    .hero-section {
        min-height: auto;
        background: none;
        color: black;
        padding: 2rem 0;
    }
}

/* ==========================================================================
   TINTE DE ATINGERE + LOC PENTRU BUTOANELE PLUTITOARE (2026-09-22)
   Doar sub 992px — desktopul ramane neatins.
   ========================================================================== */
@media (max-width: 991px) {
    .hero-actions .btn,
    .btn-lg {
        min-height: 44px;
    }
    .cookie-banner-actions .btn,
    .cookie-banner-actions .btn-cookie-decline {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo-carousel-arrow,
    .blog-carousel-btn,
    .ts-arrow {
        min-width: 44px;
        min-height: 44px;
    }
    /* WhatsApp (bottom 5rem) + bula de chat stau peste coltul din dreapta-jos:
       subsolul primeste spatiu ca ultimele linkuri sa poata fi derulate deasupra lor */
    .site-footer {
        padding-bottom: 110px;
    }
}

/* css/navbar.css */
/**
 * Navbar & Mega Dropdown — CSS dedicat (sursa unică de adevăr)
 *
 * Ultima modificare: 2026-10-22 21:58
 * Modificari:
 *   2026-10-22 21:58 — Reparatii QA: Demo compact doar ≥1400px, mega-meniuri compacte pe ecrane joase, bara ascunsa cu panou
 *                      deschis, asistentul AI sub header, bulele ascunse sub bannerul de cookie, contrast, sertar 44px
 *   2026-10-22 21:30 — Header pe doua niveluri (sectiunea 9): rand principal mai inalt + bara plutitoare de actiuni,
 *                      mega-meniurile centrate pe container, banda „Marketing si web", meniul Resurse,
 *                      starea compacta la scroll, bulele telefon/WhatsApp; scos decalajul -70px de pe desktop
 *   2026-09-22 00:25 — Mobil: butonul MENIU si telefonul din navbar la minim 44px inaltime (tinta de atingere)
 *   2026-05-24 17:15 — Hover WOW (scale+rotate+glow) pe logo, phone, whatsapp
 *   2026-05-24 17:00 — Nav centrat (margin-left:auto), icon CTA Contacteaza-ne
 */

/* Inaltimile headerului — sursa unica (spacer-ul si offseturile de admin bar le folosesc) */
:root {
    --sd-nav-row: 78px;          /* randul principal, sus de tot */
    --sd-nav-row-compact: 62px;  /* randul principal dupa scroll */
    --sd-nav-total: 104px;       /* rand + jumatatea de jos a barei plutitoare + aer */
}
@media (max-width: 991px) {
    :root {
        --sd-nav-row: 62px;
        --sd-nav-row-compact: 62px;
        --sd-nav-total: 110px;   /* rand + banda subtire de actiuni */
    }
}

/* ==========================================================================
   1. NAVBAR PRINCIPAL (fixed top)
   ========================================================================== */

.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-navbar.navbar-scrolled {
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    border-bottom-color: rgba(99, 102, 241, 0.1);
    animation: navSlide 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes navSlide {
    from {
        transform: translateY(-4px);
        opacity: 0.9;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   2. LAYOUT INTERN — flex pe o linie
   ========================================================================== */

.navbar-inner {
    display: flex;
    align-items: center;
    height: var(--sd-nav-row);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo */
.navbar-logo {
    flex-shrink: 0;
    margin-right: 1.5rem;
}

.navbar-logo img {
    height: 38px;
    width: auto;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.25s ease,
                opacity 0.15s ease;
    will-change: transform, filter;
}

.navbar-logo:hover img {
    transform: scale(1.12) rotate(-3deg);
    filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.45));
}

/* Meniu container (nav items + actions) */
.navbar-menu {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    margin-left: 1rem;
}

/* Lista de navigare — CRITICAL: flex-direction: row suprascrie Bootstrap .navbar-nav column */
.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    /* Aliniat la stanga, langa logo. Actions au margin-left:auto deci se duc la dreapta */
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.25rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.navbar-nav .nav-item {
    position: relative;
}

/* .site-navbar prefix — specificity 0-3-0 for overriding Bootstrap's .navbar-nav .nav-link (0-2-0) */
.site-navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.5rem 0.7rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-dark, #374151);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-md, 0.5rem);
    transition: color 0.15s ease, background 0.15s ease;
}

.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link.active {
    color: var(--color-primary, #6366f1);
    background: rgba(99, 102, 241, 0.06);
}

/* ==========================================================================
   2b. ICOANE LUCIDE pe meniul principal — efect WOW mov SDRO
   ========================================================================== */

.site-navbar .navbar-nav .nav-link .nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    color: #8b5cf6; /* Violet SDRO */
    margin-right: 0.2rem;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.2s ease,
                filter 0.25s ease;
    will-change: transform, filter;
}

/* Icon pe butonul DEMO GRATIS — sparkle pulse non-stop, hover mai viu cu wiggle */
.btn-nav-demo .btn-nav-demo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    margin-right: 0.4rem;
    color: #fff;
    vertical-align: middle;
    animation: btnDemoSparkle 1.8s ease-in-out infinite;
    will-change: transform, filter;
}
@keyframes btnDemoSparkle {
    0%, 100% { transform: scale(1)    rotate(0);   filter: drop-shadow(0 0 2px rgba(255,255,255,.4)); }
    50%      { transform: scale(1.18) rotate(15deg); filter: drop-shadow(0 0 6px rgba(255,255,255,.85)); }
}

/* Hover: animatie mai rapida + glow puternic + wiggle continuu */
.btn-nav-demo:hover .btn-nav-demo-icon {
    animation: btnDemoWiggle 0.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 4px rgba(255,255,255,.8));
}
@keyframes btnDemoWiggle {
    0%, 100% { transform: scale(1.2)  rotate(0); }
    25%      { transform: scale(1.3) rotate(-18deg); }
    75%      { transform: scale(1.3) rotate(18deg); }
}

/* Icon pe butonul Contacteaza-ne (CTA) — alb pe fundal mov, mic wiggle la hover */
.btn-nav-cta .btn-nav-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    margin-right: 0.35rem;
    color: #fff;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.25s ease;
}

.btn-nav-cta:hover .btn-nav-cta-icon {
    transform: scale(1.2) rotate(-8deg);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65));
}

/* Icon pe butonul DOWNLOAD — sageata bounce continuu (efect "se descarca ceva") */
.btn-nav-download .btn-nav-download-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 0.5rem; /* spatiu mic intre icon si textul DOWNLOAD */
    color: #fff;
    transition: filter 0.25s ease;
    animation: btnDownloadBounce 1.6s ease-in-out infinite;
    will-change: transform;
}
.btn-nav-download:hover .btn-nav-download-icon {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85));
    animation-duration: 0.8s; /* mai rapid la hover */
}
@keyframes btnDownloadBounce {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(3px); }
}

/* Spatiu intre butonul DOWNLOAD si zona actions (telefon/WhatsApp/Contacteaza-ne) */
.navbar-nav .nav-item:has(.btn-nav-download) {
    margin-right: 0.75rem;
}

/* Hover: scale up + glow mov + rotire micuta */
.site-navbar .navbar-nav .nav-link:hover .nav-link-icon {
    transform: scale(1.25) rotate(-4deg);
    color: #8b5cf6;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.55))
            drop-shadow(0 0 2px rgba(139, 92, 246, 0.35));
}

/* Active: glow constant subtil */
.site-navbar .navbar-nav .nav-link.active .nav-link-icon {
    color: #7c3aed;
    filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.4));
}

/* Pe link-ul CloudShop (gradient text) păstrăm icoana mov */
.site-navbar .navbar-nav .nav-link .nav-link-icon + .gradient-text {
    margin-left: 0;
}

/* ==========================================================================
   3. ACTIONS (telefon + buton CTA) — aliniate la dreapta
   ========================================================================== */

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Container telefon + WhatsApp */
.navbar-contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-phone-number {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-dark, #374151);
    white-space: nowrap;
}

.navbar-phone,
.navbar-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.25s ease;
}

.navbar-phone i,
.navbar-whatsapp i {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.25s ease;
}

.navbar-phone {
    color: var(--color-accent-green, #10b981);
    background: rgba(16, 185, 129, 0.08);
}

.navbar-phone i {
    font-size: 1.1rem;
}

.navbar-phone:hover {
    background: rgba(16, 185, 129, 0.18);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
    color: var(--color-accent-green, #10b981);
}

.navbar-phone:hover i {
    transform: scale(1.25) rotate(-12deg);
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.65));
}

.navbar-whatsapp {
    color: #25d366;
    background: rgba(37, 211, 102, 0.08);
}

.navbar-whatsapp i {
    font-size: 1.25rem;
}

.navbar-whatsapp:hover {
    background: rgba(37, 211, 102, 0.18);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
    color: #25d366;
}

.navbar-whatsapp:hover i {
    transform: scale(1.25) rotate(12deg);
    filter: drop-shadow(0 0 6px rgba(37, 211, 102, 0.65));
}

.btn-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.15rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--gradient-primary, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%));
    border: none;
    border-radius: 50px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-nav-cta:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

.btn-nav-demo {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-nav-demo:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.btn-nav-download {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.28rem 0.65rem;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff !important;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-nav-download:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 27, 75, 0.4);
}

/* ==========================================================================
   4. MEGA DROPDOWN
   ========================================================================== */

.dropdown-arrow {
    transition: transform 0.15s ease;
    opacity: 0.5;
}

.has-mega-dropdown.show .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

/* Zona clickable extinsa pentru sageata-toggle (links cu data-direct-link) — mobil-friendly */
.dropdown-arrow-toggle {
    padding: 8px;
    margin: -8px -8px -8px 4px;
    box-sizing: content-box;
    cursor: pointer;
}

.mega-dropdown {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 860px;
    max-width: calc(100vw - 2rem);
    background: #ffffff;
    border-radius: var(--radius-xl, 1rem);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 1.75rem 2rem;
    margin-top: 0;
    z-index: 1060;
}

.has-mega-dropdown.show .mega-dropdown {
    display: block !important;
}

.mega-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.mega-dropdown-col {
    display: flex;
    flex-direction: column;
}

.mega-dropdown-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary, #6366f1);
    margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid rgba(99, 102, 241, 0.12);
}

.mega-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    margin: 0 -0.625rem;
    border-radius: var(--radius-md, 0.5rem);
    text-decoration: none;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mega-dropdown-item:hover {
    background: var(--color-surface, #f8fafc);
    color: #374151;
}

.mega-dropdown-item:hover .mega-item-icon {
    background: rgba(99, 102, 241, 0.15);
    color: var(--color-primary-dark, #4f46e5);
}

.mega-item-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.08);
    border-radius: var(--radius-md, 0.5rem);
    color: var(--color-primary, #6366f1);
    font-size: 0.9375rem;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
    margin-top: 1px;
}

.mega-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mega-item-text .item-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-dark, #1f2937);
    line-height: 1.3;
}

.mega-item-text .item-desc {
    font-size: 0.6875rem;
    color: var(--color-text-light, #9ca3af);
    line-height: 1.3;
    margin-top: 1px;
}

/* ==========================================================================
   4b. MEGA DROPDOWN — BLOG (grid de articole cu thumbnail)
   ========================================================================== */

.mega-dropdown-blog {
    width: 780px;
}

.mega-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.mega-blog-card {
    display: flex;
    gap: 0.65rem;
    padding: 0.5rem;
    border-radius: var(--radius-md, 0.5rem);
    text-decoration: none;
    color: #374151;
    transition: background 0.15s ease;
}

.mega-blog-card:hover {
    background: var(--color-surface, #f8fafc);
    color: #374151;
}

.mega-blog-thumb {
    width: 72px;
    height: 52px;
    min-width: 72px;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
}

.mega-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-blog-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 1.1rem;
}

.mega-blog-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.mega-blog-title {
    font-family: var(--font-body);
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--color-text-dark, #1f2937);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mega-blog-card:hover .mega-blog-title {
    color: var(--color-primary, #6366f1);
}

.mega-blog-excerpt {
    font-size: 0.65rem;
    color: var(--color-text-light, #9ca3af);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mega-blog-footer {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    text-align: center;
}

.mega-blog-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #6366f1);
    text-decoration: none;
    transition: gap 0.15s ease;
}

.mega-blog-all:hover {
    color: var(--color-primary-dark, #4f46e5);
    gap: 0.65rem;
}

/* ==========================================================================
   5. MOBILE: TELEFON IN NAVBAR + BUTON MENIU + OVERLAY
   ========================================================================== */

/* Telefon mobil in navbar — ascuns pe desktop */
.navbar-mobile-phone {
    display: none;
}

/* Buton MENIU — ascuns pe desktop */
.navbar-menu-btn {
    display: none;
}

.navbar-spacer {
    height: var(--sd-nav-total);
}

.navbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   6. RESPONSIVE — mobil (sub 992px)
   ========================================================================== */

@media (max-width: 991px) {

    /* ---- Panel lateral slide-in ---- */
    .navbar-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        max-width: 82vw;
        height: 100vh;
        height: 100dvh;
        background: #fff;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        box-shadow: -8px 0 40px rgba(15, 23, 42, 0.12);
        z-index: 1100;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .navbar-menu.open {
        transform: translateX(0);
        visibility: visible;
    }

    /* ---- Zona de navigare ---- */
    .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 0 !important;
        padding: 72px 1.25rem 0 !important;
    }

    .site-navbar .navbar-nav .nav-link {
        padding: 0.8rem 0.25rem;
        font-size: 0.9375rem;
        font-weight: 500;
        color: var(--color-text-dark, #1f2937);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 0;
    }

    .site-navbar .navbar-nav .nav-link:hover,
    .site-navbar .navbar-nav .nav-link.active {
        background: none;
        color: var(--color-primary, #6366f1);
    }

    /* ---- Butoane CTA mobil (Demo + Download) ---- */
    .navbar-nav .nav-item:has(.btn-nav-demo),
    .navbar-nav .nav-item:has(.btn-nav-download) {
        margin-top: 0.35rem;
    }

    .btn-nav-demo,
    .btn-nav-download {
        display: flex;
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.7rem 1rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .btn-nav-cta {
        display: flex;
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.75rem 1rem;
        border-radius: 50px;
        font-size: 0.875rem;
    }

    /* ---- Actiuni (telefon, WhatsApp, CTA) ---- */
    .navbar-actions {
        margin-left: 0;
        margin-top: auto;
        padding: 1rem 1.25rem 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.75rem;
    }

    .navbar-contact {
        justify-content: center;
        gap: 0.75rem;
    }

    .navbar-phone,
    .navbar-whatsapp {
        width: 44px;
        height: 44px;
    }

    .navbar-phone i {
        font-size: 1.2rem;
    }

    .navbar-whatsapp i {
        font-size: 1.35rem;
    }

    .navbar-phone-number {
        font-size: 0.9375rem;
        font-weight: 600;
    }

    /* ---- Mega dropdown-uri in mobil ---- */
    .mega-dropdown {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        padding: 0.25rem 0 0.5rem !important;
        border-radius: 0 !important;
        background: rgba(248, 250, 252, 0.6) !important;
    }

    .mega-dropdown-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    .mega-dropdown-col {
        padding-bottom: 0.25rem;
    }

    .mega-dropdown-title {
        margin-bottom: 0.375rem;
        padding-bottom: 0.25rem;
        font-size: 0.625rem;
    }

    .mega-dropdown-item {
        padding: 0.35rem 0.5rem;
        margin: 0;
    }

    .mega-item-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.75rem;
    }

    .mega-dropdown-blog {
        width: 100% !important;
    }

    .mega-blog-grid {
        grid-template-columns: 1fr !important;
        gap: 0.125rem;
    }

    .mega-blog-card {
        padding: 0.35rem 0.5rem;
    }

    .mega-blog-thumb {
        width: 52px;
        height: 38px;
        min-width: 52px;
    }

    .mega-blog-title {
        font-size: 0.8rem;
    }

    .mega-blog-excerpt {
        display: none;
    }

    .mega-blog-footer {
        margin-top: 0.375rem;
        padding-top: 0.375rem;
    }

    /* ---- Reordonare mobil: Meniu (stanga) | Telefon (centru) | Logo (dreapta) ---- */
    .navbar-logo {
        order: 3;
        margin-left: auto;
        margin-right: 0;
    }

    .navbar-menu-btn {
        order: 1;
    }

    /* ---- Telefon in navbar (vizibil pe mobil) ---- */
    .navbar-mobile-phone {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        order: 2;
        margin-left: auto;
        margin-right: auto;
        text-decoration: none;
        padding: 0.3rem 0.65rem;
        border-radius: 50px;
        background: rgba(16, 185, 129, 0.08);
        transition: background 0.15s ease;
    }

    .navbar-mobile-phone i {
        font-size: 0.85rem;
        color: #059669;
    }

    .navbar-mobile-phone span {
        font-family: var(--font-body);
        font-size: 0.8rem;
        font-weight: 700;
        color: #065f46;
        white-space: nowrap;
    }

    .navbar-mobile-phone:active {
        background: rgba(16, 185, 129, 0.18);
    }

    /* ---- Buton MENIU stilizat ---- */
    .navbar-menu-btn {
        display: flex !important;
        align-items: center;
        gap: 0.3rem;
        padding: 0.4rem 0.75rem;
        background: var(--gradient-primary, linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%));
        color: #fff;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        z-index: 1200;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        flex-shrink: 0;
    }

    .navbar-menu-btn:active {
        transform: scale(0.95);
    }

    .navbar-menu-btn-icon {
        font-size: 1rem;
        line-height: 1;
    }

    .navbar-menu-btn-text {
        font-family: var(--font-body);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Stare activa (meniu deschis) — schimba emoji-ul prin CSS nu se poate, dar schimbam stilul */
    .navbar-menu-btn.active {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }
}

/* ==========================================================================
   7. WHATSAPP FLOAT (desktop + mobil)
   ========================================================================== */

.mobile-whatsapp-float {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 5.25rem;
    right: 2rem;
    width: 52px;
    height: 52px;
    background: #25d366;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    z-index: 1040;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-whatsapp-float i {
    font-size: 1.6rem;
    color: #fff;
}

.mobile-whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5), 0 3px 8px rgba(0, 0, 0, 0.12);
}

.mobile-whatsapp-float:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

@media (max-width: 991px) {
    .mobile-whatsapp-float {
        bottom: 5rem;
        right: 1.25rem;
        width: 56px;
        height: 56px;
    }

    .mobile-whatsapp-float i {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   8. TINTE DE ATINGERE PE MOBIL (2026-09-22) — minim 44px (Apple HIG / Lighthouse)
   Doar sub 992px: pe desktop nu se schimba nimic.
   ========================================================================== */
@media (max-width: 991px) {
    .navbar-menu-btn,
    .navbar-mobile-phone {
        min-height: 44px;
    }
    .navbar-menu-btn {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

/* ==========================================================================
   9. HEADER PE DOUA NIVELURI (2026-10-22)
   Sus: rand principal aerisit (sigla + nume, 5 linkuri, Contacteaza-ne) si
   bara plutitoare de actiuni care sta peste marginea de jos a headerului.
   Dupa 50px de scroll (.navbar-scrolled, din main.js): un singur rand compact,
   cautarea + Demo intra in rand, telefonul si WhatsApp devin bule plutitoare.
   ========================================================================== */

/* ---- Offseturile cu admin bar / SEO toolbar (main.css are inca valorile vechi de 72px;
        selectorul cu html in fata castiga indiferent de ordinea foilor de stil) ---- */
html body.has-admin-bar .navbar-spacer { height: calc(var(--sd-nav-total) + 36px); }
html body.has-admin-bar.has-seo-toolbar .navbar-spacer { height: calc(var(--sd-nav-total) + 76px); }
@media (max-width: 767.98px) {
    html body.has-admin-bar.has-seo-toolbar .navbar-spacer { height: calc(var(--sd-nav-total) + 36px); }
}

/* ---- Sigla + numele ---- */
.navbar-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
}
.navbar-logo img {
    height: 44px;
    width: 44px;
    object-fit: contain;
}
.navbar-wordmark {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1e1b4b;
    white-space: nowrap;
    line-height: 1;
    transition: font-size 0.3s ease;
}
.navbar-wordmark b {
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.navbar-wordmark small {
    font-size: 0.78em;
    font-weight: 600;
    color: #94a3b8;
}

/* ---- Desktop ---- */
@media (min-width: 992px) {
    .site-navbar {
        border-bottom-color: rgba(99, 102, 241, 0.12);
    }

    /* Meniul centrat intre sigla si grupul din dreapta */
    .site-navbar .navbar-nav {
        margin: 0 auto !important;
        gap: 0.4rem;
    }
    .navbar-actions {
        margin-left: 0;
    }
    .site-navbar .navbar-nav .nav-link {
        padding: 0.6rem 0.95rem;
        font-size: 0.92rem;
        gap: 0.25rem;
    }
    .site-navbar .navbar-nav .nav-link .nav-link-icon {
        font-size: 1.12rem;
        margin-right: 0.3rem;
    }
    .btn-nav-cta {
        padding: 0.62rem 1.3rem;
        font-size: 0.875rem;
    }

    /* Ce sta acum in bara plutitoare nu se mai repeta in rand */
    .nav-item--drawer,
    .navbar-contact {
        display: none !important;
    }

    /* Mega-meniurile: centrate pe container (nu pe link), ca sa nu iasa din ecran
       acum ca meniul e centrat */
    .navbar-inner {
        position: relative;
    }
    .site-navbar .navbar-nav .nav-item.has-mega-dropdown {
        position: static;
    }
    .site-navbar .mega-dropdown {
        left: 50%;
        top: calc(100% - 8px);
        transform: translateX(-50%);
        /* Solutii are ~700px: pe laptopurile cu 768px inaltime panoul se deruleaza in loc sa fie taiat */
        max-height: calc(100vh - var(--sd-nav-row) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* Golul de ~11px dintre link si panou e acoperit de intarzierea de 350 ms din main.js (initMegaDropdown) */

    /* ---- Bara plutitoare de actiuni ---- */
    .navbar-subbar {
        position: absolute;
        left: 50%;
        top: calc(var(--sd-nav-row) - 22px);
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 6px;
        height: 44px;
        padding: 0 5px;
        background: #ffffff;
        border: 1px solid rgba(99, 102, 241, 0.2);
        border-radius: 999px;
        box-shadow: 0 12px 32px -14px rgba(49, 46, 129, 0.38), 0 2px 6px rgba(15, 23, 42, 0.06);
        white-space: nowrap;
        transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
    }
    .site-navbar.navbar-scrolled .navbar-subbar {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -12px);
    }

    /* ---- Stare compacta (dupa scroll) ---- */
    .site-navbar.navbar-scrolled .navbar-inner {
        height: var(--sd-nav-row-compact);
    }
    .site-navbar.navbar-scrolled .navbar-logo img {
        height: 36px;
        width: 36px;
    }
    .site-navbar.navbar-scrolled .navbar-wordmark {
        font-size: 1.02rem;
    }
    .navbar-compact-tools {
        display: none;
        align-items: center;
        gap: 0.7rem;
        margin-right: 0.85rem;
    }
    .site-navbar.navbar-scrolled .navbar-compact-tools {
        display: flex;
        animation: sdCompactIn 0.35s ease both;
    }
    .navbar-compact-tools .navbar-search-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .navbar-compact-tools .btn-nav-demo {
        padding: 0.45rem 0.85rem;
        font-size: 0.7rem;
        border-radius: 999px;
    }
    @keyframes sdCompactIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: none; }
    }
}

/* Laptopuri mici: numele de langa sigla pleaca inainte ca meniul sa se stranga; in starea compacta
   ramane doar lupa (Demo e in meniu si in bara de sus) — altfel Contacteaza-ne iesea din ecran la 1024px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-wordmark { display: none; }
    .site-navbar .navbar-nav .nav-link { padding: 0.55rem 0.7rem; font-size: 0.87rem; }
}
/* Demo intra in randul compact doar de la 1400px — sub atat „Contacteaza-ne" iesea din ecran (masurat QA Q1) */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-compact-tools .btn-nav-demo { display: none; }
}

/* Ecrane joase (laptopuri 1366×768): fara descrierile scurte din mega-meniuri, ca Solutii (cu banda
   „Marketing si web") sa incapa intreg, fara derulare ascunsa */
@media (min-width: 992px) and (max-height: 860px) {
    .site-navbar .mega-dropdown .item-desc { display: none; }
    .site-navbar .mega-dropdown-item { align-items: center; padding-top: 0.38rem; padding-bottom: 0.38rem; }
    .site-navbar .mega-dropdown-item .mega-item-icon { width: 30px; height: 30px; min-width: 30px; margin-top: 0; }
    .site-navbar .mega-dropdown { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* Cu un mega-meniu deschis, bara plutitoare nu se mai vede pe jumatate intre header si panou */
@media (min-width: 992px) {
    .site-navbar:has(.has-mega-dropdown.show) .navbar-subbar {
        opacity: 0;
        visibility: hidden;
    }
}

/* Asistentul AI (#_aw, iframe de 600px ancorat jos) nu mai urca peste header + bara plutitoare */
#_aw iframe {
    max-height: calc(100vh - var(--sd-nav-total) - 170px) !important;
}

/* Cat e afisat bannerul de cookie, bulele ar sta sub el — le ascundem pana la alegere */
body:has(.cookie-banner.show) .mobile-whatsapp-float,
body:has(.cookie-banner.show) .sd-float-phone {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ---- Continutul barei plutitoare (comun desktop + mobil) ---- */
.subbar-search {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 34px;
    min-width: 290px;
    padding: 0 0.45rem 0 0.95rem;
    border: 0;
    border-radius: 999px;
    background: #f4f3ff;
    color: #545d70; /* contrast ≥ 4,5:1 pe #f4f3ff */
    font-family: var(--font-body);
    font-size: 0.84rem;
    cursor: text;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.subbar-search i {
    color: #6366f1;
    font-size: 0.85rem;
}
.subbar-search:hover,
.subbar-search:focus-visible {
    background: #ecebff;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.3);
    outline: none;
}
.subbar-search-ph {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subbar-kbd {
    flex: 0 0 auto;
    padding: 0.12rem 0.4rem;
    border: 1px solid rgba(99, 102, 241, 0.22);
    border-radius: 6px;
    background: #fff;
    color: #6366f1;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 600;
    box-shadow: none;
}
.subbar-sep {
    width: 1px;
    height: 22px;
    background: rgba(99, 102, 241, 0.18);
    margin: 0 2px;
}
.subbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.subbar-btn:hover {
    transform: translateY(-1px);
}
.subbar-btn--demo {
    color: #047857 !important;
    background: #ecfdf5;
    box-shadow: inset 0 0 0 1px #a7f3d0;
}
.subbar-btn--demo i {
    animation: btnDemoSparkle 1.8s ease-in-out infinite;
}
.subbar-btn--demo:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 18px -6px rgba(16, 185, 129, 0.7);
}
.subbar-btn--download {
    color: #312e81 !important;
    background: #fff;
    box-shadow: inset 0 0 0 1px #c7d2fe;
}
.subbar-btn--download:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    box-shadow: 0 6px 18px -6px rgba(30, 27, 75, 0.6);
}
.subbar-btn--download:hover i {
    animation: btnDownloadBounce 0.8s ease-in-out infinite;
}
.subbar-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 34px;
    padding: 0 0.6rem 0 0.3rem;
    border-radius: 999px;
    color: #1f2937 !important;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.subbar-phone i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    font-size: 0.8rem;
}
.subbar-phone:hover {
    background: rgba(16, 185, 129, 0.08);
}
.subbar-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff !important;
    background: #25d366;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.subbar-wa:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px -4px rgba(37, 211, 102, 0.65);
}

/* ---- Mega-meniu Solutii: banda „Marketing si web" ---- */
.mega-band {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(99, 102, 241, 0.12);
}
.mega-band-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    margin-right: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    color: #1f2937;
    text-decoration: none;
}
.mega-band-title i {
    color: #6366f1;
}
.mega-band-title .mega-band-go {
    font-size: 0.68rem;
    transition: transform 0.15s ease;
}
.mega-band-title:hover {
    color: #6366f1;
}
.mega-band-title:hover .mega-band-go {
    transform: translateX(3px);
}
.mega-band-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}
.mega-band-chip {
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.07);
    color: #3730a3;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.mega-band-chip:hover {
    background: #6366f1;
    color: #fff;
}
.mega-band-all {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6366f1;
    text-decoration: none;
    white-space: nowrap;
}
.mega-band-all i {
    font-size: 0.7rem;
    margin-left: 0.2rem;
    transition: transform 0.15s ease;
}
.mega-band-all:hover i {
    transform: translateX(3px);
}

/* ---- Mega-meniu Resurse ---- */
.mega-dropdown-resurse {
    width: 840px;
}
.mega-resurse-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.75rem;
}
.mega-resurse-posts .mega-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega-dropdown-title--gap {
    margin-top: 0.9rem;
}
.mega-dropdown-item--slim {
    align-items: center;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.mega-dropdown-item--slim .mega-item-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 0.75rem;
    margin-top: 0;
}

/* ---- Bule plutitoare (desktop: apar doar dupa scroll, cand bara de actiuni a disparut) ---- */
.sd-float-phone {
    display: none;
}
@media (min-width: 992px) {
    .mobile-whatsapp-float {
        transition: transform 0.25s ease, box-shadow 0.2s ease, opacity 0.25s ease, visibility 0.25s;
    }
    .site-navbar:not(.navbar-scrolled) ~ .mobile-whatsapp-float {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0.6);
    }

    /* Langa WhatsApp (la stanga lui), nu deasupra — deasupra sta asistentul AI (#_aw) */
    .sd-float-phone {
        display: flex;
        align-items: center;
        position: fixed;
        right: calc(2rem + 64px);
        bottom: 5.25rem;
        z-index: 1040;
        height: 52px;
        min-width: 52px;
        padding: 0 16px;
        gap: 0;
        border-radius: 999px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #fff !important;
        text-decoration: none !important;
        box-shadow: 0 8px 22px -6px rgba(99, 102, 241, 0.65), 0 2px 6px rgba(0, 0, 0, 0.1);
        transition: opacity 0.25s ease, visibility 0.25s, transform 0.25s ease, gap 0.25s ease, box-shadow 0.2s ease;
    }
    .sd-float-phone i {
        font-size: 1.15rem;
        width: 20px;
        text-align: center;
        animation: sdPhoneRing 4.5s ease-in-out infinite;
    }
    .sd-float-phone-num {
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        font-family: var(--font-body);
        font-size: 0.9rem;
        font-weight: 700;
        transition: max-width 0.3s ease;
    }
    .sd-float-phone:hover {
        gap: 0.55rem;
        box-shadow: 0 12px 28px -8px rgba(99, 102, 241, 0.8), 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    .sd-float-phone:hover .sd-float-phone-num {
        max-width: 140px;
    }
    .site-navbar:not(.navbar-scrolled) ~ .sd-float-phone {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0.6);
    }
    @keyframes sdPhoneRing {
        0%, 76%, 100% { transform: rotate(0); }
        80% { transform: rotate(-14deg); }
        84% { transform: rotate(12deg); }
        88% { transform: rotate(-8deg); }
        92% { transform: rotate(0); }
    }
}

/* ---- Mobil: banda subtire de actiuni sub randul principal ---- */
@media (max-width: 991px) {
    .navbar-wordmark,
    .navbar-compact-tools,
    .subbar-desk,
    .subbar-btn--download,
    .subbar-kbd {
        display: none !important;
    }
    .navbar-logo img {
        height: 38px;
        width: 38px;
    }

    .navbar-subbar {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 12px 8px;
        height: 40px;
        max-height: 40px;
        padding: 0 3px;
        background: #ffffff;
        border: 1px solid rgba(99, 102, 241, 0.2);
        border-radius: 999px;
        box-shadow: 0 6px 18px -10px rgba(49, 46, 129, 0.35);
        overflow: hidden;
        transition: max-height 0.3s ease, margin 0.3s ease, opacity 0.2s ease, border-width 0.3s ease, visibility 0s;
    }
    /* visibility (dupa tranzitie) scoate cautarea si Demo din ordinea Tab cat banda e ascunsa */
    .site-navbar.navbar-scrolled .navbar-subbar {
        max-height: 0;
        margin-bottom: 0;
        opacity: 0;
        border-width: 0;
        pointer-events: none;
        visibility: hidden;
        transition: max-height 0.3s ease, margin 0.3s ease, opacity 0.2s ease, border-width 0.3s ease, visibility 0s 0.3s;
    }
    .navbar-subbar .subbar-sep {
        display: none;
    }
    .subbar-search {
        flex: 1 1 auto;
        min-width: 0;
        height: 32px;
        font-size: 0.82rem;
    }
    .subbar-btn {
        height: 32px;
        padding: 0 0.85rem;
        font-size: 0.78rem;
    }

    .nav-item--drawer {
        display: block;
    }

    /* Sertarul: butoanele mari la 44px si toate pe aceeasi latime (Download era mai ingust) */
    .btn-nav-demo,
    .btn-nav-download,
    .btn-nav-shop {
        min-height: 44px;
        width: 100%;
        box-sizing: border-box;
    }
    /* Banda „Marketing si web" in sertar: pe randuri, fara iesiri din ecran la 320px */
    .mega-band {
        flex-wrap: wrap;
        gap: 0.45rem;
    }
    .mega-band-chips {
        width: 100%;
    }
    /* Asistentul AI nu mai sta peste sertarul deschis */
    body:has(.navbar-menu.open) #_aw {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-inner,
    .navbar-subbar,
    .sd-float-phone,
    .sd-float-phone i,
    .subbar-btn--demo i,
    .site-navbar.navbar-scrolled .navbar-compact-tools {
        transition: none !important;
        animation: none !important;
    }
}

/* css/pixel-dissolve.css */
/**
 * Pixel Dissolve Effect — reusable pixel disintegration style
 * Apply .pixel-dissolve on any container wrapping an <img> for the effect.
 * Pixels stream from the left edge of the image toward the text area.
 *
 * Ultima modificare: 2026-02-05 01:45
 * Modificari:
 *   2026-02-05 01:45 — Added subtle right-side dissolve (mask + particles)
 *   2026-02-05 01:30 — Initial creation of pixel dissolve effect
 */


/* ─── Wrapper ─── */
.pixel-dissolve {
    position: relative;
    display: block;
    overflow: visible;
}

/* ─── Bilateral gradient mask: strong left, subtle right ─── */
.pixel-dissolve > img {
    position: relative;
    z-index: 1;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 3%,
        rgba(0, 0, 0, 0.2) 6%,
        rgba(0, 0, 0, 0.38) 10%,
        rgba(0, 0, 0, 0.6) 15%,
        rgba(0, 0, 0, 0.82) 21%,
        black 28%,
        black 85%,
        rgba(0, 0, 0, 0.7) 91%,
        rgba(0, 0, 0, 0.4) 95%,
        rgba(0, 0, 0, 0.15) 98%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 3%,
        rgba(0, 0, 0, 0.2) 6%,
        rgba(0, 0, 0, 0.38) 10%,
        rgba(0, 0, 0, 0.6) 15%,
        rgba(0, 0, 0, 0.82) 21%,
        black 28%,
        black 85%,
        rgba(0, 0, 0, 0.7) 91%,
        rgba(0, 0, 0, 0.4) 95%,
        rgba(0, 0, 0, 0.15) 98%,
        transparent 100%
    );
}

/* ─── Particle container ─── */
.pixel-dissolve-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}


/* ─── Individual pixel particle ─── */
.px {
    position: absolute;
    will-change: transform, opacity;
    border-radius: 1px;
    animation: px-stream var(--px-dur, 3s) var(--px-del, 0s) linear infinite;
}

/* Glow variant — bright/highlighted pixels */
.px--glow {
    box-shadow: 0 0 6px 2px var(--px-bg, rgba(99, 102, 241, 0.4));
}

/* Streak variant — thin horizontal lines (Matrix data-stream feel) */
.px--streak {
    border-radius: 0;
}

/* Bright highlight pixel */
.px--bright {
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
}


/* ─── Main animation: stream left with fade ─── */
@keyframes px-stream {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: var(--px-o, 0.7);
    }
    55% {
        opacity: calc(var(--px-o, 0.7) * 0.65);
    }
    100% {
        transform: translate3d(var(--px-x, -150px), var(--px-y, 0px), 0) scale(var(--px-se, 0.4));
        opacity: 0;
    }
}


/* ─── Accessibility: respect reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
    .px {
        animation: none !important;
        opacity: 0 !important;
    }

    .pixel-dissolve > img {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ─── Responsive: disable on small screens ─── */
@media (max-width: 991px) {
    .pixel-dissolve > img {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .pixel-dissolve-particles {
        display: none;
    }
}

/* css/aos.css */
[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}