/*.content{ background-color: #f4f6f9 !important;}*/

/* =========================
   LumeLevel Home Page CSS
   Consolidated + Namespaced
   ========================= */

:root{
    /* CTA (signup) color system */
    --cta-bg: #FFA41C;
    --cta-border: #FF8F00;
    --cta-hover-bg: #FA8900;
    --cta-hover-border: #E07B00;
    --cta-active-bg: #E07B00;
    --cta-active-border: #C96F00;

    /* Brand + neutrals */
    --navy: #062e63;
    --border: #eaecef;
    --muted: #6c757d;
}

/* ---------- Full-width shells ---------- */
.etank-shell{
    width: 100%;
    padding-left: clamp(18px, 3vw, 40px);
    padding-right: clamp(18px, 3vw, 40px);
}

.etank-inner{
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
}


.etank-inner-wide{
    width: 100%;
    max-width: 1880px;
    margin: 0 auto;
}

.etank-inner-narrow{
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* =========================
   HERO / CAROUSEL REBUILD
   ========================= */

.etank-hero .etank-shell{
    width: 100%;
    padding: 24px 84px;
}

.etank-hero-carousel,
.etank-hero-carousel .carousel-inner,
.etank-hero-carousel .carousel-item,
.etank-hero-slide{
    min-height: 58vh;
}

.etank-hero-slide{
    display: flex;
    align-items: stretch;
    /*background-image:*/
    /*        linear-gradient(120deg, #0B2441 68%, #1BB5D8 92%);*/
    Background:#0B2441;

    color: #fff;
}

.hero-split{
    min-height: 58vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 32px;
    align-items: center;
}

.hero-split__content{
    display: flex;
    align-items: center;
    min-width: 0;
}

.hero-copy-wrap{
    max-width: 720px;
    min-width: 0;
}

.hero-split__media{
    display: flex;
    align-items: center;
    justify-content: stretch;
    min-width: 0;
}

.hero-split__image{
    width: 100%;
    min-height: 430px;
    border-radius: 28px;
    background-image:
            linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18)),
            var(--etank-hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.hero-slogan-title{
    font-family: "Manrope", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 18ch;
    margin: 0 0 1rem 0;
    text-align: left;
    text-shadow: none;
    font-size: clamp(3rem, 4.7vw, 5.1rem);
}

.hero-lead{
    max-width: 640px;
    margin: 0 0 1rem 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255,255,255,.92);
    text-align: left;
}

.hero-pill-row{
    justify-content: flex-start;
    opacity: .82;
    margin-bottom: 1rem;
}

.hero-pill{
    padding: .3rem .62rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.82);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.hero-cta-row{
    justify-content: flex-start;
}

.cta-closure{
    text-align: left;
    text-shadow: none;
}

.text-white-75{
    color: rgba(255,255,255,.72) !important;
}

.etank-hero-carousel .carousel-control-prev,
.etank-hero-carousel .carousel-control-next{
    width: 5.5%;
    opacity: .9;
    z-index: 6;
}

.etank-hero-indicators{
    bottom: 14px;
    margin-bottom: 0;
}

.etank-hero-indicators button{
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px;
    border: 0 !important;
    margin: 0 5px !important;
    background-color: rgba(255,255,255,.42) !important;
}

.etank-hero-indicators .active{
    background-color: #fff !important;
}

/*.etank-hero-slide.is-dashboard .hero-split__image{*/
/*    background-image:*/
/*            linear-gradient(180deg, rgba(8,16,48,.28), rgba(8,16,48,.42)),*/
/*            var(--etank-hero-image);*/
/*}*/

/*.etank-hero-slide.is-supplier .hero-split__image{*/
/*    background-image:*/
/*            linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20)),*/
/*            var(--etank-hero-image);*/
/*}*/

/* Tablet + mobile */
@media (max-width: 991.98px){
    .etank-hero .etank-shell{
        padding: 20px 24px 28px;
    }

    .etank-hero-carousel,
    .etank-hero-carousel .carousel-inner,
    .etank-hero-carousel .carousel-item,
    .etank-hero-slide,
    .hero-split{
        min-height: auto;
    }

    .hero-split{
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
    }

    .hero-split__media{
        order: 1;
    }

    .hero-split__content{
        order: 2;
        display: block;
    }

    .hero-split__image{
        min-height: 280px;
        border-radius: 22px;
    }

    .hero-copy-wrap{
        max-width: 100%;
    }

    .hero-slogan-title{
        font-size: clamp(2.2rem, 7vw, 3.4rem);
        max-width: 12ch;
    }

    .hero-lead{
        max-width: 100%;
    }

    .hero-cta-row{
        gap: 12px !important;
    }

    .etank-hero-carousel .carousel-control-prev,
    .etank-hero-carousel .carousel-control-next{
        top: 160px;
        bottom: auto;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        opacity: .92;
    }

    .etank-hero-carousel .carousel-control-prev{
        left: 8px;
    }

    .etank-hero-carousel .carousel-control-next{
        right: 8px;
    }

    .etank-hero-carousel .carousel-control-prev-icon,
    .etank-hero-carousel .carousel-control-next-icon{
        background-size: 58% 58%;
    }
}

/* Small mobile */
@media (max-width: 575.98px){
    .etank-hero .etank-shell{
        padding: 18px 18px 24px;
    }

    .hero-split{
        gap: 18px;
    }

    .hero-split__image{
        min-height: 220px;
        border-radius: 18px;
    }

    .hero-slogan-title{
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .etank-hero-carousel .carousel-control-prev,
    .etank-hero-carousel .carousel-control-next{
        top: 145px;
        width: 40px;
        height: 40px;
    }

    .etank-hero-carousel .carousel-control-prev{
        left: 6px;
    }

    .etank-hero-carousel .carousel-control-next{
        right: 6px;
    }
}

.hero-title{
    color:#fff;
    font-weight:700;
    margin:0;
}

/* End The new hero styling */


/* ---------- Namespace ---------- */
.etank-landing{
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.etank-landing section{
    scroll-margin-top: 84px;
}

/* Scope bootstrap lead sizing to this page ONLY */
.etank-landing .lead{
    font-size: 1.75rem;
}

/* ---------- Utilities ---------- */
.u-press-shadow{
    box-shadow: 5px 5px 3px rgba(0,0,0,.7);
    transition: transform .1s, box-shadow .1s;
}
.u-press-shadow:active{
    box-shadow: 2px 2px 2px rgba(0,0,0,.7);
    transform: translate(3px, 3px);
}

/* Strong CTA (wins over Bootstrap/Tailwind) */
.etank-landing .btn.btn-cta-primary{
    background-color: var(--cta-bg) !important;
    border-color: var(--cta-border) !important;
    color:#111 !important;
    font-weight:800 !important;
}
.etank-landing .btn.btn-cta-primary:hover{
    background-color: var(--cta-hover-bg) !important;
    border-color: var(--cta-hover-border) !important;
    color:#111 !important;
}
.etank-landing .btn.btn-cta-primary:active,
.etank-landing .btn.btn-cta-primary.active{
    background-color: var(--cta-active-bg) !important;
    border-color: var(--cta-active-border) !important;
    color:#111 !important;
}

/* Hero + sticky secondary button: high contrast */
.etank-landing .btn.btn-cta-outline{
    background: rgba(255,255,255,.12) !important;
    border: 2px solid rgba(255,255,255,.85) !important;
    color:#fff !important;
    font-weight:800 !important;
}
.etank-landing .btn.btn-cta-outline:hover{
    background: rgba(255,255,255,.20) !important;
    border-color:#fff !important;
    color:#fff !important;
}

/* ---------- Section titles ---------- */
.etank-section-title{
    font-weight:700;
    letter-spacing:-0.02em;
    margin:40px 0 24px;
    text-align:center;
    color:#16324f;
}

/* ---------- Surface system (use for cards/panels) ---------- */
.etank-surface{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.etank-pad-md{ padding:1.25rem; }
.etank-pad-sm{ padding:1rem; }
.etank-surface.is-hover:hover{
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

/* Softer pain/outcome variant */
.etank-surface.is-danger{
    border-color:#dbe7f5;
    background:#f8fbff;
    box-shadow:0 8px 24px rgba(13,110,253,.06);
}

/* Backward compatible: keep .etank-card working while you refactor markup */
.etank-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    padding:1.25rem;
    height:100%;
}
.etank-card:hover{
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

/* Icon style used in cards/steps */
.etank-icon{
    font-size:2rem;
    color:#0d6efd;
}

/* ---------- Link chips ---------- */
.etank-linkchip{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.35rem .6rem;
    border-radius:999px;
    border:1px solid rgba(13,110,253,.25);
    background:#f1f5ff;
    color:#0d6efd;
    font-weight:600;
    font-size:.85rem;
    text-decoration:none;
    transition:all .15s ease;
}
.etank-linkchip:hover{
    background:#e7efff;
    border-color:rgba(13,110,253,.45);
    text-decoration:none;
}
.etank-linkchip.dark{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.25);
    color:#fff;
}
.etank-linkchip.dark:hover{
    background:rgba(255,255,255,.18);
}
.etank-card-ctas{
    margin-top:.9rem;
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

/* ---------- PAIN section ---------- */
.etank-pain .pain-item{
    display:flex;
    align-items:flex-start;
    margin:.35rem 0;
}
.etank-pain .pain-item i{
    color:#0d6efd;
    margin-right:.5rem;
    margin-top:.25rem;
}
.etank-pain .pain-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#eaf2ff;
    color:#0d6efd;
    margin-right:.5rem;
}

/* ---------- HOW-IT-WORKS HUB ---------- */
.etank-hub{
    position:relative;
    display:grid;
    grid-template-areas:
        ". supplier ."
        "owner platform manager"
        ". tenant .";
    grid-template-columns:1fr auto 1fr;
    grid-gap:1.5rem;
    align-items:center;
    justify-items:center;
    margin:2rem 0;
}
.etank-hub .hub-item{
    text-align:center;
    padding:1.25rem;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 4px 18px rgba(0,0,0,.07);
    width:100%;
    max-width:260px;
    position:relative;
    z-index:2;
}
.etank-hub .hub-icon{
    font-size:1.25rem;
    color:#fff;
    background:#0d6efd;
    width:56px;
    height:56px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:.75rem;
}
.etank-hub .hub-platform{
    grid-area:platform;
    background: var(--navy);
    color:#fff;
    transform:scale(1.03);
}
.etank-hub .hub-platform .hub-icon{
    background:#fff;
    color: var(--navy);
}
.etank-hub .hub-owner{ grid-area:owner; }
.etank-hub .hub-supplier{ grid-area:supplier; }
.etank-hub .hub-manager{ grid-area:manager; }
.etank-hub .hub-tenant{ grid-area:tenant; }

.etank-hub:before,
.etank-hub:after{
    content:'';
    position:absolute;
    background:#0d6efd;
    opacity:.28;
    z-index:1;
    border-radius:2px;
}
.etank-hub:before{
    width:60%;
    height:4px;
    top:50%;
    left:20%;
    transform:translateY(-50%);
}
.etank-hub:after{
    width:4px;
    height:60%;
    left:50%;
    top:20%;
    transform:translateX(-50%);
}
@media (max-width:991px){
    .etank-hub{
        grid-template-areas:
            "supplier"
            "manager"
            "platform"
            "owner"
            "tenant";
        grid-template-columns:1fr;
    }
    .etank-hub:before,
    .etank-hub:after{
        display:none;
    }
}

/* ---------- Media / “browser frame” used in How-To + Dashboard ---------- */
.etank-browser{
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    background:#fff;
    position:relative;
}
.etank-browser .bar{
    display:flex;
    align-items:center;
    height:36px;
    background:#f8f9fa;
    border-bottom:1px solid var(--border);
    padding:0 .75rem;
}
.etank-browser .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    margin-right:6px;
}
.etank-browser .dot.dot-red{ background:#ff5f56; }
.etank-browser .dot.dot-yellow{ background:#ffbd2e; }
.etank-browser .dot.dot-green{ background:#27c93f; }
.etank-browser .title{
    font-size:.85rem;
    color:#6b7280;
    margin-left:.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Zoom hint (place inside a relatively positioned wrapper) */
.etank-preview-wrap{
    position:relative;
}
.etank-zoom-hint{
    position:absolute;
    right:.75rem;
    bottom:.75rem;
    background:rgba(13,110,253,.95);
    color:#fff;
    padding:.35rem .55rem;
    border-radius:.5rem;
    font-size:.875rem;
    box-shadow:0 4px 12px rgba(13,110,253,.35);
}

/* How-To media wrapper */
#how-to .how-media{
    border-radius:.75rem;
    overflow:hidden;
    display:block;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
}

/* If you still use .media-frame ratio constraint */
#how-to .media-frame{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
}
@supports not (aspect-ratio:16/9){
    #how-to .media-frame{
        height:420px;
    }
}
#how-to .pebbleImg{
    padding-top:40px;
}
@media (max-width: 991.98px){
    #how-to .media-frame{
        aspect-ratio: 4/3;
    }
}
/* IMPORTANT: keep image sizing scoped */
@media (min-width: 992px){
    .etank-landing #how-to .col-md-6 img{
        max-height: 420px;
        object-fit: cover;
    }
}

/* ---------- Proof / testimonials ---------- */
.etank-proof .proof-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    height:100%;
}
.etank-proof .proof-card .stars i{
    color:#f59e0b;
}

/* Backward compat: your old .tcard class */
.etank-proof .tcard{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    height:100%;
}

/* ---------- FAQ (scope to home page only; keep your structure) ---------- */
.etank-landing #faq .card{
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.etank-landing #faq .card-header{
    background:#f8f9fa;
    border-bottom:1px solid var(--border);
}
.etank-landing #faq .card-header a{
    color:#111;
    font-weight:600;
}
.etank-landing #faq .card-body{
    color:#333;
}

/* ---------- Final CTA ---------- */
.etank-final-cta{
    background:linear-gradient(180deg,#f8fbff,#ffffff);
    border-top:1px solid #edf2f7;
    border-radius:0;
}
.etank-cta .sub{
    color: var(--muted);
}

/* ---------- Sticky CTA ---------- */
.etank-sticky-cta{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: linear-gradient(135deg,#0b2a4a,#0e3a64);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);

    --sticky-btn-h: 44px;
    --sticky-btn-px: 18px;
    --sticky-btn-fs: 0.95rem;
    --sticky-btn-radius: var(--bs-border-radius-lg);
}

/* Reserve space so content/footer isn't covered */
body.has-sticky-cta{
    padding-bottom: 92px;
}
@media (max-width:576px){
    body.has-sticky-cta{
        padding-bottom: 150px;
    }
}

.etank-sticky-cta .sticky-cta-btn{
    min-height: var(--sticky-btn-h);
    padding: 0 var(--sticky-btn-px);
    font-size: var(--sticky-btn-fs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--sticky-btn-radius);
    --bs-btn-border-radius: var(--sticky-btn-radius);
}

/* Primary CTA uses your global CTA variables */
.etank-sticky-cta .btn-cta-primary{
    background-color: var(--cta-bg) !important;
    border-color: var(--cta-border) !important;
    color: #000 !important;
    text-decoration: none;
}
.etank-sticky-cta .btn-cta-primary i{
    color: inherit !important;
}

/* ===== NAV CTA CLUSTER (one knob controls all) ===== */
.nav-actions{
    --nav-cta-h: 44px;
    --nav-cta-px: 16px;
    --nav-cta-fs: 0.95rem;
    --nav-cta-radius: var(--bs-border-radius-lg);
}

.nav-actions .nav-cta-btn{
    min-height: var(--nav-cta-h);
    padding: 0 var(--nav-cta-px);
    font-size: var(--nav-cta-fs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--nav-cta-radius);
    --bs-btn-border-radius: var(--nav-cta-radius);
}

/* Cart button: same height, square */
.nav-actions .nav-cart-btn.nav-cta-btn{
    width: var(--nav-cta-h);
    padding: 0;
}