:root {
    --bg: #f5f7fa; /* off-white */
    --text: #1a1a1a; /* deep gray */
    --accent: #2563eb; /* strong blue */
    --muted: #6b7280; /* soft gray */
    --card: #ffffff; /* white cards */

    --DarkText: #0E273E;
    --LightText: #ffffff;
    --MainColorBlue: #0E273E;
    --MainColorGray: #ffffff;
    --border: #0E273E;
    --borderLightGray: #c3c3c39e;
}

html, body {
    font-size: unset;
    font-size: 100%;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: unset;
    font-weight: 700;
    line-height: unset;
    color: unset;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: var(--MainColorBlue);
}


.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: var(--MainColorBlue);
}

.navbar-inverse {
    background-color: var(--MainColorBlue);
    border-color: var(--MainColorBlue);
}

    .navbar-inverse .navbar-nav > li > a {
        color: var(--LightText);
        ;
    }




/* =============================
           BASE
        ============================= */
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    line-height: 1.6;
}

body {
    margin-top: 50px !important;
}



/* =============================
           HEADER
        ============================= */
header {
    text-align: center;
    padding: 5rem 2rem 4rem;
    background: linear-gradient(to bottom, #0E273E, #0E273E);
    border-bottom: 1px solid var(--border);
}

h1 {
    font-size: 4rem;
    margin: 0;
    letter-spacing: -2px;
    color: var(--text);
}

.manifesto {
    font-size: 1.7rem;
    color: var(--LightText);
    margin: 1.5rem 0;
}

.tagline {
    font-size: 1.1rem;
    color: var(--LightText);
}

/* =============================
           BADGE
        ============================= */
.badge2 {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--borderLightGray);
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-radius: 4px;
}

/* =============================
           LAYOUT
        ============================= */
.container {
    max-width: 1000px;
    margin: auto;
    padding: 3rem 2rem;
}

/* =============================
           GRID / CARDS
        ============================= */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.card {
    background: var(--card);
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: 0.25s ease;
}

.card {
    position: relative;
  
    border-radius: 10px;
    padding: 22px 20px;
  
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

    /* 🔥 Accent Bar */
    .card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        border-radius: 10px 0 0 10px;
        background: #2d6cdf; /* you can theme this */
    }

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

    .card h3 {
        margin-top: 0;
        color: var(--MainColorBlue);
    }
    /* Titles */
    .card h3 {
        margin-top: 0;
        margin-bottom: 10px;
      
    }
    /* Text tightening */
    .card p {
        margin: 0 0 10px 0;
        line-height: 1.5;
    }

.card-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff !important;
    background: #2d6cdf !important;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* =============================
           SECTION
        ============================= */
.section {
    text-align: center;
    margin-top: 4rem;
}

    .section h2 {
        margin-bottom: 0.5rem;
    }

    .section p {
        color: var(--muted);
    }

/* =============================
           FOOTER
        ============================= */
.patent-notice {
    margin-top: 4rem;
    padding: 2rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
}

.LightText {
    color: var(--LightText);
}


.DarkText {
    color: var(--DarkText);
}

.udcap-input,
.udcap-select,
.udcap-textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-family: Segoe UI, sans-serif;
    box-sizing: border-box;
}

    .udcap-input:focus,
    .udcap-select:focus,
    .udcap-textarea:focus {
        outline: none;
        border-color: #0078d4;
    }

.udcap-button {
    padding: 10px;
    width: 100%;
    border: none;
    border-radius: 6px;
    background: #0078d4;
    color: white;
    cursor: pointer;
}

    .udcap-button:hover {
        background: #005fa3;
    }

 
.cta-btn {
    display: inline-block;
    margin-top: 35px;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 8px;
    background: #3aa3ff;
    color: #ffffff;
    text-decoration: none;
    transition: 0.2s ease;
    box-shadow: 0 0 10px rgba(58,163,255,0.4);
}

    .cta-btn:hover {
        background: #1e8fff;
        box-shadow: 0 0 16px rgba(58,163,255,0.8);
    }

.section {
   /* padding: 20px 10px;*/
   
}

pre {
    
    border: 1px solid #27314a;
    padding: 20px;
    border-radius: 5px;
    max-width: 900px;
   
    text-align: left;
    overflow-x: auto;
 
 
}
 textarea {
    resize: none;
}
code {
 
    font-family: Consolas, monospace;
}



.udcap-checkbox-group {
    display: grid;
    /* 🔥 responsive columns */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 16px;
    margin-top: 8px;
    margin-left: 40px;
    margin-right: 30px;
}

    .udcap-checkbox-group label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

        /* subtle hover (not heavy boxes) */
        .udcap-checkbox-group label:hover {
            background: rgba(0,0,0,0.04);
        }

    /* checkbox size */
    .udcap-checkbox-group input[type="checkbox"] {
        transform: scale(1.1);
    }

.udcap-section {
    margin-bottom: 10px;
}



.btn-primary {
    background-color: #0066CC;
    color: #fff;
    border: none;
    transition: background-color 0.3s, transform 0.1s;
}

    .btn-primary:active {
        transform: scale(0.98);
    }

.invalid {
    border: thin solid #dc3545;
    background-color: rgba(220,53,69,0.05);
}



 
.oem-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.oem-card {
    flex: 1 1 450px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    min-width: 350px;
}

    .oem-card h3 {
        margin-top: 0;
        margin-bottom: 16px;
    }

    .oem-card input,
    .oem-card select,
    .oem-card textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        margin-top: 4px;
        margin-bottom: 12px;
        font-size: 14px;
    }

    .oem-card label {
        font-weight: 600;
        font-size: 13px;
        color: #334155;
        text-align: left;
    }