:root {
            --bg-white: #ffffff;
            --bg-light: #f8fafc;
            --bg-subtle: #f1f5f9;
            --text-navy: #0f172a;
            --text-slate: #334155;
            --text-muted: #64748b;
            --primary-royal: #2563eb;
            --primary-royal-dark: #1d4ed8;
            --secondary-indigo: #4f46e5;
            --accent-purple: #7c3aed;
            --border-color: #e2e8f0;
            --card-radius: 16px;
            --card-radius-lg: 20px;
            --shadow-soft: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
            --shadow-hover: 0 20px 40px -10px rgba(37, 99, 235, 0.13), 0 8px 20px -4px rgba(15, 23, 42, 0.06);
            --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

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

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-navy);
            background-color: var(--bg-white);
            overflow-x: hidden;
            line-height: 1.6;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Plus Jakarta Sans', sans-serif;
            letter-spacing: -0.02em;
        }

        /* Top Scroll Progress Indicator */
        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3.5px;
            background: linear-gradient(90deg, var(--primary-royal), var(--secondary-indigo), var(--accent-purple));
            width: 0%;
            z-index: 9999;
            transition: width 0.1s ease-out;
        }

        /* Sticky Header & Mega Menu */
        .site-header {
            transition: var(--transition-smooth);
        }
        .site-header.scrolled {
            background-color: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 25px rgba(15, 23, 42, 0.07);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(12px);
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .dropdown-trigger:hover .dropdown-menu,
        .dropdown-trigger:focus-within .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Corporate Cards & Buttons */
        .corporate-card {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: var(--card-radius);
            box-shadow: var(--shadow-soft);
            transition: var(--transition-smooth);
        }
        .corporate-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-hover);
            border-color: #cbd5e1;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-royal) 0%, var(--secondary-indigo) 100%);
            color: #ffffff;
            font-weight: 600;
            border-radius: 12px;
            transition: var(--transition-smooth);
            box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.35);
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 26px -4px rgba(37, 99, 235, 0.5);
            filter: brightness(1.05);
        }

        .btn-outline {
            background: #ffffff;
            color: var(--text-navy);
            border: 1.5px solid #cbd5e1;
            font-weight: 600;
            border-radius: 12px;
            transition: var(--transition-smooth);
        }
        .btn-outline:hover {
            border-color: var(--primary-royal);
            color: var(--primary-royal);
            background: #eff6ff;
            transform: translateY(-2px);
        }

        /* Subtle Floating Hero Elements */
        @keyframes floatSlow {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        @keyframes floatReverse {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(8px); }
        }
        .float-slow {
            animation: floatSlow 5s ease-in-out infinite;
        }
        .float-reverse {
            animation: floatReverse 6s ease-in-out infinite;
        }

        /* Infinite Client Logo Slider */
        @keyframes marqueeSlide {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .logo-marquee-track {
            display: flex;
            width: max-content;
            animation: marqueeSlide 36s linear infinite;
        }
        .logo-marquee-track:hover {
            animation-play-state: paused;
        }
        .client-logo-item {
            filter: grayscale(100%) opacity(0.65);
            transition: var(--transition-smooth);
        }
        .client-logo-item:hover {
            filter: grayscale(0%) opacity(1);
            transform: scale(1.04);
        }

        /* Portfolio Image Hover Zoom */
        .portfolio-img-wrap {
            overflow: hidden;
            border-radius: 12px;
        }
        .portfolio-img-wrap img {
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .corporate-card:hover .portfolio-img-wrap img {
            transform: scale(1.07);
        }

        /* Process Timeline Line */
        .process-connector {
            position: relative;
        }
        .process-connector::after {
            content: '';
            position: absolute;
            top: 2.25rem;
            left: 50%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, #2563eb 0%, #cbd5e1 100%);
            z-index: 0;
        }
        @media (max-width: 1023px) {
            .process-connector::after {
                display: none;
            }
        }

        /* Scroll Animation Initial State */
        .reveal-on-scroll {
            opacity: 0;
        }
        .reveal-on-scroll.animate__animated {
            opacity: 1;
        }

        /* Reduced Motion Support */
        @media (prefers-reduced-motion: reduce) {
            *, ::before, ::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
            .reveal-on-scroll {
                opacity: 1 !important;
            }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

        /* =====================================================
           LOGO
           ===================================================== */
        .brand-logo { display: block; height: 2.75rem; width: auto; transition: transform .3s ease; }
        a:hover > .brand-logo { transform: scale(1.03); }
        .brand-logo-footer { height: 3rem; }
        .logo-on-dark { display: none; }
        html.dark .logo-on-light { display: none; }
        html.dark .logo-on-dark { display: block; }
        /* footer is always dark, so it always uses the light-text logo */
        .brand-logo-footer.logo-on-dark { display: block; }
        @media (max-width: 480px) { .brand-logo { height: 2.25rem; } }

        /* =====================================================
           THEME TOGGLE BUTTON
           ===================================================== */
        .theme-toggle { position: relative; }
        .theme-toggle .icon-sun { display: none; }
        html.dark .theme-toggle .icon-sun { display: inline-block; }
        html.dark .theme-toggle .icon-moon { display: none; }
        html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
            transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important;
        }

        /* =====================================================
           DARK THEME  —  Black + Blue
           Toggled with  <html class="dark">
           ===================================================== */
        html { color-scheme: light; }
        html.dark {
            color-scheme: dark;
            --bg-white: #05080f;
            --bg-light: #080d1a;
            --bg-subtle: #0b1326;
            --text-navy: #f1f5f9;
            --text-slate: #cbd5e1;
            --text-muted: #94a3b8;
            --primary-royal: #3b82f6;
            --primary-royal-dark: #2563eb;
            --secondary-indigo: #2563eb;
            --accent-purple: #60a5fa;
            --border-color: #16233f;
            --shadow-soft: 0 10px 30px -5px rgba(0,0,0,.65), 0 4px 12px -2px rgba(0,0,0,.45);
            --shadow-hover: 0 20px 40px -10px rgba(59,130,246,.28), 0 8px 20px -4px rgba(0,0,0,.65);
        }
        html.dark body { background-color: #03060d; color: #e2e8f0; }

        /* Header */
        html.dark #site-header { background-color: #04070e; border-bottom-color: rgba(59,130,246,.16); }
        html.dark #site-header.scrolled {
            background-color: rgba(3,6,13,.92);
            box-shadow: 0 4px 30px rgba(0,0,0,.6), 0 1px 0 rgba(59,130,246,.18);
        }

        /* Section backgrounds: alternate black / deep navy-black */
        html.dark section.bg-white { background-color: #03060d; }
        html.dark section.bg-slate-50 { background-color: #070c18; }
        html.dark section#engagement {
            background-color: #050a16;
            background-image: radial-gradient(60% 55% at 85% 0%, rgba(37,99,235,.20), transparent 70%),
                              radial-gradient(45% 45% at 5% 100%, rgba(29,78,216,.16), transparent 70%);
        }
        html.dark section#home {
            background-color: #03060d;
            background-image: radial-gradient(55% 45% at 85% 12%, rgba(37,99,235,.22), transparent 70%),
                              radial-gradient(40% 40% at 0% 90%, rgba(29,78,216,.14), transparent 70%),
                              linear-gradient(180deg, #060b16 0%, #03060d 55%, #060b16 100%);
        }
        html.dark .from-navy-900.via-navy-800 { background-image: linear-gradient(90deg, #030712, #0a1a47 50%, #030712); border: 1px solid rgba(59,130,246,.25); }

        /* Cards & buttons */
        html.dark .corporate-card { background: #0a1020; border-color: #16233f; }
        html.dark .corporate-card:hover { border-color: #2b4a94; }
        html.dark .btn-outline { background: rgba(59,130,246,.07); color: #f1f5f9; border-color: #213764; }
        html.dark .btn-outline:hover { background: rgba(59,130,246,.16); color: #93c5fd; border-color: #3b82f6; }
        html.dark .btn-primary { box-shadow: 0 8px 22px -4px rgba(37,99,235,.55); }
        html.dark .process-connector::after { background: linear-gradient(90deg, #3b82f6 0%, #16233f 100%); }
        html.dark .client-logo-item { filter: grayscale(100%) opacity(.7) brightness(1.15); }
        html.dark .client-logo-item:hover { filter: grayscale(0%) opacity(1); }
        html.dark .port-filter-btn.bg-navy-900 { background-color: #2563eb; }
        html.dark ::-webkit-scrollbar-track { background: #05080f; }
        html.dark ::-webkit-scrollbar-thumb { background: #1f3a73; }
        html.dark ::-webkit-scrollbar-thumb:hover { background: #2f56a8; }
        html.dark ::selection { background: #2563eb; color: #fff; }
        html.dark input, html.dark textarea, html.dark select { color-scheme: dark; }
        html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; }

        /* ---- Tailwind utility remaps (low specificity via :where so hover/group-hover still win) ---- */
        /* Backgrounds */
        html.dark :where(.bg-white) { background-color: #0a1020; }
        html.dark :where(.bg-white\/95) { background-color: rgba(10,16,32,.92); }
        html.dark :where(.bg-slate-50) { background-color: #0b1326; }
        html.dark :where(.bg-slate-100) { background-color: #0f1a33; }
        html.dark :where(.bg-slate-700) { background-color: #16254a; }
        html.dark :where(.bg-slate-800) { background-color: #0d1730; }
        html.dark :where(.bg-slate-800\/50) { background-color: rgba(13,23,48,.55); }
        html.dark :where(.bg-slate-800\/90) { background-color: rgba(13,23,48,.92); }
        html.dark :where(.bg-slate-900) { background-color: #060b17; }
        html.dark :where(.bg-slate-900\/90) { background-color: rgba(6,11,23,.92); }
        html.dark :where(.bg-slate-950) { background-color: #02040a; }
        html.dark :where(.bg-navy-900) { background-color: #02040a; }
        html.dark :where(.bg-navy-900\/90) { background-color: rgba(2,4,10,.9); }
        html.dark :where(.bg-navy-900\/95) { background-color: rgba(2,4,10,.95); }
        html.dark :where(.bg-navy-950) { background-color: #010208; }
        html.dark :where(.bg-royal-50) { background-color: rgba(59,130,246,.13); }
        html.dark :where(.bg-blue-500\/5) { background-color: rgba(37,99,235,.14); }
        html.dark :where(.bg-indigo-500\/5) { background-color: rgba(59,130,246,.10); }
        html.dark :where(.bg-emerald-100) { background-color: rgba(52,211,153,.18); }
html.dark :where(.bg-blue-50){background-color:rgba(59,130,246,0.12)}
html.dark :where(.bg-indigo-50){background-color:rgba(129,140,248,0.12)}
html.dark :where(.bg-purple-50){background-color:rgba(167,139,250,0.12)}
html.dark :where(.bg-pink-50){background-color:rgba(244,114,182,0.12)}
html.dark :where(.bg-emerald-50){background-color:rgba(52,211,153,0.12)}
html.dark :where(.bg-amber-50){background-color:rgba(251,191,36,0.12)}
html.dark :where(.bg-rose-50){background-color:rgba(251,113,133,0.12)}
html.dark :where(.bg-sky-50){background-color:rgba(56,189,248,0.12)}
html.dark :where(.bg-teal-50){background-color:rgba(45,212,191,0.12)}

        /* Hover / group-hover backgrounds */
        html.dark .hover\:bg-slate-50:hover { background-color: #0f1a33; }
        html.dark .hover\:bg-slate-100:hover { background-color: #14213f; }
        html.dark .hover\:bg-slate-200:hover { background-color: #1a2b52; }
        html.dark .hover\:bg-royal-50:hover { background-color: rgba(59,130,246,.2); }
        html.dark .group:hover .group-hover\:bg-royal-50 { background-color: rgba(59,130,246,.2); }
        html.dark .hover\:bg-navy-900:hover { background-color: #2563eb; }
        html.dark .hover\:bg-slate-700:hover { background-color: #1c2f5e; }

        /* Text */
        html.dark :where(.text-navy-900) { color: #f1f5f9; }
        html.dark :where(.text-slate-800) { color: #e2e8f0; }
        html.dark :where(.text-slate-700) { color: #cbd5e1; }
        html.dark :where(.text-slate-600) { color: #a9b6ca; }
        html.dark :where(.text-slate-500) { color: #8493ab; }
        html.dark :where(.text-royal-600, .text-royal-700, .text-blue-600, .text-blue-700) { color: #60a5fa; }
        html.dark :where(.text-royal-500, .text-blue-500) { color: #60a5fa; }
        html.dark :where(.text-indigo-600) { color: #818cf8; }
        html.dark :where(.text-purple-600) { color: #a78bfa; }
        html.dark :where(.text-pink-600) { color: #f472b6; }
        html.dark :where(.text-rose-600, .text-rose-700) { color: #fb7185; }
        html.dark :where(.text-red-600) { color: #f87171; }
        html.dark :where(.text-emerald-600, .text-emerald-700) { color: #34d399; }
        html.dark :where(.text-emerald-800, .text-emerald-950) { color: #6ee7b7; }
        html.dark :where(.text-green-600) { color: #4ade80; }
        html.dark :where(.text-amber-600) { color: #fbbf24; }
        html.dark :where(.text-orange-600, .text-orange-700) { color: #fb923c; }
        html.dark :where(.text-sky-600, .text-sky-700) { color: #38bdf8; }
        html.dark :where(.text-teal-600) { color: #2dd4bf; }
        html.dark .hover\:text-navy-900:hover { color: #ffffff; }
        html.dark .hover\:text-royal-600:hover { color: #93c5fd; }
        html.dark .hover\:text-royal-700:hover { color: #bfdbfe; }
        html.dark .hover\:text-indigo-600:hover { color: #a5b4fc; }
        html.dark .group:hover .group-hover\:text-royal-600 { color: #93c5fd; }
        html.dark .group:hover .group-hover\:text-indigo-600 { color: #a5b4fc; }
        html.dark .group:hover .group-hover\:text-purple-600 { color: #c4b5fd; }
        html.dark .group:hover .group-hover\:text-pink-600 { color: #f9a8d4; }
        html.dark .group:hover .group-hover\:text-emerald-600 { color: #6ee7b7; }
        html.dark .group:hover .group-hover\:text-amber-600 { color: #fcd34d; }
        html.dark .group:hover .group-hover\:text-rose-600 { color: #fda4af; }
        html.dark .group:hover .group-hover\:text-sky-600 { color: #7dd3fc; }

        /* Borders */
        html.dark :where(.border-white) { border-color: #0a1020; }
        html.dark :where(.border-slate-100) { border-color: #101b34; }
        html.dark :where(.border-slate-200, .border-slate-200\/70, .border-slate-200\/80, .border-slate-200\/90) { border-color: #16233f; }
        html.dark :where(.border-slate-300) { border-color: #223865; }
        html.dark :where(.border-slate-700, .border-slate-700\/60, .border-slate-700\/80) { border-color: #17284d; }
        html.dark :where(.border-slate-800, .border-slate-800\/80, .border-slate-800\/90) { border-color: #101c38; }
        html.dark :where(.border-royal-100) { border-color: rgba(59,130,246,.35); }
        html.dark :where(.border-emerald-200) { border-color: rgba(52,211,153,.35); }
        html.dark :where(.border-rose-200) { border-color: rgba(251,113,133,.35); }

        /* Gradients: keep everything in the blue family */
        html.dark .to-accent-600 { --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position); }
        html.dark .from-indigo-600 { --tw-gradient-from: #2563eb var(--tw-gradient-from-position); --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position); }
        html.dark .to-purple-600 { --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position); }
        html.dark .from-royal-600 { --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); }
        html.dark .via-indigo-600 { --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to); }
        html.dark .to-accent-700 { --tw-gradient-to: #93c5fd var(--tw-gradient-to-position); }

        /* Dark-surface helpers for the always-dark areas so they stay black/blue, not slate */
        html.dark footer { background-color: #010208; border-top-color: rgba(59,130,246,.2); }

/* =====================================================
   WORDPRESS INTEGRATION
   ===================================================== */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus, .skip-link:focus {
    background: #2563eb; color: #fff; clip: auto !important; clip-path: none;
    display: block; height: auto; width: auto; left: 8px; top: 8px; padding: 12px 20px;
    border-radius: 8px; font-weight: 700; z-index: 100000; text-decoration: none;
}
/* Keep the sticky header and progress bar below the WP admin bar when logged in */
body.admin-bar #site-header { top: 32px; }
body.admin-bar #scroll-progress { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar #site-header { top: 46px; }
    body.admin-bar #scroll-progress { top: 46px; }
}
@media (max-width: 600px) {
    body.admin-bar #site-header { top: 0; }
    body.admin-bar #scroll-progress { top: 46px; }
}

/* Anchor offset so sections are not hidden under the sticky header */
section[id] { scroll-margin-top: 72px; }

/* Post / page content typography (Tailwind's reset removes browser defaults) */
.entry-content { color: var(--text-slate); font-size: 1.0625rem; line-height: 1.8; }
.entry-content > * + * { margin-top: 1.25em; }
.entry-content h2, .entry-content h3, .entry-content h4 { color: var(--text-navy); font-weight: 800; line-height: 1.25; margin-top: 2em; }
.entry-content h2 { font-size: 1.75rem; }
.entry-content h3 { font-size: 1.4rem; }
.entry-content h4 { font-size: 1.15rem; }
.entry-content a { color: var(--primary-royal); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--primary-royal-dark); }
.entry-content ul { list-style: disc; padding-left: 1.5em; }
.entry-content ol { list-style: decimal; padding-left: 1.5em; }
.entry-content li + li { margin-top: .4em; }
.entry-content blockquote { border-left: 4px solid var(--primary-royal); padding: .5em 0 .5em 1.25em; font-style: italic; color: var(--text-muted); }
.entry-content img, .entry-content video { max-width: 100%; height: auto; border-radius: 12px; }
.entry-content pre { background: #0f172a; color: #e2e8f0; padding: 1rem 1.25rem; border-radius: 12px; overflow-x: auto; font-size: .875rem; }
.entry-content code { background: var(--bg-subtle); padding: .15em .4em; border-radius: 6px; font-size: .9em; }
.entry-content pre code { background: none; padding: 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content th, .entry-content td { border: 1px solid var(--border-color); padding: .6rem .8rem; text-align: left; }
.entry-content th { background: var(--bg-subtle); color: var(--text-navy); }
.entry-content hr { border: 0; border-top: 1px solid var(--border-color); margin: 2.5em 0; }
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: .85rem; color: var(--text-muted); margin-top: .5em; text-align: center; }
.sticky .corporate-card, .bypostauthor { outline: 0; }

/* Pagination & post navigation */
.pagination, .post-navigation .nav-links, .comments-pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem;
    padding: 0 .9rem; border-radius: 10px; border: 1.5px solid #cbd5e1; font-weight: 600; font-size: .9rem;
    color: var(--text-navy); background: var(--bg-white); transition: var(--transition-smooth);
}
a.page-numbers:hover { border-color: var(--primary-royal); color: var(--primary-royal); }
.page-numbers.current { background: var(--primary-royal); border-color: var(--primary-royal); color: #fff; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1rem; }
.post-navigation a { display: block; padding: 1rem 1.25rem; border: 1px solid var(--border-color); border-radius: 14px; color: var(--text-navy); transition: var(--transition-smooth); }
.post-navigation a:hover { border-color: var(--primary-royal); }

/* Comments */
.comment-list, .comment-list ol, .comment-list ul { list-style: none; padding-left: 0; }
.comment-list .children { margin-left: 1.5rem; margin-top: 1.5rem; }
.comment-body { border: 1px solid var(--border-color); border-radius: 14px; padding: 1.25rem; background: var(--bg-white); }
.comment-author .avatar { border-radius: 9999px; float: left; margin-right: .75rem; }
.comment-author .fn { font-weight: 700; color: var(--text-navy); }
.comment-metadata, .comment-metadata a { font-size: .75rem; color: var(--text-muted); }
.comment-content { margin-top: .75rem; color: var(--text-slate); }
.comment-reply-link { font-size: .8rem; font-weight: 700; color: var(--primary-royal); }
.comment-respond { margin-top: 2.5rem; }
.comment-reply-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--text-navy); margin-bottom: 1rem; }
.comment-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; color: var(--text-slate); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
    width: 100%; padding: .75rem 1rem; border: 1px solid #cbd5e1; border-radius: 12px; background: var(--bg-light); color: var(--text-navy);
}
.comment-form p { margin-bottom: 1rem; }
.comment-form .submit { background: linear-gradient(135deg, var(--primary-royal), var(--secondary-indigo)); color: #fff; font-weight: 600; padding: .75rem 1.5rem; border-radius: 12px; cursor: pointer; }
html.dark .page-numbers { border-color: #223865; }
html.dark .comment-form input[type="text"], html.dark .comment-form input[type="email"], html.dark .comment-form input[type="url"], html.dark .comment-form textarea { border-color: #223865; }
html.dark .entry-content pre { background: #02040a; border: 1px solid #16233f; }