/* webroot/css/home.css */
body{
    animation: pageFade 0.8s ease;
}

@keyframes pageFade{
    from{ opacity: 0; }
    to{ opacity: 1; }
}
/* ---------- YOUR BANNER (kept same behavior) ---------- */
.hero{
    position: relative;
    min-height: 100vh;
    text-align: center;
    padding: 24px 27rem;
    overflow: hidden;
    color: white;
    align-content: center;
    background-color: var(--dark);
}

.hero::before,
.hero::after{
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.hero-subheadline {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 24px auto 0;
    font-size: 1.725rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

/* Image 1 */
.hero::before{
    background-image:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        var(--hero-img1);
    animation: fade1 17s ease-in-out infinite;
}

/* Image 2 */
.hero::after{
    background-image:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        var(--hero-img2);
    animation: fade2 17s ease-in-out infinite;
}

@keyframes fade1 {
    0%   { opacity: 1; }
    25%  { opacity: 1; }
    50%  { opacity: 0; }
    75%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade2 {
    0%   { opacity: 0; }
    25%  { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

.hero h1{
    color: #ffffff;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    margin: 0 0 10px;
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 2px rgba(0,0,0,0.5),
        0 0 6px rgba(0,0,0,0.3);

    opacity: 0;
    transform: translateY(24px);
    animation: heroFadeIn 0.9s ease 0.18s forwards;
}

.hero h2{
    color: #4CE37A;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    margin: 0 0 8px;
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 2px rgba(0,0,0,0.5),
        0 0 6px rgba(0,0,0,0.3);

    opacity: 0;
    transform: translateY(24px);
    animation:
        heroFadeIn 0.9s ease 0s forwards,
        h2Glow 3s ease-in-out 1s infinite;
}

.hero-subheadline{
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.725rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);

    opacity: 0;
    transform: translateY(24px);
    animation: heroFadeIn 0.9s ease 0.34s forwards;
}

@keyframes h2Glow{
    0%{
        text-shadow:
            0 0 4px rgba(76,227,122,0.25);
    }
    50%{
        text-shadow:
            0 0 12px rgba(76,227,122,0.45);
    }
    100%{
        text-shadow:
            0 0 4px rgba(76,227,122,0.25);
    }
}

.hero h1,
.hero h2{
    position: relative;
    z-index: 2;
    text-shadow:
        0 0 2px rgba(0,0,0,0.5),
        0 0 6px rgba(0,0,0,0.3);
}

.hero__glow{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(0, 212, 170, 0.35) 0%,   /* --mint */
        rgba(0, 102, 255, 0.30) 25%,  /* --blue */
        rgba(0, 212, 170, 0.15) 45%,  /* --mint */
        transparent 60%
    );
    filter: blur(150px);
    z-index: 1;
    animation: pulseGlow 6s ease-in-out infinite;
}

@keyframes pulseGlow{
    0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
    100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
}

/* =======================================================
   HERO BUTTON STYLING (CLEAN – NO SHADOWS)
   ======================================================= */

.hero .hero__actions{
    margin-top: 48px;
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* Shared hero button behavior */
.hero .hero__actions .btn{
    min-width: 220px;
    font-size: 16px;
    letter-spacing: 0.2px;
    transition: all 0.3s ease;
    box-shadow: none; /* remove any inherited shadow */
}

/* Primary */
.hero .hero__actions .btn--primary{
    background: var(--blue);
    border: none;
    color: #fff;
    box-shadow: none;
}

.hero .hero__actions .btn--primary:hover{
    background: #0052cc;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: none;
}

/* Secondary */
.hero .hero__actions .btn--outline{
    background: #ffffff;
    border: none;
    color: #111;
    box-shadow: none;
}

.hero .hero__actions .btn--outline:hover{
    background: #f4f4f4;
    color: #111;
    transform: translateY(-2px);
    box-shadow: none;
}

/* ---------- MOBILE HERO ---------- */
@media (max-width: 768px){

    .hero{
        padding: 40px 20px;
    }

    .hero h1{
        font-size: 34px;
        line-height: 1.5;
    }

    .hero h2{
        font-size: 25px;      /* slightly smaller so it fits */
        white-space: nowrap;  /* force single line */
        margin-bottom: 4px;

    }

    .hero-subheadline {
        margin: 24px auto 0;
        font-size: 1.325rem;
    }

    .hero__glow{
        width: 500px;
        height: 500px;
        filter: blur(100px);
    }

    .hero .hero__actions{
        margin-top: 22px;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        align-items: center; /* center instead of stretch */
    }

    .hero .hero__actions .btn{
        width: 270px;              /* not full width */
        min-width: 180px;         /* keeps shape consistent */
        height: 44px;             /* smaller */
        padding: 0 20px;
        font-size: 14px;
        border-radius: 999px;
    }

    /* Remove hover lift on mobile */
    .hero .hero__actions .btn:hover{
        transform: none;
    }
}
/* ---------- REST OF PAGE STYLES ---------- */
:root{
    --bg: #FAFBFC;
    --text: #0A1628;
    --muted: #5A6B7B;
    --muted2: #8B99A8;
    --border: #E1E5EB;
    --blue: #0066FF;
    --blue2: #0052CC;
    --mint: #00D4AA;
    --dark: #0A1628;
    --footer: #050B14;
    --white: #ffffff;

    --radius-xl: 24px;
    --radius-2xl: 32px;
    --shadow-sm: 0 8px 24px rgba(10,22,40,0.06);
    --shadow-md: 0 18px 40px rgba(10,22,40,0.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
.page{ min-height:100vh; }

/* Containers */
.container{
    width: 100%;
    margin: 0 auto;
}
.container--wide{ max-width: 1200px; }
.container--narrow{ max-width: 960px; }

/* Icons */
.icon{ width:20px; height:20px; }
.icon--white{ color:#fff; }
.icon--mint{ color: var(--mint); }
.icon--sm{ width:20px; height:20px; }
.icon--md{ width:28px; height:28px; }
.icon--lg{ width:32px; height:32px; }
.icon--xs{ width:14px; height:14px; }
.icon--chev{ width:20px; height:20px; color:#C4CDD6; }

/* Buttons */
.btn{
    border: none;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
    user-select: none;
}
.btn:active{ transform: translateY(1px); }

.btn--pill{ border-radius: 999px; }
.btn--sm{ height: 44px; padding: 0 18px; font-size: 14px; }
.btn--md{ height: 48px; padding: 0 20px; font-size: 14px; }
.btn--lg{ height: 56px; padding: 0 26px; font-size: 16px; }

.btn--primary{
    background: var(--blue);
    color:#fff;
    box-shadow: 0 14px 30px rgba(0,102,255,0.25);
}
.btn--primary:hover{ background: var(--blue2); }

.btn--outline{
    background: #fff;
    border: 2px solid var(--border);
    color: var(--text);
}
.btn--outline:hover{
    border: 2px solid var(--border);
    color: white;
}

.btn--withIcon .icon{ margin-left: 2px; }

/* Typography helpers */
.center{ text-align:center; }
.lead{
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
}
.center-text {
    text-align: center;
}
.lead--strong{
    font-weight: 600;
    font-size: 16px;
    color: var(--muted);
}
.muted{ color: var(--muted2); font-size: 14px; }
.mb-24{ margin-bottom: 24px; }
.mt-12{ margin-top: 12px; }
.mt-16{ margin-top: 16px; }
.mt-24{ margin-top: 24px; }


/* ---------- <Marquee>---------- */
.hero-marquee-wrap{
    position: relative;
    z-index: 5;
    margin-top: 0;
}

.marquee-strip{
    width: 100%;
    background: linear-gradient(135deg, rgba(0,102,255,0.05), rgba(0,212,170,0.05));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    white-space: nowrap;
}

.marquee-inner{
    display: inline-block;
    white-space: nowrap;
    padding: 6px 0;
    animation: heroMarqueeMove 28s linear infinite;
}

.marquee-item{
    display: inline-block;
    padding: 0 16px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1;
}

.marquee-item::before{
    content: "•";
    margin-right: 16px;
    color: var(--mint);
    opacity: 1;
    font-size: 12px;
    text-shadow:
        0 0 6px rgba(0,212,170,0.75),
        0 0 12px rgba(0,212,170,0.65),
        0 0 20px rgba(0,212,170,0.55),
        0 0 32px rgba(0,212,170,0.4);
    animation: marqueeDotPulse 2.2s ease-in-out infinite;
}

@keyframes marqueeDotPulse{
    0%{
        opacity: 0.75;
        text-shadow:
            0 0 4px rgba(0,212,170,0.45),
            0 0 8px rgba(0,212,170,0.35),
            0 0 14px rgba(0,212,170,0.25);
    }
    50%{
        opacity: 1;
        text-shadow:
            0 0 8px rgba(0,212,170,0.95),
            0 0 16px rgba(0,212,170,0.85),
            0 0 28px rgba(0,212,170,0.75),
            0 0 42px rgba(0,212,170,0.55);
    }
    100%{
        opacity: 0.75;
        text-shadow:
            0 0 4px rgba(0,212,170,0.45),
            0 0 8px rgba(0,212,170,0.35),
            0 0 14px rgba(0,212,170,0.25);
    }
}

@keyframes heroMarqueeMove{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-50%);
    }
}

@media (max-width: 768px){
    .marquee-inner{
        padding: 5px 0;
    }

    .marquee-item{
        padding: 0 12px;
        font-size: 9px;
    }

    .marquee-item::before{
        margin-right: 12px;
    }
}
/* ---------- ZETR Acronym Strip ---------- */
.acronym-strip{
    padding: 40px 20px;
    background: #ffffff;
    overflow: hidden;
}

.acronym-shell{
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: stretch;
    position: relative;
}

.acronym-label{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--blue);
    min-height: 100%;
    position: relative;
    z-index: 3;
}

.acronym-items{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.acronym-item{
    position: relative;
    background: #ffffff;
    padding: 18px 18px 16px;
    min-height: 150px;

    opacity: 0;
    transform: translateX(-90px);
    will-change: transform, opacity;
}

.acronym-item::before{
    content: attr(data-letter);
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 102, 255, 0.08);
    pointer-events: none;
}

.acronym-word{
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.acronym-desc{
    position: relative;
    z-index: 1;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 95%;
}

/* Trigger on scroll */
.acronym-strip.is-visible .acronym-item:nth-child(1){
    animation: zetrExtend 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.acronym-strip.is-visible .acronym-item:nth-child(2){
    animation: zetrExtend 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.16s forwards;
}

.acronym-strip.is-visible .acronym-item:nth-child(3){
    animation: zetrExtend 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.32s forwards;
}

@keyframes zetrExtend{
    0%{
        opacity: 0;
        transform: translateX(-90px);
    }
    60%{
        opacity: 1;
        transform: translateX(10px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/* Tablet */
@media (max-width: 1024px){
    .acronym-shell{
        grid-template-columns: 1fr;
    }

    .acronym-label{
        min-height: 72px;
        font-size: 28px;
    }

    .acronym-items{
        grid-template-columns: 1fr;
    }

    .acronym-item{
        min-height: auto;
        transform: translateY(24px);
    }

    .acronym-strip.is-visible .acronym-item:nth-child(1),
    .acronym-strip.is-visible .acronym-item:nth-child(2),
    .acronym-strip.is-visible .acronym-item:nth-child(3){
        animation-name: zetrExtendMobile;
    }

    @keyframes zetrExtendMobile{
        0%{
            opacity: 0;
            transform: translateY(24px);
        }
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Mobile */
@media (max-width: 768px){
    .acronym-strip{
        padding: 32px 20px;
    }

    .acronym-shell{
        gap: 12px;
    }

    .acronym-label{
        min-height: 64px;
        font-size: 24px;
        border-radius: 16px;
    }

    .acronym-items{
        border-radius: 16px;
    }

    .acronym-item{
        padding: 16px 16px 14px;
    }

    .acronym-item::before{
        font-size: 24px;
        top: 10px;
        right: 12px;
    }

    .acronym-word{
        font-size: 16px;
        margin-bottom: 6px;
    }

    .acronym-desc{
        font-size: 13px;
        line-height: 1.55;
    }
}

/* ---------- Hero section below banner ---------- */
.heroSection{
    padding: 40px 0;
    background: var(--bg);
}

.hero__grid{
    display:grid;
    gap: 48px;
    align-items:center;
}
@media (min-width:1024px){
    .hero__grid{
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }
}

.hero__title{
    margin:0;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: bold;
}
@media (min-width:768px){ .hero__title{ font-size: 52px; } }
@media (min-width:1024px){ .hero__title{ font-size: 58px; } }

.hero__title--dark{ color: var(--text); }
.hero__titleAccent{ color: var(--blue); }

.hero__subtitle{
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
    max-width: 560px;
}
@media (min-width:768px){ .hero__subtitle{ font-size: 20px; } }

.hero__actions{
    margin-top: 30px;
    display:flex;
    flex-direction:column;
    gap: 12px;
}
@media (min-width:640px){
    .hero__actions{ flex-direction:row; }
}
.hero__note{ margin-top: 12px; color: var(--muted2); font-size: 14px; }

/* Right hero image */
.hero__right{
    position: relative;
}

.heroCard{
    border-radius: 48px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(0,102,255,0.10), rgba(0,212,170,0.10), rgba(255,255,255,0));
}
.heroCard__inner{
    width:100%;
    height:100%;
    border-radius: 32px;
    overflow:hidden;
    background:#fff;
    box-shadow: 0 28px 70px rgba(10,22,40,0.08);
}
.heroCard__img{
    width:100%;
    height:100%;
    object-fit:cover;
    aspect-ratio: 1 / 1;
}

.badge{
    position:absolute;
    left: -16px;
    bottom: -16px;
    background:#fff;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 18px 40px rgba(10,22,40,0.12);
    display:flex;
    gap: 12px;
    align-items:center;
}
.badge__icon{
    width:48px; height:48px;
    border-radius: 14px;
    background: rgba(0,212,170,0.10);
    display:flex; align-items:center; justify-content:center;
}
.badge__title{ margin:0; font-size: 14px; font-weight: 700; color: var(--text); }
.badge__sub{ margin:2px 0 0; font-size: 12px; color: var(--muted2); }

/* =======================================================
   MOBILE HERO SECTION (Image Visible)
   ======================================================= */

@media (max-width: 768px){

    /* Section spacing */
    .heroSection{
        padding: 56px 20px;
    }

    /* Stack layout */
    .hero__grid{
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    /* Title */
    .hero__title{
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: -0.02em;
    }

    /* Subtitle */
    .hero__subtitle{
        font-size: 16px;
        line-height: 1.6;
        margin-top: 16px;
        max-width: 100%;
    }

    /* Buttons */
    .hero__actions{
        margin-top: 24px;
        flex-direction: column;
        gap: 14px;
    }

    .hero__note{
        font-size: 13px;
    }

    /* Show right image on mobile */
    .hero__right{
        display: block;
        width: 100%;
    }

    /* Card styling */
    .heroCard{
        border-radius: 28px;
        padding: 18px;
    }

    .heroCard__inner{
        border-radius: 20px;
    }

    .heroCard__img{
        aspect-ratio: 1 / 1;
        width: 100%;
        height: auto;
    }

    /* Badge positioning */
    .badge{
        position: absolute;
        left: 16px;
        bottom: 16px;
        padding: 10px 12px;
        border-radius: 14px;
        gap: 10px;
    }

    .badge__icon{
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .badge__title{
        font-size: 13px;
    }

    .badge__sub{
        font-size: 11px;
    }
}

/* ---------- Context section ---------- */
.context{
    position:relative;
    padding: 84px 24px;
    background: linear-gradient(
        135deg,
        #0A1628,
        #0f1f3a,
        #0A1628
    );
    background-size: 200% 200%;
    animation: gradientMove 18s ease-in-out infinite;
    overflow:hidden;
}

@keyframes gradientMove{
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


@media (min-width:768px){ .context{ padding: 96px 48px; } }
@media (min-width:1024px){ .context{ padding: 96px 80px; } }

.context__bg{ position:absolute; inset:0; opacity:0.07; }
.blob{
    position:absolute;
    width: 650px;
    height: 650px;
    border-radius: 999px;
    filter: blur(45px);
    opacity: 0.85;
    animation: blobFloat 12s ease-in-out infinite;
}

/* BLUE */
.blob--blue{
    top: -40px;
    left: -40px;
    background: radial-gradient(
        circle,
        rgba(0,102,255,1) 0%,
        rgba(0,102,255,0.95) 30%,
        rgba(0,102,255,0.7) 55%,
        rgba(0,102,255,0.4) 75%,
        transparent 90%
    );
    box-shadow:
        0 0 180px rgba(0,102,255,1),
        0 0 320px rgba(0,102,255,0.7),
        0 0 500px rgba(0,102,255,0.4);
}

/* MINT */
.blob--mint{
    bottom: -40px;
    right: -40px;
    background: radial-gradient(
        circle,
        rgba(0,212,170,1) 0%,
        rgba(0,212,170,0.95) 30%,
        rgba(0,212,170,0.7) 55%,
        rgba(0,212,170,0.4) 75%,
        transparent 90%
    );
    box-shadow:
        0 0 180px rgba(0,212,170,1),
        0 0 320px rgba(0,212,170,0.7),
        0 0 500px rgba(0,212,170,0.4);
}@keyframes blobFloat{
     0%   { transform: translate(0, 0) scale(1); }
     50%  { transform: translate(50px, -50px) scale(1.12); }
     100% { transform: translate(0, 0) scale(1); }
 }
.context__content{ position:relative; z-index:1; text-align:center; }

.pill{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}
.pill--mint{
    color: var(--mint);
    background: rgba(0,212,170,0.10);
    border: 1px solid rgba(0,212,170,0.30);
}

/* RED */
.pill--red{
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.10);
    border: 1px solid rgba(255, 107, 107, 0.30);
}

.icon--red{
    color: #ff6b6b;
}

.context__title{
    margin: 18px 0 0;
    font-size: 34px;
    line-height: 1.15;
    color: #fff;
    font-weight: 800;
}
@media (min-width:768px){ .context__title{ font-size: 52px; } }

.gradientText{
    background: linear-gradient(90deg, var(--blue), var(--mint));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.contextGrid{
    margin-top: 36px;
    display:grid;
    gap: 18px;
}
@media (min-width:768px){
    .contextGrid{ grid-template-columns: repeat(2, 1fr); }
}

.contextCard{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 22px;
    transition: background 180ms ease;
    min-height: 170px;

}
.contextCard:hover{ background: rgba(255,255,255,0.10); }

.contextCard__icon{
    width:48px; height:48px;
    margin: 0 auto 14px;
    border-radius: 14px;
    display:flex; align-items:center; justify-content:center;
}

.contextCard__icon--red{
    background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
}

.contextCard__icon--amber{
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.contextCard__icon--orange{
    background: linear-gradient(135deg, #f97316, #fb923c);
}

.contextCard__icon--blue{
    background: linear-gradient(135deg, #0066FF, #3b82f6);
}

.contextCard p{
    margin:0;
    color:#E8EEF4;
    line-height:1.6;
}
.contextCard p strong{
    margin-bottom: 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.highlight{
    margin-top: 34px;
    display:inline-block;
    padding: 26px 26px;
    border-radius: 18px;
    border: 2px solid rgba(0,212,170,0.9);
    background: linear-gradient(
        90deg,
        rgba(0,212,170,0.18),
        rgba(0,102,255,0.18)
    );
    box-shadow: 0 0 18px rgba(0,212,170,0.22);
    animation: highlightPulse 8s ease-in-out infinite;
}

@keyframes highlightPulse{
    0%   { box-shadow: 0 0 18px rgba(0,212,170,0.20); }
    50%  { box-shadow: 0 0 28px rgba(0,212,170,0.32); }
    100% { box-shadow: 0 0 18px rgba(0,212,170,0.20); }
}

.highlight__big{ margin:0; font-size: 26px; font-weight: 800; color: var(--mint); }
.highlight__small{ margin: 8px 0 0; font-size: 13px; color: #A8B5C4; }





/* ----------------------Quotes Card Start-------------------------- */
.form-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.form-overlay.active {
    display: flex;
}

.card-form {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: white;
    padding: 24px 28px;
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.25);
    transform: scale(.97);
    opacity: 0;
    transition: all .25s ease;

}

/* animation */
.form-overlay.active .card-form{
    transform: scale(1);
    opacity: 1;
}

/* layout */
.form-container{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* title */
.form-container h3{
    margin:0;
    font-size:22px;
    font-weight:700;
}

/* subtitle */
.form-container p{
    margin:0 0 8px 0;
    font-size:14px;
    color:#6b7280;
}

/* row */
.form-row{
    display:flex;
    gap:12px;
}

.field{
    flex:1;
}

/* labels */
.form-container label{
    font-size:13px;
    font-weight:600;
}

/* fields */
.form-container input,
.form-container textarea{
    width:100%;
    min-height:50px;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid #d1d5db;
    font-size:14px;
    box-sizing:border-box;

}

/* SELECT FIX */
.form-container select{
    width:100%;
    min-height:54px;
    padding:12px 44px 12px 14px;
    border-radius:10px;
    border:1px solid #d1d5db;
    font-size:14px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-color:white;
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:18px;
}

/* textarea */
.form-container textarea{
    min-height:90px;
    resize:vertical;
}

/* focus */
.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.14);
}

/* button */
.form-container .btn{
    width:100%;
    padding:13px;
    border:none;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    background:#2563eb;
    color:white;
    cursor:pointer;
    transition:.2s;
}
.close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 22px;
    color: #9ca3af;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
}

.close-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
}

.form-container .btn:hover{
    background:#1d4ed8;
}

/* tablet */
@media(max-width:768px){

    .form-row{
        flex-direction:column;
    }

}

/* small phone */
@media(max-width:480px){

    .card-form{
        padding:18px;
    }

    .form-container h3{
        font-size:20px;
    }

}

.form-success {
    text-align: center;
    padding: 30px 16px 10px;
    animation: fadeUp .35s ease;
}

.form-success .btn {
    min-width: 140px;
    padding: 13px 22px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    background: #2563eb;
    color: white;
    cursor: pointer;
    transition: .2s;
}

.form-success .btn:hover {
    background: #1d4ed8;
}

.form-success h3 {
    margin: 14px 0 8px;
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
}

.form-success p {
    margin: 0 0 22px;
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
}

.success-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    font-weight: 800;
    color: white;
    background: linear-gradient(135deg, #00d4aa, #0066ff);
    box-shadow: 0 12px 30px rgba(0, 212, 170, 0.22);
    animation: popIn .45s ease;
}

.form-success--error .success-icon {
    background: linear-gradient(135deg, #ff6b81, #ff8a65);
    box-shadow: 0 12px 30px rgba(255, 107, 129, 0.22);
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(14px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/*-----------------------------Quotes Card End------------------------------*/

/* ---------- Electric flowing border for Context Cards ---------- */
.electricCard{
    position: relative;
    display: block;
}

/* Keep original card on top */
.electricCard .contextCard{
    position: relative;
    z-index: 1;
}

/* SVG overlay */
.electricCard svg.electric-border{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

/* Flowing glow stroke (WHITE) */
.electric-path{
    fill: none;
    stroke: rgba(255,255,255,0.42);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 60 1000;
    stroke-dashoffset: 0;
    filter: url(#electricGlowCards);
    animation: flowBorder 5.2s linear infinite;
}

.electric-path--offset{
    stroke-dasharray: 40 1000;
    stroke-dashoffset: 500;
    stroke: rgba(255,255,255,0.16);
    stroke-width: 0.9;
    stroke-linecap: round;
    animation-duration: 6.3s;
    animation-direction: reverse;
}

@keyframes flowBorder{
    to { stroke-dashoffset: -1060; }
}

/* Spark particles */
.spark{
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

.spark--t1 { top: -2px; left: 20%; animation: sparkTop 3.4s 0.0s linear infinite; }
.spark--t2 { top: -2px; left: 55%; animation: sparkTop 3.9s 0.7s linear infinite; }
.spark--t3 { top: -2px; left: 80%; animation: sparkTop 3.2s 1.3s linear infinite; }

.spark--b1 { bottom: -2px; left: 30%; animation: sparkBottom 3.7s 0.4s linear infinite; }
.spark--b2 { bottom: -2px; left: 65%; animation: sparkBottom 3.3s 1.1s linear infinite; }

.spark--l1 { left: -2px; top: 25%; animation: sparkLeft 3.6s 0.2s linear infinite; }
.spark--l2 { left: -2px; top: 70%; animation: sparkLeft 3.1s 0.9s linear infinite; }

.spark--r1 { right: -2px; top: 15%; animation: sparkRight 3.8s 0.5s linear infinite; }
.spark--r2 { right: -2px; top: 60%; animation: sparkRight 3.5s 1.5s linear infinite; }

@keyframes sparkTop{
    0%   { opacity: 0; transform: translate(0,0) scale(1); }
    10%  { opacity: 1; }
    50%  { opacity: 0.8; transform: translate(0, -6px) scale(1.4); }
    80%  { opacity: 0.4; transform: translate(0, -12px) scale(0.7); }
    100% { opacity: 0; transform: translate(0, -18px) scale(0.3); }
}
@keyframes sparkBottom{
    0%   { opacity: 0; transform: translate(0,0) scale(1); }
    10%  { opacity: 1; }
    50%  { opacity: 0.8; transform: translate(0, 6px) scale(1.4); }
    80%  { opacity: 0.4; transform: translate(0, 12px) scale(0.7); }
    100% { opacity: 0; transform: translate(0, 18px) scale(0.3); }
}
@keyframes sparkLeft{
    0%   { opacity: 0; transform: translate(0,0) scale(1); }
    10%  { opacity: 1; }
    50%  { opacity: 0.8; transform: translate(-6px, 0) scale(1.4); }
    80%  { opacity: 0.4; transform: translate(-12px, 0) scale(0.7); }
    100% { opacity: 0; transform: translate(-18px, 0) scale(0.3); }
}
@keyframes sparkRight{
    0%   { opacity: 0; transform: translate(0,0) scale(1); }
    10%  { opacity: 1; }
    50%  { opacity: 0.8; transform: translate(6px, 0) scale(1.4); }
    80%  { opacity: 0.4; transform: translate(12px, 0) scale(0.7); }
    100% { opacity: 0; transform: translate(18px, 0) scale(0.3); }
}

/* Make all grid items equal height */
.contextGrid{
    align-items: stretch; /* key */
}

/* Your electric wrapper should fill the grid cell height */
.electricCard{
    height: 100%;
}

/* The actual card fills the wrapper */
.electricCard .contextCard{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start; /* top align */
}

/* Keep the icon in the same vertical position on every card */
.electricCard .contextCard__icon{
    margin: 0 auto 22px;   /* consistent spacing below icon */
    flex: 0 0 auto;
}

/* Center ONLY the text block in the remaining space */
.electricCard .contextCard p{
    margin: 0;
    flex: 1 1 auto;
    display: block;
    align-self: stretch;
    text-align: center;
}

.electricCard .contextCard__icon{
    margin: 0 auto 22px;
}

/* ---------- Generic sections ---------- */
.section{ padding: 88px 0; }
.section--white{ background:#fff; }

.section__title{
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
@media (min-width:768px){ .section__title{ font-size: 40px; } }

.grid3{
    margin-top: 46px;
    display:grid;
    gap: 22px;
}
@media (min-width:768px){ .grid3{ grid-template-columns: repeat(3, 1fr); } }

.card{
    background:#fff;
    border-radius: var(--radius-2xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 180ms ease;
}
.card:hover{ box-shadow: var(--shadow-md); }
.card__icon{
    width:56px; height:56px;
    border-radius: 18px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 18px;
}
.card__title{ margin:0 0 10px; font-size: 20px; font-weight: 800; }
.card__text{ margin:0; color: var(--muted); line-height: 1.7; }

/* =======================================================
   MOBILE SECTION REFINEMENT
   ======================================================= */

@media (max-width: 768px){

    .section{
        padding: 64px 20px;
    }

    .section__title{
        font-size: 26px;
        line-height: 1.25;
    }

    .grid3{
        margin-top: 32px;
        gap: 18px;
    }

    .card{
        padding: 22px;
        border-radius: 20px;
    }

    .card__icon{
        width: 48px;
        height: 48px;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .card__title{
        font-size: 18px;
        margin-bottom: 8px;
    }

    .card__text{
        font-size: 15px;
        line-height: 1.6;
    }
}

/* ---------- How it works ---------- */
.how{
    padding: 56px 0;
    /*background: linear-gradient(180deg, #F5F7FA, #ffffff);*/
    background: #F5F7FA;
}

.steps{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content:center;
    gap: 14px;
}

/* Arrow icon */
.steps__arrow{
    display:none;
    color:#b0bcc9;
    width:22px;
    height:22px;
    flex-shrink:0;
    transition: color 0.3s ease;
}
@media (min-width:768px){
    .steps__arrow{ display:inline-block; }
}

/* Step */
.step{
    display:flex;
    align-items:center;
    gap: 10px;
    position: relative;
}

/* Bubble */
.step__num{
    width:44px;
    height:44px;
    border-radius:999px;
    background:#dce3ed;
    color:#7a8fa6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:14px;
    position:relative;
    transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
    z-index:1;
}

/* Pulse ring */
.step__num::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:999px;
    border:2px solid transparent;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.step__text{
    font-weight:700;
    color:#9aaabb;
    font-size:14px;
    transition: color 0.4s ease;
}

/* Active */
.step--active .step__num{
    background: var(--blue);
    color:#fff;
    transform: scale(1.15);
    box-shadow:
        0 0 0 4px rgba(0,102,255,0.15),
        0 0 16px rgba(0,102,255,0.5),
        0 0 32px rgba(0,102,255,0.3);
}
.step--active .step__num::before{
    border-color: rgba(0,102,255,0.4);
    box-shadow: 0 0 0 4px rgba(0,102,255,0.08);
    animation: pulseRing 1.2s ease-out infinite;
}
.step--active .step__text{ color: var(--blue); }

/* Done */
.step--done .step__num{
    background: var(--mint);
    color:#fff;
    box-shadow:
        0 0 10px rgba(0,212,170,0.35),
        0 0 20px rgba(0,212,170,0.15);
}
.step--done .step__text{ color: var(--mint); }

@keyframes pulseRing{
    0%{ transform: scale(1); opacity:1; }
    70%{ transform: scale(1.5); opacity:0; }
    100%{ transform: scale(1.5); opacity:0; }
}

/* Connector line behind arrow (desktop only) */
.arrow-wrap{
    position: relative;
    display:none;
    align-items:center;
}
@media (min-width:768px){
    .arrow-wrap{ display:flex; }
}

/* Line fills when done/active */
.arrow-wrap.arrow--done::before{
    background: linear-gradient(90deg, var(--mint), var(--mint));
}
.arrow-wrap.arrow--active::before{
    background: linear-gradient(90deg, var(--blue), rgba(0,102,255,0.3));
}

/* Arrow icon glow when active */
.arrow-wrap.arrow--active .steps__arrow{
    color: var(--blue);
    filter: drop-shadow(0 0 6px rgba(0,102,255,0.6));
}
.arrow-wrap.arrow--done .steps__arrow{
    color: var(--mint);
}

/* =======================================================
   MOBILE – CLEAN VERTICAL STEPPER
   ======================================================= */

@media (max-width: 768px){

    .how{
        padding: 64px 20px;
    }

    .steps{
        flex-direction: column;
        align-items: center;
        gap: 32px;
        position: relative;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Hide desktop arrows */
    .steps__arrow,
    .arrow-wrap{
        display: none !important;
    }

    /* Vertical line */
    .steps::before{
        content: "";
        position: absolute;
        left: 22px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #dce3ed;
        border-radius: 2px;
    }

    .step{
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .step__num{
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .step__text{
        font-size: 15px;
        line-height: 1.4;
        text-align: left;
    }

    /* Keep active effect subtle */
    .step--active .step__num{
        transform: scale(1.08);
    }
}

/* ---------- Cost Comparison CTA ---------- */
.ctaCalc{
    padding: 88px 0;
    background: linear-gradient(135deg, rgba(0,102,255,0.05), rgba(0,212,170,0.05));
}
.ctaCalc__card{
    background:#fff;
    border-radius: var(--radius-2xl);
    padding: 28px;
    box-shadow: var(--shadow-md);
}
@media (min-width:768px){ .ctaCalc__card{ padding: 40px; } }

.ctaCalc__grid{
    display:grid;
    gap: 24px;
    align-items:center;
}
@media (min-width:1024px){
    .ctaCalc__grid{ grid-template-columns: 1fr 0.9fr; gap: 40px; }
}

.ctaCalc__icon{
    width:64px; height:64px;
    border-radius: 18px;
    background: rgba(0,102,255,0.10);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 18px;
    color: #0066FF;
}
.ctaCalc__title{
    margin:0 0 12px;
    font-size: 34px;
    font-weight: 800;
}
@media (min-width:768px){ .ctaCalc__title{ font-size: 40px; } }

.ctaCalc__text{
    margin:0 0 18px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

/* List */
.list{
    margin: 0 0 22px;
    padding:0;
    list-style:none;
    display:grid;
    gap: 10px;
}
.list li{
    display:flex;
    align-items:center;
    gap: 10px;
    color: var(--muted);
}
.list__dot{
    width:20px; height:20px;
    border-radius: 999px;
    background: var(--mint);
    display:flex; align-items:center; justify-content:center;
    flex: 0 0 auto;
}
.linkBtn{ display:inline-block; }

/* Mini panel */
.miniPanel{
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0,102,255,0.10), rgba(0,212,170,0.10));
    padding: 18px;
}
.miniPanel__row{
    background:#fff;
    border-radius: 14px;
    padding: 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom: 12px;
}
.miniPanel__row span{ color: var(--muted); font-size: 13px; }
.miniPanel__row strong{ color: var(--text); font-size: 14px; }
.miniPanel__row strong.amber { color: #F59E0B; }
.miniPanel__row strong.mint  { color: var(--mint); }

.miniPanel__save{
    border-radius: 14px;
    background: var(--mint);
    padding: 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.miniPanel__save span{ color:#fff; font-size: 13px; font-weight: 700; }
.miniPanel__save strong{ color:#fff; font-size: 18px; }
.miniPanel__note{
    margin: 10px 0 0;
    text-align:center;
    font-size: 12px;
    color: var(--muted);
}
/*------------------Process Section Start---------------------*/
.process-section .section-inner{
    max-width:1180px;
    margin:0 auto;
}

.process-section .section-label{
    display:flex;
    align-items:center;
    justify-content: center;
    text-align: center;
    gap:12px;
    margin-bottom:18px;

    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease, transform .6s ease;
}

.process-section .section-label.show{
    opacity:1;
    transform:translateY(0);
}

.process-section .section-icon{
    width:40px;
    height:40px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eaf7ef;
    color:#438d68;
    flex-shrink:0;
}

.process-section .section-tag{
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#438d68;
}

.process-section h2{
    margin:0 0 16px;
    font-size:34px;
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.15;
    color:#111827;
    max-width:800px;

    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease, transform .6s ease;
}

.process-section h2.show{
    opacity:1;
    transform:translateY(0);
}

.process-section .lead{
    font-size:16px;
    line-height:1.7;
    color:var(--muted);
    max-width:580px;
    margin:0 0 50px;

    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease, transform .6s ease;
}

.process-section .lead.show{
    opacity:1;
    transform:translateY(0);
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
    align-items:stretch;
}

.process-card{
    position:relative;
    background:#ffffff;
    border:1px solid #e8edf3;
    border-radius:24px;
    padding:28px 24px;
    box-shadow:0 10px 30px rgba(16,24,40,.05);
    overflow:hidden;

    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .6s ease,
        transform .6s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.process-card.show{
    opacity:1;
    transform:translateY(0);
}

.process-card.show:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(16,24,40,.1);
    border-color:#d9e4ee;
}

.process-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    border-radius:24px 24px 0 0;
}

.process-card--step1::before{ background:#1f7a3e; }
.process-card--step1 .process-number{
    color:#1f7a3e;
    background:#eaf7ef;
}

.process-card--step2::before{ background:#34a853; }
.process-card--step2 .process-number{
    color:#34a853;
    background:#edf9f0;
}

.process-card--step3::before{ background:#60a5fa; }
.process-card--step3 .process-number{
    color:#60a5fa;
    background:#eef4ff;
}

.process-card--step4::before{ background:#1d4ed8; }
.process-card--step4 .process-number{
    color:#2563eb;
    background:#dbeafe;
}

.process-number{
    width:56px;
    height:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:800;
    margin-bottom:20px;
    background:#f3f6f9;
}

.process-card h3{
    margin:0 0 10px;
    font-size:20px;
    font-weight:800;
    letter-spacing:-0.01em;
    line-height:1.3;
    color:#111827;
}

.process-card p{
    margin:0;
    font-size:15px;
    line-height:1.7;
    color:var(--muted);
}

/* stagger */
.process-card:nth-child(1){ transition-delay:0.1s; }
.process-card:nth-child(2){ transition-delay:0.2s; }
.process-card:nth-child(3){ transition-delay:0.3s; }
.process-card:nth-child(4){ transition-delay:0.4s; }

@media (min-width:768px){
    .process-section h2{
        font-size:40px;
    }
}

/* tablet */
@media (max-width:1024px){
    .process-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* mobile */
@media (max-width:768px){

    .process-section{
        padding:64px 20px;
        text-align:center; /* 👈 center header nicely */
    }

    .process-section h2{
        font-size:26px;
        line-height:1.25;
        margin-bottom:12px;
    }

    .process-section .lead{
        font-size:15px;
        line-height:1.6;
        margin-bottom:32px;
        max-width:100%;
    }

    .process-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
    }

    .process-card{
        padding:22px;
        border-radius:20px;
    }

    .process-number{
        width:48px;
        height:48px;
        border-radius:14px;
        margin-bottom:14px;
    }

    .process-card h3{
        font-size:18px;
        margin-bottom:8px;
    }

    .process-card p{
        font-size:15px;
        line-height:1.6;
    }
}

/* small mobile */
@media (max-width:640px){

    .process-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .process-card{
        padding:22px;
        border-radius:20px;
    }

    .process-number{
        width:48px;
        height:48px;
        border-radius:14px;
    }
}
/*------------------Process Section end---------------------*/

/* =======================================================
   MOBILE – COST COMPARISON CTA
   ======================================================= */

@media (max-width: 768px){

    .ctaCalc{
        padding: 64px 20px;
    }

    .ctaCalc__card{
        padding: 22px;
        border-radius: 20px;
    }

    .ctaCalc__grid{
        gap: 32px;
    }

    .ctaCalc__icon{
        width: 52px;
        height: 52px;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .ctaCalc__title{
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .ctaCalc__text{
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    /* List */
    .list{
        gap: 8px;
        margin-bottom: 18px;
    }

    .list li{
        font-size: 14px;
        gap: 8px;
    }

    .list__dot{
        width: 16px;
        height: 16px;
    }

    /* Mini panel */
    .miniPanel{
        padding: 16px;
        border-radius: 16px;
    }

    .miniPanel__row{
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .miniPanel__row span{
        font-size: 12px;
    }

    .miniPanel__row strong{
        font-size: 13px;
    }

    .miniPanel__save{
        padding: 12px;
        border-radius: 12px;
    }

    .miniPanel__save span{
        font-size: 12px;
    }

    .miniPanel__save strong{
        font-size: 16px;
    }

    .miniPanel__note{
        font-size: 11px;
        margin-top: 8px;
    }
}

/* ---------- Why Act Early Soft Box ---------- */
.softBox{
    margin-top: 30px;
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, rgba(0,102,255,0.05), rgba(0,212,170,0.05));
    padding: 28px;
}
@media (min-width:768px){ .softBox{ padding: 40px; } }

.softBox__lead{ margin:0 0 18px; font-weight: 800; }

.softBox__grid{
    display:flex;
    flex-direction:column;
    gap: 14px;
    align-items:center;
    justify-content:center;
}
@media (min-width:768px){
    .softBox__grid{
        flex-direction:row;
        gap: 40px;
    }
}
.softBox__item{ display:flex; align-items:center; gap: 10px; }

.tick{
    width:32px; height:32px;
    border-radius: 999px;
    background: var(--mint);
    display:flex; align-items:center; justify-content:center;
}

/*-------------------Services Section Start-----------------*/

#use-cases{
    background:#ffffff;
    padding:88px 20px;
}

#use-cases .section-inner{
    max-width:1180px;
    margin:0 auto;
}

/* Label */
#use-cases .section-label{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:12px;
    margin-bottom:18px;
}

#use-cases .section-icon{
    width:40px;
    height:40px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef4ff;
    color:#2563eb;
    flex-shrink:0;
    transition:transform .28s ease, box-shadow .28s ease;
}

/*/#use-cases .section-label:hover .section-icon{/*/
/*     !*    transform:translateY(-2px);*!*/
/*     !*    box-shadow:0 10px 24px rgba(31,122,62,.12);*!*/
/* /}*/

#use-cases .section-tag{
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#2563eb;
}

/* Title */
#use-cases h2{
    margin:0 0 16px;
    font-size:34px;
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.15;
    color:#111827;
    max-width:760px;
}

#use-cases .lead{
    margin:0 0 46px;
    font-size:16px;
    line-height:1.7;
    color:var(--muted);
    max-width:720px;
}

/* Grid */
.usecase-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:24px;
    align-items:stretch;
}

/* Card */
.usecase-card{
    background:#ffffff;
    border:1px solid #e8edf3;
    border-radius:24px;
    padding:28px 22px;
    box-shadow:0 10px 30px rgba(16,24,40,.05);
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    height:100%;
}

.usecase-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(16,24,40,.1);
    border-color:#d9e4ee;
}

/* Icon */
.usecase-icon{
    width:56px;
    height:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    transition:transform .28s ease;
}

.usecase-card:hover .usecase-icon{
    transform:translateY(-2px);
}

.usecase-icon i{
    width:24px;
    height:24px;
}

/* Icon colors */
.usecase-icon--green{
    background:rgba(31,122,62,0.10);
    color:#1f7a3e;
}

.usecase-icon--teal{
    background:rgba(15,157,138,0.10);
    color:#0f9d8a;
}

.usecase-icon--blue{
    background:rgba(37,99,235,0.10);
    color:#2563eb;
}

.usecase-icon--amber{
    background:rgba(217,119,6,0.10);
    color:#d97706;
}

.usecase-icon--purple{
    background:rgba(124,58,237,0.10);
    color:#7c3aed;
}

/* Text */
.usecase-card h3{
    margin:0 0 10px;
    font-size:20px;
    font-weight:800;
    letter-spacing:-0.01em;
    line-height:1.3;
    color:#111827;
}

.usecase-card p{
    margin:0;
    font-size:15px;
    line-height:1.7;
    color:var(--muted);
}

/* Responsive */
@media (max-width:1180px){
    .usecase-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px){

    #use-cases{
        padding:64px 20px;
    }

    #use-cases .section-label{
        margin-bottom:14px;
        gap:10px;
    }

    #use-cases .section-icon{
        width:36px;
        height:36px;
        border-radius:12px;
    }

    #use-cases .section-tag{
        font-size:1rem;
    }

    #use-cases h2{
        font-size:26px;
        line-height:1.25;
        margin:0 0 12px;
        max-width:100%;
        text-align:center;
    }

    #use-cases .lead{
        font-size:15px;
        line-height:1.6;
        margin:0 0 32px;
        max-width:100%;
        text-align:center;
    }

    .usecase-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
    }

    .usecase-card{
        padding:22px;
        border-radius:20px;
    }

    .usecase-icon{
        width:48px;
        height:48px;
        border-radius:14px;
        margin-bottom:14px;
    }

    .usecase-icon i{
        width:22px;
        height:22px;
    }

    .usecase-card h3{
        font-size:18px;
        margin:0 0 8px;
    }

    .usecase-card p{
        font-size:15px;
        line-height:1.6;
    }
}

@media (max-width: 640px){

    .usecase-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .usecase-card{
        padding:22px;
        border-radius:20px;
    }

    .usecase-icon{
        width:48px;
        height:48px;
        border-radius:14px;
        margin-bottom:14px;
    }

    .usecase-card h3{
        font-size:18px;
    }

    .usecase-card p{
        font-size:15px;
        line-height:1.6;
    }
}

/*-------------------Services Section End-----------------*/

/* =======================================================
   MOBILE – WHY ACT EARLY
   ======================================================= */

@media (max-width: 768px){

    .section{
        padding: 64px 20px;
    }

    .section__title{
        font-size: 26px;
        line-height: 1.25;
    }

    .lead{
        font-size: 16px;
        line-height: 1.6;
        margin-top: 12px;
    }

    .softBox{
        margin-top: 24px;
        padding: 22px;
        border-radius: 20px;
    }

    .softBox__lead{
        font-size: 15px;
        margin-bottom: 16px;
    }

    .softBox__grid{
        gap: 16px;
    }

    .softBox__item{
        gap: 12px;
        font-size: 15px;
        text-align: left;
        width: 100%;
        max-width: 280px;
    }

    .tick{
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .muted{
        font-size: 13px;
        margin-top: 16px;
    }
}

/* ---------- Final CTA ---------- */
.finalCta{
    padding: 88px 0;
    background: var(--dark);
}

.finalCta .text {
    width: 60%;
    margin: 30px auto;
}

.finalCta p {
    font-size: 18px;
    color: rgba(174, 224, 255, 0.78);
}

.finalCta__title{
    margin:0 0 26px;
    color:#fff;
    font-size: 55px;
    font-weight: 800;
}

/* =======================================================
   MOBILE – FINAL CTA
   ======================================================= */

@media (max-width: 768px){

    .finalCta{
        padding: 64px 10px;
        text-align: center;
    }

    .finalCta .text {
        width: 70%;
        margin: 30px auto;
        margin-bottom: 30px;
    }

    .finalCta__title{
        font-size: 26px;
        line-height: 1.25;
        margin-bottom: 20px;
    }

    .finalCta h2 {
        font-size: 35px;
    }
}

/* ---------- Modal Backdrop + Shell ---------- */
.modalBackdrop{
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 16px;
    background: rgba(10, 22, 40, 0.60);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
}

.modalOverlay{
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 40, 0.60);
    backdrop-filter: blur(6px);
}

/* Modal shells must be centered and above overlay */
.modalShell{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 16px;
}

.is-hidden{ display:none !important; }

.is-hidden{ display:none !important; }

.modalShell{
    width: 100%;
    display: grid;
    place-items: center;
}

.fitDialog, .quoteDialog{
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}

.quoteDialog{ padding: 22px; }

.fitClose{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #5A6B7B; /* visible on white */
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, color 160ms ease;
}

.fitClose:hover{
    background: #F5F7FA;
    color: #0A1628;
}

/* Force icon color so it doesn't blend into white */
.fitClose .icon{
    color: var(--muted);
}

.fitClose:hover{ background:#F5F7FA; }

.fitHeader{
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--border);
}
.fitTitle{
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}
.fitSubtitle{
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.fitProgress{
    display:flex;
    gap: 8px;
    margin-top: 14px;
}
.fitProgressBar{
    height: 6px;
    flex: 1;
    border-radius: 999px;
    background: var(--border);
}
.fitProgressBar.is-done{ background: var(--blue); }

.fitBody{ padding: 22px; }

.fitQHead{
    display:flex;
    gap: 12px;
    margin-bottom: 14px;
}
.fitIcon{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0,102,255,0.10);
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
}
.fitQTitle{
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}
.fitQHelper{
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted2);
}

.fitOptions{
    display:grid;
    gap: 10px;
    margin-top: 12px;
}
.fitOption{
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    display:flex;
    gap: 12px;
    align-items:center;
    transition: border-color 160ms ease, background 160ms ease;
}
.fitOption:hover{ border-color:#C4CDD6; }
.fitOption.is-selected{
    border-color: var(--blue);
    background: rgba(0,102,255,0.05);
}
.fitOption input{ width:18px; height:18px; }

.fitFooter{
    padding: 18px 22px;
    background: #F5F7FA;
}
.fitNext{ width: 100%; }

/* Result */
.fitResult{
    padding: 26px 22px 22px;
    text-align: center;
}
.fitBadge{
    width: 80px;
    height: 80px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto 14px;
}
.fitBadge.good{ background: rgba(0,212,170,0.10); }
.fitBadge.partial{ background: rgba(245,158,11,0.10); }

.fitResult h2{
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--text);
}
.fitResult p{
    margin: 0 0 18px;
    color: var(--muted);
}

.fitMeaning{
    text-align:left;
    background:#F5F7FA;
    border-radius:18px;
    padding:16px;
    margin: 18px 0;
}
.fitMeaningTitle{
    margin:0 0 10px;
    font-size:13px;
    font-weight:900;
    color: var(--text);
}
.fitList{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px;
}
.fitList li{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color: var(--muted);
    font-size:13px;
}
.fitTick{
    width:22px;
    height:22px;
    border-radius:999px;
    background: var(--mint);
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
}

.fitActions{
    display:grid;
    gap:10px;
}
.fitGhost{
    width:100%;
    height:48px;
    border-radius:999px;
    border:0;
    background: transparent;
    color: var(--muted);
    cursor:pointer;
    transition: background 160ms ease, color 160ms ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.fitGhost:hover{ background:#F5F7FA; color: var(--text); }

.fitOutline{
    width:100%;
    height:56px;
    border-radius:999px;
    border:2px solid var(--border);
    background:#fff;
    cursor:pointer;
    font-weight:800;
    transition: border-color 160ms ease, color 160ms ease;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.fitOutline:hover{ border-color: var(--blue); color: var(--blue); }

/* =======================================================
   SCROLL REVEAL ANIMATION SYSTEM
   ======================================================= */

.reveal{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: transform, opacity;
}

.reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay helpers */
.reveal-delay-1{ transition-delay: 0.1s; }
.reveal-delay-2{ transition-delay: 0.2s; }
.reveal-delay-3{ transition-delay: 0.3s; }
.reveal-delay-4{ transition-delay: 0.4s; }
.reveal-delay-5{ transition-delay: 0.5s; }

/* Hero text entrance */
.hero h1{
    animation: heroFadeIn 1.2s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

.hero h2{
    animation:
        heroFadeIn 1.2s ease 0.2s forwards,
        h2Glow 3s ease-in-out 1.4s infinite;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes heroFadeIn{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero buttons entrance */
.hero .hero__actions{
    opacity: 0;
    transform: translateY(30px);
    animation: heroActionsReveal 1s ease 0.3s forwards;
}

@keyframes heroActionsReveal{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger */
.hero .hero__actions .btn:nth-child(1){
    animation-delay: 0.4s;
}

.hero .hero__actions .btn:nth-child(2){
    animation-delay: 0.55s;
}

@keyframes heroBtnReveal{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.section,
.context,
.ctaCalc,
.finalCta{
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s ease, transform 1s ease;
}

.section.is-visible,
.context.is-visible,
.ctaCalc.is-visible,
.finalCta.is-visible{
    opacity: 1;
    transform: translateY(0);
}

.card,
.contextCard,
.electricCard,
.heroCard{
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.card.is-visible,
.contextCard.is-visible,
.electricCard.is-visible,
.heroCard.is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
}

{box-sizing: border-box;}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
    background-color: #555;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
}
/*-------------------------------flash start-----------------------------*/
.flash-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 10;
    animation: flashFadeOut 5s ease forwards;
}

.flash-wrap .message,
.flash-wrap .success,
.flash-wrap .error,
.flash-wrap .warning {
    position: relative;
    width: min(92%, 720px);
    min-height: 84px;
    padding: 18px 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.2px;

    color: #10e3c5;
    border: 2px solid rgba(16, 227, 197, 0.32);
    background: rgba(21, 56, 78, 0.90);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 0 0 1px rgba(16, 227, 197, 0.06) inset,
        0 0 24px rgba(16, 227, 197, 0.10);

    overflow: hidden;
}

/* shiny electric sweep */
.flash-wrap .message::before,
.flash-wrap .success::before,
.flash-wrap .error::before,
.flash-wrap .warning::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 40%,
        transparent 75%
    );
    transform: translateX(-120%);
    animation: electricShine 2.8s linear infinite;
    pointer-events: none;
}

/* success keeps electric teal */
.flash-wrap .success {
    color: #10e3c5;
    border: 2px solid rgba(16, 227, 197, 0.32);
    background: rgba(21, 56, 78, 0.90);
}

/* error version */
.flash-wrap .error {
    color: #ff7f9f;
    border: 2px solid rgba(255, 127, 159, 0.30);
    background: rgba(44, 30, 45, 0.92);
    box-shadow:
        0 0 0 1px rgba(255, 127, 159, 0.05) inset,
        0 0 24px rgba(255, 127, 159, 0.10);
}

/* warning version */
.flash-wrap .warning {
    color: #ffd76a;
    border: 2px solid rgba(255, 215, 106, 0.28);
    background: rgba(59, 48, 25, 0.92);
    box-shadow:
        0 0 0 1px rgba(255, 215, 106, 0.05) inset,
        0 0 24px rgba(255, 215, 106, 0.10);
}

@keyframes electricShine {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

@keyframes flashFadeOut {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    8% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
    }
}

/* mobile */
@media (max-width: 768px) {
    .flash-wrap .message,
    .flash-wrap .success,
    .flash-wrap .error,
    .flash-wrap .warning {
        width: 94%;
        min-height: 72px;
        padding: 14px 20px;
        font-size: 0.92rem;
        border-radius: 24px;
    }
}

/*-----------------------------Flash End-------------------------*/


.trust-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.trust-icon {
    color: #0052CC;
    background-color: rgba(0, 102, 255, 0.10);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-section-tag {
    color: #0052CC;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.solution-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.solution-icon {
    color: rgb(67, 141, 104);
    background-color: rgb(234, 247, 239);;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.solution-section-tag {
    color: rgb(67, 141, 104);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}