/*.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;
}

.etank-hero .etank-shell{
    padding-left: 0;
    padding-right: 0;
}

.etank-hero .etank-inner{
    max-width: none;
    width: 100%;
}

/* ---------- 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;
}

/* ---------- HERO ---------- */
/* Hero image is injected from view using:
   style="--etank-hero-image:url('...')" */
.etank-hero-carousel-wrap{
    padding: 0;
    min-height: auto;
    background: none !important;
    display: block !important;
    align-items: initial !important;
}

.etank-hero-carousel{
    position: relative;
    overflow: hidden;
}

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

.etank-hero-carousel .carousel-inner{
    background: #0d2d63;
}

.etank-hero-carousel .carousel-item{
    transition: opacity 1.15s ease-in-out !important;
}

.etank-hero-carousel .carousel-item-next.carousel-item-start,
.etank-hero-carousel .carousel-item-prev.carousel-item-end{
    opacity: 0;
}

.etank-hero-carousel .carousel-item.active,
.etank-hero-carousel .carousel-item-next,
.etank-hero-carousel .carousel-item-prev{
    display: block;
}

.etank-hero-slide{
    position: relative;
    width: 100%;
    height: 56vh;
    min-height: 56vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;

    background-image:
            linear-gradient(360deg, rgba(18, 26, 225,.68), rgba(11, 165, 194, .48)),
            var(--etank-hero-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: translateZ(0);
    backface-visibility: hidden;
}

.etank-hero-slide .etank-hero__overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
            radial-gradient(900px 520px at 92% 88%, rgba(18,26,225,.14), rgba(18,26,225,0) 62%),
            radial-gradient(900px 420px at 50% 35%, rgba(255,255,255,.06), rgba(0,0,0,0) 65%),
            linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.14));
}

.etank-hero-slide .etank-shell{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.hero-content-inner{
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: clamp(18px, 3vw, 40px);
    padding-right: clamp(18px, 3vw, 40px);
}

.etank-hero__content{
    position: relative;
    z-index: 2;
    width: 100%;
}

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

.etank-hero-carousel .carousel-control-prev-icon,
.etank-hero-carousel .carousel-control-next-icon{
    background-size: 70% 70%;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}

.etank-hero-indicators{
    bottom: 16px;
    margin-bottom: 0;
    z-index: 6;
}

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

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

.hero-title{
    color:#fff;
    text-shadow: 0 10px 28px rgba(0,0,0,.55);
    font-weight:700;
}

.hero-title-sub{
    font-size: .48em;
    font-weight: 600;
    line-height: 1.18;
    margin-top: .25rem;
}

.hero-lead{
    max-width: 980px;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    color:#fff;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(4px);
}

@media (max-width: 991.98px){
    .etank-hero-carousel,
    .etank-hero-carousel .carousel-inner,
    .etank-hero-carousel .carousel-item,
    .etank-hero-slide{
        height: 50vh;
        min-height: 50vh;
    }

    .etank-hero-carousel .carousel-control-prev,
    .etank-hero-carousel .carousel-control-next{
        width: 10%;
    }

    .hero-title-sub{
        font-size: .56em;
    }

    .hero-lead{
        max-width: 92%;
        padding: .9rem 1rem;
    }
}

@media (max-width: 575.98px){
    .etank-hero-carousel,
    .etank-hero-carousel .carousel-inner,
    .etank-hero-carousel .carousel-item,
    .etank-hero-slide{
        height: 46vh;
        min-height: 46vh;
    }

    .etank-hero-indicators{
        bottom: 10px;
    }
}
.cta-closure{
    text-shadow: 3px 3px 3px rgba(0,0,0,.9);
}
.text-white-75{
    color: rgba(255,255,255,.75) !important;
}

/* ---------- 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;
}