:root {
    /* Core palette */
    --color-bg: #000;
    --color-bg-alt: #1c1c1c;
    --color-surface: #1e1e1e;
    --color-surface-alt: #161616;
    --color-border: #2f2f2f;
    --color-border-strong: #3a3a3a;
    --color-text: #ffffff;
    --color-text-dim: #b5b5b5;
    --color-accent: #c5151f;
    --color-accent-hover: #ff3141;
    --color-focus: #ff3141;
    --color-danger: #e50000;
    --transition-base: 0.25s cubic-bezier(.4,.2,.2,1);
}

section{
    padding-block:8rem;
}

    section:only-of-type, section:first-of-type {
        padding-top: 3rem;
        
    }

.hero {
    background: linear-gradient(180deg, #000000 0%, #3B0000 100%);
}

.container {
    padding-inline: 1.5rem;
}

/* Base */
html, body {
    background: var(--color-bg);
    color: var(--color-text);
}


body {
    background-image: url('/img/sta-bg.png');
    background-repeat: repeat;
    background-position: top left;
    background-size: auto;
}

/* Links */
a { color: var(--color-accent); }
a:hover, a:focus { color: var(--color-accent-hover); text-decoration: none; }

.rounded-more{
    border-radius:1rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 { color:#fff; }
p { max-width:75ch; }

.g-2{
    gap:.5rem;
}

.g-3 {
    gap: 1rem;
}

.mw-50rem{
    max-width:50rem;
}

/* Surfaces */
.card {
    background: #0e0e0e;
    border: 1px solid #1e1e1e;
    color: var(--color-text);
    border-radius: .85rem;
}
.card .card-title { color:#fff; }
.surface { background:var(--color-surface); }
.surface-alt { background:var(--color-surface-alt); }

.bg-light { background:var(--color-surface-alt)!important; color:var(--color-text)!important; }
.text-dark { color:var(--color-text)!important; }
.text-muted { color:var(--color-text-dim)!important; }

/* Lists */
.list-group,.list-group-item { background:var(--color-surface); color:var(--color-text); border-color:var(--color-border); }
.list-group-item:hover { background:var(--color-surface-alt); }

/* Tables */
table { color:var(--color-text); }
.table,.table-striped > tbody > tr:nth-of-type(odd) > * { background:var(--color-surface); color:var(--color-text); }
.table thead th { background:var(--color-surface-alt); border-bottom:1px solid var(--color-border-strong); }
.table td,.table th { border-color:var(--color-border); }

/* Forms */
.form-control, .form-select, textarea, input {
    background: #181818;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius:.5rem;
}
.form-control:focus,.form-select:focus { background:#1f1f1f; color:#fff; border-color:var(--color-accent); box-shadow:0 0 0 .2rem rgba(197,21,31,.25); }
.form-check-input { background:#222; border-color:var(--color-border); }
.form-check-input:checked { background-color:var(--color-accent); border-color:var(--color-accent); }

/* Buttons */
.btn,.btn:focus { border-radius:2rem; }
.btn-primary { background:var(--color-accent); border-color:var(--color-accent); }
.btn-primary:hover,.btn-primary:focus { background:var(--color-accent-hover); border-color:var(--color-accent-hover); }
.btn-outline-light { color:#fff; border-color:#fff; }
.btn-outline-light:hover { background:#fff; color:#000; }
.btn-danger { background:var(--color-accent); border-color:var(--color-accent); }
.btn-danger:hover { background:var(--color-accent-hover); border-color:var(--color-accent-hover); }


/* Navbar adjustments (if not already in component-specific CSS) */
.navbar {
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--color-border);
}

    .navbar .nav-link {
        color: #fff !important;
        border-radius:1rem;
        padding:.75rem 1rem;
    }

        .navbar .nav-link:hover,
        .navbar .nav-link:focus {
            background: var(--color-accent);
            color: #fff !important;
        }

        .navbar .nav-link.active {
            background: var(--color-accent);
            color: #fff !important;
            font-weight:700;
        }

/* Dropdowns */
.dropdown-menu {
    background: #111;

    border: 1px solid var(--color-border);
}

.dropdown-item {
    color: #f0f0f0;
    padding-block:1rem;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background: var(--color-accent) !important;
        color: #fff;
    }


/* Modals */
.modal-content { background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-border); }

/* Alerts */
.alert { background:var(--color-surface-alt); color:var(--color-text); border:1px solid var(--color-border); }
.alert-danger { background:#2a0c0e; border-color:#5c1a1f; color:#ffb5b8; }

/* Focus */
:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; }

/* Utilities */
.bg-black { background:#000!important; }
.accent-border { border:1px solid var(--color-accent); }
.accent-gradient { background:linear-gradient(135deg,#c5151f 0%,#7a0e13 100%); color:#fff; }
.text-accent { color:#EB1C24!important; }

/* Navigation items */
.nav-item { text-decoration:none; transition:all .3s; }
.nav-item a { color:#fff!important; }
#nav-icon { width:18px; height:18px; transition:.2s ease-in-out; position:relative; cursor:pointer; }
#nav-icon span { position:absolute; height:2px; width:100%; background:white; left:0; transition:.2s ease-in-out; }
#nav-icon span:nth-child(1){ top:0; } #nav-icon span:nth-child(2),#nav-icon span:nth-child(3){ top:8px;} #nav-icon span:nth-child(4){ bottom:0;}
#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(4){ top:14px; width:0; left:50%; }
#nav-icon.open span:nth-child(2){ transform:rotate(45deg); }
#nav-icon.open span:nth-child(3){ transform:rotate(-45deg); }

/* Blazor error */
h1:focus { outline:none; }
.valid.modified:not([type=checkbox]) { outline:1px solid #26b050; }
.invalid { outline:1px solid #e50000; }
.validation-message { color:#e50000; }
.blazor-error-boundary { background:#b32121; padding:1rem 1rem 1rem 3.7rem; color:white; }
.blazor-error-boundary::after { content:"An error has occurred."; }

.mw-75rem { max-width:75rem; }

/* ------------------------------ Reusable Homepage Components (moved from Home.razor.css) ------------------------------ */

/* Hero CTA buttons */
.hero-cta .btn {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .95rem 1.4rem;
    border-radius: 5rem;
    position: relative;
    
    line-height: 1.2;
}

.btn-gearbox-check {
    background: #b30006;
    color: #fff;
    border: 1px solid #e10008;
    box-shadow: 0 4px 14px -4px rgba(255,40,40,.4),0 0 0 1px rgba(255,255,255,.06) inset;
    text-decoration: none;
    transition: background-color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);
    font-size: 1.2rem;
    font-weight: 600;
    text-shadow: 1px 1px black;
}
    .btn-gearbox-check:hover, .btn-gearbox-check:focus {
        background: #db0008;
        color: #fff;
        box-shadow: 0 6px 18px -4px rgba(255,60,60,.55);
        transform: translateY(-2px);
    }

.btn-explore-services {
    background: rgba(255,255,255,.04);
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    transition: background-color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);
    text-decoration: none;
}

    .btn-explore-services:hover, .btn-explore-services:focus {
        background: rgba(255,255,255,.09);
        border-color: rgba(255,255,255,.5);
        color: #fff;
        transform: translateY(-2px);
    }

    .btn-explore-services .cta-arrow {
        display: inline-flex;
        transition: transform var(--transition-base);
    }

    .btn-explore-services:hover .cta-arrow, .btn-explore-services:focus .cta-arrow {
        transform: translateX(3px);
    }

.hero-cta .cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-cta .btn:focus-visible {
    outline: 2px solid #ff3141;
    outline-offset: 2px;
}

/* Hero stats boxes */
.hero-stats { --stat-border:rgba(255,255,255,.12); }
.stat-box {
    background: linear-gradient(313deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));
    /*border: 1px solid rgba(255, 255, 255, .1);*/
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    min-width: 150px;
    max-width: 180px;
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: border-color var(--transition-base),background-color var(--transition-base),transform var(--transition-base);
}
.stat-value { font-size:1.15rem; font-weight:700; line-height:1.15; color:#fff; letter-spacing:.3px; }
.stat-label { font-size:.75rem; letter-spacing:.25px; color:#b5b5b5; line-height:1.15rem; }
/* Optional hover (kept disabled as per original) */
/* .stat-box:hover { border-color:#c5151f; background:rgba(197,21,31,.08); transform:translateY(-3px);} */

/* Feature section cards */
.feature-section {
    background: #101010;
}

.feature-section .feature-card { 
    background:#161616; 
    border:1px solid #232323; 
    transition:border-color var(--transition-base),background-color var(--transition-base); 
}

    .feature-section .feature-icon {
        width: 48px;
        height: 48px;
        background: #290709;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* How it works */
.how-section {
    padding-block: 8rem;
    background: #0d0d0d;
}
.how-steps .step-card {
    position: relative;
    background: #141414;
    border: 1px solid #242424;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: border-color var(--transition-base),background-color var(--transition-base),transform var(--transition-base);
    min-height: 150px;
}

    .how-steps .step-card:hover, .how-steps .step-card:focus-within {
        border-color: #c5151f;
        background: #1b1b1b;
        transform: translateY(-4px);
    }

.step-badge {
    /*position: absolute;*/

    background: rgb(251 44 54 / 15%);
    color: rgb(251, 44, 54);
    text-shadow:2px 2px black;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 48px;
    border-radius: 10px;
    /*box-shadow: 0 4px 10px -2px rgba(255,0,0,.35);*/
}
.how-steps h3 
{ 
    padding-top:.25rem;
    font-size:1.25rem;
}

/* Warranty section */
.warranty-section {
    background: #000;
}
.warranty-icon svg {
    display: block;
    margin-inline: auto;
}
.warranty-text {
    max-width: 58ch;
    font-size: .95rem;
    line-height: 1.5rem;
}
.warranty-section:hover .warranty-icon svg, .warranty-section:focus-within .warranty-icon svg {
    filter: drop-shadow(0 0 6px rgba(235,28,36,.4));
}

/* Reputation grid */
.reputation-section {
    background: #090909;
}
.reputation-section .h2 { letter-spacing:.5px; }
.rep-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
}
.rep-card {
    position: relative;
    background: #131313;
    border: 1px solid #222;
    border-radius: 1rem;
    padding: 1.4rem 1.35rem 1.3rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color .3s,border-color .3s,transform .3s;
}

    .rep-card:hover, .rep-card:focus-within {
        border-color: #c5151f;
        background: #1a1a1a;
        transform: translateY(-4px);
    }

    .rep-card.rep-accent {
        background: linear-gradient(138deg,#d40007 0%,#8a0010 100%);
        color: #fff;
        border: 1px solid #d61d28;
    }

        .rep-card.rep-accent blockquote {
            font-size: 1.25rem;
            line-height: 1.5rem;
            font-weight: 700;
            font-style: italic;
        }
.rep-card.rep-accent:hover,.rep-card.rep-accent:focus-within { background:linear-gradient(138deg,#ff1e28 0%,#a30016 100%); border-color:#ff313a; }
.rep-card .text-accent { color:#ff3942; }
.rep-span-2 { grid-column:span 2; }
.rep-span-3 { grid-column:span 3; }
.rep-tall { min-height:280px; }
.rep-feature { display:flex; flex-direction:column; justify-content:flex-start; }
.rep-logo { max-width:244px; width:100%; opacity:.9; filter:brightness(1.1); }
.rep-logo-small { max-height:34px; width:auto; opacity:.85; filter:grayscale(.1); }
.rep-logo-small:hover,.rep-logo:hover { opacity:1; filter:grayscale(0) brightness(1.15); }
.reputation-section svg { flex:0 0 auto; }
.reputation-section p,.reputation-section .small { line-height:1.2rem; }


/* REPUTATION GRID */
.reputation-section {
   
}

    .reputation-section .h2 {
        letter-spacing: .5px;
    }

.rep-card {
    position: relative;
    background: #131313;
    border: 1px solid #222;
    border-radius: 1rem;
    padding: 1.4rem 1.35rem 1.3rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color .3s,border-color .3s,transform .3s;
}

    .rep-card:hover,
    .rep-card:focus-within {
        border-color: #c5151f;
        background: #1a1a1a;
        transform: translateY(-4px);
    }

    .rep-card.rep-accent {
        background: linear-gradient(138deg,#d40007 0%,#8a0010 100%);
        color: #fff;
        border: 1px solid #d61d28;
    }

        .rep-card.rep-accent blockquote {
            font-size: 1.25rem;
            line-height: 1.5rem;
            font-weight: bold;
            font-style: italic;
        }

        .rep-card.rep-accent:hover,
        .rep-card.rep-accent:focus-within {
            background: linear-gradient(138deg,#ff1e28 0%,#a30016 100%);
            border-color: #ff313a;
        }

    .rep-card .text-accent {
        color: #ff3942;
    }


.rep-tall {
    min-height: 280px;
}

@media (max-width: 991.98px) {
    .rep-tall {
        min-height: 220px;
    }
}

.rep-feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.rep-logo {
    max-width: 244px;
    width: 100%;
    opacity: .9;
    filter: brightness(1.1);
}

.rep-logo-small {
    max-height: 34px;
    width: auto;
    opacity: .85;
    filter: grayscale(.1);
}

    .rep-logo-small:hover,
    .rep-logo:hover {
        opacity: 1;
        filter: grayscale(0) brightness(1.15);
    }

.reputation-section svg {
    flex: 0 0 auto;
}

.reputation-section p,
.reputation-section .small {
    line-height: 1.2rem;
}

.legal-terms {
    /* font-size: .9rem; */
    line-height: 1.5;
}

    .legal-terms h3 {
        margin-top: 2.25rem;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .legal-terms p {
        margin-bottom: .7rem;
        
    }

.legal-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1rem 0;
}

    .legal-list li {
        padding-left: 0;
        margin-bottom: .4rem;
        font-size: .9rem;
    }

.legal-bullets {
    margin: 1rem 0 .5rem 0;
}

.legal-bullet {
    font-size: .9rem;
    margin-bottom: .35rem;
}


@keyframes box-shadow {
    0% {
        box-shadow: 0;
    }

    100% {
        box-shadow: 0 31px 770px -24px #eb1c24;
    }
}

/* Responsive */
@media (max-width:575.98px) {
    .hero-cta .btn { width:100%; justify-content:center; }
    .stat-box { max-width:100%; }
    .how-steps .step-card { min-height:unset; }
    .warranty-text { font-size:.9rem; }
}
@media (max-width:991.98px){ .rep-tall { min-height:220px; } }
@media (max-width:640px){
    .rep-span-2,.rep-span-3 { grid-column:span 1; }
    .rep-tall { min-height:unset; }
}

/* Force single column stack and clear spans on small screens to prevent overflow */
@media (max-width:700px) {
    
}

/* ------------------------------ End reusable components ------------------------------ */

/* Media queries (existing global nav / layout) */
@media (min-width:0) {
    .hero h1 {
        font-size: 3rem !important;
    }

    .navbar {
        left: 2.5% !important;
    }

    .content {
        padding-top: 5rem;
    }


    .rep-grid {
        grid-template-columns: 1fr;
    }

    .rep-span-2,
    .rep-span-3,
    .rep-span-5 {
        grid-column: auto;
    }

    .rep-card {
        min-height: unset;
    }


    /* Dropdown menus */
    .dropdown-menu {
        animation: none;
    }
}

@media (min-width:576px) {
    .navbar {
        width: 95% !important;
        left: 2.5% !important;
        padding: 1rem !important;
    }

    .content {
        padding-top: 6rem;
    }
}



@media (min-width:768px) {
    .hero h1 {
        font-size: 3.5rem !important;
    }

    .navbar-content-block.open {
        display: none;
    }

    .navbar {
        left: 2.5% !important;
        padding: 1rem !important;
    }



}


@media (min-width:992px) {

    .rep-grid {
        display: grid;
        gap: 1.25rem;
        grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    }

    .rep-span-2 {
        grid-column: span 2;
    }

    .rep-span-3 {
        grid-column: span 3;
    }

    .rep-span-5 {
        grid-column: span 5;
    }

    /* Dropdown menus */
    .dropdown-menu {
        animation: box-shadow ease-in 200ms forwards;
    }
}

@media (min-width:1200px){ .navbar{ width:100%!important; left:calc(50% - 600px)!important; padding:1rem!important; } }

/* ===================== FAQ (Details / Summary) Enhancements ===================== */
/* Container */
.details-faq, details { /* optional helper class; styling targets native details too */ }

/* Reset native marker */
summary::-webkit-details-marker { display:none; }

/* Base details block */
details { position:relative; border:1px solid var(--color-border); border-radius:.9rem; background:#121212; margin-bottom:1rem; transition:border-color var(--transition-base),background-color var(--transition-base),box-shadow var(--transition-base); }

details[open] { background:#171717; border-color:var(--color-accent); box-shadow:0 0 0 1px rgba(235,28,36,.15),0 4px 10px -4px rgba(0,0,0,.6); }

/* Summary header */
details > summary { cursor:pointer; padding:1rem 3.75rem 1rem 1.25rem; font-weight:600; font-size:1rem; line-height:1.35rem; list-style:none; position:relative; user-select:none; color:#fff; outline:none; display:flex; align-items:center; min-height:3.25rem; }

details > summary:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; border-radius:.75rem; }

/* Icon circle */
details > summary::before { content:""; position:absolute; right:1.15rem; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(235,28,36,.14); border:1px solid rgba(235,28,36,.45); box-shadow:0 0 0 1px rgba(255,255,255,.05) inset; transition:background-color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base); }

/* Plus symbol (two lines) */
details > summary::after { content:""; position:absolute; right:1.15rem; top:50%; transform:translateY(-50%) rotate(0deg); width:36px; height:36px; display:block; background:
    linear-gradient(var(--color-accent),var(--color-accent)) center/2px 14px no-repeat,
    linear-gradient(var(--color-accent),var(--color-accent)) center/14px 2px no-repeat; transition:transform .35s cubic-bezier(.4,.2,.2,1); }

/* Rotate to create an X */
details[open] > summary::after { transform:translateY(-50%) rotate(45deg); }

details[open] > summary::before { background:rgba(235,28,36,.22); border-color:var(--color-accent); box-shadow:0 0 0 1px rgba(235,28,36,.35),0 4px 12px -4px rgba(235,28,36,.35); }

/* Body content animation wrapper */
details > *:not(summary) { padding:0 1.25rem 1.25rem 1.25rem; animation:faq-reveal .45s ease; }

/* Optional smaller text inside */
details p, details .small { color:var(--color-text-dim); margin:0;}

/* Hover state */
details:hover:not([open]) { border-color:#383838; background:#151515; }

/* Keyframes */
@keyframes faq-reveal { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* Compact variant if needed */
.faq-compact details > summary { padding:.85rem 3.4rem .85rem 1rem; }
.faq-compact details > summary::before, .faq-compact details > summary::after {
    left:auto;
    right:.9rem;
}
/* =================== End FAQ Enhancements =================== */
/* ================= Footer ================= */
.site-footer { background:radial-gradient(circle at 30% 20%,rgba(197,21,31,.18),rgba(0,0,0,0) 55%), #050505; position:relative; }
.site-footer .footer-overlay { background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,0) 60%); pointer-events:none; }
.site-footer .footer-links li { margin-bottom:.4rem; }
.site-footer .footer-link { color:var(--color-text-dim); text-decoration:none; display:inline-block; padding:.15rem 0; transition:color var(--transition-base),transform var(--transition-base); }
.site-footer .footer-link:hover, .site-footer .footer-link:focus { color:#fff; transform:translateX(3px); }
.site-footer h3 { letter-spacing:.5px; }
.site-footer .btn-gearbox-check { font-size:.75rem; padding:.6rem 1rem; }
/* ========================================== */