/* ==========================================================================
   Codolo — ERP & CRM implementation consultancy layer
   Template: "Optech" by MirrorTheme — trimmed. Loaded after app.min.css.
   ========================================================================== */

:root {
    /* recolour the template (was #2B4DFF electric blue) */
    --accent-color: #0d9488;
    --accent-bg: #0d9488;
    --heading-color: #0b1b2b;
    --body-color: #566173;
    --dark-bg: #0b1b2b;
    --dark-bg2: #102a3d;
    --dark-bg3: #0b1b2b;
    --light-bg1: #f6f8f7;
    --light-bg2: #eaefee;
    --light-bg3: #e9f6f4;

    --cd-ink: #0b1b2b;
    --cd-teal: #0d9488;
    --cd-teal-d: #0b7d73;
    --cd-line: #e2e7e5;
    --cd-line-d: #1f3c4f;
    --cd-mut: #6b7684;
    --cd-paper: #ffffff;
    --cd-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cd-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- base ---------- */
html { overflow-x: hidden; }
body {
    font-family: var(--cd-sans) !important;
    color: var(--body-color);
    background: var(--cd-paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.optech-preloader-wrap { background: var(--cd-paper); }
::selection { background: var(--cd-teal); color: #fff; }

h1, h2, h3, h4, h5, h6, .post__title {
    font-family: var(--cd-sans) !important;
    color: var(--cd-ink);
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    line-height: 1.14;
}
p { color: var(--body-color); }
a { color: var(--cd-ink); text-decoration: none; }
a:hover { color: var(--cd-teal); }

/* eyebrow / kicker */
.cd-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--cd-mono);
    font-size: 12px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--cd-teal);
    margin-bottom: 22px;
}
.cd-kicker::before { content: "▸"; font-size: 10px; }

/* ---------- buttons — kill the template .btn-wraper anim, keep it clean ---------- */
.optech-default-btn,
a.optech-default-btn,
button.optech-default-btn,
#optech-main-form-btn,
.cd-btn {
    position: relative; overflow: visible;
    display: inline-flex !important; align-items: center; gap: 10px;
    padding: 15px 26px !important;
    border-radius: 4px !important;
    background: var(--cd-teal) !important;
    color: #fff !important;
    border: 1px solid var(--cd-teal) !important;
    font-family: var(--cd-sans) !important;
    font-size: 15px !important; font-weight: 600 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    line-height: 1.1 !important;
    box-shadow: none !important;
    transition: background-color .18s ease, transform .18s ease !important;
}
.optech-default-btn:hover, a.optech-default-btn:hover, .cd-btn:hover {
    background: var(--cd-teal-d) !important; color: #fff !important; transform: translateY(-1px);
}
/* the template slides .btn-wraper up + fades it to 0 on hover and swaps in a
   ::after clone from data-text — we keep the wrapper text put and visible */
.optech-default-btn .btn-wraper,
.optech-default-btn:hover .btn-wraper,
.optech-default-btn:focus .btn-wraper {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    display: inline !important;
}
.optech-default-btn::before, .optech-default-btn::after,
.optech-default-btn:hover::before, .optech-default-btn:hover::after,
.optech-default-btn:focus::before, .optech-default-btn:focus::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

.optech-white-btn, a.optech-white-btn {
    background: transparent !important; color: var(--cd-ink) !important;
    border: 1px solid var(--cd-line) !important;
}
.optech-white-btn:hover { background: var(--light-bg1) !important; color: var(--cd-ink) !important; border-color: #c9d2cf !important; }
.optech-header-btn, a.optech-header-btn { padding: 11px 20px !important; font-size: 14px !important; }

/* text link with arrow */
.cd-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--cd-sans); font-weight: 600; font-size: 15px;
    color: var(--cd-teal); border-bottom: 1px solid currentColor; padding-bottom: 2px;
    transition: gap .15s ease;
}
.cd-link:hover { color: var(--cd-teal-d); gap: 12px; }

/* ---------- header ---------- */
.optech-header-section { background: rgba(255,255,255,.0); }
.optech-header-section.sticky-menu { background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--cd-line), 0 10px 40px -18px rgba(11,27,43,.14); }
.optech-header-top { background: var(--cd-ink) !important; }
.optech-header-top, .optech-header-top a, .optech-header-top li, .optech-header-top i { color: #cfe6e2 !important; font-family: var(--cd-mono); font-size: 12.5px; letter-spacing: .02em; }
.optech-header-top i { color: var(--cd-teal) !important; }
.site-menu-main .nav-link-item { font-family: var(--cd-sans) !important; font-weight: 500 !important; font-size: 15px !important; color: var(--cd-ink) !important; }
.site-menu-main .nav-link-item:hover, .site-menu-main .nav-item.active > .nav-link-item { color: var(--cd-teal) !important; }
.optech-header-search { color: var(--cd-ink); }

/* dropdown sub-menu */
.site-menu-main .sub-menu {
    background: #fff !important;
    border: 1px solid var(--cd-line) !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 50px -20px rgba(11,27,43,.28) !important;
    padding: 8px !important;
}
.site-menu-main .sub-menu--item > a {
    font-family: var(--cd-sans) !important;
    font-size: 14.5px !important;
    color: var(--cd-ink) !important;
    border-radius: 5px !important;
    padding: 9px 12px !important;
}
.site-menu-main .sub-menu--item > a:hover { background: var(--light-bg3) !important; color: var(--cd-teal) !important; }
.site-menu-main .sub-menu--item > a .menu-item-text { color: inherit !important; }
@media (min-width: 992px) {
    .site-menu-main .nav-item-has-children > .drop-trigger { display: inline-flex !important; align-items: center; gap: 4px; }
}

/* ---------- hero ---------- */
.cd-hero {
    position: relative;
    padding: 205px 0 92px;
    background:
        radial-gradient(720px 380px at 88% 0%, rgba(13,148,136,.10) 0%, rgba(13,148,136,0) 60%),
        var(--cd-paper);
    border-bottom: 1px solid var(--cd-line);
    overflow: hidden;
}
.cd-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(var(--cd-line) 1px, transparent 1px), linear-gradient(90deg, var(--cd-line) 1px, transparent 1px);
    background-size: 56px 56px; opacity: .5;
    -webkit-mask-image: radial-gradient(70% 60% at 20% 20%, #000, transparent 75%);
            mask-image: radial-gradient(70% 60% at 20% 20%, #000, transparent 75%);
}
.cd-hero .container { position: relative; z-index: 1; }
.cd-hero h1 {
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.08; letter-spacing: -0.03em;
    color: var(--cd-ink); max-width: 17ch; margin: 0 0 22px;
}
.cd-hero h1 .t { color: var(--cd-teal); }
.cd-hero-lead { font-size: 19px; line-height: 1.6; color: var(--body-color); max-width: 52ch; margin: 0 0 32px; }
.cd-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }

/* platform strip */
.cd-platstrip { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--cd-line); }
.cd-platstrip .lbl { font-family: var(--cd-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cd-mut); margin-bottom: 14px; display: block; }
.cd-platstrip .row2 { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.cd-platstrip .p { font-family: var(--cd-mono); font-size: 13px; color: var(--cd-ink); border: 1px solid var(--cd-line); padding: 8px 12px; border-radius: 4px; background: var(--cd-paper); }

/* ---------- generic section head ---------- */
.cd-head { max-width: 760px; margin-bottom: 54px; }
.cd-head h2 { font-size: clamp(26px, 3.8vw, 44px); line-height: 1.1; margin: 0; }
.cd-head p { margin-top: 16px; color: var(--cd-mut); font-size: 17px; }
.cd-section { padding: 108px 0; }
.cd-section.alt { background: var(--light-bg1); border-top: 1px solid var(--cd-line); border-bottom: 1px solid var(--cd-line); }
.cd-section.dark { background: var(--cd-ink); }
.cd-section.dark h2, .cd-section.dark h3, .cd-section.dark h4 { color: #f2f5f4; }
.cd-section.dark p { color: #a9bcc4; }
.cd-section.dark .cd-head p { color: #93a9b2; }
@media (max-width: 991px) { .cd-section { padding: 66px 0; } }

/* ---------- solutions : table-like rows ---------- */
.cd-sol { border-top: 1px solid var(--cd-line); }
.cd-sol-row {
    display: grid; grid-template-columns: 56px 1.1fr 1.9fr; gap: 24px;
    align-items: start; padding: 30px 0; border-bottom: 1px solid var(--cd-line);
    transition: background-color .18s ease;
}
.cd-sol-row:hover { background: var(--light-bg3); }
.cd-sol-row .n { font-family: var(--cd-mono); font-size: 13px; color: var(--cd-teal); padding-top: 3px; }
.cd-sol-row h3 { font-size: 20px; margin: 0; color: var(--cd-ink); }
.cd-sol-row p { margin: 0; color: var(--cd-mut); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 767px) {
    .cd-sol-row { grid-template-columns: 40px 1fr; }
    .cd-sol-row p { grid-column: 1 / -1; padding-left: 64px; }
}

/* ---------- platforms grid ---------- */
.cd-plat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--cd-line-d); }
.cd-plat-grid .c {
    padding: 30px 24px; border-right: 1px solid var(--cd-line-d); border-bottom: 1px solid var(--cd-line-d);
    font-family: var(--cd-sans);
}
.cd-plat-grid .c:nth-child(4n) { border-right: none; }
.cd-plat-grid .c .nm { font-size: 17px; font-weight: 600; color: #f2f5f4; }
.cd-plat-grid .c .ty { display: block; margin-top: 6px; font-family: var(--cd-mono); font-size: 12px; color: #7fb8b1; letter-spacing: .03em; }
@media (max-width: 991px) { .cd-plat-grid { grid-template-columns: repeat(2, 1fr); } .cd-plat-grid .c:nth-child(4n) { border-right: 1px solid var(--cd-line-d); } .cd-plat-grid .c:nth-child(2n) { border-right: none; } }
@media (max-width: 520px) { .cd-plat-grid { grid-template-columns: 1fr; } .cd-plat-grid .c { border-right: none !important; } }

/* ---------- delivery : vertical numbered timeline ---------- */
.cd-timeline { position: relative; margin-left: 8px; }
.cd-timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 1px; background: var(--cd-line); }
.cd-phase { position: relative; padding: 0 0 34px 56px; }
.cd-phase:last-child { padding-bottom: 0; }
.cd-phase .mk {
    position: absolute; left: 6px; top: 2px; width: 20px; height: 20px;
    border: 1px solid var(--cd-teal); background: var(--cd-paper); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.cd-phase .mk::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cd-teal); }
.cd-phase .ph { font-family: var(--cd-mono); font-size: 12px; color: var(--cd-mut); letter-spacing: .06em; }
.cd-phase h3 { font-size: 19px; margin: 4px 0 8px; color: var(--cd-ink); }
.cd-phase p { margin: 0; color: var(--cd-mut); font-size: 15.5px; line-height: 1.6; }

/* ---------- industries ---------- */
.cd-ind { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--cd-line); padding-top: 34px; }
.cd-ind .i {
    font-family: var(--cd-sans); font-size: 15px; color: var(--cd-ink);
    border: 1px solid var(--cd-line); border-radius: 999px; padding: 9px 18px; background: var(--cd-paper);
}

/* ---------- about prose ---------- */
.cd-prose p { font-size: 18px; line-height: 1.72; color: var(--body-color); margin-bottom: 22px; }
.cd-prose p:last-child { margin: 0; }
.cd-prose .lead { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.4; color: var(--cd-ink); font-weight: 500; letter-spacing: -0.015em; }
.cd-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--cd-line); }
.cd-list li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--cd-line); color: var(--body-color); font-size: 16px; }
.cd-list li::before { content: "—"; color: var(--cd-teal); flex-shrink: 0; }

/* ---------- end cta ---------- */
.cd-cta { padding: 96px 0; background: var(--cd-ink); text-align: center; }
.cd-cta h2 { color: #f2f5f4; font-size: clamp(28px, 4.4vw, 48px); margin: 0 0 14px; }
.cd-cta p { color: #a9bcc4; max-width: 52ch; margin: 0 auto 26px; }
.cd-cta .mail { display: inline-block; font-family: var(--cd-mono); font-size: clamp(18px, 2.6vw, 26px); color: var(--cd-teal); border-bottom: 1px solid rgba(13,148,136,.5); padding-bottom: 4px; margin-bottom: 26px; }

/* ---------- breadcrumb / page header ---------- */
.optech-breadcrumb {
    padding: 168px 0 60px !important;
    text-align: left !important;
    background: var(--cd-ink) !important;
    border-bottom: 1px solid var(--cd-line-d);
}
.optech-breadcrumb::before, .optech-breadcrumb::after { display: none !important; }
.optech-breadcrumb .post__title { color: #f4f6f5; font-size: clamp(34px, 5vw, 56px) !important; }
.optech-breadcrumb .breadcrumbs ul { justify-content: flex-start !important; margin-top: 16px; }
.optech-breadcrumb .breadcrumbs li, .optech-breadcrumb .breadcrumbs a { color: #8fa7b0; font-family: var(--cd-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.optech-breadcrumb .breadcrumbs a:hover { color: var(--cd-teal); }
@media (max-width: 991px) { .optech-breadcrumb { padding: 132px 0 44px !important; } }

/* ---------- contact form ---------- */
.cd-form label { display: block; font-family: var(--cd-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--cd-mut); margin-bottom: 8px; }
.cd-form label span { color: var(--cd-teal); }
.cd-form .form-control, .cd-form input, .cd-form textarea {
    width: 100%; background: var(--cd-paper);
    border: 1px solid var(--cd-line); border-radius: 4px;
    color: var(--cd-ink); padding: 13px 15px;
    font-family: var(--cd-sans); font-size: 16px;
}
.cd-form input::placeholder, .cd-form textarea::placeholder { color: #9aa4af; }
.cd-form input:focus, .cd-form textarea:focus { outline: none; border-color: var(--cd-teal); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.cd-form textarea { min-height: 150px; resize: vertical; }
.cd-form-message { margin-top: 16px; font-family: var(--cd-sans); font-weight: 600; font-size: 15px; }
.cd-form-message.success { color: #0b7d73; }
.cd-form-message.error { color: #c0392b; }
.cd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.optech-footer-section { background: var(--cd-ink); border-top: 1px solid var(--cd-line-d); }
.optech-footer-section, .optech-footer-section p, .optech-footer-section a, .optech-footer-section li { color: #a9bcc4; }
.optech-footer-section .optech-footer-title h5, .optech-footer-section h5 { color: #f2f5f4; font-family: var(--cd-mono) !important; font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; }
.optech-footer-section a:hover { color: var(--cd-teal); }
.optech-footer-bottom { border-top: 1px solid var(--cd-line-d); }
.optech-footer-bottom p { font-family: var(--cd-mono); font-size: 12px; letter-spacing: .03em; }
.cd-foot-mail { font-family: var(--cd-mono); color: #f2f5f4 !important; }

/* ---------- misc theme cleanup ---------- */
.optech-divider { border-top: 1px solid var(--cd-line); }
.progress-wrap path { stroke: var(--cd-teal); }