/* Self-hosted fonts - same stack as the Omynix dashboard (no CDN). */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

:root{

    --primary-text-color: #111827;
    --bg-color: #f5f5f6;

    --btn-color: #fdfdfd;/* button color*/
    --btn-bg: #111827;/* button bg color*/
    --accent: #17a08f;      /* Omynix teal */
    --accent-hover: #2bc4ab;

    --header-link-hover: #111827;
    --header-link-hover-bg: #17a08f1f;

    --input-hover-bd-color: #17a08f;

    --dropdown-bg: #f3f4f6;
    --dropdown-hover-bg: #dddddd84;

    --faq-h-text: #0e0e0e;
    --faq-content-text: #1e1e1e;

    --hr-color: #e5e7eb;

    --footer-link: #282828;
    --footer-link-hover: #17a08f;

    --header-bg: #edececa5;
    --hero-gradient: #f5f5f6;
    --hero-bg-img: url("../assets/images/background/dots-dark.svg");

}

.tw-dark {
    --primary-text-color: #f3f4f6;
    --bg-color: #101720;   /* terminal slate */

    --btn-color: #0b1118;/* button color*/
    --btn-bg: #f3f4f6;/* button bg color*/
    --accent: #2bc4ab;
    --accent-hover: #17a08f;

    --header-link-hover: #ffffff;
    --header-link-hover-bg: #17a08f33;

    --input-hover-bd-color: #2bc4ab;

    --dropdown-bg: #171d26;
    --dropdown-hover-bg: #2d2d2ddb;

    --faq-h-text: #efefef;
    --faq-content-text: #d4d4d4;

    --hr-color: #e1e1e195;

    --footer-link: #cfcfcf;
    --footer-link-hover: #2bc4ab;

    --header-bg: #101720b3;

    --hero-gradient: #101720;
    --hero-bg-img: url("../assets/images/background/dots.svg");

  }


html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

code, pre, .mono, kbd {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

body.modal-open {
    overflow: hidden;
}

header > .collapsible-header{
    display: flex;
    gap: 1rem;
    width: 100%;
    background-color: inherit;
    place-content: center;
    overflow: hidden;
    transition: width 0.3s ease, height 0.3s ease;
}

hr{
    border-color:var(--hr-color); 
    border-style: solid;
}

.animated-collapse{
    transition: width 0.3s ease;
}


.header-links {
    position: relative;
    display: flex;
    align-items: center;
    min-width: fit-content;
    padding: 8px 15px;
    z-index: 2; 
    cursor: pointer;
    transition: background-color 0.5s, color 0.3s;
}

.header-links::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    width: 100%;
    height: 100%;
    /* color: var(--header-link-hover); */
    background-color: var(--header-link-hover-bg);
    transform: scale(40%);
    opacity: 0;
    border-radius: 8px;
    transition: all 300ms;
}

.header-links:hover{
    color: var(--header-link-hover);
}

.header-links:hover::after {
    transform: scale(100%);
    opacity: 1;
}

.hero-section{
    background-image: var(--hero-bg-img);
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
}

.hero-bg-gradient{
    /* background: linear-gradient(180deg, var(--hero-gradient) 13%, rgba(0,0,0,0.258140756302521) 87%); */
    background: linear-gradient(180deg, var(--hero-gradient) 23%, rgba(0,0,0,0) 87%, var(--hero-gradient) 97%);
}


.gradient-text{
    background: rgb(215,215,215);
    background: linear-gradient(90deg, rgba(215,215,215,1) 18%, rgba(136,136,136,1) 71%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.accent-bg-grad{
    background: rgb(23,160,143);
    background: linear-gradient(90deg, #17a08f91 8%, #2bc4abae 31%, #7badbbbc 76%, #54d2d0ca 89%);
    filter: blur(50px);
    opacity: 0.5;
}

#dashboard {
    /* transform-origin: bottom center; */
    transform: perspective(1200px) translateX(0px) translateY(12px) scale(0.8)
        rotate(0deg) rotateX(70deg);
    transition: transform 0.5s;
}

.opacity-0{
    opacity: 0 !important;
}

.opacity-100{
    opacity: 100 !important;
}

.btn{
    padding: 10px 15px;
    width: max-content;
    border-radius: 10px;
    color: var(--btn-color);
    background-color: var(--btn-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.btn:hover{

}

.btn:disabled{
    cursor: default;
}

.input{
    padding: 10px;
    background-color: transparent;
    border-radius: 5px;
    outline: none;
    min-width: 100px;
    border: 1px solid #979797;
    transition: border 0.3s;
}

.input:active, .input:focus, .input:focus-within{
    border: 1px solid var(--input-hover-bd-color) !important;
}

/* ------------------- scrollbar ------------- */
.scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 20px;
}

.scrollbar::-webkit-scrollbar-track {
    border-radius: 25px;
/* background: #f7f4ed; */
}

.scrollbar::-webkit-scrollbar-thumb {
    background: #d7d7d7;
    border-radius: 25px;
}


/* ---------------- dropdown --------------------- */
.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-toggle {
    width: 100%;
    outline: none;
    /* background-color: #000; */
    /* border: 1px solid #ccc; */
}

.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: var(--dropdown-bg);
    /* border: 1px solid #c9c9c9; */
    list-style-type: none;
    padding: 0;
    width: 100%;
    left: 0px;
    /* top: 105%; */
    border-radius: 10px;
    overflow: hidden;
}

.dropdown-menu li {
    padding: 8px 12px;
    cursor: pointer;
}

.dropdown-menu li:hover {
    background-color: var(--dropdown-hover-bg);
}

/* -------------- carousel ------------------*/
.carousel-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    max-width: 800px;
}
  
.carousel {
    display: inline-block;
    animation: scroll 30s linear infinite;
}
  
.carousel-img {
    display: inline-block;
    margin: 0 20px;
}
  
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* ------ animated border ------- */

.animated-border {
    position: relative;
    overflow: visible;
}


.animated-border::after{
    content: '';
    position: absolute;
    top: 0px; 
    left: -100%; 
    width: 30%;
    height: 100%;
    border-radius: inherit; 
    background-color: #17a08f;
    background-repeat: no-repeat;
    /* background-size: 200% 200%; */
    background-position: 0% 0%;
    filter: blur(1.5rem);
    opacity: 0.8;
    box-shadow: inset 0px 0px 20px 5px #17a08f;
    /* transform: rotate(90deg); */
    z-index: -2;
    pointer-events: none;
    animation: slide 10s ease-in-out infinite;
   
}

.animated-border::before{
    filter: blur(1.5rem);
    opacity: 0.3;
    will-change: transform;
}

@keyframes slide{
    0% {
        left: -100%; /* Start completely outside the left edge */
        right: 100%; /* End completely outside the right edge */
    }
   
    100% {
        left: 100%; /* Move completely outside the right edge */
        right: -100%; /* End completely outside the left edge */
    }
}

.footer-link{
    width: -moz-fit-content;
    width: fit-content;
    color: var(--footer-link);
    transition: color 0.3s;
}

.footer-link:hover{
    color: var(--footer-link-hover);
}


/* Style for the collapsible content such as faq commonly known as: accordion */

.faq-accordion {
    background-color: inherit;
    color: var(--faq-h-text);
    cursor: pointer;
    padding: 15px 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: height 0.4s;
}

.faq .content {
    padding: 0px 18px;
    color: var(--faq-content-text);
    height: max-content;
    overflow: hidden;
    background-color: transparent;
    text-align: justify;
    max-height: 0px;
    transition: max-height 0.4s, padding 0.4s;
}


@media not all and (min-width: 1024px) {
    header .collapsible-header {
        position: fixed;
        top: 60px;
        left: 0px;
        flex-direction: column;
        opacity: 0;
        height: 0vh;
        min-height: 0vh;
        /* height: 100dvh; */
        width: 100vw;
        justify-content: space-between;
        padding: 5px;
        padding-top: 5%;
        padding-bottom: 5%;
        place-items: center;
        text-align: center;
        background-color: var(--header-bg);
        /* color: #373636; */
        overflow-y: auto;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0px 2px 3px 2px #9f9f9f7c;
    }

    /* .header-links{
        color: var(--he);
    } */
    
}
/* ================= Omynix additions ================= */

/* Install command box - mono, copy button on the right */
.install-box {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 860px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13.5px;
    background: #0b1118;
    color: #d7e1e8;
    border: 1px solid #243240;
    overflow-x: auto;
    white-space: nowrap;
}
.install-box { scrollbar-width: none; }
.install-box::-webkit-scrollbar { display: none; }
.install-box .prompt-sym { color: #17a08f; user-select: none; flex: none; }
.install-box code { flex: 1 1 0; min-width: 0; overflow-x: auto; }
.copy-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid #243240;
    background: #101720;
    color: #9fb3c8;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.copy-btn:hover { color: #2bc4ab; border-color: #2bc4ab; }
.copy-btn.copied { color: #3ecf8e; border-color: #3ecf8e; }

/* Dashboard mockup - a miniature of the real fleet view */
.fleet-mock {
    display: flex;
    width: 100%;
    height: 100%;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    background: #f5f5f6;
    color: #1f2937;
}
.tw-dark .fleet-mock { background: #0d141d; color: #cbd5e1; }

.fleet-mock .fm-side {
    width: 168px;
    flex: none;
    padding: 14px 10px;
    background: #eceef0;
    border-right: 1px solid #dde1e6;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tw-dark .fleet-mock .fm-side { background: #0a0f16; border-color: #1c2632; }
.fleet-mock .fm-side img { height: 22px; object-fit: contain; align-self: flex-start; }
.fleet-mock .fm-nav {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; color: #4b5563;
    font-size: 11.5px;
}
.tw-dark .fleet-mock .fm-nav { color: #8fa3b8; }
.fleet-mock .fm-nav.active { background: #17a08f22; color: #17a08f; font-weight: 600; }
.tw-dark .fleet-mock .fm-nav.active { color: #2bc4ab; }

.fleet-mock .fm-main { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fleet-mock .fm-top { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.fleet-mock .fm-top .fm-meta { margin-left: auto; font-weight: 400; color: #6b7280; font-size: 11px; }
.tw-dark .fleet-mock .fm-top .fm-meta { color: #7d8fa5; }

.fm-node {
    display: grid;
    grid-template-columns: 10px 118px 1fr 1fr 92px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e3e7ec;
}
.tw-dark .fm-node { background: #131c27; border-color: #1e2a38; }
.fm-node .dot { width: 8px; height: 8px; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 6px #3ecf8e88; }
.fm-node .dot.warn { background: #e8b86d; box-shadow: 0 0 6px #e8b86d88; }
.fm-node .fm-name { font-weight: 600; font-size: 12px; }
.fm-node .fm-name small { display: block; font-weight: 400; color: #6b7280; font-size: 10px; }
.tw-dark .fm-node .fm-name small { color: #7d8fa5; }

.fm-bar { height: 6px; border-radius: 3px; background: #e3e7ec; overflow: hidden; position: relative; }
.tw-dark .fm-bar { background: #1e2a38; }
.fm-bar > i { display: block; height: 100%; border-radius: 3px; background: #17a08f; }
.fm-bar > i.amber { background: #e8b86d; }
.fm-bar > i.red { background: #ef4444; }
.fm-metric { display: flex; flex-direction: column; gap: 4px; }
.fm-metric span { font-size: 10px; color: #6b7280; }
.tw-dark .fm-metric span { color: #7d8fa5; }

.fm-docker { display: flex; gap: 4px; flex-wrap: wrap; }
.fm-chip {
    font-size: 9.5px; padding: 2px 6px; border-radius: 4px;
    background: #17a08f1c; color: #17a08f; border: 1px solid #17a08f44;
}
.tw-dark .fm-chip { color: #2bc4ab; }

.fm-shield {
    display: flex; align-items: center; gap: 10px;
    margin-top: auto;
    padding: 10px 12px; border-radius: 8px;
    background: #ef444414; border: 1px solid #ef444440;
    color: #b91c1c;
}
.tw-dark .fm-shield { color: #f87171; }
.fm-shield .fm-shield-text { font-size: 11px; }
.fm-shield .fm-shield-text b { font-size: 12px; }
.fm-shield .fm-consensus { margin-left: auto; font-size: 10px; opacity: .8; }

.fm-term {
    padding: 8px 12px; border-radius: 8px;
    background: #0b1118; color: #9fb3c8;
    font-size: 11px; min-height: 34px;
    border: 1px solid #1e2a38;
}
.fm-term .ok { color: #3ecf8e; }
.fm-term .t { color: #2bc4ab; }
.fm-term .typed-cursor { color: #2bc4ab; }

.fm-node-off { opacity: .55; }
.fm-node .dot.off { background: #6b7280; box-shadow: none; }
.fm-chip-off { background: transparent; border-color: #6b728066; color: #6b7280; }

.fm-strip {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 7px 12px; border-radius: 8px;
    background: #ffffff; border: 1px solid #e3e7ec;
    font-size: 10.5px; color: #4b5563;
}
.tw-dark .fm-strip { background: #131c27; border-color: #1e2a38; color: #8fa3b8; }
.fm-dom b { font-weight: 600; }
.fm-dom b.ok { color: #17a08f; }
.tw-dark .fm-dom b.ok { color: #2bc4ab; }
.fm-dom b.amber { color: #e8b86d; }

/* Shield consensus diagram */
.consensus-flow { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; justify-content: center; }
.consensus-node {
    flex: 1 1 150px; max-width: 210px;
    padding: 14px; border-radius: 10px; text-align: center;
    background: #ffffff; border: 1px solid #e3e7ec;
}
.tw-dark .consensus-node { background: #131c27; border-color: #1e2a38; }
.consensus-node .mono { font-size: 11px; color: #6b7280; }
.tw-dark .consensus-node .mono { color: #7d8fa5; }
.consensus-arrow { align-self: center; font-size: 22px; color: #17a08f; }
.consensus-hub {
    flex: 1 1 200px; max-width: 260px;
    padding: 16px; border-radius: 10px; text-align: center;
    background: #17a08f14; border: 1px solid #17a08f55;
}
.consensus-drop {
    margin-top: 14px; padding: 10px 14px; border-radius: 8px;
    background: #ef444414; border: 1px solid #ef444440;
    color: #b91c1c; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
    text-align: center;
}
.tw-dark .consensus-drop { color: #f87171; }

/* Comparison matrix */
.compare-table { width: 100%; max-width: 960px; margin: 0 auto; border-collapse: collapse; font-size: 14px; }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--hr-color); }
.compare-table th { font-weight: 600; }
.compare-table td:first-child { color: #6b7280; font-weight: 500; }
.tw-dark .compare-table td:first-child { color: #9ca3af; }
.compare-table .yes { color: #17a08f; font-weight: 600; }
.tw-dark .compare-table .yes { color: #2bc4ab; }
.compare-table .no { color: #9ca3af; }
.compare-table .part { color: #e8b86d; }
.compare-scroll { overflow-x: auto; width: 100%; }

@media (max-width: 768px) {
    .consensus-arrow { transform: rotate(90deg); }
    .install-box { white-space: normal; }
    .install-box code { overflow-x: visible; word-break: break-all; }
    .fm-node { grid-template-columns: 10px 90px 1fr 80px; }
    .fm-node .fm-metric + .fm-metric { display: none; }
    .fm-strip { display: none; }
    .fm-consensus { display: none; }
    .fleet-mock .fm-side { display: none; }
}

/* Core capability cards (2x2 grid) */
.cap-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 26px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e3e7ec;
    color: inherit;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tw-dark .cap-card { background: #131c27; border-color: #1e2a38; }
.cap-card:hover { transform: translateY(-3px); border-color: #17a08f88; box-shadow: 0 10px 30px #17a08f22; }
.cap-icon {
    flex: none;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 26px;
    color: #17a08f;
    background: #17a08f16;
    border: 1px solid #17a08f33;
}
.tw-dark .cap-icon { color: #2bc4ab; }
.cap-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cap-body h3 { font-size: 20px; font-weight: 600; margin: 0; }
.cap-body p { color: #4b5563; font-size: 14px; line-height: 1.55; margin: 0; }
.tw-dark .cap-body p { color: #9fb3c8; }
.cap-link {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500;
    color: #17a08f;
}
.tw-dark .cap-link { color: #2bc4ab; }
.cap-card:hover .cap-link i { transform: translate(2px, -2px); }
.cap-link i { transition: transform .25s; }
@media (max-width: 640px) {
    .cap-card { flex-direction: column; gap: 14px; }
}