:root {
            --ink:        #0d1117;
            --ink2:       #161b22;
            --ink3:       #1f2937;
            --line:       rgba(255,255,255,0.06);
            --line2:      rgba(255,255,255,0.18);
            --lime:       #a8ff3e;
            --lime-dim:   rgba(168,255,62,0.08);
            --lime-mid:   rgba(168,255,62,0.18);
            --blue:       #3b82f6;
            --blue-dim:   rgba(59,130,246,0.08);
            --orange:     #fb923c;
            --orange-dim: rgba(251,146,60,0.08);
            --purple:     #a78bfa;
            --purple-dim: rgba(167,139,250,0.08);
            --text:       #e4ecf4;
            --text2:      #adbece;
            --text3:      #6e8499;
            --white:      #ffffff;
            --mono:       'JetBrains Mono', monospace;
            --sans:       'Manrope', sans-serif;
            --disp:       'Syne', sans-serif;
            --r:          10px;
            --r-lg:       16px;
            --r-xl:       24px;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }

        body {
            background: var(--ink);
            color: var(--text);
            font-family: var(--sans);
            font-size: 17px;
            line-height: 1.72;
            overflow-x: hidden;
        }

        a { color: inherit; text-decoration: none; }
        ul { list-style: none; }

        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: 9999;
            opacity: 0.6;
        }

        .container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .container--wide {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 24px;
        }

        h1, h2, h3, h4 {
            font-family: var(--sans);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.025em;
            color: var(--white);
        }

        h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
        h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
        h3 { font-size: clamp(1rem, 2vw, 1.15rem); font-weight: 700; }

        .mono {
            font-family: var(--mono);
            font-size: 0.9em;
        }

        .label {
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--lime);
            display: block;
            margin-bottom: 10px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 22px;
            border-radius: var(--r);
            font-family: var(--sans);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.18s;
            white-space: nowrap;
        }

        .btn--lime {
            background: var(--lime);
            color: var(--ink);
        }
        .btn--lime:hover { opacity: 0.88; transform: translateY(-2px); }

        .btn--ghost {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--line2);
        }
        .btn--ghost:hover { border-color: rgba(255,255,255,0.25); color: var(--white); }

        .btn--urgent {
            background: rgba(251,146,60,0.12);
            color: var(--orange);
            border: 1px solid rgba(251,146,60,0.3);
        }
        .btn--urgent:hover { background: rgba(251,146,60,0.2); transform: translateY(-2px); }

        .nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 800;
            backdrop-filter: blur(24px) saturate(180%);
            background: rgba(13,17,23,0.85);
            border-bottom: 1px solid var(--line);
        }

        .nav__inner {
            height: 58px;
            display: flex;
            align-items: center;
            gap: 0;
        }

        .nav__logo { font-family: var(--disp); font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: var(--white); margin-right: 32px; flex-shrink: 0; }

        .nav__logo em {
            font-style: normal;
            color: var(--lime);
        }

        .nav__menu {
            display: flex;
            align-items: center;
            gap: 2px;
            flex: 1;
        }

        .nav__item {
            position: relative;
        }

        .nav__link {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 7px 13px;
            border-radius: 7px;
            font-size: 1rem;
            font-weight: 500;
            color: #c8daea;
            transition: color 0.18s, background 0.18s;
            cursor: pointer;
        }

        .nav__link:hover, .nav__link--active {
            color: var(--white);
            background: rgba(255,255,255,0.05);
        }

        .nav__link svg {
            width: 12px; height: 12px;
            opacity: 0.5;
            transition: transform 0.2s;
        }

        .nav__item:hover .nav__link svg { transform: rotate(180deg); }

        .nav__drop {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            min-width: 220px;
            background: var(--ink2);
            border: 1px solid var(--line2);
            border-radius: var(--r-lg);
            padding: 8px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition: all 0.2s;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        .nav__item:hover .nav__drop {
            opacity: 1;
            visibility: visible;
            transform: none;
        }

        .nav__drop a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 8px;
            font-size: 1rem;
            color: #c8daea;
            transition: all 0.15s;
        }

        .nav__drop a:hover { background: rgba(255,255,255,0.05); color: var(--white); }

        .nav__drop-icon {
            width: 28px; height: 28px;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .nav__right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav__search {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 1rem;
            color: var(--text3);
            cursor: pointer;
            transition: border-color 0.2s;
            font-family: var(--sans);
        }

        .nav__search:hover { border-color: var(--line2); color: var(--text2); }

        .nav__search kbd {
            background: var(--ink3);
            border: 1px solid var(--line2);
            border-radius: 4px;
            padding: 1px 5px;
            font-size: 1rem;
            font-family: var(--mono);
            color: var(--text3);
        }

        .nav__burger {
            display: none;
            background: none;
            border: 1px solid var(--line2);
            border-radius: 7px;
            width: 36px; height: 36px;
            align-items: center; justify-content: center;
            cursor: pointer;
            color: var(--text);
            font-size: 1rem;
        }

        .hero {
            padding-top: 100px;
            padding-bottom: 0;
            position: relative;
            overflow: hidden;
        }

        .hero__grid-bg {
            position: absolute;
            inset: 0;
            background-image:
                    linear-gradient(rgba(168,255,62,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(168,255,62,0.04) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 80%);
        }

        .hero__glow {
            position: absolute;
            top: -120px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 500px;
            background: radial-gradient(ellipse, rgba(168,255,62,0.07) 0%, transparent 65%);
            pointer-events: none;
        }

        .hero__inner {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 72px 0 56px;
        }

        .hero__badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(168,255,62,0.07);
            border: 1px solid rgba(168,255,62,0.2);
            border-radius: 99px;
            padding: 5px 14px 5px 8px;
            font-size: 1rem;
            font-weight: 600;
            color: var(--lime);
            margin-bottom: 28px;
            letter-spacing: 0.04em;
        }

        .hero__badge-dot {
            width: 20px; height: 20px;
            background: rgba(168,255,62,0.15);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
        }

        .hero h1 {
            max-width: 780px;
            margin: 0 auto 20px;
        }

        .hero h1 .hl-lime { color: var(--lime); }
        .hero h1 .hl-dim  { color: var(--text2); font-weight: 300; }

        .hero__sub {
            max-width: 560px;
            margin: 0 auto 40px;
            color: #c8daea;
            font-size: 1.1rem;
            line-height: 1.72;
        }

        .hero__btns {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 64px;
        }

        /* hero stats bar */
        .hero__stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--line);
            border-left: 1px solid var(--line);
        }

        .hero__stat {
            padding: 24px 28px;
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            text-align: left;
        }

        .hero__stat-num {
            font-family: var(--mono);
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--white);
            line-height: 1;
            margin-bottom: 4px;
            letter-spacing: -0.03em;
        }

        .hero__stat-num span { color: var(--lime); }

        .hero__stat-label {
            font-size: 1rem;
            color: #adbece;
        }

        .section { padding: 80px 0; }
        .section--alt { background: var(--ink2); }

        .section__head {
            margin-bottom: 48px;
        }

        .section__head h2 { margin-bottom: 10px; }
        .section__head p { color: #adbece; font-size: 1.05rem; max-width: 520px; }

        .section__head--center {
            text-align: center;
        }

        .section__head--center p { margin: 0 auto; }

        .view-all {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 1rem;
            font-weight: 600;
            color: #c8daea;
            transition: color 0.18s;
            border-bottom: 1px solid rgba(200,218,234,0.2);
        }

        .view-all:hover { color: var(--lime); border-bottom-color: rgba(168,255,62,0.3); }

        .section__row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 36px;
            flex-wrap: wrap;
        }

        .quickaccess {
            padding: 56px 0;
            background: var(--ink2);
            border-bottom: 1px solid var(--line);
        }

        .qa__search {
            position: relative;
            margin-bottom: 32px;
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
        }

        .qa__input {
            width: 100%;
            background: var(--ink);
            border: 1px solid var(--line2);
            border-radius: var(--r-lg);
            padding: 16px 60px 16px 50px;
            font-family: var(--sans);
            font-size: 0.95rem;
            color: var(--text);
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .qa__input:focus {
            border-color: rgba(168,255,62,0.4);
            box-shadow: 0 0 0 3px rgba(168,255,62,0.07);
        }

        .qa__input::placeholder { color: var(--text3); }

        .qa__icon {
            position: absolute;
            left: 16px; top: 50%;
            transform: translateY(-50%);
            color: var(--text3);
            font-size: 1.1rem;
            pointer-events: none;
        }

        .qa__hint {
            position: absolute;
            right: 16px; top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 4px;
            pointer-events: none;
        }

        .qa__hint kbd {
            background: var(--ink3);
            border: 1px solid var(--line2);
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 1rem;
            font-family: var(--mono);
            color: var(--text3);
        }

        .qa__cats {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .qa__cat {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 20px;
            border-radius: 99px;
            font-size: 1rem;
            font-weight: 600;
            border: 1px solid rgba(255,255,255,0.28);
            background: rgba(255,255,255,0.07);
            color: #dce8f4;
            transition: all 0.18s;
            cursor: pointer;
        }

        .qa__cat:hover {
            border-color: var(--lime);
            color: #0d1117;
            background: var(--lime);
        }

        .qa__cat--active {
            border-color: var(--lime);
            color: #0d1117;
            background: var(--lime);
        }

        .ref-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            overflow: hidden;
        }

        .ref-card {
            background: var(--ink);
            padding: 22px 24px;
            transition: background 0.18s;
            position: relative;
            overflow: hidden;
            display: block;
            text-decoration: none;
        }

        .ref-card:hover { background: var(--ink2); }

        .ref-card:hover .ref-card__arrow { opacity: 1; transform: translate(0,0); }

        .ref-card__type {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 8px;
            display: block;
        }

        .ref-card__type--fn     { color: var(--lime); }
        .ref-card__type--hook   { color: var(--blue); }
        .ref-card__type--filter { color: var(--orange); }
        .ref-card__type--class  { color: var(--purple); }

        .ref-card__name {
            font-family: var(--mono);
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 6px;
            display: block;
        }

        .ref-card__desc {
            font-size: 0.95rem;
            color: #adbece;
            line-height: 1.5;
        }

        .ref-card__arrow {
            position: absolute;
            top: 18px; right: 18px;
            font-size: 1rem;
            color: var(--lime);
            opacity: 0;
            transform: translate(-4px, 4px);
            transition: all 0.18s;
        }

        .ref-card__badge {
            position: absolute;
            bottom: 14px; right: 16px;
            width: 24px; height: 24px;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
            opacity: 0.5;
        }

        .ref-cats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 40px;
        }

        .ref-cat-block {
            background: var(--ink2);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            padding: 24px 20px;
            transition: border-color 0.18s, transform 0.18s;
            display: block;
        }

        .ref-cat-block:hover { border-color: var(--line2); transform: translateY(-2px); }

        .ref-cat-block__icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 14px;
        }

        .ref-cat-block__icon--lime   { background: var(--lime-dim); }
        .ref-cat-block__icon--blue   { background: var(--blue-dim); }
        .ref-cat-block__icon--orange { background: var(--orange-dim); }
        .ref-cat-block__icon--purple { background: var(--purple-dim); }

        .ref-cat-block h3 {
            font-size: 0.95rem;
            margin-bottom: 4px;
        }

        .ref-cat-block__count {
            font-size: 0.95rem;
            color: #adbece;
            margin-bottom: 10px;
        }

        .ref-cat-block__examples {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .ref-cat-block__ex {
            font-family: var(--mono);
            font-size: 0.9rem;
            color: #8fafc8;
            transition: color 0.15s;
        }

        .ref-cat-block:hover .ref-cat-block__ex { color: #c8daea; }

        .blog-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr;
            gap: 16px;
        }

        .post-card {
            background: var(--ink2);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: border-color 0.18s, transform 0.2s;
        }

        .post-card:hover { border-color: var(--line2); transform: translateY(-3px); }

        .post-card--featured { grid-row: span 2; }

        .post-card__img {
            height: 180px;
            background: var(--ink3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
        }

        .post-card--featured .post-card__img { height: 240px; }

        .post-card__img-code {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            padding: 12px 16px;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            font-family: var(--mono);
            font-size: 1rem;
            color: rgba(168,255,62,0.6);
            line-height: 1.4;
            text-align: left;
        }

        .post-card__body {
            padding: 20px 22px 22px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .post-card__tag {
            display: inline-block;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 3px 9px;
            border-radius: 5px;
            margin-bottom: 10px;
            align-self: flex-start;
        }

        .post-card__tag--error   { background: rgba(251,146,60,0.1); color: var(--orange); }
        .post-card__tag--virus   { background: rgba(239,68,68,0.1);  color: #f87171; }
        .post-card__tag--perf    { background: rgba(59,130,246,0.1);  color: var(--blue); }
        .post-card__tag--tips    { background: var(--lime-dim);        color: var(--lime); }

        .post-card h3 {
            font-size: 0.98rem;
            margin-bottom: 8px;
            color: var(--white);
            line-height: 1.35;
        }

        .post-card--featured h3 { font-size: 1.2rem; }

        .post-card__excerpt {
            font-size: 1rem;
            color: #adbece;
            line-height: 1.6;
            flex: 1;
            margin-bottom: 16px;
        }

        .post-card__footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.95rem;
            color: #6e8499;
            padding-top: 14px;
            border-top: 1px solid var(--line);
        }

        .post-card__read {
            color: var(--lime);
            font-weight: 600;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .service-card {
            background: var(--ink2);
            border: 1px solid var(--line);
            border-radius: var(--r-xl);
            padding: 32px 28px;
            display: flex;
            flex-direction: column;
            transition: border-color 0.2s, transform 0.2s;
            position: relative;
            overflow: hidden;
        }

        .service-card:hover { border-color: var(--line2); transform: translateY(-4px); }

        .service-card--hot {
            border-color: rgba(251,146,60,0.3);
            background: linear-gradient(135deg, var(--ink2) 0%, rgba(251,146,60,0.04) 100%);
        }

        .service-card--hot::before {
            content: 'Чаще всего';
            position: absolute;
            top: 16px; right: 16px;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: rgba(251,146,60,0.12);
            color: var(--orange);
            border: 1px solid rgba(251,146,60,0.25);
            padding: 3px 9px;
            border-radius: 6px;
        }

        .service-card__icon {
            width: 52px; height: 52px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        .service-card__icon--lime   { background: var(--lime-dim); }
        .service-card__icon--orange { background: var(--orange-dim); }
        .service-card__icon--blue   { background: var(--blue-dim); }

        .service-card h3 { margin-bottom: 10px; }

        .service-card__desc {
            font-size: 1rem;
            color: #adbece;
            line-height: 1.65;
            flex: 1;
            margin-bottom: 24px;
        }

        .service-card__list {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 24px;
        }

        .service-card__list li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 1rem;
            color: #adbece;
        }

        .service-card__list li::before {
            content: '→';
            color: var(--lime);
            font-size: 1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .service-card__cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 20px;
            border-top: 1px solid var(--line);
        }

        .service-card__price {
            font-size: 1rem;
            color: var(--text2);
        }

        .service-card__price strong {
            font-family: var(--mono);
            color: var(--white);
            font-size: 0.95rem;
        }

        .service-link {
            font-size: 1rem;
            font-weight: 600;
            color: var(--lime);
            display: flex;
            align-items: center;
            gap: 5px;
            transition: gap 0.18s;
        }

        .service-link:hover { gap: 9px; }

        .urgent-band {
            background: linear-gradient(90deg, rgba(251,146,60,0.08) 0%, rgba(251,146,60,0.03) 100%);
            border-top: 1px solid rgba(251,146,60,0.15);
            border-bottom: 1px solid rgba(251,146,60,0.15);
            padding: 20px 0;
        }

        .urgent-band__inner {
            display: flex;
            align-items: center;
            gap: 20px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .urgent-band__left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .urgent-band__pulse {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: rgba(251,146,60,0.15);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .urgent-band__text strong {
            display: block;
            font-size: 0.95rem;
            color: var(--white);
            margin-bottom: 2px;
        }

        .urgent-band__text span {
            font-size: 1rem;
            color: #adbece;
        }

        .expertise-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .exp-card {
            background: var(--ink2);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            padding: 28px 26px;
            display: flex;
            gap: 18px;
            align-items: flex-start;
            transition: border-color 0.18s, transform 0.18s;
        }

        .exp-card:hover { border-color: var(--line2); transform: translateX(3px); }

        .exp-card__icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
            background: var(--lime-dim);
        }

        .exp-card h3 { font-size: 0.95rem; margin-bottom: 5px; }
        .exp-card p  { font-size: 1rem; color: #adbece; line-height: 1.6; }

        .support-band {
            background: var(--ink2);
            border: 1px solid var(--line);
            border-radius: var(--r-xl);
            padding: 48px 52px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 40px;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .support-band::before {
            content: '';
            position: absolute;
            top: -80px; right: -80px;
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(168,255,62,0.06) 0%, transparent 65%);
            pointer-events: none;
        }

        .support-band__label { color: var(--lime); }
        .support-band h2 { margin-bottom: 12px; }
        .support-band p { color: #adbece; font-size: 1rem; line-height: 1.72; }

        .support-band__cta {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-align: center;
            flex-shrink: 0;
        }

        .support-band__note {
            font-size: 0.95rem;
            color: #6e8499;
            max-width: 160px;
            line-height: 1.5;
        }

        footer {
            background: var(--ink2);
            border-top: 1px solid var(--line);
            padding: 56px 0 32px;
        }

        .footer__grid {
            display: grid;
            grid-template-columns: 260px 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 48px;
        }

        .f-icon { display: inline-block; width: 22px; text-align: center; margin-right: 4px; }
        .footer__brand {}

        .footer__logo {
            font-family: var(--disp);
            font-weight: 800;
            font-size: 1.2rem;
            letter-spacing: -0.03em;
            color: var(--white);
            margin-bottom: 10px;
        }

        .footer__logo em { font-style: normal; color: var(--lime); }

        .footer__desc {
            font-size: 1rem;
            color: #c1d0db;
            line-height: 1.65;
            margin-bottom: 16px;
        }

        .footer__col-title {
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #b8cfe0;
            margin-bottom: 16px;
        }

        .footer__col ul {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer__col a {
            font-size: 1rem;
            color: #adbece;
            transition: color 0.18s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .footer__col a .mono {
            color: #8fafc8;
            font-size: 0.9em;
            transition: color 0.18s;
        }

        .footer__col a:hover { color: var(--white); }
        .footer__col a:hover .mono { color: var(--lime); }

        .footer__bottom {
            padding-top: 28px;
            border-top: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .footer__copy { font-size: 1rem; color: #aebfcd; }
        .footer__legal { font-size: 0.9rem; color: #aebfcd; max-width: 440px; text-align: right; line-height: 1.5; }

        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.55s ease, transform 0.55s ease;
        }

        .reveal.visible { opacity: 1; transform: none; }
        .reveal-d1 { transition-delay: 0.08s; }
        .reveal-d2 { transition-delay: 0.16s; }
        .reveal-d3 { transition-delay: 0.24s; }
        .reveal-d4 { transition-delay: 0.32s; }

        @media (max-width: 1100px) {
            .ref-cats       { grid-template-columns: repeat(2,1fr); }
            .ref-grid       { grid-template-columns: repeat(2,1fr); }
            .blog-grid      { grid-template-columns: 1fr 1fr; }
            .post-card--featured { grid-column: span 2; grid-row: span 1; }
            .footer__grid   { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 860px) {
            .hero__stats    { grid-template-columns: repeat(2,1fr); }
            .services-grid  { grid-template-columns: 1fr; max-width: 480px; }
            .expertise-grid { grid-template-columns: 1fr; }
            .support-band   { grid-template-columns: 1fr; text-align: center; }
            .support-band__cta { align-items: center; }
            .nav__menu      { display: none; }
            .nav__search    { display: none; }
            .nav__burger    { display: flex; }
        }

        @media (max-width: 640px) {
            .hero__stats    { grid-template-columns: repeat(2,1fr); }
            .ref-grid       { grid-template-columns: 1fr; }
            .blog-grid      { grid-template-columns: 1fr; }
            .post-card--featured { grid-column: span 1; }
            .ref-cats       { grid-template-columns: 1fr 1fr; }
            .footer__grid   { grid-template-columns: 1fr; }
            .footer__legal  { text-align: left; }
            h1              { font-size: clamp(1.7rem, 8vw, 2.2rem); }
            .section        { padding: 56px 0; }
            .urgent-band__inner { flex-direction: column; align-items: flex-start; }
        }