/* ============================================================
   CyberFreezeDev Refresh — premium AI automation theme overrides
   Loads after assets/css/style.css so all rules win.
   ============================================================ */

:root {
    --cfd-bg: #0B0B14;
    --cfd-bg-alt: #11111C;
    --cfd-surface: #14141F;
    --cfd-surface-2: #1B1B2A;
    --cfd-border: rgba(255, 255, 255, 0.08);
    --cfd-border-strong: rgba(255, 255, 255, 0.14);
    --cfd-text: #F4F4F8;
    --cfd-text-dim: #9A9AB0;
    --cfd-accent: #684DF4;
    --cfd-accent-2: #8A6CFF;
    --cfd-accent-soft: rgba(104, 77, 244, 0.12);
    --cfd-radius: 16px;
    --cfd-radius-lg: 22px;
    --cfd-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

/* ---------- Base ---------- */
body,
body.theme-blue3 {
    background: var(--cfd-bg) !important;
    color: var(--cfd-text);
    font-family: 'Barlow', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Hide the custom cursor that the theme injects */
.cursor,
.cursor2 {
    display: none !important;
}

/* Hide the noisy preloader text effect on the new brand */
#preloader {
    background: var(--cfd-bg) !important;
}

.cfd-section {
    padding: 110px 0;
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 991px) {
    .cfd-section {
        padding: 70px 0;
    }
}

.cfd-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cfd-accent-2);
    font-weight: 600;
    margin-bottom: 18px;
    padding: 6px 14px;
    border: 1px solid var(--cfd-border-strong);
    border-radius: 999px;
    background: var(--cfd-accent-soft);
}

.cfd-h1 {
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 700;
    color: var(--cfd-text);
    letter-spacing: -0.02em;
    margin-bottom: 22px;
}

.cfd-h2 {
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.1;
    font-weight: 700;
    color: var(--cfd-text);
    letter-spacing: -0.015em;
    margin-bottom: 18px;
}

.cfd-h3 {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--cfd-text);
    margin-bottom: 12px;
}

.cfd-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--cfd-text-dim);
    max-width: 720px;
    margin: 0 auto 40px;
}

.cfd-text-dim {
    color: var(--cfd-text-dim);
}

.cfd-section-head {
    text-align: center;
    margin-bottom: 60px;
}

.cfd-section-head.left {
    text-align: left;
}

/* ---------- Buttons ---------- */
.cfd-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    border: 1px solid transparent;
    line-height: 1;
}

.cfd-btn-primary {
    background: linear-gradient(135deg, var(--cfd-accent), var(--cfd-accent-2));
    color: #fff;
    box-shadow: 0 10px 30px -12px rgba(104, 77, 244, 0.7);
}

.cfd-btn-primary:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 16px 40px -14px rgba(104, 77, 244, 0.85);
}

.cfd-btn-ghost {
    background: transparent;
    color: var(--cfd-text);
    border-color: rgba(255, 255, 255, 0.32);
}

.cfd-btn-ghost:hover {
    background: var(--cfd-surface);
    color: var(--cfd-text);
    border-color: var(--cfd-accent);
}

.cfd-btn-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Hero ---------- */
.cfd-hero {
    position: relative;
    padding: 140px 0 80px;
    min-height: 100svh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(104, 77, 244, 0.18), transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(104, 77, 244, 0.10), transparent 60%),
        var(--cfd-bg);
    overflow: hidden;
}

.cfd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}

.cfd-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
}

.cfd-hero .cfd-h1 {
    background: linear-gradient(180deg, #ffffff 0%, #c8c2ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cfd-hero-sub {
    font-size: 19px;
    line-height: 1.6;
    color: var(--cfd-text-dim);
    max-width: 720px;
    margin: 0 auto 36px;
}

.cfd-hero-cta {
    justify-content: center;
    margin-bottom: 48px;
}

.cfd-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cfd-text-dim);
    font-weight: 500;
}

.cfd-trust-strip span {
    position: relative;
    padding: 0 4px;
}

/* ---------- Cards ---------- */
.cfd-card {
    background: var(--cfd-surface);
    border: 1px solid var(--cfd-border);
    border-radius: var(--cfd-radius);
    padding: 32px 28px;
    height: 100%;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
    position: relative;
    overflow: hidden;
}

.cfd-card:hover {
    transform: translateY(-4px);
    border-color: var(--cfd-accent);
    background: var(--cfd-surface-2);
}

.cfd-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--cfd-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cfd-accent-2);
    font-size: 22px;
    margin-bottom: 22px;
}

.cfd-card h3,
.cfd-card .cfd-h3 {
    color: var(--cfd-text);
}

.cfd-card p {
    color: var(--cfd-text-dim);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.cfd-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cfd-accent-2);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.cfd-card-link:hover {
    color: #fff;
}

.cfd-card-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cfd-accent-2);
    background: var(--cfd-accent-soft);
    border: 1px solid var(--cfd-border-strong);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}

/* ---------- Solutions grid ---------- */
.cfd-grid {
    display: grid;
    gap: 24px;
}

.cfd-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cfd-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cfd-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
    .cfd-grid-3,
    .cfd-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .cfd-grid-2,
    .cfd-grid-3,
    .cfd-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Process steps ---------- */
.cfd-step {
    padding: 28px 24px;
    border-left: 2px solid var(--cfd-border-strong);
    background: transparent;
    height: 100%;
}

.cfd-step-num {
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--cfd-accent-2);
    font-weight: 700;
    margin-bottom: 10px;
}

.cfd-step h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--cfd-text);
}

.cfd-step p {
    color: var(--cfd-text-dim);
    font-size: 15px;
    line-height: 1.6;
}

/* ---------- Problems list ---------- */
.cfd-problem {
    padding: 24px;
    border-radius: 14px;
    background: var(--cfd-surface);
    border: 1px solid var(--cfd-border);
    height: 100%;
}

.cfd-problem strong {
    display: block;
    color: var(--cfd-text);
    font-size: 16px;
    margin-bottom: 6px;
    font-weight: 600;
}

.cfd-problem span {
    color: var(--cfd-text-dim);
    font-size: 14px;
    line-height: 1.55;
}

/* ---------- Project cards ---------- */
.cfd-project {
    background: var(--cfd-surface);
    border: 1px solid var(--cfd-border);
    border-radius: var(--cfd-radius);
    overflow: hidden;
    height: 100%;
    transition: transform .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
}

.cfd-project:hover {
    transform: translateY(-4px);
    border-color: var(--cfd-accent);
}

.cfd-project-img {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #1A1A28, #11111C);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--cfd-border);
}

.cfd-project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: saturate(0.9) brightness(0.92);
}

.cfd-project-body {
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cfd-project-body h3 {
    font-size: 19px;
    margin-bottom: 10px;
    color: var(--cfd-text);
}

.cfd-project-body p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cfd-text-dim);
    margin-bottom: 14px;
    flex: 1;
}

.cfd-project-meta {
    font-size: 12px;
    color: var(--cfd-text-dim);
    letter-spacing: 0.04em;
    border-top: 1px solid var(--cfd-border);
    padding-top: 12px;
}

.cfd-project-meta strong {
    color: var(--cfd-text);
    font-weight: 600;
}

/* ---------- Testimonials ---------- */
.cfd-testi {
    background: var(--cfd-surface);
    border: 1px solid var(--cfd-border);
    border-radius: var(--cfd-radius);
    padding: 34px 30px;
    height: 100%;
    position: relative;
}

.cfd-testi::before {
    content: "\201C";
    position: absolute;
    top: 8px;
    right: 22px;
    font-size: 90px;
    line-height: 1;
    color: var(--cfd-accent);
    opacity: 0.18;
    font-family: Georgia, serif;
}

.cfd-testi-quote {
    font-size: 16px;
    line-height: 1.65;
    color: var(--cfd-text);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.cfd-testi-author {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--cfd-border);
    padding-top: 18px;
}

.cfd-testi-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cfd-accent), var(--cfd-accent-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.cfd-testi-author strong {
    display: block;
    color: var(--cfd-text);
    font-size: 15px;
    font-weight: 600;
}

.cfd-testi-author span {
    display: block;
    color: var(--cfd-text-dim);
    font-size: 13px;
}

/* ---------- CTA band ---------- */
.cfd-cta-band {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(104, 77, 244, 0.25), transparent 60%),
        var(--cfd-bg-alt);
    border: 1px solid var(--cfd-border);
    border-radius: var(--cfd-radius-lg);
    padding: 70px 40px;
    text-align: center;
    margin: 0 20px;
}

.cfd-cta-band .cfd-h2 {
    margin-bottom: 14px;
}

.cfd-cta-band p {
    color: var(--cfd-text-dim);
    font-size: 17px;
    max-width: 620px;
    margin: 0 auto 30px;
}

/* ---------- Header / footer dark mode ---------- */
.th-header,
.header-layout18,
.menu-area {
    background: transparent !important;
}

.sticky-wrapper.sticky {
    background: rgba(11, 11, 20, 0.92) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cfd-border);
}

.main-menu ul li a {
    color: var(--cfd-text) !important;
    font-weight: 500;
}

.main-menu ul li a:hover {
    color: var(--cfd-accent-2) !important;
}

.footer-wrapper,
.footer-layout17 {
    background: var(--cfd-bg-alt) !important;
    background-image: none !important;
    border-top: 1px solid var(--cfd-border);
}

.footer-wrapper .info-box_text,
.footer-wrapper .footer-text,
.footer-wrapper .footer-menu li a,
.footer-wrapper .copyright-text {
    color: var(--cfd-text-dim) !important;
}

.footer-wrapper .footer-menu li a:hover,
.footer-wrapper .info-box_link:hover {
    color: var(--cfd-accent-2) !important;
}

.footer-wrapper .info-box_subtitle {
    color: var(--cfd-text) !important;
}

.copyright-wrap {
    border-top: 1px solid var(--cfd-border);
    background: transparent !important;
}

/* ---------- Breadcrumb dark mode ---------- */
.breadcumb-wrapper {
    position: relative;
    background: var(--cfd-bg-alt) !important;
    border-bottom: 1px solid var(--cfd-border);
    padding: 180px 0 80px !important;
    min-height: 0 !important;
    overflow: hidden;
    text-align: center;
    filter: none !important;
}

.breadcumb-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(104, 77, 244, 0.22), transparent 55%),
        radial-gradient(ellipse at 20% 100%, rgba(104, 77, 244, 0.14), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.breadcumb-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

/* Hide the legacy cover-image div if a page still renders it */
.breadcumb-wrapper .breadcumb-background {
    display: none !important;
}

.breadcumb-wrapper .container {
    position: relative;
    z-index: 1;
}

.breadcumb-content {
    text-align: center;
}

.breadcumb-title {
    color: var(--cfd-text) !important;
    font-size: clamp(34px, 5vw, 56px) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #c8c2ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.breadcumb-menu {
    display: inline-flex;
    gap: 10px;
    padding: 8px 18px;
    background: var(--cfd-surface);
    border: 1px solid var(--cfd-border);
    border-radius: 999px;
    list-style: none;
    margin: 0;
}

.breadcumb-menu li,
.breadcumb-menu li a {
    color: var(--cfd-text-dim) !important;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.breadcumb-menu li a:hover {
    color: var(--cfd-accent-2) !important;
}

.breadcumb-menu li + li::before {
    content: "›";
    margin-right: 10px;
    color: var(--cfd-text-dim);
    opacity: 0.6;
}

@media (max-width: 600px) {
    .breadcumb-wrapper { padding: 130px 0 60px !important; }
}

/* ---------- Form polish for dark theme ---------- */
.cfd-section .form-control,
.cfd-section .form-select,
.cfd-cta-band .form-control,
.cfd-cta-band .form-select {
    background: var(--cfd-bg-alt) !important;
    border: 1px solid var(--cfd-border-strong) !important;
    color: var(--cfd-text) !important;
    border-radius: 12px !important;
}

.cfd-section .form-control::placeholder,
.cfd-cta-band .form-control::placeholder {
    color: var(--cfd-text-dim) !important;
}

.cfd-section .form-select:invalid,
.cfd-cta-band .form-select:invalid {
    color: var(--cfd-text-dim) !important;
}

.cfd-section .form-select option,
.cfd-cta-band .form-select option {
    color: var(--cfd-text);
    background: var(--cfd-bg-alt);
}

.cfd-section .contact-form .form-group > i,
.cfd-cta-band .contact-form .form-group > i {
    background-color: transparent !important;
    color: var(--cfd-text-dim) !important;
}

/* ---------- FAQ tweaks ---------- */
.cfd-section .accordion-card {
    background: var(--cfd-surface) !important;
    border: 1px solid var(--cfd-border) !important;
    border-radius: 14px !important;
    margin-bottom: 14px;
}

.cfd-section .accordion-button {
    background: transparent !important;
    color: var(--cfd-text) !important;
    font-weight: 600;
}

.cfd-section .accordion-body p,
.cfd-section .faq-text {
    color: var(--cfd-text-dim) !important;
}

/* ---------- Service detail page ---------- */
.page-content,
.page-content p {
    color: var(--cfd-text-dim);
}

.page-content p {
    line-height: 1.7;
    margin-bottom: 16px;
}

.page-title,
.page-content h2,
.page-content h3,
.page-content h4 {
    color: var(--cfd-text) !important;
}

.page-content .checklist.style3 li {
    color: var(--cfd-text-dim);
    padding: 8px 0;
    list-style: none;
}

.page-content .checklist.style3 li i {
    color: var(--cfd-accent-2);
    margin-right: 10px;
}

.page-img img {
    border-radius: var(--cfd-radius);
    border: 1px solid var(--cfd-border);
    margin: 24px 0;
}

/* Sidebar widgets */
.sidebar-area {
    position: sticky;
    top: 110px;
}

.widget {
    background: var(--cfd-surface) !important;
    border: 1px solid var(--cfd-border) !important;
    border-radius: var(--cfd-radius) !important;
    padding: 28px 26px !important;
    margin-bottom: 24px;
    box-shadow: none !important;
}

.widget_title {
    color: var(--cfd-text) !important;
    font-size: 18px !important;
    font-weight: 600;
    margin-bottom: 18px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cfd-border);
    background: none !important;
}

/* Override the original theme white-pill styles for nav menu items */
.sidebar-area .widget_nav_menu ul,
.sidebar-area .widget_nav_menu .menu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.sidebar-area .widget_nav_menu li {
    display: block;
    position: relative;
    margin: 0 0 10px 0;
}

.sidebar-area .widget_nav_menu li:last-child {
    margin-bottom: 0;
}

.sidebar-area .widget_nav_menu a {
    display: block !important;
    background: var(--cfd-bg-alt) !important;
    border: 1px solid var(--cfd-border) !important;
    color: var(--cfd-text) !important;
    padding: 14px 44px 14px 18px !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.sidebar-area .widget_nav_menu a::before {
    content: "\f061" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
    font-weight: 900;
    color: var(--cfd-accent-2) !important;
    transition: all .2s ease;
    font-size: 12px;
}

.sidebar-area .widget_nav_menu a:hover {
    background: var(--cfd-surface-2) !important;
    border-color: var(--cfd-accent) !important;
    color: var(--cfd-text) !important;
    transform: translateX(2px);
}

.sidebar-area .widget_nav_menu a:hover::before {
    color: var(--cfd-accent-2) !important;
    right: 14px !important;
}

/* Sidebar CTA banner */
.sidebar-area .widget_banner {
    background: linear-gradient(135deg, rgba(104, 77, 244, 0.18), rgba(104, 77, 244, 0.06)) !important;
    border: 1px solid var(--cfd-border-strong) !important;
    text-align: center;
}

.sidebar-area .widget-banner {
    background: transparent !important;
    padding: 0 !important;
}

.sidebar-area .widget-banner .text {
    display: inline-block;
    color: var(--cfd-accent-2) !important;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 12px;
    padding: 5px 12px;
    border: 1px solid var(--cfd-border-strong);
    border-radius: 999px;
    background: var(--cfd-accent-soft);
}

.sidebar-area .widget-banner .title {
    color: var(--cfd-text) !important;
    font-size: 22px !important;
    font-weight: 600;
    margin-bottom: 18px !important;
    line-height: 1.3;
}

/* ---------- Misc ---------- */
.cfd-divider {
    height: 1px;
    background: var(--cfd-border);
    margin: 60px 0;
}

a {
    color: var(--cfd-accent-2);
}

a:hover {
    color: var(--cfd-accent);
}

::selection {
    background: rgba(104, 77, 244, 0.4);
    color: #fff;
}

/* Hide legacy theme bits we no longer need on the new homepage */
.cfd-hide {
    display: none !important;
}

/* ---------- Mobile menu (dark theme) ---------- */
.th-menu-wrapper .th-menu-area {
    background-color: var(--cfd-bg) !important;
    border-right: 1px solid var(--cfd-border);
}
.th-menu-wrapper .mobile-logo {
    background-color: var(--cfd-bg-alt) !important;
    border-bottom: 1px solid var(--cfd-border);
}
.th-menu-wrapper .mobile-logo span {
    color: var(--cfd-text) !important;
}
.th-mobile-menu ul li {
    border-bottom: 1px solid var(--cfd-border);
}
.th-mobile-menu ul li a {
    color: var(--cfd-text) !important;
}
.th-mobile-menu ul li a:hover {
    color: var(--cfd-accent-2) !important;
}
.th-menu-toggle {
    color: var(--cfd-text) !important;
}

/* ---------- Hero mobile padding ---------- */
@media (max-width: 600px) {
    .cfd-hero { padding: 100px 0 60px; }
    .cfd-hero-sub { font-size: 16px; }
    .cfd-section { padding: 80px 0; }
}

/* ---------- CTA band mobile ---------- */
@media (max-width: 600px) {
    .cfd-cta-band { padding: 40px 22px; margin: 0 12px; }
}

/* ---------- Grid 2-column collapse at tablet breakpoint ---------- */
@media (max-width: 767px) {
    .cfd-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Contact sidebar: hide on mobile (hover UX broken on touch) ---------- */
@media (max-width: 600px) {
    #contact-sidebar { display: none; }
}

/* ---------- Contact page info cards (dark theme) ---------- */
.contact-info {
    background: var(--cfd-surface) !important;
    border: 1px solid var(--cfd-border);
    border-radius: var(--cfd-radius);
    padding: 28px 26px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    height: 100%;
    transition: transform .25s ease, border-color .25s ease;
}
.contact-info:hover {
    transform: translateY(-3px);
    border-color: var(--cfd-accent);
}
.contact-info .contact-info_icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cfd-accent), var(--cfd-accent-2)) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 20px;
    flex-shrink: 0;
}
.contact-info .contact-info_icon i {
    color: #fff !important;
}
.contact-info .box-title {
    color: var(--cfd-text) !important;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}
.contact-info .contact-info_text,
.contact-info .contact-info_text a {
    color: var(--cfd-text-dim) !important;
    font-size: 14px;
    line-height: 1.55;
    text-decoration: none;
    display: block;
}
.contact-info .contact-info_text a:hover {
    color: var(--cfd-accent-2) !important;
}

/* ---------- Map iframe: dark border + rounding ---------- */
.map-sec {
    border-radius: var(--cfd-radius-lg);
    overflow: hidden;
    border: 1px solid var(--cfd-border);
    background: var(--cfd-bg-alt);
}
.map-sec iframe {
    width: 100%;
    height: 380px;
    display: block;
    border: 0;
    filter: invert(0.88) hue-rotate(180deg) saturate(0.85);
}

/* ===== UI Polish Pass ===== */

/* H3 — Trust strip: tighter gap + centered on narrow viewports */
@media (max-width: 600px) {
    .cfd-trust-strip {
        gap: 12px;
        justify-content: center;
    }
}

/* H3 — Trust strip bullet separators on desktop */
.cfd-trust-strip span:not(:last-child)::after {
    content: '·';
    margin-left: 12px;
    opacity: 0.4;
}

/* M2 — Header logo + brand name shrink on mobile */
@media (max-width: 600px) {
    .header-logo img { height: 44px !important; }
    .header-logo span { font-size: 17px !important; }
}

/* M4 — FAQ accordion focus ring (WCAG 2.4.7) */
.accordion-button:focus-visible {
    outline: 2px solid var(--cfd-accent);
    outline-offset: 2px;
}

/* M6 — Problem cards: hover state to match .cfd-card */
.cfd-problem {
    transition: transform .25s ease, border-color .25s ease;
}
.cfd-problem:hover {
    transform: translateY(-3px);
    border-color: var(--cfd-accent);
}

/* L1 — Hero / CTA buttons full-width on mobile */
@media (max-width: 600px) {
    .cfd-hero-cta .cfd-btn,
    .cfd-cta-band .cfd-btn-group .cfd-btn {
        width: 100%;
        justify-content: center;
    }
}

/* L3 — Footer logo shrink on mobile */
@media (max-width: 600px) {
    .footer-logo img { height: 44px !important; }
    .footer-logo span { font-size: 16px !important; }
}

/* L4 — .cfd-lead font size on mobile */
@media (max-width: 600px) {
    .cfd-lead {
        font-size: 16px;
        margin-bottom: 28px;
    }
}

/* L5 — Hero CTA primary button size differential */
.cfd-btn-primary {
    padding: 16px 30px;
}

/* ===== Section snap + smooth scroll (Lenis) =====
   Each top-level section fills the viewport so users see one panel at a time.
   Long sections (Featured Projects, FAQ) still grow naturally — min-height,
   not fixed height. Lenis is initialized in index.php for buttery scroll. */

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Fallback for browsers without 100svh: use 100vh */
@supports not (height: 100svh) {
    .cfd-hero,
    .cfd-section {
        min-height: 100vh;
    }
}

/* On very short viewports (e.g. landscape phones), don't force 100svh —
   it crushes content. Let sections size to their content. */
@media (max-height: 640px) {
    .cfd-hero,
    .cfd-section {
        min-height: 0;
    }
}

/* Sections with content-heavy grids: allow them to grow and add breathing
   room top/bottom rather than centering tightly */
.cfd-section:has(.cfd-grid-2 .cfd-project),
.cfd-section:has(.cfd-grid-3 .cfd-project) {
    justify-content: flex-start;
    padding-top: 120px;
    padding-bottom: 120px;
}

/* ===== Contact page polish ===== */
.space {
    padding: 80px 0 40px;
}

.map-sec {
    margin: 30px !important;
    border-radius: var(--cfd-radius-lg);
    overflow: hidden;
    border: 1px solid var(--cfd-border);
    background: var(--cfd-bg-alt);
}

.map-sec iframe {
    width: 100%;
    height: 380px;
    display: block;
    border: 0;
    filter: invert(0.88) hue-rotate(180deg) saturate(0.85);
}

#contact-sec {
    min-height: 0 !important;
    padding: 60px 0 100px !important;
}

.contact-form .th-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1;
    background: linear-gradient(135deg, var(--cfd-accent), var(--cfd-accent-2));
    color: #fff;
    box-shadow: 0 10px 30px -12px rgba(104, 77, 244, 0.7);
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.contact-form .th-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -14px rgba(104, 77, 244, 0.85);
    color: #fff;
}

/* Service-details: relax forced 100svh on the long content section */
.cfd-section:has(.sidebar-area),
.cfd-section:has(.page-content) {
    min-height: 0 !important;
    justify-content: flex-start;
    padding: 80px 0 100px !important;
}