:root {
            --primary: #2DD4BF;
            --primary-dark: #1CA1AD;
            --bg-dark: #05070a;
            --card-bg: #0f172a;
            --text-main: #E7ECF7;
            --text-dim: #9fb3d9;
            --transition-slow: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
            --transition-fast: all 0.3s ease;
            --nav-height: 80px; 
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html { 
            scroll-behavior: smooth; 
            overflow-x: hidden;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            line-height: 1.75;
            font-size: 1.15rem;
            overflow-x: hidden;
            width: 100%;
            position: relative;
        }

        h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 800; line-height: 1.2; }
        h2 { font-size: clamp(2rem, 5vw, 2.8rem); text-align: center; margin-bottom: 30px; font-weight: 800; }
        h3 { font-size: 1.6rem; margin-bottom: 15px; font-weight: 700; }
        h4 { font-size: 1.25rem; color: var(--primary); margin-bottom: 10px; font-weight: 700; }
        p { font-size: 1.15rem; color: var(--text-dim); margin-bottom: 15px; }

        /* CONTINUOUS AURORA BACKGROUND
           A lightweight, CSS-only animated aurora. The background is a single
           fixed layer so section boundaries can never create visible seams. */
        .ambient-background {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            background: #0B0F1A;
            filter: blur(10px);
            isolation: isolate;
        }

        .ambient-background::before {
            content: "";
            position: absolute;
            inset: -20%;
            background:
                radial-gradient(ellipse at 50% 42%, rgba(45, 212, 191, 0.075), transparent 42%),
                radial-gradient(ellipse at 20% 70%, rgba(35, 142, 169, 0.055), transparent 38%),
                radial-gradient(ellipse at 80% 25%, rgba(114, 146, 194, 0.045), transparent 36%);
            animation: auroraAtmosphere 24s ease-in-out infinite alternate;
            will-change: transform;
        }

        .ambient-ribbon {
            position: absolute;
            width: 125vw;
            height: 24vh;
            min-height: 190px;
            left: -12vw;
            border-radius: 50%;
            opacity: 0.42;
            will-change: transform;
            mix-blend-mode: screen;
            filter: blur(6px);
            transform-origin: center center;
        }

        .ambient-ribbon-a {
            top: 5%;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(21, 190, 171, 0.08) 16%,
                rgba(45, 212, 191, 0.52) 42%,
                rgba(35, 142, 169, 0.34) 57%,
                transparent 82%);
            transform: rotate(-9deg) translate3d(-10vw, 0, 0);
            animation: auroraRibbonA 19s ease-in-out infinite alternate;
        }

        .ambient-ribbon-b {
            top: 31%;
            height: 20vh;
            opacity: 0.34;
            background: linear-gradient(90deg,
                transparent 4%,
                rgba(35, 142, 169, 0.12) 23%,
                rgba(35, 142, 169, 0.48) 48%,
                rgba(45, 212, 191, 0.28) 65%,
                transparent 91%);
            transform: rotate(-13deg) translate3d(8vw, 0, 0);
            animation: auroraRibbonB 23s ease-in-out infinite alternate;
            animation-delay: -7s;
        }

        .ambient-ribbon-c {
            top: 57%;
            height: 22vh;
            opacity: 0.30;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(114, 146, 194, 0.10) 18%,
                rgba(35, 142, 169, 0.38) 44%,
                rgba(21, 190, 171, 0.30) 61%,
                transparent 86%);
            transform: rotate(-8deg) translate3d(-5vw, 0, 0);
            animation: auroraRibbonC 27s ease-in-out infinite alternate;
            animation-delay: -13s;
        }

        .ambient-ribbon-d {
            top: 79%;
            height: 18vh;
            opacity: 0.25;
            background: linear-gradient(90deg,
                transparent 7%,
                rgba(45, 212, 191, 0.08) 28%,
                rgba(114, 146, 194, 0.30) 52%,
                transparent 84%);
            transform: rotate(-11deg) translate3d(12vw, 0, 0);
            animation: auroraRibbonD 30s ease-in-out infinite alternate;
            animation-delay: -18s;
        }

        .ambient-noise {
            position: absolute;
            inset: 0;
            opacity: 0.018;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
            mix-blend-mode: soft-light;
        }

        .ambient-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center, transparent 35%, rgba(11, 15, 26, 0.48) 100%);
        }

        /* The aurora is driven by requestAnimationFrame in script.js. CSS variables
           keep the animation smooth while avoiding section-sized background seams. */
        .ambient-background::before {
            animation: none !important;
            transform: translate3d(var(--aurora-atmos-x, 0%), var(--aurora-atmos-y, 0%), 0)
                       scale(var(--aurora-atmos-scale, 1));
        }

        .ambient-ribbon-a {
            transform: rotate(-9deg) translate3d(var(--aurora-a-x, -13vw), var(--aurora-a-y, -2vh), 0)
                       scaleX(var(--aurora-a-scale, 0.98));
        }
        .ambient-ribbon-b {
            transform: rotate(-13deg) translate3d(var(--aurora-b-x, 13vw), var(--aurora-b-y, 3vh), 0)
                       scaleX(var(--aurora-b-scale, 1.04));
        }
        .ambient-ribbon-c {
            transform: rotate(-8deg) translate3d(var(--aurora-c-x, -7vw), var(--aurora-c-y, 2vh), 0)
                       scaleX(var(--aurora-c-scale, 1.02));
        }
        .ambient-ribbon-d {
            transform: rotate(-11deg) translate3d(var(--aurora-d-x, 14vw), var(--aurora-d-y, -2vh), 0)
                       scaleX(var(--aurora-d-scale, 1));
        }

        /* Keep every page layer above the continuous background. */
        .nav, .page-view {
            position: relative;
            z-index: 1;
        }

        /* Alternate sections stay transparent so the aurora cannot form seams. */
        .section.alt {
            background: transparent;
        }

        @media (prefers-reduced-motion: reduce) {
            .ambient-background::before,
            .ambient-ribbon {
                animation: none !important;
            }
        }


        /* The ambient aurora is the single page-wide background. Never paint an
           opaque section over it, otherwise a horizontal seam appears at the
           boundary between sections. */
        main, .page-view, .section, .section.alt, .hero, footer {
            background: transparent !important;
        }

        /* Contact content must always be visible; it is not an interactive reveal. */
        #kapcsolat, #kapcsolat .contact-card, #kapcsolat h2, #kapcsolat > .container > .contact-card > p,
        #kapcsolat .contact-item, #kapcsolat .contact-item p {
            opacity: 1 !important;
            visibility: visible !important;
        }

        #kapcsolat {
            position: relative;
            z-index: 2;
        }

        .container { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 30px; 
            width: 100%;
        }
        
        .text-green { color: var(--primary); }
        .text-center { text-align: center; }

        .nowrap-title {
            white-space: normal;
            max-width: 100%;
        }

        @media (min-width: 1200px) {
            .nowrap-title {
                white-space: nowrap;
            }
        }

        .badge {
            display: inline-block;
            background: rgba(45, 212, 191, 0.1);
            color: var(--primary);
            border: 1px solid rgba(45, 212, 191, 0.3);
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 20px;
        }

        /* FELÜLRE ILLESZTETT FLOATING BADGE A KÁRTYÁN */
        .badge-floating {
            position: absolute;
            top: -13px;
            right: 20px;
            background: #0f172a;
            color: var(--primary);
            border: 1px solid var(--primary);
            font-weight: 800;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(45, 212, 191, 0.2);
            z-index: 2;
        }

        /* NAVIGÁCIÓ */
        .nav {
            height: var(--nav-height);
            background: rgba(5, 7, 10, 0.9);
            position: fixed;
            width: 100%;
            top: 0;
            backdrop-filter: blur(15px);
            z-index: 1000;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .nav-container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
        .logo { display: flex; align-items: center; text-decoration: none; cursor: pointer; }
        .logo img { height: 40px; }

        .nav-right { display: flex; align-items: center; gap: 30px; }
        .nav-links { display: flex; gap: 30px; align-items: center; list-style: none; }
        .nav-links a { color: var(--text-dim); text-decoration: none; font-weight: 500; transition: 0.3s; cursor: pointer; }
        .nav-links a:hover, .nav-links a.active { color: var(--primary); }
        .nav-btn { background: var(--primary); color: #000 !important; padding: 10px 20px; border-radius: 8px; font-weight: 700; transition: 0.3s; text-decoration: none; display: inline-block; }

        /* HAMBURGER MENÜ MOBILON */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            z-index: 1002;
        }

        .mobile-menu-btn span {
            display: block;
            width: 26px;
            height: 3px;
            margin: 5px 0;
            background-color: var(--primary);
            transition: 0.3s;
            border-radius: 2px;
        }

        .mobile-drawer {
            display: none;
            position: fixed;
            top: var(--nav-height);
            left: 0;
            width: 100%;
            background: rgba(5, 7, 10, 0.98);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding: 25px 20px;
            flex-direction: column;
            gap: 18px;
            z-index: 999;
            box-shadow: 0 15px 30px rgba(0,0,0,0.5);
        }

        .mobile-drawer.open {
            display: flex;
        }

        .mobile-drawer a {
            color: var(--text-main);
            text-decoration: none;
            font-size: 1.25rem;
            font-weight: 600;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            cursor: pointer;
        }

        .mobile-drawer a:hover {
            color: var(--primary);
        }

        /* OLDAL VÁLTÓ LOGIKA */
        .page-view {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            padding-top: var(--nav-height);
            min-height: 80vh;
        }

        .page-view.active-page {
            display: block;
            opacity: 1;
        }

        /* HERO */
        .hero { 
            padding: var(--nav-height) 0 40px; 
            text-align: center; 
            position: relative; 
            min-height: 100vh; 
            display: flex; 
            align-items: center; 
            justify-content: center;
            overflow: hidden; 
        }

        .hero-glow {
            position: absolute; top: 0; left: 50%; transform: translateX(-50%);
            width: 100vw; height: 100%;
            background: radial-gradient(circle at center, rgba(45, 212, 191, 0.22) 0%, transparent 75%);
            filter: blur(60px); z-index: -1; pointer-events: none;
        }

        .hero-btns { display: flex; justify-content: center; gap: 15px; margin-top: 30px; }
        .hero-btns .btn {
            min-width: 220px;
            text-align: center;
            padding: 18px 25px;
        }

        .btn { border-radius: 12px; font-weight: 700; text-decoration: none; transition: 0.3s; display: inline-block; cursor: pointer; border: none; font-size: 1.15rem; }
        .btn-large { padding: 20px 36px !important; font-size: 1.25rem !important; min-width: 280px; }
        .btn-primary { background: var(--primary); color: #000; }
        .btn-glow:hover { box-shadow: 0 0 30px rgba(45, 212, 191, 0.5); transform: translateY(-3px); }
        .btn-secondary { border: 1px solid rgba(255,255,255,0.2); color: #fff; background: transparent; }

        .hero-bullets {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 50px;
            color: var(--text-main);
            font-weight: 500;
        }
        .check { color: var(--primary); font-weight: 800; margin-right: 8px; }

        /* SZEKCIÓK */
        .section { padding: 100px 0; overflow: hidden; }
        .section-header { text-align: center; max-width: 900px; margin: 0 auto 50px; }
        .alt { background: transparent; }

        /* ELŐNYÖK */
        .benefit-row { display: flex; flex-direction: row; gap: 30px; margin-top: 40px; }
        .benefit-item { 
            padding: 40px; border-radius: 20px; 
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            transition: var(--transition-fast);
            flex: 1;
        }

        /* ANIMÁCIÓK */
        .reveal { opacity: 0; transform: translateY(60px); transition: var(--transition-slow); }
        .reveal-left, .reveal-right { opacity: 0; transform: translateY(60px); transition: var(--transition-slow); }
        .active { opacity: 1 !important; transform: translate(0) scale(1) !important; }

        /* PULZÁLÓ HIGHLIGHT ANIMÁCIÓ */
        @keyframes flashHighlight {
            0% { transform: scale(0.98); box-shadow: 0 0 0px var(--primary); border-color: var(--primary); }
            50% { transform: scale(1.02); box-shadow: 0 0 40px var(--primary); border-color: var(--primary); }
            100% { transform: scale(1); box-shadow: 0 0 0px transparent; }
        }

        .highlight-pulse {
            animation: flashHighlight 1.2s ease-in-out;
        }

        /* MEGOLDÁSOK GRID */
        .featured-services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 40px;
        }

         .service-category-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 24px;
            align-items: start;
        }

        .service-category {
            background: var(--card-bg);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 28px;
            overflow: hidden;
            transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
        }

        .service-category:hover { border-color: rgba(45, 212, 191, 0.45); }
        .service-category.is-open { border-color: rgba(45, 212, 191, 0.38); box-shadow: 0 20px 55px rgba(0,0,0,0.16); }

        .service-category-toggle {
            width: 100%;
            min-height: 190px;
            border: 0;
            background: transparent;
            color: var(--text-main);
            padding: 32px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 18px;
            align-items: start;
            text-align: left;
            cursor: pointer;
        }

        .service-category-icon { font-size: 2.3rem; line-height: 1; }
        .service-category-heading { display: flex; flex-direction: column; gap: 9px; }
        .service-category-heading strong { font-size: 1.35rem; }
        .service-category-heading span { color: var(--text-dim); line-height: 1.6; font-size: 0.94rem; }
        .service-category-chevron { color: var(--primary); font-size: 1.6rem; line-height: 1; transition: transform 0.35s ease; }
        .service-category.is-open .service-category-chevron { transform: rotate(180deg); }

        .service-category-content {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            padding: 0 18px;
            transition: max-height 0.45s ease, opacity 0.3s ease, padding 0.45s ease;
        }
        .service-category.is-open .service-category-content { max-height: 900px; opacity: 1; padding: 0 18px 18px; }

        .service-item {
            width: 100%;
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 16px;
            background: rgba(255,255,255,0.025);
            color: var(--text-main);
            padding: 16px 18px 14px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            text-align: left;
            cursor: pointer;
            transition: 0.25s ease;
        }
        .service-item:hover { border-color: var(--primary); transform: translateY(-2px); }
        .service-item > span:first-child { display: flex; flex-direction: column; gap: 5px; width: 100%; }
        .service-item b { font-size: 0.98rem; }
        .service-item small { color: var(--text-dim); line-height: 1.5; font-size: 0.82rem; display: block; }
        .service-item > span:last-child { color: var(--primary); font-size: 0.72rem; font-weight: 600; line-height: 1.2; align-self: center; text-align: center; white-space: nowrap; }

        .strengths-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 18px;
        }
        .strength-card {
            padding: 28px 24px;
            border-radius: 20px;
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.05);
        }
        .strength-card > span { font-size: 2rem; display: block; margin-bottom: 16px; }
        .strength-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
        .strength-card p { margin: 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; }

        .service-detail-card {
            background: rgba(255,255,255,0.015);
            border-radius: 28px;
            padding: 40px;
            border: 1px solid rgba(255,255,255,0.05);
        }
        .service-detail-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
        .service-detail-icon { font-size: 2.5rem; }
        .service-detail-heading h3 { margin: 0 0 4px; font-size: 1.55rem; }
        .service-detail-lead { margin: 0; font-size: 1.05rem; color: var(--text-main); }
        .service-example-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 25px; }
        .service-example-grid > div { background: rgba(255,255,255,0.02); padding: 22px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
        .service-example-grid span { color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }
        .service-detail-cta { text-align: center; margin-top: 30px; }

        .card {
            background: var(--card-bg); 
            padding: 45px 35px; 
            border-radius: 28px;
            border: 1px solid rgba(255,255,255,0.05); 
            transition: 0.4s ease;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            position: relative;
        }

        .card:hover { border-color: var(--primary); transform: translateY(-12px); }
        .card-icon { font-size: 2.5rem; margin-bottom: 25px; display: block; }
        .card-link { color: var(--primary); font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px; margin-top: 20px; }

        .card .card-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 0.75rem;
            background: rgba(45, 212, 191, 0.15);
            color: var(--primary);
            padding: 4px 10px;
            border-radius: 20px;
            font-weight: 700;
        }

        /* CSOMAG KÁRTYÁK */
        .packages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 25px;
            margin: 40px 0;
        }

        .package-card {
            background: var(--card-bg);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 20px;
            padding: 35px 25px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            transition: var(--transition-fast);
        }

        .package-card:hover {
            border-color: var(--primary);
            background: rgba(45, 212, 191, 0.04);
            transform: translateY(-8px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        /* EGYSÉGES FEJLÉC ÉS LEÍRÁS BLOKK */
        .package-header-content {
            display: flex;
            flex-direction: column;
        }

        .package-title { 
            font-size: 1.6rem; 
            font-weight: 800; 
            margin-bottom: 12px;
            line-height: 1.2;
            color: #fff;
        }
        
        .card-subtext-3lines {
            min-height: 4.8em;
            font-size: 0.95rem !important;
            line-height: 1.6;
            margin-bottom: 0;
        }

        .package-price-wrap {
            margin: 20px 0 10px;
            min-height: 85px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .package-price { 
            font-size: 1.95rem; 
            font-weight: 800; 
            color: var(--primary); 
            line-height: 1.2;
            margin: 0;
        }

        .package-price span { 
            font-size: 0.85rem; 
            color: var(--text-dim); 
            font-weight: 400; 
        }

        .package-price-sub {
            font-size: 0.9rem;
            color: var(--text-dim);
            margin-top: 6px;
            margin-bottom: 0;
        }

        .package-features { list-style: none; margin: 20px 0; flex-grow: 1; }
        .package-features li { margin-bottom: 12px; font-size: 0.95rem; color: var(--text-main); display: flex; align-items: flex-start; gap: 8px; }

        /* MIÉRT JÓ BLOKKOK STÍLUSA */
        .why-it-works-box {
            background: rgba(255,255,255,0.02);
            border-left: 3px solid var(--primary);
            padding: 20px 25px;
            border-radius: 0 16px 16px 0;
            margin: 25px 0;
        }

        .why-it-works-box h5 {
            color: var(--primary);
            font-size: 1.1rem;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .why-it-works-box p {
            font-size: 1.05rem;
            margin-bottom: 0;
            color: var(--text-main);
        }

        /* TÁBLÁZAT STÍLUSOK */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
            margin: 30px 0;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.06);
            background: var(--card-bg);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.95rem;
        }

        th, td {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        th {
            background: rgba(255,255,255,0.03);
            color: var(--primary);
            font-weight: 700;
        }

        /* ESETTANULMÁNY BOX */
        .case-study-box {
            background: linear-gradient(180deg, rgba(45, 212, 191, 0.08) 0%, rgba(15, 23, 42, 0.8) 100%);
            border: 1px solid rgba(45, 212, 191, 0.3);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
        }

        /* FOLYAMAT */
        .process-flow { display: flex; flex-direction: row; gap: 30px; margin-top: 60px; justify-content: center; }
        .process-step { background: rgba(255,255,255,0.03); padding: 45px 30px; border-radius: 24px; flex: 1; text-align: center; }
        .step-badge { width: 45px; height: 45px; background: var(--primary); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; margin: 0 auto 25px; }

        /* KONTAKT */
        .contact-card { background: rgba(255,255,255,0.02); padding: 70px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.05); text-align: center; max-width: 900px; margin: 0 auto; }
        .contact-info-grid { display: flex; flex-direction: row; justify-content: center; gap: 50px; margin-top: 40px; flex-wrap: wrap; }
        .contact-item { text-decoration: none; color: inherit; transition: 0.3s; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
        .contact-item:hover { transform: translateY(-5px); color: var(--primary); }
        .contact-item .icon { font-size: 2.2rem; display: block; margin-bottom: 12px; }

        /* FOOTER */
        footer { padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.05); text-align: center; color: var(--text-dim); }
        .footer-link { color: inherit; text-decoration: none; transition: color 0.3s ease; }
        .footer-link:hover { color: var(--primary); }

        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .featured-services-grid { grid-template-columns: 1fr; }
            .service-category-grid { grid-template-columns: 1fr; }
            .strengths-grid { grid-template-columns: repeat(2, 1fr); }
            .service-example-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .nowrap-title { white-space: normal !important; }
            .nav-links { display: none; }
            .nav-btn { display: none; }
            .mobile-menu-btn { display: block; }
            .nav-right { gap: 0; }
            .logo img { height: 32px; }

            .hero { padding: 120px 0 60px; min-height: 100vh; }
            .hero-btns { flex-direction: column; align-items: center; gap: 15px; }
            .hero-btns .btn { width: 100%; max-width: 320px; }
            .btn-large { width: 100%; max-width: 320px; min-width: auto; padding: 16px 20px !important; font-size: 1.1rem !important; }
            .hero-bullets { flex-direction: column; gap: 15px; }
            
            .benefit-row { flex-direction: column; }
            .service-category-toggle { min-height: auto; padding: 25px; }
            .service-detail-card { padding: 28px 22px; }
            .process-flow { flex-direction: column; }
            .contact-info-grid { flex-direction: column; gap: 25px; }
            .contact-card { padding: 40px 20px; }
            .section { padding: 60px 0; }
    
        /* The ambient aurora is the single page-wide background. Never paint an
           opaque section over it, otherwise a horizontal seam appears at the
           boundary between sections. */
        main, .page-view, .section, .section.alt, .hero, footer {
            background: transparent !important;
        }

        /* Contact content must always be visible; it is not an interactive reveal. */
        #kapcsolat, #kapcsolat .contact-card, #kapcsolat h2, #kapcsolat > .container > .contact-card > p,
        #kapcsolat .contact-item, #kapcsolat .contact-item p {
            opacity: 1 !important;
            visibility: visible !important;
        }

        #kapcsolat {
            position: relative;
            z-index: 2;
        }

        .container { padding: 0 20px; }
            .card-subtext-3lines { min-height: auto; }
            .package-price-wrap { min-height: auto; }
        }

/* Extracted inline styles */
.inline-style-1 { color: var(--primary); font-weight: 700; }
.inline-style-2 { max-width: 850px; margin: 15px auto 0; }
.inline-style-3 { max-width: 700px; margin: 15px auto 30px; }
.inline-style-4 { padding-top: 40px; padding-bottom: 80px; }
.inline-style-5 { padding-top: 20px; }
.inline-style-6 { background: var(--card-bg); border-radius: 28px; padding: 45px; border: 1px solid rgba(45, 212, 191, 0.3); }
.inline-style-7 { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.inline-style-8 { font-size: 3rem; }
.inline-style-9 { margin-bottom:0; }
.inline-style-10 { font-size: 1.2rem; color: var(--text-main); }
.inline-style-11 { color: var(--primary); margin-bottom: 10px; font-size: 1.3rem; }
.inline-style-12 { color: var(--text-main); font-size: 1.15rem; margin-bottom: 0; }
.inline-style-13 { margin-top: 30px; }
.inline-style-14 { background: rgba(255,255,255,0.02); padding: 25px; border-radius: 16px; flex: 1; }
.inline-style-15 { font-size: 1.05rem; color: var(--text-dim); }
.inline-style-16 { background: rgba(255,255,255,0.02); padding: 25px; border-radius: 16px; flex: 1; }
.inline-style-17 { font-size: 1.05rem; color: var(--text-dim); }
.inline-style-18 { background: rgba(255,255,255,0.02); padding: 25px; border-radius: 16px; flex: 1; }
.inline-style-19 { font-size: 1.05rem; color: var(--text-dim); }
.inline-style-20 { text-align: center; margin-top: 35px; }
.inline-style-21 { text-align: center; margin-bottom: 30px; }
.inline-style-22 { max-width: 850px; margin: 0 auto; }
.inline-style-23 { max-width: 1000px; margin: 20px auto 40px; }
.inline-style-24 { width:100%; text-align:center; }
.inline-style-25 { width:100%; text-align:center; }
.inline-style-26 { width:100%; text-align:center; }
.inline-style-27 { font-size: 1.7rem; }
.inline-style-28 { width:100%; text-align:center; }
.inline-style-29 { background: rgba(255,255,255,0.02); border-radius: 16px; padding: 25px; border: 1px solid rgba(255,255,255,0.05); margin-top: 20px; }
.inline-style-30 { font-size: 1.05rem; color: var(--text-main); }
.inline-style-31 { font-size: 0.95rem; color: var(--text-dim); margin-bottom:0; }
.inline-style-32 { text-align: center; margin-bottom: 30px; }
.inline-style-33 { max-width: 850px; margin: 0 auto; }
.inline-style-34 { max-width: 1000px; margin: 20px auto 30px; }
.inline-style-35 { text-align: center; margin-top: 35px; }
.inline-style-36 { background: var(--card-bg); border-radius: 28px; padding: 45px; border: 1px solid rgba(255,255,255,0.06); }
.inline-style-37 { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.inline-style-38 { font-size: 3rem; }
.inline-style-39 { margin:0; font-size:1.1rem; color: var(--primary); }
.inline-style-40 { font-size: 1.15rem; color: var(--text-main); }
.inline-style-41 { margin-top: 25px; }
.inline-style-42 { background: rgba(255,255,255,0.02); padding: 20px; border-radius: 12px; flex:1; }
.inline-style-43 { font-size:1.1rem; }
.inline-style-44 { font-size:0.95rem; margin-bottom:0; }
.inline-style-45 { background: rgba(255,255,255,0.02); padding: 20px; border-radius: 12px; flex:1; }
.inline-style-46 { font-size:1.1rem; }
.inline-style-47 { font-size:0.95rem; margin-bottom:0; }
.inline-style-48 { background: rgba(255,255,255,0.02); padding: 20px; border-radius: 12px; flex:1; }
.inline-style-49 { font-size:1.1rem; }
.inline-style-50 { font-size:0.95rem; margin-bottom:0; }
.inline-style-51 { margin-top:35px; }
.inline-style-52 { text-align: center; margin-top: 30px; }
.inline-style-53 { background: rgba(255,255,255,0.015); border-radius: 28px; padding: 40px; border: 1px solid rgba(255,255,255,0.05); }
.inline-style-54 { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.inline-style-55 { font-size: 2.5rem; }
.inline-style-56 { margin:0; font-size:1.05rem; }
.inline-style-57 { margin-top:25px; }
.inline-style-58 { font-size:0.95rem; }
.inline-style-59 { font-size:0.95rem; }
.inline-style-60 { font-size:0.95rem; }
.inline-style-61 { text-align: center; margin-top: 35px; }
.inline-style-62 { background: rgba(255,255,255,0.015); border-radius: 28px; padding: 40px; border: 1px solid rgba(255,255,255,0.05); }
.inline-style-63 { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.inline-style-64 { font-size: 2.5rem; }
.inline-style-65 { margin:0; font-size:1.05rem; }
.inline-style-66 { text-align: center; margin-top: 30px; }

/* NATURAL AURORA CURTAINS */
.aurora-curtains {
    position: absolute;
    inset: -8% -12%;
    width: 124%;
    height: 116%;
    overflow: visible;
    opacity: 0.82;
    pointer-events: none;
    will-change: transform;
}
.aurora-curtain-group { transform-origin: 50% 50%; }
.aurora-curtain { mix-blend-mode: screen; }
.aurora-edge-glow { transform-origin: 50% 50%; }
.ambient-ribbon { display:none !important; }


/* Aurora v7: smooth translucent curtains, no hard block edges. */
.aurora-curtains {
    position: absolute;
    inset: -8% -4%;
    width: 108%;
    height: 116%;
    overflow: visible;
    opacity: 0.88;
    mix-blend-mode: screen;
    pointer-events: none;
}

.aurora-curtain-group {
    transform-origin: 50% 45%;
    will-change: transform;
}

.aurora-curtain {
    opacity: 0.82;
}

.aurora-edge-glow {
    will-change: transform;
}

@media (max-width: 700px) {
    .aurora-curtains { opacity: 0.68; }
}

/* ================================================================
   BOOSTRISE REFRESH — frosted navigation, benefit content, calculator
   and team/contact cards. Kept additive to preserve existing site styles.
   ================================================================ */
.nav {
    background: linear-gradient(110deg, rgba(5, 12, 17, 0.76), rgba(6, 18, 24, 0.56) 55%, rgba(10, 22, 28, 0.72)) !important;
    -webkit-backdrop-filter: saturate(165%) blur(24px);
    backdrop-filter: saturate(165%) blur(24px);
    border-bottom: 1px solid rgba(132, 255, 229, 0.13) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.nav::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.035), transparent 32%, rgba(45, 212, 191, 0.025));
}
.nav-container { position: relative; z-index: 1; }
.nav-links a { transition: color 0.25s ease, text-shadow 0.25s ease; }
.nav-links a:hover, .nav-links a.active { text-shadow: 0 0 18px rgba(45, 212, 191, 0.18); }
.mobile-drawer {
    background: rgba(5, 14, 19, 0.88) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(45, 212, 191, 0.16) !important;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 12px;
    border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 999px;
    color: #83f3dc;
    background: rgba(45, 212, 191, 0.07);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.035em;
}
.benefits-section .section-header { margin-bottom: 38px; }
.benefits-cards { align-items: stretch; }
.benefits-cards .benefit-item {
    position: relative;
    overflow: hidden;
    padding: 32px 30px;
    border: 1px solid rgba(105, 231, 208, 0.12);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(13, 32, 35, 0.72), rgba(8, 14, 20, 0.73));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.benefits-cards .benefit-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.75), transparent);
    opacity: 0.8;
}
.benefits-cards .benefit-item:hover {
    transform: translateY(-6px);
    border-color: rgba(45, 212, 191, 0.35);
    background: linear-gradient(145deg, rgba(13, 39, 41, 0.85), rgba(8, 14, 20, 0.82));
}
.benefit-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border: 1px solid rgba(45, 212, 191, 0.2);
    border-radius: 16px;
    background: rgba(45, 212, 191, 0.09);
    font-size: 1.55rem;
}
.benefits-cards .benefit-item h3 { margin-bottom: 12px; }
.benefits-cards .benefit-item p { font-size: 1rem; line-height: 1.7; }
.benefits-cards .benefit-item p strong { color: var(--text-main); }

.company-why-section { padding-top: 76px; }
.company-why-section .section-header { max-width: 950px; margin-bottom: 30px; }
.company-why-section .why-section-lead { color: #dbece9; font-size: clamp(1.15rem, 2.1vw, 1.45rem); font-weight: 700; line-height: 1.5; }
.glass-panel {
    border: 1px solid rgba(45, 212, 191, 0.16);
    border-radius: 24px;
    background: linear-gradient(110deg, rgba(13, 33, 36, 0.72), rgba(9, 17, 23, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 24px 60px rgba(0, 0, 0, 0.12);
}
.why-intro { max-width: 980px; margin: 0 auto 28px; padding: 28px 34px; }
.why-intro p { margin-bottom: 10px; }
.why-intro p:last-child { margin-bottom: 0; }
.company-advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0 34px;
}
.company-advantage-card {
    padding: 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 20px;
    background: rgba(12, 22, 28, 0.69);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.company-advantage-card:hover { transform: translateY(-4px); border-color: rgba(45, 212, 191, 0.34); background: rgba(12, 31, 34, 0.82); }
.company-advantage-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 13px;
    color: var(--primary);
    background: rgba(45, 212, 191, 0.1);
    font-size: 1.3rem;
}
.company-advantage-card h3 { margin-bottom: 9px; font-size: 1.08rem; line-height: 1.4; }
.company-advantage-card p { margin: 0; font-size: 0.93rem; line-height: 1.65; }
.why-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.why-detail-card {
    padding: 23px 25px;
    border-left: 2px solid rgba(45, 212, 191, 0.48);
    border-radius: 0 16px 16px 0;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.055), rgba(10, 18, 24, 0.45));
}
.why-detail-card h3 { margin-bottom: 8px; font-size: 1.1rem; line-height: 1.45; }
.why-detail-card p { margin-bottom: 0; font-size: 0.98rem; }
.why-closing { margin: 34px auto 0; text-align: center; max-width: 850px; }
.why-closing > p { margin-bottom: 20px; color: #dbece9; font-size: clamp(1.18rem, 2.4vw, 1.55rem); }
.why-closing strong { color: var(--primary); }
.why-closing .btn { padding: 14px 22px; }

/* Savings calculator */
.calculator-section { padding-top: 78px; }
.calculator-section .section-header { max-width: 970px; margin-bottom: 34px; }
.calculator-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid rgba(45, 212, 191, 0.19);
    border-radius: 28px;
    background: linear-gradient(150deg, rgba(8, 20, 22, 0.93), rgba(5, 10, 15, 0.94) 58%, rgba(10, 21, 25, 0.92));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.calculator-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.calculator-kicker { color: #95adae; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; }
.sample-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(45, 212, 191, 0.1); color: #87f2dc; font-size: 0.78rem; font-weight: 700; }
.savings-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.savings-task-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(11, 22, 25, 0.94), rgba(7, 12, 16, 0.91));
}
.task-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.task-number { color: #87cfc3; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.task-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #9eadae;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.task-delete:hover { color: #ffb0ac; background: rgba(255, 100, 100, 0.08); border-color: rgba(255, 120, 120, 0.2); }
.task-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.task-field > label, .task-name-field > label { color: #c0cece; font-size: 0.88rem; font-weight: 600; }
.task-name-field { margin-bottom: 15px; }
.task-field input:not([type="range"]), .task-field select, .task-name-field input {
    width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: 9px 13px;
    color: #edf7f5;
    border: 1px solid rgba(186, 214, 213, 0.22);
    border-radius: 13px;
    outline: none;
    background: rgba(2, 7, 10, 0.68);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.3;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.task-field select { cursor: pointer; }
.task-field input:focus, .task-field select:focus, .task-name-field input:focus, #task-preset:focus-visible {
    border-color: rgba(45, 212, 191, 0.72);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}
.task-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 14px; }
.frequency-field { margin-top: 16px; }
.frequency-toggle { display: inline-flex; gap: 5px; flex-wrap: wrap; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); }
.frequency-toggle button {
    padding: 7px 13px;
    color: #a8b8b8;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.frequency-toggle button[aria-pressed="true"] { color: #eafffa; border-color: rgba(45, 212, 191, 0.24); background: rgba(45, 212, 191, 0.14); }
.frequency-toggle button:focus-visible, .task-delete:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.automation-field { margin-top: 17px; }
.automation-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #c0cece; font-size: 0.88rem; font-weight: 600; }
.automation-value { color: #e9fffa; font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.automation-range { width: 100%; margin: 9px 0 1px; accent-color: var(--primary); cursor: pointer; }
.automation-range { appearance: none; -webkit-appearance: none; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.automation-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #dcfff8; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12); }
.automation-range::-moz-range-thumb { width: 17px; height: 17px; border: 2px solid #dcfff8; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12); }
.task-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; padding: 16px 15px; border: 1px solid rgba(45, 212, 191, 0.13); border-radius: 15px; background: rgba(45, 212, 191, 0.045); }
.task-metric { min-width: 0; }
.task-metric-hours { grid-column: 1 / -1; padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, 0.075); }
.task-metric span { display: block; margin-bottom: 5px; color: #96aaa9; font-size: 0.75rem; line-height: 1.35; }
.task-metric strong { display: block; color: #f0fffc; font-size: 1.08rem; line-height: 1.4; font-weight: 800; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.task-metric-hours strong { color: var(--primary); font-size: 1.32rem; }
.add-task-row { margin: 24px 0; }
.add-task-row > label { display: block; margin-bottom: 8px; color: #cfdddd; font-size: 0.9rem; font-weight: 600; }
.add-task-controls { display: flex; gap: 10px; }
#task-preset {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 10px 14px;
    color: #eef8f6;
    border: 1px solid rgba(186, 214, 213, 0.22);
    border-radius: 14px;
    background: rgba(2, 7, 10, 0.68);
    font: inherit;
    font-size: 0.93rem;
}
.add-task-btn { flex-shrink: 0; min-height: 46px; padding: 9px 18px; white-space: nowrap; }
.calculator-shell .btn { font-size: 0.94rem; }
.calculator-summary {
    padding: 24px;
    border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 22px;
    background: linear-gradient(120deg, rgba(0, 35, 24, 0.64), rgba(2, 19, 17, 0.88));
}
.summary-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.summary-heading-row h3 { margin: 0; font-size: 1.15rem; }
.summary-count { padding: 4px 10px; border: 1px solid rgba(45, 212, 191, 0.18); border-radius: 999px; color: #83f3bc; background: rgba(45, 212, 191, 0.09); font-size: 0.78rem; white-space: nowrap; }
.summary-time-grid, .summary-money-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.summary-time-grid { padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.summary-money-grid { padding-top: 20px; }
.summary-metric span { display: block; margin-bottom: 8px; color: #a8beb8; font-size: 0.85rem; }
.summary-metric strong { display: block; color: #f0f7f5; font-size: clamp(1.35rem, 2.3vw, 1.9rem); font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary-money-grid .summary-metric strong { color: #47e08e; }
.calculator-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.calculator-actions .btn { padding: 10px 15px; }
.calculator-actions .btn-secondary { color: #d3e0df; border-color: rgba(255, 255, 255, 0.2); }
.copy-status { color: #86edcc; font-size: 0.82rem; }
.calculator-disclaimer { margin: 18px 2px 0; color: #98aaa9; font-size: 0.82rem; line-height: 1.6; }
.calculator-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 22px 24px;
    border: 1px solid rgba(45, 212, 191, 0.18);
    border-radius: 20px;
    background: linear-gradient(110deg, rgba(45, 212, 191, 0.085), rgba(10, 24, 26, 0.45));
}
.calculator-cta h3 { margin-bottom: 5px; font-size: 1.13rem; }
.calculator-cta p { margin: 0; font-size: 0.91rem; }
.calculator-cta .btn { flex: 0 0 auto; padding: 12px 17px; text-align: center; }

/* Contact / team area, inspired by the supplied two-profile reference. */
.contact-section { padding-top: 76px; }
.contact-card {
    max-width: 1060px !important;
    padding: 28px !important;
    border: 1px solid rgba(85, 186, 174, 0.15) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, rgba(8, 20, 28, 0.94), rgba(6, 16, 23, 0.96)) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    text-align: left !important;
}
.contact-heading { max-width: 800px; margin: 0 auto 22px; }
.contact-heading h2 { margin: 0 0 8px; text-align: left; font-size: clamp(1.8rem, 3.8vw, 2.45rem); }
.contact-heading > p { margin: 0; font-size: 0.98rem; }
.contact-heading .section-eyebrow { margin-bottom: 10px; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.team-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(19, 39, 49, 0.95), rgba(14, 31, 41, 0.93));
}

/* Contact portraits: give faces more vertical room */
.team-avatar {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0 !important;
    overflow: hidden;
    border-radius: 12px;
}

.team-avatar img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    border-radius: inherit;
}

/* Bulcsú: show more of the top of the head */
.team-card:nth-child(1) .team-avatar img {
    object-position: center 15%;
}

/* Péter: show more of the face below the hairline */
.team-card:nth-child(2) .team-avatar img {
    object-position: center 60%;
}

/* Give portraits more room on narrow screens */
@media (max-width: 520px) {
    .team-avatar {
        aspect-ratio: 4 / 3;
    }
}

.team-avatar svg { width: 46px; height: 46px; fill: none; stroke: #8faeaf; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.team-card h3 { margin: 0 0 3px; font-size: 1.05rem; }
.team-role { display: block; margin-bottom: 6px; color: var(--primary); font-size: 0.83rem; font-weight: 700; }
.team-card > p { margin-bottom: 13px; font-size: 0.86rem; line-height: 1.55; }
.team-contact-list { display: grid; gap: 6px; margin-top: auto; }
.team-contact-list a { display: flex; align-items: center; gap: 8px; color: #afc4c5; text-decoration: none; font-size: 0.76rem; overflow-wrap: anywhere; transition: color 0.2s ease; }
.team-contact-list a span { color: var(--primary); font-size: 0.9rem; }
.team-contact-list a:hover { color: #f1fffc; }
.contact-bottom { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(145, 191, 190, 0.19); }
.contact-bottom-copy h3 { margin-bottom: 5px; font-size: 1.15rem; }
.contact-bottom-copy p { margin-bottom: 16px; font-size: 0.92rem; }
.central-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.central-contact-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; color: inherit; text-decoration: none; transition: background 0.2s ease; }
.central-contact-item:hover { background: rgba(45, 212, 191, 0.055); }
.central-contact-icon { color: var(--primary); font-size: 1.25rem; line-height: 1.3; }
.central-contact-item strong { display: block; margin-bottom: 2px; font-size: 0.92rem; }
.central-contact-item small { display: block; color: #91a9ac; font-size: 0.78rem; line-height: 1.5; }


@media (max-width: 1050px) {
    .company-advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .savings-tasks { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .benefits-cards .benefit-item { padding: 26px 23px; }
    .why-intro { padding: 23px 22px; }
    .company-advantages-grid { gap: 12px; }
    .company-advantage-card { padding: 20px 17px; }
    .why-details-grid { grid-template-columns: 1fr; }
    .calculator-shell { padding: 18px; border-radius: 22px; }
    .calculator-topline { align-items: flex-start; flex-direction: column; gap: 8px; }
    .savings-task-card { padding: 18px; }
    .task-form-grid { gap: 12px 10px; }
    .calculator-summary { padding: 18px; }
    .summary-time-grid, .summary-money-grid { gap: 14px; }
    .summary-metric strong { font-size: 1.3rem; }
    .calculator-cta { align-items: stretch; flex-direction: column; padding: 19px; }
    .calculator-cta .btn { width: 100%; }
    .contact-card { padding: 18px !important; border-radius: 22px !important; }
    .team-avatar { min-height: 145px; }
}
@media (max-width: 520px) {
    .company-advantages-grid { grid-template-columns: 1fr; }
    .task-form-grid { grid-template-columns: 1fr; }
    .frequency-toggle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .frequency-toggle button { padding: 8px 7px; }
    .task-metrics { padding: 13px; gap: 12px; }
    .add-task-controls { align-items: stretch; flex-direction: column; }
    .add-task-btn { width: 100%; }
    .summary-heading-row { align-items: flex-start; }
    .summary-time-grid, .summary-money-grid { grid-template-columns: 1fr; gap: 17px; }
    .summary-time-grid { padding-bottom: 17px; }
    .summary-money-grid { padding-top: 17px; }
    .calculator-actions { align-items: stretch; flex-direction: column; }
    .calculator-actions .btn { width: 100%; }
    .team-grid { grid-template-columns: 1fr; }
    .team-avatar { min-height: 180px; }
    .central-contact-grid { grid-template-columns: 1fr; gap: 4px; }
}
.logo-wordmark { display: none; color: #f1faf8; font-size: 1.32rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.logo-wordmark > span { color: var(--primary); }
.logo.logo-image-missing .logo-wordmark { display: inline-flex; }
.calculator-section .section-header h2 { max-width: 920px; margin-left: auto; margin-right: auto; font-size: clamp(1.8rem, 3.6vw, 2.55rem); line-height: 1.24; }
@media (max-width: 520px) {
    .calculator-section .section-header h2 { font-size: 1.65rem; line-height: 1.28; }
}


/* ============================================================
   BoostRise v4: consistent metallic-green visual system
   ============================================================ */
.nav {
    background: rgba(6, 14, 20, 0.62) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    border-bottom: 1px solid rgba(98, 219, 201, 0.15) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16);
}
.nav-links { gap: clamp(12px, 1.9vw, 28px); }
.nav-links a { font-size: 0.96rem; }
.nav-links a.active { color: var(--primary); }
.logo { cursor: pointer; }
.nav-btn { white-space: nowrap; }
.section[id] { scroll-margin-top: calc(var(--nav-height) + 22px); }

/* Major sections, not their individual children, enter and leave together.
   The observer resets the whole section when it is fully outside the viewport. */
.section-reveal {
    opacity: 0;
    transform: none; /* Keep the observed section box stable; animate its contents instead. */
    transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}
.section-reveal > .container {
    transform: translate3d(0, 46px, 0);
    transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
}
.section-reveal.is-section-visible { opacity: 1 !important; transform: none !important; }
.section-reveal.is-section-visible > .container { transform: translate3d(0, 0, 0); }
.section-reveal .reveal,
.section-reveal .reveal-left,
.section-reveal .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
#kapcsolat.section-reveal:not(.is-section-visible) { opacity: 0 !important; transform: none !important; }
#kapcsolat.section-reveal.is-section-visible { opacity: 1 !important; transform: none !important; }
#kapcsolat.section-reveal > .container { transform: translate3d(0,46px,0); }
#kapcsolat.section-reveal.is-section-visible > .container { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .section-reveal, .section-reveal.is-section-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
    .section-reveal > .container, .section-reveal.is-section-visible > .container { transform: none !important; transition: none !important; }
    #kapcsolat.section-reveal:not(.is-section-visible) { opacity: 1 !important; }
}

/* The shared metallic card foundation. */
.metallic-card,
.benefits-cards .benefit-item,
.company-advantage-card,
.why-intro,
.why-detail-card,
.process-step,
.service-category,
.service-detail-card,
.package-card,
.team-card,
.contact-card,
.glass-panel,
.case-study-box,
.why-it-works-box,
.inline-style-6,
.inline-style-29,
.inline-style-36,
.inline-style-53,
.inline-style-62,
.inline-style-14,
.inline-style-16,
.inline-style-18,
.inline-style-42,
.inline-style-45,
.inline-style-48,
.calculator-shell,
.savings-task-card,
.calculator-cta {
    border: 1px solid rgba(71, 206, 190, 0.19) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(20, 48, 52, 0.82) 0%, rgba(15, 30, 40, 0.88) 55%, rgba(10, 17, 28, 0.92) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(222, 255, 250, 0.035), 0 18px 48px rgba(0, 0, 0, 0.14);
}
.benefits-cards .benefit-item,
.company-advantage-card,
.why-intro,
.why-detail-card,
.process-step,
.service-category,
.service-detail-card,
.package-card,
.team-card,
.case-study-box,
.why-it-works-box,
.inline-style-6,
.inline-style-29,
.inline-style-36,
.inline-style-53,
.inline-style-62,
.inline-style-14,
.inline-style-16,
.inline-style-18,
.inline-style-42,
.inline-style-45,
.inline-style-48 {
    padding: 26px !important;
}
.benefits-cards .benefit-item::before { display: none !important; }
.why-detail-card { border-left: 1px solid rgba(71, 206, 190, 0.19) !important; border-radius: 22px !important; }
.company-advantage-card:hover,
.benefits-cards .benefit-item:hover,
.package-card:hover,
.service-tile:hover,
.chatbot-benefit-card:hover,
.chatbot-package-card:hover,
.chatbot-step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(45, 212, 191, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(222,255,250,0.06), 0 20px 55px rgba(0,0,0,0.22), 0 0 26px rgba(45,212,191,0.05);
}
.service-category-toggle { background: transparent !important; }
.service-item { border-color: rgba(71, 206, 190, 0.15) !important; background: rgba(3, 12, 17, 0.35) !important; }

/* Redesigned Megoldásaink area: one dominant offer and six equal services. */
.solutions-overview .section-header { margin-bottom: 30px; }
.featured-service-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 28px;
    padding: clamp(26px, 4vw, 42px);
    margin-bottom: 42px;
    border-color: rgba(45, 212, 191, 0.48) !important;
    background: linear-gradient(120deg, rgba(19, 65, 65, 0.92), rgba(14, 36, 45, 0.95) 48%, rgba(10, 20, 31, 0.97)) !important;
    box-shadow: inset 0 1px 0 rgba(242,255,253,0.07), 0 24px 64px rgba(0,0,0,0.22), 0 0 35px rgba(45,212,191,0.055);
}
.featured-service-copy { min-width: 0; }
.service-eyebrow, .service-block-kicker {
    display: inline-flex; align-items: center; margin-bottom: 12px;
    color: #92f5dc; background: rgba(45, 212, 191, 0.11);
    border: 1px solid rgba(45, 212, 191, 0.2); border-radius: 999px;
    padding: 5px 10px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.035em;
}
.featured-service-card h3, .featured-service-card h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.28; text-align: left; }
.featured-service-card p { max-width: 900px; margin: 0; color: #c0d6dc; font-size: 1rem; }
.featured-benefits { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 22px 0 0; padding: 0; }
.featured-benefits li { position: relative; padding-left: 23px; color: #d6e8e9; font-size: 0.93rem; line-height: 1.5; }
.featured-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 900; }
.featured-service-cta { min-width: 136px; padding: 13px 18px; text-align: center; white-space: nowrap; }
.service-grid-heading { margin: 0 0 18px; }
.service-grid-heading h3, .service-grid-heading h2 { margin: 0 0 4px; text-align: left; font-size: 1.32rem; }
.service-grid-heading p { margin: 0; font-size: 0.92rem; }
.service-tiles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-tile {
    min-width: 0; min-height: 220px; display: flex; flex-direction: column; align-items: flex-start;
    padding: 24px; border: 1px solid rgba(71,206,190,0.19); border-radius: 21px;
    background: linear-gradient(145deg, rgba(20,48,52,0.82), rgba(10,17,28,0.92));
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.service-tile-icon { display: inline-grid; place-items: center; width: 43px; height: 43px; margin-bottom: 16px; border: 1px solid rgba(45,212,191,0.25); border-radius: 13px; background: rgba(45,212,191,0.10); color: var(--primary); font-size: 1.35rem; }
.service-tile h3 { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.35; }
.service-tile p { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.6; }
.service-detail-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #61e8d1; text-decoration: none; font-size: 0.9rem; font-weight: 800; }
.service-detail-link:hover { color: #d8fff7; }
.service-detail-link span { transition: transform 0.2s ease; }
.service-detail-link:hover span { transform: translateX(3px); }

/* Static service pages share the homepage background and nav. */
.service-page-main { position: relative; z-index: 1; padding-top: calc(var(--nav-height) + 18px); }
.service-page-intro { padding-top: 50px; padding-bottom: 26px; }
.service-page-intro .section-header { max-width: 970px; }
.service-page-intro h1 { margin: 10px 0 18px; font-size: clamp(2.1rem, 4.8vw, 3.7rem); }
.service-page-intro p { max-width: 900px; margin: 0 auto; font-size: 1.04rem; }
.service-detail-page-header .badge { margin-bottom: 9px; }
.breadcrumb-link { color: inherit; text-decoration: none; }
.breadcrumb-link:hover { color: #fff; }
.service-catalogue-section { padding-top: 35px; }
.service-callout { padding: clamp(24px, 4vw, 40px); text-align: center; }
.service-callout h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 12px; }
.service-callout p { max-width: 760px; margin: 0 auto 22px; }
.service-callout .btn { padding: 13px 19px; }
.service-grid-heading { margin-top: 0; }
.detail-page-main .service-detail-group { padding-top: 12px; }
.service-detail-block { padding: 22px 0 34px; margin-bottom: 18px; border-bottom: 1px solid rgba(93, 185, 178, 0.14); }
.service-detail-block:last-child { border-bottom: 0; margin-bottom: 0; }
.service-detail-block > .service-block-kicker { display: none; }
.service-detail-block .inline-style-7,
.service-detail-block .inline-style-37,
.service-detail-block .inline-style-54,
.service-detail-block .inline-style-63 { margin-top: 0; }
.service-detail-block .inline-style-6,
.service-detail-block .inline-style-29,
.service-detail-block .inline-style-36,
.service-detail-block .inline-style-53,
.service-detail-block .inline-style-62 { margin: 0; }
.service-detail-block .packages-grid { align-items: stretch; }
.service-detail-block .package-card { height: 100%; }
.service-detail-block .service-example-grid { gap: 16px; }
.service-detail-block .service-example-grid > div { padding: 21px; border: 1px solid rgba(71,206,190,0.19); border-radius: 18px; background: linear-gradient(145deg, rgba(20,48,52,0.78), rgba(10,17,28,0.86)); }
.site-footer { position: relative; z-index: 1; padding: 28px 0; text-align: center; border-top: 1px solid rgba(88, 193, 180, 0.12); }
.site-footer p { margin: 0; font-size: 0.78rem; }
.site-footer a { color: #91dcd0; }

/* AI chatbot service: content and package data follows the uploaded product PDF. */
.chatbot-benefits-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px; }
.chatbot-benefit-card:nth-child(-n+3) { grid-column: span 2; }
.chatbot-benefit-card:nth-child(4) { grid-column: 2 / span 2; }
.chatbot-benefit-card:nth-child(5) { grid-column: 4 / span 2; }
.chatbot-benefit-card { padding: 24px; }
.chatbot-benefit-card > span { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.22); font-size: 1.35rem; margin-bottom: 14px; }
.chatbot-benefit-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.chatbot-benefit-card p { margin: 0; font-size: .9rem; line-height: 1.65; }
.chatbot-table-wrap { overflow-x: auto; padding: 8px; }
.chatbot-pricing-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.chatbot-pricing-table th, .chatbot-pricing-table td { padding: 14px 15px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(255,255,255,.055); vertical-align: top; }
.chatbot-pricing-table th { color: #d9fff8; background: rgba(45,212,191,.07); font-weight: 800; white-space: nowrap; }
.chatbot-pricing-table th:first-child, .chatbot-pricing-table td:first-child { min-width: 190px; }
.chatbot-pricing-table tr:last-child td { border-bottom: 0; }
.chatbot-pricing-table td:last-child, .chatbot-pricing-table th:last-child { border-right: 0; }
.chatbot-pricing-table td strong { color: #e8f3f4; }
.chatbot-footnote { margin: 12px 2px 0; font-size: .8rem; }
.chatbot-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 24px; }
.chatbot-package-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px; }
.chatbot-package-recommended { border-color: rgba(45,212,191,.56) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 34px rgba(45,212,191,.07); }
.package-plan-icon { font-size: 1.75rem; margin-bottom: 7px; }
.chatbot-package-card h3 { margin: 0 0 4px; font-size: 1.36rem; }
.chatbot-price { margin: 0 0 10px; color: #eafdfa; font-size: 1.45rem; font-weight: 800; }
.chatbot-price span { color: #9bb8bb; font-size: .85rem; font-weight: 500; }
.chatbot-package-card > p:not(.chatbot-price) { font-size: .9rem; margin-bottom: 15px; }
.chatbot-package-card h4 { color: #c7fff5; margin: 8px 0; font-size: .98rem; }
.chatbot-package-card ul { list-style: none; padding: 0; margin: 0 0 18px; }
.chatbot-package-card li { position: relative; padding-left: 22px; margin: 7px 0; font-size: .88rem; color: #c5dadd; line-height: 1.5; }
.chatbot-package-card li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 800; }
.package-ideal { margin-top: auto; padding: 16px; border-radius: 16px; border: 1px solid rgba(45,212,191,.13); background: rgba(4,13,18,.30); }
.package-ideal strong { color: #e8fffa; font-size: .9rem; }
.package-ideal p { margin: 5px 0 0; font-size: .84rem; line-height: 1.55; }
.chatbot-package-card .service-detail-link { margin-top: 18px; }
.package-recommend-badge { position: absolute; right: 18px; top: 18px; padding: 4px 9px; color: #8ff4d9; border: 1px solid rgba(45,212,191,.28); border-radius: 999px; background: rgba(45,212,191,.10); font-size: .7rem; font-weight: 800; }
.chatbot-steps-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.chatbot-step-card { padding: 24px; }
.step-number { display: block; color: #67ecd4; font-weight: 800; font-size: .78rem; letter-spacing: .12em; padding-bottom: 10px; border-bottom: 2px solid rgba(45,212,191,.65); margin-bottom: 15px; }
.chatbot-step-card h3 { margin-bottom: 8px; font-size: 1.08rem; }
.chatbot-step-card p { margin: 0; font-size: .88rem; }
.chatbot-notice { padding: 22px 25px; margin-top: 22px; }
.chatbot-notice p { margin: 0; font-size: .9rem; }
.chatbot-notice strong { color: #ebfffb; }
.chatbot-notes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.chatbot-note-card { padding: 24px; }
.chatbot-note-card p { margin: 0; font-size: .95rem; }
.chatbot-terms { margin-top: 36px; }
.chatbot-terms h2 { text-align: left; margin-bottom: 10px; font-size: 1.7rem; }
.chatbot-terms p { font-size: .92rem; }
.chatbot-terms a { color: #69ead4; font-weight: 800; }
.chatbot-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; margin-top: 34px; }
.chatbot-final-cta h2 { text-align: left; margin: 0 0 8px; font-size: clamp(1.35rem,2.5vw,1.9rem); }
.chatbot-final-cta p { margin: 0; font-size: .92rem; }
.chatbot-final-cta .btn { flex-shrink: 0; padding: 13px 18px; text-align: center; }
.chatbot-cta-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.chatbot-cta-actions .btn-secondary { border: 1px solid rgba(120, 200, 193, .26); color: #d8eceb; }
.continuous-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.continuous-feature-card { padding: 25px; }
.continuous-feature-card h2 { text-align: left; font-size: 1.2rem; margin: 0 0 8px; }
.continuous-feature-card p { margin: 0; font-size: .94rem; }

@media (max-width: 1050px) {
    .service-tiles-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .chatbot-benefits-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .chatbot-benefit-card:nth-child(-n+3), .chatbot-benefit-card:nth-child(4), .chatbot-benefit-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 768px) {
    .featured-service-card { grid-template-columns: 1fr; align-items: stretch; gap: 22px; }
    .featured-service-cta { width: 100%; }
    .service-tiles-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .service-tile { padding: 19px; min-height: 220px; }
    .featured-benefits { grid-template-columns: 1fr; gap: 8px; }
    .service-page-intro { padding-top: 30px; }
    .chatbot-final-cta { flex-direction: column; align-items: stretch; }
    .chatbot-cta-actions, .chatbot-final-cta .btn { width: 100%; }
    .chatbot-benefits-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .chatbot-steps-grid, .continuous-feature-grid { grid-template-columns: 1fr; }
    .chatbot-pricing-table { min-width: 690px; }
}
@media (max-width: 520px) {
    .nav-container { padding-left: 18px; padding-right: 18px; }
    .nav-btn { display: none !important; }
    .nav-links { display: none !important; }
    .mobile-menu-btn { display: inline-block !important; }
    .service-tiles-grid, .chatbot-package-grid, .chatbot-benefits-grid, .chatbot-notes-grid { grid-template-columns: 1fr; }
    .service-tile { min-height: auto; }
    .chatbot-package-card { padding: 22px; }
    .chatbot-benefit-card, .chatbot-step-card, .chatbot-note-card { padding: 21px; }
    .site-footer { padding-bottom: 28px; }
}

/* Contact portrait overflow guard — keep images inside their cards on every viewport.
   These rules intentionally come last and use !important to beat stale/legacy image rules. */
#kapcsolat .team-card {
    position: relative;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#kapcsolat .team-card img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    object-fit: cover;
}

#kapcsolat .team-card .team-avatar {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    isolation: isolate;
    contain: layout paint;
    border-radius: 12px !important;
}

#kapcsolat .team-card .team-avatar > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

@media (max-width: 520px) {
    #kapcsolat .team-card .team-avatar {
        aspect-ratio: 4 / 3 !important;
    }
}



/* ============================================================
   Persistent service quick-nav — translucent metallic glass.
   Wide desktop: always visible in the outer page margin.
   Smaller viewports: a slim edge tab opens the compact list.
   ============================================================ */
.product-sidebar {
    position: fixed;
    z-index: 900;
    top: 50%;
    left: 12px;
    width: 44px;
    transform: translateY(-50%);
    pointer-events: none;
}
.product-sidebar-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 44px;
    min-height: 142px;
    padding: 13px 8px;
    border: 1px solid rgba(71, 206, 190, 0.28);
    border-radius: 24px;
    color: #d9f8f3;
    background: linear-gradient(150deg, rgba(20, 48, 52, 0.86), rgba(10, 17, 28, 0.9));
    box-shadow: inset 0 1px 0 rgba(222, 255, 250, 0.055), 0 12px 32px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.product-sidebar-toggle:hover,
.product-sidebar.is-open .product-sidebar-toggle {
    border-color: rgba(45, 212, 191, 0.62);
    box-shadow: inset 0 1px 0 rgba(222, 255, 250, 0.08), 0 14px 36px rgba(0, 0, 0, 0.28), 0 0 24px rgba(45, 212, 191, 0.07);
}
.product-sidebar-toggle-icon { font-size: 1.2rem; line-height: 1; color: var(--primary); }
.product-sidebar-toggle-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #c2d9d8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    white-space: nowrap;
}
.product-sidebar-panel {
    display: none;
    position: absolute;
    top: 50%;
    left: 54px;
    width: min(280px, calc(100vw - 82px));
    max-height: min(76vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border: 1px solid rgba(71, 206, 190, 0.23);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(20, 48, 52, 0.92) 0%, rgba(12, 27, 34, 0.94) 55%, rgba(8, 14, 24, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(222, 255, 250, 0.045), 0 24px 64px rgba(0, 0, 0, 0.34);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
    backdrop-filter: blur(26px) saturate(155%);
    transform: translateY(-50%);
    pointer-events: auto;
}
.product-sidebar.is-open .product-sidebar-panel { display: block; }
.product-sidebar-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 7px 12px;
    margin-bottom: 7px;
    border-bottom: 1px solid rgba(157, 224, 216, 0.12);
}
.product-sidebar-kicker { color: #76dccc; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.13em; }
.product-sidebar-heading strong { color: #e7f5f3; font-size: 0.94rem; font-weight: 800; }
.product-sidebar-links { display: grid; gap: 4px; }
.product-sidebar-link {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #bdd0d1;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.product-sidebar-link:hover,
.product-sidebar-link:focus-visible,
.product-sidebar-link.is-current {
    color: #effffc;
    background: linear-gradient(100deg, rgba(45, 212, 191, 0.13), rgba(45, 212, 191, 0.035));
    border-color: rgba(45, 212, 191, 0.21);
}
.product-sidebar-link:hover { transform: translateX(2px); }
.product-sidebar-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.product-sidebar-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; color: var(--primary); background: rgba(45, 212, 191, 0.075); font-size: 0.92rem; }
.product-sidebar-panel::-webkit-scrollbar { width: 5px; }
.product-sidebar-panel::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(89, 208, 190, 0.28); }

/* On large screens the full list lives in the unused margin beside the content. */
@media (min-width: 1600px) {
    .product-sidebar { left: max(14px, calc((100vw - 1200px) / 2 - 202px)); width: 184px; pointer-events: auto; }
    .product-sidebar-toggle { display: none; }
    .product-sidebar-panel { display: block; position: relative; inset: auto; width: 100%; max-height: min(76vh, 640px); transform: none; }
}

@media (max-width: 520px) {
    .product-sidebar { left: 8px; width: 38px; }
    .product-sidebar-toggle { width: 38px; min-height: 126px; padding: 11px 6px; border-radius: 20px; }
    .product-sidebar-panel { left: 46px; width: calc(100vw - 62px); max-height: 70vh; padding: 11px; border-radius: 18px; }
    .product-sidebar-link { min-height: 40px; font-size: 0.73rem; }
}
@media (prefers-reduced-motion: reduce) {
    .product-sidebar-toggle, .product-sidebar-link { transition: none !important; }
}


/* ============================================================
   Sidebar v2 — viewport-edge placement and quiet frosted glass.
   The fixed left coordinate intentionally does not depend on the
   centered content width, so browser zoom cannot move it inward.
   ============================================================ */
.product-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 50vh !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 1200 !important;
    pointer-events: none;
    width: 42px;
    max-width: calc(100vw - 8px);
}
.product-sidebar-toggle {
    pointer-events: auto;
    border-radius: 0 17px 17px 0 !important;
    border-left: 0 !important;
    background: rgba(8, 19, 25, 0.42) !important;
    border-color: rgba(109, 225, 210, 0.14) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.025) !important;
    -webkit-backdrop-filter: blur(24px) saturate(125%) !important;
    backdrop-filter: blur(24px) saturate(125%) !important;
}
.product-sidebar-toggle:hover,
.product-sidebar.is-open .product-sidebar-toggle {
    background: rgba(12, 32, 37, 0.6) !important;
    border-color: rgba(45, 212, 191, 0.32) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.product-sidebar-panel {
    pointer-events: auto;
    background: rgba(7, 16, 22, 0.34) !important;
    border: 1px solid rgba(126, 219, 209, 0.13) !important;
    border-left: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    box-shadow: 0 8px 26px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.025) !important;
    -webkit-backdrop-filter: blur(24px) saturate(125%) !important;
    backdrop-filter: blur(24px) saturate(125%) !important;
}
.product-sidebar-heading {
    border-bottom-color: rgba(157, 224, 216, 0.10) !important;
}
.product-sidebar-link {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
}
.product-sidebar-link:hover,
.product-sidebar-link:focus-visible,
.product-sidebar-link.is-current {
    background: rgba(45, 212, 191, 0.075) !important;
    border-color: rgba(45, 212, 191, 0.16) !important;
}
.product-sidebar-link:hover { transform: translateX(2px) !important; }
.product-sidebar-name { min-width: 0; }
.product-sidebar-name strong { display: block; font: inherit; font-weight: 700; }
.product-sidebar-name small {
    display: block;
    margin-top: 3px;
    color: #65e6d2;
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.08em;
}
.product-sidebar-link-featured {
    position: relative;
    background: rgba(45, 212, 191, 0.105) !important;
    border: 1px solid rgba(45, 212, 191, 0.32) !important;
    box-shadow: inset 2px 0 0 rgba(45, 212, 191, 0.92), 0 0 18px rgba(45, 212, 191, 0.035) !important;
    color: #effffc !important;
}
.product-sidebar-link-featured .product-sidebar-icon {
    background: rgba(45, 212, 191, 0.16) !important;
    border: 1px solid rgba(45, 212, 191, 0.22);
}
.product-sidebar-link-featured:hover,
.product-sidebar-link-featured.is-current {
    background: rgba(45, 212, 191, 0.15) !important;
    border-color: rgba(45, 212, 191, 0.42) !important;
}

/* Wide viewports: compact full list flush with the viewport edge. */
@media (min-width: 1600px) {
    .product-sidebar { left: 0 !important; width: 188px !important; pointer-events: auto; }
    .product-sidebar-toggle { display: none !important; }
    .product-sidebar-panel {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        left: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: min(76vh, 620px) !important;
        padding: 10px !important;
        transform: none !important;
    }
    .product-sidebar-heading { padding: 4px 7px 10px; }
    .product-sidebar-links { gap: 3px; }
    .product-sidebar-link { padding: 7px 7px; font-size: 0.73rem; }
    .product-sidebar-icon { width: 24px; height: 24px; }
}
@media (max-width: 1599px) {
    .product-sidebar { left: 0 !important; width: 40px !important; }
    .product-sidebar-toggle { width: 40px !important; min-height: 126px; padding: 10px 5px; }
    .product-sidebar-panel { left: 48px !important; width: min(278px, calc(100vw - 54px)) !important; border-left: 1px solid rgba(126,219,209,.13) !important; border-radius: 0 18px 18px 0 !important; }
}

/* Make the recurring digital-development partnership the clear lead offer. */
.continuous-merged-section > .container {
    position: relative;
    padding: 34px !important;
    border: 1px solid rgba(45, 212, 191, 0.44);
    border-radius: 32px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(45, 212, 191, 0.16), transparent 57%),
        linear-gradient(140deg, rgba(12, 39, 42, 0.78), rgba(6, 14, 20, 0.84) 58%, rgba(9, 26, 30, 0.78)) !important;
    box-shadow: 0 0 0 1px rgba(45,212,191,0.035), 0 26px 72px rgba(0,0,0,0.22), 0 0 52px rgba(45,212,191,0.065), inset 0 1px 0 rgba(224,255,250,0.09);
    overflow: hidden;
}
.continuous-merged-section > .container::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(45,212,191,0.95), #b7fff2, rgba(45,212,191,0.95), transparent);
    opacity: 0.9;
    pointer-events: none;
}
.continuous-feature-kicker {
    width: fit-content;
    max-width: 100%;
    margin: 2px auto 14px;
    padding: 7px 13px;
    border: 1px solid rgba(45,212,191,0.34);
    border-radius: 999px;
    background: rgba(45,212,191,0.10);
    color: #9bfff0;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.085em;
}
.continuous-merged-section .service-detail-page-header { margin-bottom: 28px; }
.continuous-merged-section .service-detail-page-header h2 {
    color: #eafffb;
    text-shadow: 0 0 28px rgba(45,212,191,0.14);
    font-size: clamp(2rem, 4vw, 3.15rem);
}
.continuous-merged-section .service-detail-page-header p {
    max-width: 860px;
    margin: 0 auto;
    color: #c1d9d8;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
}
.continuous-merged-section .continuous-feature-grid { gap: 15px; }
.continuous-merged-section .continuous-feature-card {
    background: linear-gradient(145deg, rgba(14, 42, 44, 0.86), rgba(7, 16, 22, 0.76)) !important;
    border: 1px solid rgba(107, 235, 213, 0.17) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 28px rgba(0,0,0,0.1);
}
.continuous-merged-section .continuous-feature-card:first-child,
.continuous-merged-section .continuous-feature-card:nth-child(2) {
    border-color: rgba(45,212,191,0.32) !important;
    background: linear-gradient(145deg, rgba(15, 53, 54, 0.92), rgba(7, 17, 23, 0.82)) !important;
}
.continuous-feature-cta { text-align: center; margin: 28px 0 2px; }
.continuous-feature-cta .btn {
    padding: 15px 25px;
    box-shadow: 0 0 28px rgba(45,212,191,0.16);
}
@media (max-width: 768px) {
    .continuous-merged-section > .container { padding: 26px 18px !important; border-radius: 24px; }
    .continuous-feature-kicker { font-size: 0.62rem; letter-spacing: 0.045em; line-height: 1.45; }
    .continuous-feature-cta .btn { max-width: 100%; white-space: normal; }
}


/* ============================================================
   FINAL NAVIGATION — hover/focus dropdowns on desktop, tap menus on mobile
   ============================================================ */
.nav {
    z-index: 1500;
    overflow: visible;
}
.nav-container {
    min-height: var(--nav-height);
    height: var(--nav-height);
}
.nav-right {
    min-width: 0;
    height: 100%;
    gap: clamp(10px, 1.4vw, 22px);
}
.nav nav {
    height: 100%;
}
.nav-links {
    height: 100%;
    align-items: stretch;
    gap: clamp(10px, 1.35vw, 20px);
}
.nav-links > li {
    position: relative;
    list-style: none;
}
.nav-links > li.nav-dropdown {
    display: flex;
    align-items: stretch;
    height: 100%;
}
.nav-links > li > a,
.nav-dropdown-row > a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: var(--text-dim);
    text-decoration: none;
    white-space: nowrap;
    font-size: clamp(0.82rem, 0.9vw, 0.94rem);
    font-weight: 650;
    transition: color .2s ease;
}
.nav-links > li > a:hover,
.nav-dropdown-row > a:hover,
.nav-dropdown:hover > .nav-dropdown-row > a,
.nav-dropdown:focus-within > .nav-dropdown-row > a {
    color: var(--primary);
}
.nav-dropdown-row {
    display: flex;
    align-items: center;
    height: 100%;
}
.nav-dropdown-row > a {
    height: 100%;
    padding: 0 8px;
}

/* The menu touches the navbar edge: one continuous frosted-glass surface. */
.nav-dropdown-menu {
    display: grid;
    gap: 3px;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: 1600;
    min-width: 225px;
    padding: 10px;
    border: 1px solid rgba(126, 219, 209, .17);
    border-top: 0;
    border-radius: 0 0 15px 15px;
    background: rgba(6, 14, 20, .72);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .025);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-dropdown:hover > .nav-dropdown-menu,
.nav-dropdown:focus-within > .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 37px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #c1d5d4;
    text-decoration: none;
    font-size: .79rem;
    line-height: 1.35;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
    color: #effffc;
    background: rgba(45, 212, 191, .085);
    border-color: rgba(45, 212, 191, .14);
}
.nav-dropdown-menu-wide { min-width: 292px; }
.nav-dropdown-menu .nav-dropdown-all {
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid rgba(148, 202, 195, .14);
    color: #82ead8;
    font-weight: 800;
}
.nav-btn { padding: 9px 14px; font-size: .83rem; }
.mobile-drawer { display: none; }
.mobile-menu-btn { flex: 0 0 auto; }

/* Persistent left quick-nav copy and calculator shortcut. */
.product-sidebar-toggle-label { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
.product-sidebar-heading strong { font-size: .93rem; }
.product-sidebar-calculator-link { color: #8cebdc; border-top: 1px solid rgba(137,204,197,.12) !important; margin-top: 5px; padding-top: 11px; }
.product-sidebar-calculator-link .product-sidebar-icon { background: rgba(45,212,191,.12); }

/* Four-step process: four equal cards and three connectors on desktop. */
.process-flow-four {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr);
    align-items: stretch;
    gap: 10px !important;
    margin-top: 42px !important;
}
.process-flow-four .process-step {
    min-width: 0;
    padding: 25px 20px !important;
    border-radius: 21px !important;
    text-align: left;
}
.process-step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.process-step-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(45,212,191,.22); border-radius: 14px; background: rgba(45,212,191,.09); font-size: 1.35rem; }
.process-flow-four .step-badge { width: 39px; height: 39px; margin: 0; border: 1px solid rgba(45,212,191,.24); color: #bafff2; background: rgba(45,212,191,.12); font-size: .78rem; }
.process-flow-four .process-step h3 { min-height: 2.7em; margin-bottom: 10px; font-size: 1.03rem; line-height: 1.35; }
.process-flow-four .process-step p { margin: 0; font-size: .88rem; line-height: 1.62; }
.process-arrow { display: grid; place-items: center; align-self: center; color: #68e4d1; font-size: 1.6rem; font-weight: 700; text-shadow: 0 0 18px rgba(45,212,191,.2); }
.process-cta { display: flex; justify-content: center; margin-top: 30px; }
.process-cta .btn { padding: 13px 22px; }
.final-cta-section h2 { max-width: 950px; margin: 0 auto 18px; }
.final-cta-section .inline-style-3 { max-width: 850px; margin: 0 auto 24px; }
.team-role-secondary { display: block; margin: -2px 0 10px; color: #9db7b8; font-size: .74rem; font-weight: 600; }
.team-card .team-bio { margin-top: 12px; font-size: .84rem; line-height: 1.7; color: #b8ccce; }
.central-contact-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.central-contact-item { min-width: 0; }
.central-contact-item > span:last-child { min-width: 0; }

@media (max-width: 1100px) {
    .nav-right { gap: 10px; }
    .nav-links { gap: 9px; }
    .nav-btn { padding: 8px 10px; font-size: .76rem; }
    .nav-links > li > a, .nav-dropdown-row > a { font-size: .82rem; }
}
@media (max-width: 900px) {
    .nav nav { display: none; }
    .nav-btn { display: none; }
    .mobile-menu-btn { display: block !important; }
    .mobile-drawer {
        display: none;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        z-index: 1490;
        max-height: calc(100dvh - var(--nav-height));
        overflow-y: auto;
        padding: 14px 20px 22px;
        border-bottom: 1px solid rgba(45,212,191,.16);
        background: rgba(5,14,19,.95);
        -webkit-backdrop-filter: blur(22px) saturate(145%);
        backdrop-filter: blur(22px) saturate(145%);
        box-shadow: 0 18px 38px rgba(0,0,0,.28);
    }
    .mobile-drawer.open { display: flex; flex-direction: column; gap: 2px; }
    .mobile-drawer > a,
    .mobile-nav-parent > a {
        display: flex;
        align-items: center;
        min-height: 45px;
        color: #d5e7e6;
        text-decoration: none;
        font-size: .98rem;
        font-weight: 650;
    }
    .mobile-drawer > a { border-bottom: 1px solid rgba(255,255,255,.055); }
    .mobile-nav-parent { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.055); }
    .mobile-nav-parent > a { flex: 1; }
    .mobile-nav-parent > button {
        display: grid; place-items: center; width: 42px; height: 42px;
        border: 1px solid rgba(45,212,191,.16); border-radius: 10px;
        color: var(--primary); background: rgba(45,212,191,.06); font: inherit; font-size: 1.15rem;
    }
    .mobile-nav-group.is-open .mobile-nav-parent > button { transform: rotate(180deg); }
    .mobile-submenu { display: none; padding: 5px 0 9px 13px; border-bottom: 1px solid rgba(255,255,255,.055); }
    .mobile-nav-group.is-open .mobile-submenu { display: grid; }
    .mobile-submenu a { display: block; padding: 9px 10px; border-radius: 8px; color: #a9c6c3; text-decoration: none; font-size: .88rem; line-height: 1.35; }
    .mobile-submenu a:hover { color: #fff; background: rgba(45,212,191,.07); }
    .mobile-submenu .mobile-submenu-all { color: #84ead9; font-weight: 800; }
    .mobile-consult-link { margin-top: 8px; padding: 11px 13px; border: 1px solid rgba(45,212,191,.2); border-radius: 10px; color: #8bf1df !important; background: rgba(45,212,191,.07); }
    .process-flow-four { grid-template-columns: 1fr !important; gap: 10px !important; }
    .process-flow-four .process-step { padding: 22px !important; }
    .process-flow-four .process-step h3 { min-height: 0; }
    .process-arrow { transform: rotate(90deg); height: 22px; font-size: 1.4rem; }
    .central-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .process-flow-four .process-step { padding: 19px !important; }
    .team-card .team-bio { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-dropdown-menu, .nav-dropdown-menu a, .mobile-nav-parent > button { transition: none !important; }
}


/* ============================================================
   Calculator overlay — standalone hash route, solid background
   ============================================================ */
.calculator-launcher {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1400;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    max-width: calc(100vw - 36px);
    padding: 10px 16px 10px 12px;
    border: 1px solid rgba(113, 221, 207, 0.25);
    border-radius: 999px;
    color: #dffaf5;
    background: rgba(7, 18, 24, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.04);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.calculator-launcher:hover,
.calculator-launcher:focus-visible {
    background: rgba(13, 38, 42, 0.88);
    border-color: rgba(45, 212, 191, 0.55);
    box-shadow: 0 10px 34px rgba(0,0,0,0.28), 0 0 22px rgba(45,212,191,0.10);
    transform: translateY(-2px);
}
.calculator-launcher:focus-visible,
.calculator-overlay-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
.calculator-launcher-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(45, 212, 191, 0.25);
    border-radius: 50%;
    color: var(--primary);
    background: rgba(45, 212, 191, 0.10);
    font-size: 1.15rem;
}

/* A native modal dialog enters the browser top layer, above every site layer
   and third-party widget. It is viewport-sized and owns its own scrolling. */
.calculator-overlay:not([open]) { display: none !important; }
.calculator-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483646; /* fallback only; showModal() uses the browser top layer */
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 18px clamp(10px, 2vw, 28px);
    background: rgba(3, 8, 12, 0.90);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--text-main);
    scrollbar-gutter: stable;
}
.calculator-overlay::backdrop {
    background: rgba(0, 0, 0, 0.16);
}
.calculator-overlay.calculator-overlay-fallback {
    display: block;
}
.calculator-overlay-panel {
    position: relative;
    width: min(1160px, 100%);
    min-height: calc(100vh - 36px);
    margin: 0 auto;
    padding: clamp(22px, 3.5vw, 42px);
    border: 1px solid rgba(73, 184, 171, 0.20);
    border-radius: 24px;
    background: #081117;
    color: var(--text-main);
    box-shadow: 0 24px 80px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.025);
}
.calculator-overlay-content {
    width: 100%;
    max-width: 100%;
}
.calculator-overlay-section {
    padding: 12px 0 20px !important;
    overflow: visible !important;
}
.calculator-overlay-section > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.calculator-overlay-section .section-header {
    max-width: 970px;
    margin: 0 auto 28px;
}
.calculator-overlay-section .calculator-shell {
    background: #0b171d !important;
    border-color: rgba(71, 206, 190, 0.20) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.025) !important;
}
.calculator-overlay-close {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 10002;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid rgba(142, 190, 189, 0.24);
    border-radius: 50%;

    color: #e8f5f3;
    background: rgba(13, 25, 31, 0.96);
    box-shadow: 0 6px 22px rgba(0,0,0,0.30);

    cursor: pointer;
    transition: background 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

.calculator-overlay-close svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    overflow: visible;
}

.calculator-overlay-close svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    transition: transform 0.2s ease;
}

.calculator-overlay-close:hover {
    color: #06100f;
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.25);
}

.calculator-overlay-close:hover svg {
    transform: scale(1.12);
}
html.calculator-overlay-open,
html.calculator-overlay-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
}
@media (max-width: 768px) {
    .calculator-launcher {
        left: 12px;
        bottom: 12px;
        min-height: 42px;
        padding: 8px 12px 8px 9px;
        font-size: 0.76rem;
    }
    .calculator-overlay { padding: 0; }
    .calculator-overlay-panel {
        min-height: 100vh;
        width: 100%;
        margin: 0;
        padding: 76px 16px 28px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .calculator-overlay-close { top: 12px; right: 12px; }
    .calculator-overlay-section { padding: 6px 0 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .calculator-launcher,
    .calculator-overlay-close { transition: none !important; }
}

/* ============================================================
   DROPDOWN ALIGNMENT + STAGGERED REVEAL
   Center each menu beneath its own navigation label and reveal
   its links in a quick, subtle top-to-bottom sequence.
   ============================================================ */
@media (min-width: 901px) {
    .nav-links > li.nav-dropdown {
        position: relative;
    }

    .nav-dropdown-menu {
        left: 50%;
        right: auto;
        width: 238px;
        min-width: 238px;
        justify-items: stretch;
        text-align: center;
        transform: translate(-50%, -6px);
        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility 0s linear .18s;
    }

    .nav-dropdown-menu-wide {
        width: 306px;
        min-width: 306px;
    }

    .nav-dropdown:hover > .nav-dropdown-menu,
    .nav-dropdown:focus-within > .nav-dropdown-menu {
        transform: translate(-50%, 0);
        transition-delay: 0s;
    }

    .nav-dropdown-menu a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 36px;
        padding: 8px 12px;
        text-align: center;
        white-space: normal;
        opacity: 0;
        transform: translateY(-5px);
        transition:
            opacity .15s ease,
            transform .15s ease,
            color .16s ease,
            background .16s ease,
            border-color .16s ease;
        transition-delay: 0s;
    }

    .nav-dropdown:hover > .nav-dropdown-menu a,
    .nav-dropdown:focus-within > .nav-dropdown-menu a {
        opacity: 1;
        transform: translateY(0);
    }

    /* 30 ms stagger: quick enough to feel responsive, but clearly sequential. */
    .nav-dropdown:hover > .nav-dropdown-menu a:nth-child(1),
    .nav-dropdown:focus-within > .nav-dropdown-menu a:nth-child(1) { transition-delay: .02s; }
    .nav-dropdown:hover > .nav-dropdown-menu a:nth-child(2),
    .nav-dropdown:focus-within > .nav-dropdown-menu a:nth-child(2) { transition-delay: .05s; }
    .nav-dropdown:hover > .nav-dropdown-menu a:nth-child(3),
    .nav-dropdown:focus-within > .nav-dropdown-menu a:nth-child(3) { transition-delay: .08s; }
    .nav-dropdown:hover > .nav-dropdown-menu a:nth-child(4),
    .nav-dropdown:focus-within > .nav-dropdown-menu a:nth-child(4) { transition-delay: .11s; }
    .nav-dropdown:hover > .nav-dropdown-menu a:nth-child(5),
    .nav-dropdown:focus-within > .nav-dropdown-menu a:nth-child(5) { transition-delay: .14s; }
    .nav-dropdown:hover > .nav-dropdown-menu a:nth-child(6),
    .nav-dropdown:focus-within > .nav-dropdown-menu a:nth-child(6) { transition-delay: .17s; }
    .nav-dropdown:hover > .nav-dropdown-menu a:nth-child(7),
    .nav-dropdown:focus-within > .nav-dropdown-menu a:nth-child(7) { transition-delay: .20s; }
    .nav-dropdown:hover > .nav-dropdown-menu a:nth-child(8),
    .nav-dropdown:focus-within > .nav-dropdown-menu a:nth-child(8) { transition-delay: .23s; }

    .nav-dropdown-menu .nav-dropdown-all {
        justify-content: center;
        gap: 8px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown-menu,
    .nav-dropdown-menu a {
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================================
   NAVBAR FINAL ALIGNMENT + DROPDOWN SEAM BRIDGE
   Keep simple links vertically aligned with dropdown parents and
   visually merge each open dropdown into the navbar glass surface.
   ============================================================ */
@media (min-width: 901px) {
    /* Plain navigation items previously used inline-flex links inside
       normal list items, which aligned them to the text baseline. */
    .nav-links > li:not(.nav-dropdown) {
        display: flex;
        align-items: stretch;
        height: 100%;
    }

    .nav-links > li:not(.nav-dropdown) > a {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        height: 100%;
        min-height: 0;
        padding: 0 8px;
        line-height: 1.2;
    }

    /* A small blurred bridge covers only the navbar's bottom border
       directly behind the dropdown, making the menu feel attached. */
    .nav-links > li.nav-dropdown::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1px;
        width: 238px;
        height: 2px;
        transform: translateX(-50%);
        background: rgba(6, 14, 20, .72);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        backdrop-filter: blur(24px) saturate(150%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 1601;
        transition: opacity .16s ease, visibility .16s ease;
    }

    .nav-links > li.nav-dropdown:nth-child(2)::after {
        width: 306px;
    }

    .nav-links > li.nav-dropdown:hover::after,
    .nav-links > li.nav-dropdown:focus-within::after {
        opacity: 1;
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-links > li.nav-dropdown::after {
        transition: none !important;
    }
}



/* ============================================================
   TRUE FROSTED NAV DROPDOWNS + SEGMENTED NAVBAR DIVIDER
   The navbar blur lives on its background pseudo-element rather than
   the header itself. This lets each dropdown blur the page behind it.
   The divider is split around both dropdowns and the active segment
   disappears instead of being painted over with a mismatched patch.
   ============================================================ */
@media (min-width: 901px) {
    .nav {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-bottom: 0 !important;
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16);
        isolation: isolate;
    }

    .nav::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(
            110deg,
            rgba(5, 12, 17, 0.66),
            rgba(6, 18, 24, 0.48) 55%,
            rgba(10, 22, 28, 0.62)
        );
        -webkit-backdrop-filter: blur(24px) saturate(165%);
        backdrop-filter: blur(24px) saturate(165%);
        border: 0;
    }

    .nav-container {
        position: relative;
        z-index: 2;
    }

    .nav-divider {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        z-index: 1;
        pointer-events: none;
    }

    .nav-divider-segment {
        position: absolute;
        top: 0;
        height: 1px;
        min-width: 0;
        background: rgba(98, 219, 201, 0.15);
        opacity: 1;
        transition: opacity 100ms ease;
    }

    /* The previous color patch is no longer needed: the divider is real segments. */
    .nav-links > li.nav-dropdown::after {
        content: none !important;
        display: none !important;
    }

    /* Remove the actual line segment underneath whichever menu is open. */
    .nav:has(.nav-dropdown:nth-child(1):hover) .nav-divider [data-divider="home"],
    .nav:has(.nav-dropdown:nth-child(1):focus-within) .nav-divider [data-divider="home"],
    .nav:has(.nav-dropdown:nth-child(2):hover) .nav-divider [data-divider="services"],
    .nav:has(.nav-dropdown:nth-child(2):focus-within) .nav-divider [data-divider="services"] {
        opacity: 0;
    }

    /* Let each dropdown sample the aurora/page backdrop directly. */
    .nav-dropdown-menu {
        background: linear-gradient(
            145deg,
            rgba(9, 24, 30, 0.43),
            rgba(5, 14, 20, 0.53)
        ) !important;
        -webkit-backdrop-filter: blur(28px) saturate(175%) !important;
        backdrop-filter: blur(28px) saturate(175%) !important;
        border-top: 0 !important;
        box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }

    .nav-dropdown-menu::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(
            135deg,
            rgba(45, 212, 191, 0.035),
            transparent 46%,
            rgba(114, 146, 194, 0.025)
        );
    }
}

@media (max-width: 900px) {
    .nav-divider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-divider-segment { transition: none !important; }
}


/* ============================================================
   NAV GLASS CONTINUITY PATCH
   Use precisely the same tint and backdrop treatment on the navbar
   and its dropdowns. Remove the separate highlight layer and inset
   edge that made the dropdown look like a second, brighter surface.
   ============================================================ */
@media (min-width: 901px) {
    .nav::before {
        background: rgba(6, 15, 21, 0.64) !important;
        -webkit-backdrop-filter: blur(26px) saturate(135%) !important;
        backdrop-filter: blur(26px) saturate(135%) !important;
        border: 0 !important;
    }

    .nav-dropdown-menu {
        top: calc(100% - 1px) !important;
        background: rgba(6, 15, 21, 0.64) !important;
        -webkit-backdrop-filter: blur(26px) saturate(135%) !important;
        backdrop-filter: blur(26px) saturate(135%) !important;
        border-top: 0 !important;
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22) !important;
    }

    /* No second tint/gradient layer inside the dropdown. */
    .nav-dropdown-menu::before {
        content: none !important;
        display: none !important;
    }

    /* The border is only the real segmented divider, never a faux overlay. */
    .nav-links > li.nav-dropdown::after {
        content: none !important;
        display: none !important;
    }

    .nav-divider-segment {
        height: 1px;
        background: rgba(98, 219, 201, 0.14);
        transform: none;
    }
}



/* ============================================================
   BoostRise final service copy — polished layouts, same language
   ============================================================ */
.automation-intro-card { margin-bottom: 22px; }
.automation-intro-card > p { font-size: .96rem; line-height: 1.72; }
.automation-benefits-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:22px 0 28px; }
.automation-benefit-card { padding:22px; }
.automation-benefit-card > span { display:grid; place-items:center; width:43px; height:43px; margin-bottom:13px; border-radius:13px; border:1px solid rgba(45,212,191,.2); background:rgba(45,212,191,.09); font-size:1.25rem; }
.automation-benefit-card h3 { margin:0 0 7px; font-size:1rem; }
.automation-benefit-card p { margin:0; font-size:.88rem; line-height:1.6; }
.automation-case-study { padding:clamp(22px,3vw,34px); }
.automation-case-study h3 { margin:8px 0 14px; font-size:clamp(1.25rem,2.5vw,1.7rem); }
.automation-case-study p { font-size:.94rem; line-height:1.7; }
.automation-case-metrics { display:grid; grid-template-columns:1fr 48px 1fr; align-items:center; gap:14px; margin-top:22px; }
.automation-case-metric { display:flex; flex-direction:column; gap:4px; padding:18px 20px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(3,12,18,.38); }
.automation-case-metric span { color:#a9c2c4; font-size:.8rem; font-weight:700; }
.automation-case-metric strong { color:#e9f5f5; font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.2; }
.automation-case-metric small { color:#9fb3d9; font-size:.8rem; }
.automation-case-metric.is-highlight { border-color:rgba(45,212,191,.42); background:linear-gradient(140deg,rgba(45,212,191,.12),rgba(3,12,18,.48)); }
.automation-case-metric.is-highlight strong { color:#4be0c9; }
.automation-case-arrow { text-align:center; font-size:1.5rem; color:#5be1ce; }
.automation-examples-wrap { margin-top:30px; }
.automation-examples-wrap .section-header { margin-bottom:16px; }
.automation-examples-wrap .section-header h3 { font-size:1.35rem; }
.automation-cta { margin-top:30px; padding:28px; border:1px solid rgba(45,212,191,.18); border-radius:22px; background:linear-gradient(120deg,rgba(45,212,191,.075),rgba(8,17,24,.6)); }
.automation-cta h3 { margin-bottom:7px; font-size:1.25rem; }
.automation-cta p { margin-bottom:18px; font-size:.92rem; }
.web-offer-intro { max-width:940px; margin:0 auto 20px; text-align:center; }
.web-offer-intro h2 { margin:8px 0 12px; }
.web-offer-intro p { font-size:1rem; }
.web-offer-callout { max-width:960px; margin:0 auto 26px; }
.package-eyebrow { display:block; margin-bottom:8px; color:#86d9cd; font-size:.67rem; font-weight:800; letter-spacing:.1em; }
.website-packages-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:18px; }
.website-packages-grid .package-card { min-width:0; padding:30px 24px; }
.website-packages-grid .package-card .package-features { padding-left:0; }
.website-packages-grid .package-features li { font-size:.88rem; line-height:1.5; }
.website-package-plus { border-color:rgba(45,212,191,.5)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 36px rgba(45,212,191,.09); }
.website-package-custom { background:linear-gradient(145deg,rgba(12,31,38,.95),rgba(9,15,25,.94)); }
.package-price-custom { color:#63e5d2; font-size:1.55rem; }
.website-delivery-note { display:flex; align-items:flex-start; gap:15px; padding:19px 22px; margin:20px 0 32px; }
.website-delivery-note > span { font-size:1.5rem; }
.website-delivery-note strong { display:block; margin-bottom:3px; color:#e8fffa; }
.website-delivery-note p { margin:0; font-size:.88rem; }
.website-addons-block { margin:25px 0 38px; }
.website-addons-block .section-header { margin-bottom:16px; }
.website-addons-table th:first-child,.website-addons-table td:first-child { width:72%; }
.website-addons-footnote { margin:11px 2px 0; font-size:.84rem; }
.website-hosting-block { padding-top:14px; }
.website-hosting-block .section-header { margin-bottom:18px; }
.hosting-price-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.hosting-price-card { padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.hosting-price-kicker { color:#8be6d9; font-size:.7rem; font-weight:800; letter-spacing:.08em; }
.hosting-price-card strong { margin-top:8px; color:#46dfc8; font-size:1.8rem; }
.hosting-price-card b { color:#e6f5f3; font-size:.9rem; }
.hosting-price-card p { margin:7px 0; font-size:.86rem; }
.hosting-price-card a { color:#7ce9d9; font-size:.8rem; font-weight:700; text-decoration:none; }
.website-hosting-disclaimer { margin:13px 2px 0; font-size:.78rem; line-height:1.6; }
.seo-service-card { padding:clamp(24px,4vw,38px); }
.seo-service-card > p { font-size:.95rem; }
.seo-capabilities-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; }
.seo-capabilities-grid b { color:#e4f5f3; }
.seo-service-card .service-detail-cta { margin-top:24px; }
.chatbot-opening-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:10px 0 14px; }
.chatbot-opening-metric { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:23px; }
.chatbot-opening-metric strong { color:#54e1ce; font-size:clamp(2rem,4vw,3rem); line-height:1.1; }
.chatbot-opening-metric span { margin-top:5px; color:#c0d4d4; font-size:.86rem; }
.chatbot-monthly-note { max-width:900px; margin:0 auto 30px; text-align:center; font-size:.91rem; }
.chatbot-benefits-heading { text-align:center; margin:25px 0 16px; }
.chatbot-benefits-heading h3 { font-size:1.45rem; }
.chatbot-benefits-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.chatbot-benefits-grid-four .chatbot-benefit-card { grid-column:auto!important; }
.chatbot-why-block { margin-top:42px; }
.chatbot-why-block .section-header { margin-bottom:18px; }
.chatbot-why-block .section-header h3 { font-size:1.45rem; }
.chatbot-why-block .chatbot-note-card h4 { margin:0 0 7px; font-size:1rem; }
.chatbot-why-block .chatbot-note-card p { line-height:1.65; }
.chatbot-final-cta { margin-top:32px; }
.chatbot-final-cta h2 { font-size:clamp(1.25rem,2.4vw,1.75rem); }
.chatbot-package-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:14px; }
.chatbot-package-grid-four .chatbot-package-card { padding:22px 19px; }
.chatbot-package-grid-four .chatbot-package-card h3 { font-size:1.2rem; }
.chatbot-package-grid-four .chatbot-price { font-size:1.18rem; }
.chatbot-package-grid-four .chatbot-package-card > p:not(.chatbot-price) { font-size:.82rem; line-height:1.5; }
.chatbot-package-grid-four .chatbot-package-card li { font-size:.79rem; padding-left:18px; }
.chatbot-package-grid-four .package-ideal { padding:12px; }
.chatbot-package-grid-four .package-ideal p { font-size:.78rem; }
.chatbot-comparison-block { margin-top:44px; }
.chatbot-comparison-block .section-header { margin-bottom:16px; }
.chatbot-package-grid-four + .chatbot-comparison-block { margin-top:40px; }
.social-media-intro { margin-bottom:26px; }
.social-process-header { margin-bottom:16px; }
.social-process-header h3 { font-size:1.4rem; }
.social-process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.social-process-card { padding:23px; min-width:0; }
.social-process-step { color:#7ce6d8; font-size:.75rem; font-weight:850; letter-spacing:.13em; padding-bottom:10px; margin-bottom:13px; border-bottom:2px solid rgba(45,212,191,.42); }
.social-process-card > span { display:grid; place-items:center; width:44px; height:44px; margin-bottom:13px; border:1px solid rgba(45,212,191,.2); border-radius:13px; background:rgba(45,212,191,.08); font-size:1.25rem; }
.social-process-card h3 { font-size:1.02rem; margin-bottom:8px; }
.social-process-card p { margin:0; font-size:.84rem; line-height:1.63; }
.social-media-closing { padding:28px; margin-top:25px; text-align:center; }
.social-media-closing h3 { font-size:1.3rem; margin-bottom:7px; }
.social-media-closing p { max-width:780px; margin:0 auto 18px; font-size:.91rem; }
.service-subheading { margin:25px 0 12px; color:#c7fff5; font-size:1.08rem; }
.crm-examples-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.workspace-setup-grid,.workspace-automation-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.service-detail-card .service-example-grid > div b { color:#e8fffa; font-size:.94rem; line-height:1.4; }
.service-detail-card .service-example-grid > div span { font-size:.85rem; }
.custom-software-card { padding:clamp(24px,4vw,40px); }
.custom-software-types { grid-template-columns:repeat(2,minmax(0,1fr)); }
.custom-software-callout { margin-top:25px; }
.custom-software-cta { text-align:center; margin-top:28px; padding-top:24px; border-top:1px solid rgba(93,185,178,.16); }
.custom-software-cta h3 { font-size:1.25rem; margin-bottom:8px; }
.custom-software-cta p { max-width:800px; margin:0 auto 18px; font-size:.93rem; }
.final-services-cta { padding:clamp(28px,5vw,54px); }
.final-services-cta h2 { max-width:920px; margin:0 auto 15px; }
.final-services-cta p { max-width:850px; margin:0 auto 22px; }

@media (max-width: 1200px) {
  .chatbot-package-grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chatbot-package-grid-four .chatbot-package-card { padding:25px; }
  .chatbot-package-grid-four .chatbot-package-card li { font-size:.86rem; }
  .automation-benefits-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .website-packages-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .website-package-custom { grid-column:1/-1; }
  .seo-capabilities-grid,.crm-examples-grid,.workspace-setup-grid,.workspace-automation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .website-packages-grid,.hosting-price-grid,.chatbot-opening-metrics,.chatbot-package-grid-four,.automation-benefits-grid,.social-process-grid,.seo-capabilities-grid,.crm-examples-grid,.workspace-setup-grid,.workspace-automation-grid,.custom-software-types { grid-template-columns:1fr; }
  .website-package-custom { grid-column:auto; }
  .automation-case-metrics { grid-template-columns:1fr; }
  .automation-case-arrow { transform:rotate(90deg); }
  .chatbot-package-grid-four .chatbot-package-card { padding:23px; }
}


/* ============================================================
   Visual polish — CTA sizing, section waves, aligned plan cards
   ============================================================ */

/* Give service CTAs the same generous, deliberate proportions. */
.detail-page-main .service-detail-cta .btn,
.detail-page-main .automation-cta .btn,
.detail-page-main .custom-software-cta .btn,
.detail-page-main .service-callout .btn,
.detail-page-main .seo-service-card .btn,
.detail-page-main .chatbot-final-cta .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(310px, 100%);
    min-height: 66px;
    max-width: min(100%, 380px);
    padding: 18px 34px !important;
    font-size: 1.08rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
}

/* A subtle wave and soft teal fade introduce each major service section.
   The SVG is a single thin line; the gradient fades downward into the page. */
.detail-page-main .service-detail-group.merged-service-section:not(#service-continuous-development),
.detail-page-main .chatbot-packages-section {
    position: relative;
    isolation: isolate;
    padding-top: clamp(92px, 9vw, 122px) !important;
}

.detail-page-main .service-detail-group.merged-service-section:not(#service-continuous-development)::before,
.detail-page-main .chatbot-packages-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 112px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(45, 212, 191, 0.105) 0%,
        rgba(45, 212, 191, 0.045) 38%,
        rgba(45, 212, 191, 0) 100%
    );
}

.detail-page-main .service-detail-group.merged-service-section:not(#service-continuous-development)::after,
.detail-page-main .chatbot-packages-section::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 1;
    pointer-events: none;
    opacity: .68;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 52' preserveAspectRatio='none'%3E%3Cpath d='M0 27 C80 8 120 8 200 27 S320 46 400 27 S520 8 600 27 S720 46 800 27 S920 8 1000 27 S1120 46 1200 27 S1320 8 1400 27 S1520 46 1600 27' fill='none' stroke='%2345cfc3' stroke-opacity='.62' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 48px;
}

.detail-page-main .service-detail-group.merged-service-section:not(#service-continuous-development) > .container,
.detail-page-main .chatbot-packages-section > .container {
    position: relative;
    z-index: 2;
}

/* Keep package suitability panels directly below each plan's own features. */
.detail-page-main .chatbot-package-grid-four .chatbot-package-card {
    justify-content: flex-start;
}
.detail-page-main .chatbot-package-grid-four .package-ideal {
    margin-top: 18px;
}

/* Make the real-world case-study marker a clear, centered visual cue. */
.detail-page-main .automation-case-study > .service-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    min-height: 50px;
    margin: 0 auto 20px;
    padding: 10px 20px;
    font-size: .92rem;
    line-height: 1.3;
    text-align: center;
    letter-spacing: .025em;
}
.detail-page-main .automation-case-eyebrow-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 1.45rem;
    line-height: 1;
}

@media (max-width: 620px) {
    .detail-page-main .service-detail-cta .btn,
    .detail-page-main .automation-cta .btn,
    .detail-page-main .custom-software-cta .btn,
    .detail-page-main .service-callout .btn,
    .detail-page-main .seo-service-card .btn,
    .detail-page-main .chatbot-final-cta .btn {
        width: 100%;
        min-width: 0;
        min-height: 60px;
        padding: 17px 22px !important;
    }
    .detail-page-main .service-detail-group.merged-service-section:not(#service-continuous-development),
    .detail-page-main .chatbot-packages-section {
        padding-top: 86px !important;
    }
    .detail-page-main .service-detail-group.merged-service-section:not(#service-continuous-development)::after,
    .detail-page-main .chatbot-packages-section::after {
        height: 38px;
        background-size: 100% 38px;
    }
}


/* ============================================================
   Final polish v2 — package CTAs + persistent section wave separators
   ============================================================ */

/* Website-package CTAs should have the same generous breathing room as the
   large consultation buttons, even when labels are long. */
.detail-page-main .website-packages-grid .package-card > a.btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 54px;
    padding: 14px 24px !important;
    margin-top: auto;
    border-radius: 12px;
    font-size: 1.04rem;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Wave separators are independent siblings, not section pseudo-elements.
   Their glow is centred on the sine line and blooms both upward and downward.
   They intentionally do not participate in the section reveal animation. */
.detail-page-main .section-wave-separator {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 76px;
    margin: -58px 0;
    padding: 0;
    pointer-events: none;
    overflow: visible;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
}

.detail-page-main .section-wave-separator::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -72px;
    height: 258px;
    pointer-events: none;
    opacity: 1 !important;
    background:
        radial-gradient(
            ellipse 72% 72% at 50% 50%,
            rgba(45, 212, 191, 0.29) 0%,
            rgba(45, 212, 191, 0.15) 38%,
            rgba(45, 212, 191, 0.05) 63%,
            rgba(45, 212, 191, 0) 84%
        ),
        linear-gradient(
            180deg,
            rgba(45, 212, 191, 0) 0%,
            rgba(45, 212, 191, 0.07) 50%,
            rgba(45, 212, 191, 0) 100%
        );
    filter: blur(5px);
}

.detail-page-main .section-wave-separator::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 52px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 52' preserveAspectRatio='none'%3E%3Cpath d='M0 27 C80 8 120 8 200 27 S320 46 400 27 S520 8 600 27 S720 46 800 27 S920 8 1000 27 S1120 46 1200 27 S1320 8 1400 27 S1520 46 1600 27' fill='none' stroke='%2345cfc3' stroke-opacity='.68' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 52px;
    filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.18));
}

/* Retire the old pseudo-wave pair so there is only one separator layer. */
.detail-page-main .service-detail-group.merged-service-section:not(#service-continuous-development)::before,
.detail-page-main .service-detail-group.merged-service-section:not(#service-continuous-development)::after,
.detail-page-main .chatbot-packages-section::before,
.detail-page-main .chatbot-packages-section::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 620px) {
    .detail-page-main .website-packages-grid .package-card > a.btn {
        min-height: 52px;
        padding: 13px 18px !important;
        font-size: 1rem;
    }
    .detail-page-main .section-wave-separator {
        height: 60px;
        margin: -46px 0;
    }
    .detail-page-main .section-wave-separator::before {
        top: -42px;
        height: 144px;
        background:
            radial-gradient(
                ellipse 88% 68% at 50% 50%,
                rgba(45, 212, 191, 0.13) 0%,
                rgba(45, 212, 191, 0.055) 46%,
                rgba(45, 212, 191, 0) 84%
            );
    }
    .detail-page-main .section-wave-separator::after {
        height: 40px;
        background-size: 100% 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .detail-page-main .section-wave-separator,
    .detail-page-main .section-wave-separator::before,
    .detail-page-main .section-wave-separator::after {
        animation: none !important;
        transition: none !important;
    }
}



/* ============================================================
   UNIFIED NAVBAR + DROPDOWN GLASS SURFACE
   One backdrop-filter region forms the top bar and the open submenu.
   The divider is a single masked line with a true opening beneath the menu.
   ============================================================ */
@media (min-width: 901px) {
    .nav {
        position: fixed;
        isolation: isolate;
        overflow: visible;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* This is the only blurred/tinted surface. It expands into the open menu. */
    .nav::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 auto auto 0 !important;
        display: block !important;
        width: 100% !important;
        height: var(--nav-height) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: rgba(6, 15, 21, 0.66) !important;
        -webkit-backdrop-filter: blur(26px) saturate(135%) !important;
        backdrop-filter: blur(26px) saturate(135%) !important;
        border: 0 !important;
        box-shadow: none !important;
        clip-path: none;
    }

    .nav.has-dropdown-glass::before {
        height: var(--nav-glass-height) !important;
        clip-path: polygon(
            0 0,
            100% 0,
            100% var(--nav-glass-base-height),
            var(--nav-dropdown-right) var(--nav-glass-base-height),
            var(--nav-dropdown-right) calc(var(--nav-glass-height) - 14px),
            calc(var(--nav-dropdown-right) - 1px) calc(var(--nav-glass-height) - 8px),
            calc(var(--nav-dropdown-right) - 5px) calc(var(--nav-glass-height) - 3px),
            calc(var(--nav-dropdown-right) - 11px) var(--nav-glass-height),
            calc(var(--nav-dropdown-left) + 11px) var(--nav-glass-height),
            calc(var(--nav-dropdown-left) + 5px) calc(var(--nav-glass-height) - 3px),
            calc(var(--nav-dropdown-left) + 1px) calc(var(--nav-glass-height) - 8px),
            var(--nav-dropdown-left) calc(var(--nav-glass-height) - 14px),
            var(--nav-dropdown-left) var(--nav-glass-base-height),
            0 var(--nav-glass-base-height)
        );
    }

    .nav-container {
        position: relative;
        z-index: 2;
    }

    /* No second background, blur, saturation, gradient, or inset highlight.
       The dropdown is the transparent continuation of the shared layer. */
    .nav-dropdown-menu {
        top: calc(100% - 1px) !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid rgba(126, 219, 209, 0.17) !important;
        border-top: 0 !important;
        border-radius: 0 0 15px 15px !important;
        box-shadow: none !important;
        isolation: auto !important;
    }

    .nav-dropdown-menu::before {
        content: none !important;
        display: none !important;
    }

    /* One physical 1px divider avoids brighter overlaps between adjacent spans.
       A mask cuts a real gap only below whichever dropdown is currently open. */
    .nav-divider {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 1px !important;
        z-index: 1 !important;
        pointer-events: none !important;
        background: rgba(98, 219, 201, 0.14) !important;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .nav-divider-segment { display: none !important; }

    .nav.has-dropdown-glass .nav-divider {
        -webkit-mask-image: linear-gradient(
            to right,
            #000 0,
            #000 calc(var(--nav-dropdown-left) - 1px),
            transparent calc(var(--nav-dropdown-left) - 1px),
            transparent calc(var(--nav-dropdown-right) + 1px),
            #000 calc(var(--nav-dropdown-right) + 1px),
            #000 100%
        );
        mask-image: linear-gradient(
            to right,
            #000 0,
            #000 calc(var(--nav-dropdown-left) - 1px),
            transparent calc(var(--nav-dropdown-left) - 1px),
            transparent calc(var(--nav-dropdown-right) + 1px),
            #000 calc(var(--nav-dropdown-right) + 1px),
            #000 100%
        );
    }
}

@media (max-width: 900px) {
    .nav::before { clip-path: none !important; }
    .nav-divider { display: none !important; }
}

/* ============================================================
   Chatbot plan cards — content-driven equal rows
   ============================================================ */
.detail-page-main .chatbot-package-grid-four {
    align-items: stretch;
}

.detail-page-main .chatbot-package-grid-four .chatbot-package-card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

/* The main feature area is measured from its natural content by the small
   sync routine in script.js. All four cards receive the tallest measured
   height, so even the PRO feature list cannot run into the suitability box. */
.detail-page-main .chatbot-package-grid-four .chatbot-package-main {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: auto !important;
    min-height: 0;
    overflow: visible;
}

/* The suitability panels are also measured and assigned one shared height.
   Their content can wrap naturally; nothing is clipped or absolutely placed. */
.detail-page-main .chatbot-package-grid-four .chatbot-package-card > .package-ideal {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    overflow: visible;
}

.detail-page-main .chatbot-package-grid-four .package-ideal p {
    overflow-wrap: anywhere;
}

/* Each CTA sits on the same bottom line because all cards share the same
   measured main and suitability rows and the outer grid stretches evenly. */
.detail-page-main .chatbot-package-grid-four .chatbot-package-card > .service-detail-link {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 38px;
    margin-top: auto !important;
    padding-top: 14px;
}

@media (max-width: 620px) {
    .detail-page-main .chatbot-package-grid-four .chatbot-package-card {
        height: auto;
    }

    .detail-page-main .chatbot-package-grid-four .chatbot-package-main,
    .detail-page-main .chatbot-package-grid-four .chatbot-package-card > .package-ideal {
        min-height: 0 !important;
    }
}


/* ============================================================
   HOMEPAGE CALCULATOR INTRO + FROSTED CALCULATOR OVERLAY
   ============================================================ */
.calculator-promo-section {
    padding: 38px 0 54px !important;
}
.calculator-promo-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(22px, 3.5vw, 46px);
    padding: clamp(24px, 3.2vw, 38px) !important;
    border: 1px solid rgba(75, 211, 193, 0.26) !important;
    border-radius: 26px !important;
    background: linear-gradient(118deg, rgba(15, 57, 58, 0.70), rgba(8, 23, 31, 0.76) 58%, rgba(7, 17, 26, 0.78)) !important;
    box-shadow: inset 0 1px 0 rgba(224, 255, 250, 0.045), 0 22px 58px rgba(0, 0, 0, 0.19) !important;
    overflow: hidden;
}
.calculator-promo-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(45, 212, 191, 0), rgba(45, 212, 191, 0.72), rgba(45, 212, 191, 0));
    pointer-events: none;
}
.calculator-promo-copy { min-width: 0; }
.calculator-promo-copy h2 {
    margin: 0 0 12px;
    font-size: clamp(1.55rem, 2.7vw, 2.15rem);
    line-height: 1.25;
    text-align: left;
}
.calculator-promo-copy p {
    max-width: 880px;
    margin: 0;
    color: #b9cadf;
    font-size: clamp(0.98rem, 1.35vw, 1.08rem);
    line-height: 1.75;
}
.calculator-promo-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 255px;
    min-height: 58px;
    padding: 15px 24px !important;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
}
.calculator-promo-button span { font-size: 1.15em; font-weight: 800; }

/* The page behind the dialog is dimmed, while the calculator panel itself
   uses one translucent surface that blurs the live page underneath it. */
.calculator-overlay {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.calculator-overlay::backdrop {
    background: rgba(0, 0, 0, 0.48) !important;
}
.calculator-overlay-panel {
    background: linear-gradient(145deg, rgba(13, 39, 43, 0.72), rgba(7, 20, 29, 0.76) 54%, rgba(6, 15, 24, 0.78)) !important;
    -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
    backdrop-filter: blur(28px) saturate(145%) !important;
    border-color: rgba(92, 211, 196, 0.27) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.40), inset 0 1px 0 rgba(235,255,252,0.055) !important;
}
.calculator-overlay-section .calculator-shell {
    background: linear-gradient(145deg, rgba(11, 31, 36, 0.68), rgba(6, 17, 25, 0.75)) !important;
    border-color: rgba(71, 206, 190, 0.25) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

@media (max-width: 900px) {
    .calculator-promo-section { padding: 30px 0 42px !important; }
    .calculator-promo-card { grid-template-columns: 1fr; gap: 22px; }
    .calculator-promo-button { justify-self: start; }
}
@media (max-width: 560px) {
    .calculator-promo-card { padding: 23px !important; border-radius: 21px !important; }
    .calculator-promo-copy h2 { font-size: 1.55rem; }
    .calculator-promo-button { width: 100%; min-width: 0; }
}