:root{
  --bg:#06132f;--bg2:#091c43;--card:#0d2450;--card2:#102b5d;--primary:#2588ff;
  --primary2:#51b0ff;--text:#f5f8ff;--muted:#9fb0cf;--line:rgba(255,255,255,.09);
  --success:#21d47b;--radius:22px;--container:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{text-decoration:none;color:inherit}.container{width:min(var(--container),calc(100% - 40px));margin:auto}.section{padding:105px 0;position:relative;overflow:hidden}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;background:#025f6e;border-bottom:1px solid transparent;backdrop-filter:blur(18px);transition:.3s}.site-header.scrolled{border-color:var(--line);background:#025f6e;}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.5px;font-size:21px}.brand>span:last-child>span{color:var(--primary2)}
.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:linear-gradient(135deg,#45a8ff,#1552c8);box-shadow:0 8px 30px #1680ff44;font-weight:800}
.nav-links{display:flex;align-items:center;gap:27px;font-size:14px;color:#bdc9df}.nav-links a:hover,.nav-links a.active{color:#fff}.nav-cta{padding:11px 18px;border-radius:12px;background:var(--primary);color:white!important;box-shadow:0 10px 25px #2588ff33}
.menu-toggle{display:none;background:none;border:0}.menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px}
.hero{min-height:760px;padding-top:155px;background:#fff;}.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:55px}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:800;color:#025f6e}.hero .eyebrow{display:inline-flex;gap:8px;align-items:center;padding:8px 13px;border:1px solid #58aaff35;background:#2388ff10;border-radius:30px}
.pulse{width:7px;height:7px;border-radius:50%;background:#35e18a;box-shadow:0 0 0 6px #35e18a15}.hero h1{color:#000;font-size:clamp(42px,6vw,76px);line-height:1.02;letter-spacing:-3px;margin:24px 0}.section-head h2{color:#000;}.faq .section-head h2{color:#000;}.hero h1 em,.section-head h2 span,.about h2 span{font-style:normal;color:#025f6e}.hero-text{max-width:600px;color:#343434;font-size:17px}.hero-actions{display:flex;gap:12px;margin:30px 0 40px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:13px;font-weight:700;font-size:14px;transition:.25s}.btn-primary{background:#025f6e;box-shadow:0 15px 35px #1d7df144}.btn-primary:hover{transform:translateY(-2px)}.btn-secondary{border:1px solid var(--line);background:#025f6e}.btn-light{background:#fff;color:#0a2860}.trust-row{display:grid;grid-template-columns: repeat(3, 1fr);gap:38px;margin-top:30px;padding-top: 4rem;}.trust-row div{display:grid}.trust-row svg{color:#000;}.trust-row h3{color:#000;font-size:16px;font-weight:400;margin-bottom:0;margin-top:15px;}.trust-row p{margin-top:0;font-size:14px;color:#343434}
.hero-device{height:550px;display:grid;place-items:center;position:relative}.device-shadow{position:absolute;width:330px;height:90px;bottom:20px;background:#2588ff55;filter:blur(45px)}.phone{width:285px;height:555px;border:8px solid #203c70;border-radius:43px;background:#020b1e;box-shadow:0 35px 90px #0008,0 0 0 1px #ffffff10;position:relative;padding:8px}.phone-notch{position:absolute;z-index:2;top:8px;left:50%;transform:translateX(-50%);width:105px;height:25px;border-radius:0 0 16px 16px;background:#020b1e}.phone-screen{height:100%;border-radius:32px;background:linear-gradient(180deg,#0b2758,#071936);padding:27px 16px 15px;display:flex;flex-direction:column}.app-top,.market-head,.market-meta,.result-row{display:flex;align-items:center;justify-content:space-between}.mini-logo{font-weight:800;color:#55b3ff}.status-dot{font-size:9px;color:#42e28d}.welcome{font-size:16px;font-weight:700;margin:25px 0 13px}.welcome span{display:block;font-size:10px;color:#7890b5;font-weight:400}.mini-card{background:linear-gradient(135deg,#1451a0,#0b2a5f);border:1px solid #5eb6ff22;border-radius:17px;padding:13px}.mini-card span,.mini-card small{font-size:8px;color:#9bb3d6;display:block}.mini-card b{font-size:14px;display:block;margin:5px 0}.sparkline{height:34px;margin-top:8px;border-bottom:2px solid #4cb0ff;clip-path:polygon(0 75%,12% 55%,24% 68%,36% 28%,47% 45%,59% 12%,70% 34%,83% 10%,100% 20%,100% 100%,0 100%);background:#4cb0ff12}.mini-label{font-size:10px;font-weight:700;margin:17px 0 8px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mini-grid div{background:#ffffff07;border:1px solid #ffffff08;border-radius:10px;padding:9px}.mini-grid span,.mini-grid small{display:block;font-size:7px;color:#8ea5c7}.mini-grid b{display:block;font-size:13px;margin:2px 0}.phone-bottom{margin-top:auto;display:flex;justify-content:space-between;font-size:7px;color:#738bb0}.phone-bottom .selected{color:#55b3ff}
.section-head{margin-bottom:42px}.section-head h2{font-size:42px;letter-spacing:-1.8px;line-height:1.1;margin:12px 0}.section-head p{color:#343434;max-width:600px}.section-head.center{text-align:center}.section-head.center p{margin:0 auto;color:000;}.section-head.split{display:flex;align-items:end;justify-content:space-between}.text-link{color:#57b0ff;font-size:13px}
.features{background:#fff}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.feature-card,.market-card{background:linear-gradient(145deg,#0d2857,#0a1f46);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.3s}.feature-card:hover,.market-card:hover{transform:translateY(-5px);border-color:#369cff44}.icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#248cff15;color:#5bb5ff;font-size:22px;margin-bottom:20px}.feature-card h3{margin:0 0 8px;font-size:17px}.feature-card p{color:var(--muted);font-size:13px;margin:0}
.market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.market-head{font-size:13px}.market-head i{font-style:normal;color:#3fe391;font-size:8px}.market-value{font-size:38px;font-weight:800;margin:22px 0}.market-value small{font-size:9px;color:#7e94b6;font-weight:500}.market-meta{font-size:10px;color:#8299bb}.market-meta span:first-child{color:#43dc90}
.results{background:linear-gradient(180deg,#071733,#06132f)}.results-box{background:linear-gradient(145deg,#0c2553,#091b3e);border:1px solid var(--line);border-radius:30px;padding:70px}.result-table{border:1px solid var(--line);border-radius:16px;overflow:hidden}.result-row{padding:18px 22px;border-bottom:1px solid var(--line);font-size:13px;color:#aabbd4}.result-row:last-child{border:0}.result-row b{color:#fff}.result-title{background:#ffffff06;color:#6f88ac;font-size:10px;text-transform:uppercase;letter-spacing:1px}.tag{color:#45df91!important;background:#45df9114;padding:5px 9px;border-radius:20px;font-size:10px}
.download-box{display:grid;grid-template-columns:1fr 280px;align-items:center;background:linear-gradient(115deg,#1260c8,#0d2e6c);border-radius:30px;padding:65px 75px;position:relative;overflow:hidden}.download-box:after{content:"";position:absolute;width:380px;height:380px;border:1px solid #ffffff15;border-radius:50%;right:-100px;top:-130px}.download-box h2{font-size:42px;line-height:1.1;letter-spacing:-1.5px;max-width:620px}.download-box p{color:#bfd1ec;max-width:580px}.download-phone{justify-self:end;text-align:center;position:relative;z-index:1}.qr-box{width:150px;height:150px;border-radius:20px;background:repeating-linear-gradient(45deg,#fff 0 4px,#dce9ff 4px 8px);color:#08285d;display:grid;place-items:center;font-weight:900;font-size:28px;box-shadow:0 25px 50px #00153666}.qr-box small{font-size:9px}.download-phone>span{font-size:11px;display:block;margin-top:12px;color:#d9e6f8}
.about{background:#071733}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.about h2{font-size:44px;line-height:1.1;letter-spacing:-1.8px}.about-copy p{color:var(--muted)}.check-list{display:grid;gap:12px;margin-top:25px;color:#c7d6eb;font-size:13px}.check-list div:first-letter{color:#43dc90}.stats-card{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:25px;overflow:hidden}.stats-card div{background:#0b2149;padding:35px}.stats-card strong{display:block;font-size:34px}.stats-card span{color:#8198ba;font-size:11px}
.section.faq{background:#fff;}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.accordion{display:grid;gap:10px}.faq-item{background:#025f6e;border:1px solid var(--line);border-radius:16px;overflow:hidden}.faq-item button{width:100%;border:0;background:none;color:#fff;text-align:left;padding:20px;font:600 14px Inter;display:flex;justify-content:space-between;cursor:pointer}.faq-item button span{color:#53adff;font-size:20px}.faq-answer{display:none;padding:0 20px 20px;color:#d6d6d6;font-size:13px}.faq-item.open .faq-answer{display:block}.faq-item.open button span{transform:rotate(45deg)}
.footer{background:#e1e1e1;border-top:1px solid var(--line);padding:65px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px}.footer-grid>div{display:grid;align-content:start;gap:9px}.footer-grid p,.footer-grid a{font-size:12px;color:#343434}.footer-grid h4{font-size:12px;margin:0 0 8px;color:#000}.socials{display:flex;gap:8px}.socials a{width:34px;height:34px;display:grid;place-items:center;border:1px solid #343434;border-radius:10px}.footer-bottom{border-top:1px solid var(--line);margin-top:45px;padding-top:18px;display:flex;justify-content:space-between;color:#343434;font-size:10px}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35}.glow-one{width:300px;height:300px;background:#176fff;right:5%;top:10%}.glow-two{width:180px;height:180px;background:#00c8ff;left:40%;bottom:5%}
.reveal{opacity:0;transform:translateY(20px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}.delay{transition-delay:.15s}
@media(max-width:900px){.nav-links{position:absolute;top:78px;left:20px;gap:10px;right:20px;background:#025f6e;border:1px solid var(--line);border-radius:16px;padding:15px;display:none;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{padding:10px}.menu-toggle{display:block}.hero-grid,.about-grid,.faq-grid{grid-template-columns:1fr}.hero{min-height:auto}.hero-device{height:510px}.feature-grid,.market-grid{grid-template-columns:1fr 1fr}.download-box{grid-template-columns:1fr;padding:45px}.download-phone{justify-self:start;margin-top:30px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.container{width:min(100% - 28px,var(--container))}.section{padding:30px 0}.hero{padding-top:125px}.hero h1{font-size:45px;letter-spacing:-2px}.hero-actions{flex-direction:column}.trust-row{gap:18px;flex-wrap:wrap}.hero-device{height:470px}.phone{transform:scale(.84)}.section-head h2,.download-box h2,.about h2{font-size:33px}.feature-grid,.market-grid{grid-template-columns:1fr}.results-box{padding:35px 18px}.result-row{grid-template-columns:1.4fr .7fr .8fr;display:grid;gap:8px}.result-row span:last-child{display:none}.result-title span:last-child{display:none}.download-box{padding:35px 25px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}}

/* Rajshree MTK customizations */
.hero-image-wrap{height:600px;display:flex;align-items:flex-end;justify-content:center}
.hero-banner{width:min(640px,54vw);max-height:650px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 30px 45px rgba(0,0,0,.35))}
.feature-grid-8{grid-template-columns:repeat(4,1fr)}
.rates-table{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#0d2857,#091e43)}
.rate-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);font-size:14px;color:#b3c4dd}
.rate-row:last-child{border-bottom:0}.rate-row strong{color:#57b3ff;font-size:18px}.rate-row b{color:#fff}.rate-title{background:#ffffff06;color:#7189aa;text-transform:uppercase;letter-spacing:1px;font-size:10px;font-weight:700}
.rate-note{color:#7188a9;font-size:11px;margin:12px 0 0}
.chart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.chart-card{min-height:160px;border:1px solid var(--line);border-radius:18px;padding:25px;background:#ffffff05;display:flex;flex-direction:column;justify-content:center}.chart-card span{color:#87a0c2;font-size:12px}.chart-card strong{font-size:38px;margin:6px 0}.chart-card small{color:#627a9c;font-size:10px}
.download-banner{width:170px;height:250px;object-fit:cover;object-position:center top;border-radius:22px;box-shadow:0 20px 40px #00153666;border:4px solid #294e87}
.download-phone{display:flex;flex-direction:column;align-items:center}
@media(max-width:900px){.feature-grid-8,.chart-grid{grid-template-columns:1fr 1fr}.hero-image-wrap{height:500px}.hero-banner{width:min(560px,85vw)}}
@media(max-width:560px){.feature-grid-8,.chart-grid{grid-template-columns:1fr}.rate-row{grid-template-columns:1.4fr 1fr 1fr 1fr;padding:15px 12px;font-size:12px}.hero-image-wrap{height:430px}.hero-banner{width:100%;max-height:470px}}
.rates-section {
    background: #f7faff;
    padding: 80px 0;
}

.rates-heading {
    text-align: center;
    margin-bottom: 35px;
}

.rates-heading h2 {
    margin: 0 0 10px;
    font-size: 42px;
    line-height: 1.2;
    color: #111827;
    font-weight: 800;
}

.rates-heading h2 span {
    color: #025f6e;
}

.rates-heading p {
    margin: 0 auto;
    color: #64748b;
    font-size: 15px;
}


/* Tabs */

.rates-tabs {
    background: #025f6e;
    padding: 10px;
    border-radius: 18px 18px 0 0;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;

    max-width: 700px;
    margin: 0 auto;
}

.rate-tab {
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;

    min-height: 48px;
    padding: 10px 20px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    transition: all .25s ease;
}

.rate-tab span {
    font-size: 16px;
}

.rate-tab:hover,
.rate-tab.active {
    background: #fff;
    color: #025f6e;
}


/* Content */

.rate-content {
    display: none;
}

.rate-content.active {
    display: block;
    animation: rateFade .3s ease;
}

@keyframes rateFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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


/* Heading */

.rate-title {
    padding: 28px 0 18px;
}

.rate-title h3 {
    margin: 0 0 3px;
    color: #111827;
    font-size: 24px;
    font-weight: 800;
}

.rate-title p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}


/* Cards */

.rate-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 55px;
}

.rate-item {
    background: #fff;

    min-height: 70px;

    padding: 12px 16px;

    border: 1px solid #e9eef5;
    border-radius: 14px;

    box-shadow: 0 4px 15px rgba(20, 55, 100, .05);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    transition: all .25s ease;
}

.rate-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(20, 55, 100, .10);
}

.rate-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rate-info h4 {
    margin: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.rate-info p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 11px;
}


/* Icon */

.rate-icon {
    width: 44px;
    height: 44px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
    flex-shrink: 0;
}

.rate-icon.blue {
    background: #dbeafe;
    color: #2563eb;
}

.rate-icon.green {
    background: #dcfce7;
    color: #16a34a;
}

.rate-icon.purple {
    background: #f3e8ff;
    color: #9333ea;
}

.rate-icon.yellow {
    background: #fef9c3;
    color: #ca8a04;
}

.rate-icon.teal {
    background: #ccfbf1;
    color: #0f766e;
}

.rate-icon.red {
    background: #fee2e2;
    color: #dc2626;
}

.rate-icon.cyan {
    background: #cffafe;
    color: #0891b2;
}

.rate-icon.pink {
    background: #fce7f3;
    color: #db2777;
}


/* Rate badge */

.rate-value {
    background: #050505;
    color: #fff;

    padding: 7px 16px;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


/* Tablet */

@media (max-width: 900px) {

    .rate-grid {
        gap: 14px 20px;
    }

}


/* Mobile */

@media (max-width: 600px) {
	.footer-grid .brand img{margin: 0 auto;}
    .rates-section {
        padding: 60px 0;
    }

    .rates-heading h2 {
        font-size: 32px;
    }

    .rates-tabs {
        padding: 8px;
        border-radius: 14px 14px 0 0;
    }

    .rate-tab {
        min-height: 44px;
        padding: 8px 5px;
        font-size: 12px;
    }

    .rate-tab span {
        font-size: 14px;
    }

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

    .rate-item {
        padding: 11px 12px;
    }

    .rate-info {
        gap: 10px;
    }

    .rate-icon {
        width: 40px;
        height: 40px;
    }

    .rate-info h4 {
        font-size: 13px;
    }

    .rate-value {
        padding: 7px 10px;
        font-size: 11px;
    }

}
/* =========================================
   APP FEATURES
========================================= */

.app-features-section {
    padding: 80px 0;
    background: #ffffff;
}


/* Section Heading */

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 45px;
}

.section-title h2 {
    margin: 0;
    color: #111827;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
}

.section-title .line {
    width: 65px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #0088ff,
        #1e6ebe
    );
}


/* Feature Grid */

.feature-top-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* Feature Card */

.mini-feature {
    position: relative;

    text-align: center;

    padding: 35px 22px 30px;

    background: #ffffff;

    border: 1px solid #e8eef6;

    border-radius: 20px;

    box-shadow:
        0 8px 30px rgba(30, 110, 190, 0.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.mini-feature:hover {
    transform: translateY(-7px);

    border-color: #cfe7ff;

    box-shadow:
        0 18px 40px rgba(30, 110, 190, 0.13);
}


/* Icon */

.mini-icon {
    width: 76px;
    height: 76px;

    margin: 0 auto 22px;

    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform .3s ease;
}


.mini-feature:hover .mini-icon {
    transform: scale(1.08) rotate(-3deg);
}


.mini-icon img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    display: block;
}


/* Individual Icon Backgrounds */

.icon-rocket {
    background: #e0f2fe;
}

.icon-shield {
    background: #dcfce7;
}

.icon-phone {
    background: #ede9fe;
}

.icon-headset {
    background: #fff7ed;
}


/* Feature Title */

.mini-feature h3 {
    margin: 0 0 9px;

    color: #111827;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: .3px;
}


/* Feature Description */

.mini-feature p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .feature-top-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .app-features-section {
        padding: 60px 0;
    }

    .section-title {
        gap: 12px;
        margin-bottom: 30px;
    }

    .section-title h2 {
        font-size: 22px;
    }

    .section-title .line {
        width: 35px;
        height: 2px;
    }

    .feature-top-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .mini-feature {
        padding: 24px 14px 22px;
        border-radius: 16px;
    }

    .mini-icon {
        width: 60px;
        height: 60px;

        margin-bottom: 16px;

        border-radius: 16px;
    }

    .mini-icon img {
        width: 38px;
        height: 38px;
    }

    .mini-feature h3 {
        font-size: 13px;
    }

    .mini-feature p {
        font-size: 11px;
        line-height: 1.5;
    }

}
/* =========================================
   FEATURE GRID - 4 CARDS
========================================= */

.feature-grid-8 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}


/* Feature Card */

.feature-grid-8 .feature-card {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    padding: 24px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e8eef6;
    transition: all .3s ease;
}

.feature-grid-8 .feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(80,170,255,.35);
    box-shadow: 0 20px 45px rgba(0,0,0,.18);
}


/* Icon */

.feature-grid-8 .feature-icon {
    width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}

.feature-grid-8 .feature-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}


/* Different icon backgrounds */

.feature-grid-8 .icon-gift {
    background: rgba(255, 193, 7, .15);
}

.feature-grid-8 .icon-people {
    background: rgba(34, 197, 94, .15);
}

.feature-grid-8 .icon-cards {
    background: rgba(168, 85, 247, .15);
}

.feature-grid-8 .icon-bank {
    background: rgba(59, 130, 246, .15);
}


/* Text */

.feature-grid-8 .feature-copy {
    position: relative;
    z-index: 2;
    max-width: 100%;
}

.feature-grid-8 .feature-copy h3 {
    margin: 0 0 8px;
	text-align: center;
    color: #000;
    font-size: 15px;
    font-weight: 800;

    line-height: 1.3;
}

.feature-grid-8 .feature-copy p {
    margin: 0;

    color: #434343;

    font-size: 12px;
    line-height: 1.6;
}


/* Decorative image */

.feature-grid-8 .feature-art {
    position: absolute;
    right: -5px;
    bottom: -5px;

    z-index: 1;

    pointer-events: none;
}

.feature-grid-8 .feature-art img {
    display: block;
    object-fit: contain;
}


/* Individual artwork sizes */

.feature-grid-8 .art-box img {
    width: 125px;
}

.feature-grid-8 .art-phone img {
    width: 130px;
}

.feature-grid-8 .art-card img {
    width: 135px;
}

.feature-grid-8 .art-money img {
    width: 130px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .feature-grid-8 {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================
   MOBILE - 2 COLUMNS
========================================= */

@media (max-width: 600px) {

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

    .feature-grid-8 .feature-card {
        min-height: 220px;
        padding: 16px;
        border-radius: 16px;
    }

    .feature-grid-8 .feature-icon {
        width: 42px;
        height: 42px;

        border-radius: 12px;

        margin-bottom: 13px;
    }

    .feature-grid-8 .feature-icon img {
        width: 25px;
        height: 25px;
    }

    .feature-grid-8 .feature-copy {
        max-width: 100%;
    }

    .feature-grid-8 .feature-copy h3 {
        font-size: 11px;
        line-height: 1.35;
        margin-bottom: 6px;
    }

    .feature-grid-8 .feature-copy p {
        font-size: 9px;
        line-height: 1.45;
        text-align: center;
    }
  	.feature-grid-8 .feature-art{
		position: relative;
	}
  	.feature-grid-8 .feature-art img{
		margin:0 auto;
	}
    .feature-grid-8 .feature-art img {
        width: 85px;
      
    }

    .feature-grid-8 .art-box img {
        width: 85px;
    }

    .feature-grid-8 .art-phone img {
        width: 88px;
    }

    .feature-grid-8 .art-card img {
        width: 90px;
    }

    .feature-grid-8 .art-money img {
        width: 88px;
    }

}
/* =========================================
   DOWNLOAD SECTION
========================================= */

.download-box {
    display: grid;
    grid-template-columns: 1fr 420px;

    align-items: center;

    min-height: 560px;

    padding: 65px 75px;

    background:
        radial-gradient(
            circle at 80% 40%,
            rgba(65, 160, 255, .35),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #1260c8,
            #09295f
        );

    border-radius: 30px;

    overflow: hidden;

    position: relative;
}


/* Text */

.download-content {
    position: relative;
    z-index: 2;
}

.download-content h2 {
    max-width: 600px;

    margin: 15px 0;

    color: #fff;

    font-size: 44px;
    line-height: 1.1;

    letter-spacing: -1.5px;
}

.download-content h2 span {
    display: block;
    color: #8bd0ff;
}

.download-content p {
    max-width: 540px;

    margin-bottom: 30px;

    color: #c7dcf7;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================
   MOBILE PHONE
========================================= */

.download-phone {
    position: relative;

    height: 510px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 3;
}


/* Phone */

.mobile-device {
    position: relative;

    width: 270px;
    height: 525px;

    padding: 8px;

    background: #050505;

    border: 3px solid #536b91;

    border-radius: 42px;

    box-shadow:
        0 35px 70px rgba(0, 0, 0, .45),
        inset 0 0 0 2px rgba(255,255,255,.08);

    transform: rotate(0deg);

    transition: transform .4s ease;
}

.mobile-device:hover {
    transform: translateY(-8px);
}


/* Screen */

.mobile-screen {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #fff;

    border-radius: 34px;
}


/* Website iframe */

.mobile-screen iframe {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border: 0;

    background: #fff;
}


/* =========================================
   PHONE NOTCH
========================================= */

.mobile-notch {
    position: absolute;

    z-index: 10;

    top: 8px;
    left: 50%;

    transform: translateX(-50%);

    width: 95px;
    height: 25px;

    background: #050505;

    border-radius: 0 0 16px 16px;
}


/* Camera */

.mobile-notch::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #16253d;

    right: 15px;
    top: 8px;

    box-shadow:
        inset 0 0 0 2px #263b5a;
}


/* =========================================
   PHONE SIDE BUTTONS
========================================= */

.mobile-device::before {
    content: "";

    position: absolute;

    left: -5px;
    top: 105px;

    width: 3px;
    height: 55px;

    background: #536b91;

    border-radius: 5px;

    box-shadow:
        0 70px 0 #536b91;
}


.mobile-device::after {
    content: "";

    position: absolute;

    right: -5px;
    top: 135px;

    width: 3px;
    height: 70px;

    background: #536b91;

    border-radius: 5px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

    .download-box {
        grid-template-columns: 1fr;

        padding: 50px 35px;

        text-align: center;
    }

    .download-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .download-phone {
        margin-top: 35px;

        height: 500px;
    }

}

@media (min-width: 600px) {
	.h-desktop{
		display:none;
	}
	
}
@media (max-width: 600px) {
	.h-mobile{
		display:none;
	}
    .download-box {
        padding: 40px 20px;

        border-radius: 24px;
    }

    .download-content h2 {
        font-size: 32px;
    }

    .download-content p {
        font-size: 13px;
    }

    .download-phone {
        height: 440px;
		width:100%;
		align-items:center;
    }

    .mobile-device {
        width: 225px;
        height: 435px;

        border-radius: 34px;
    }

    .mobile-screen {
        border-radius: 27px;
    }

    .mobile-notch {
        width: 80px;
        height: 20px;

        border-radius: 0 0 13px 13px;
    }
	.hero .eyebrow {
		font-size:12px;
	}
	.hero h1{
		font-size: 1.125rem;
		letter-spacing: 0;
	}
	.hero-text {
	  font-size: 11px;
	}
}

/* =========================================
   IMAGE CAROUSEL
========================================= */

.image-carousel {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
}

.carousel-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.carousel-slide {
    display: none;
    width: 100%;
}

.carousel-slide.active-slide {
    display: block;
}

.carousel-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
}


/* Arrows */

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 50%;

    background: rgba(0, 0, 0, .55);
    color: #fff;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-arrow:hover {
    background: #1685f5;
}

.carousel-prev {
    left: 15px;
}

.carousel-next {
    right: 15px;
}


/* Dots */

.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    gap: 7px;

    z-index: 10;
}

.carousel-dot {
    width: 25px;
    height: 5px;

    padding: 0;
    border: 0;

    border-radius: 10px;

    background: rgba(255,255,255,.5);

    cursor: pointer;
}

.carousel-dot.active {
    width: 40px;
    background: #1685f5;
}


/* =========================================
   MOBILE - 1 IMAGE
========================================= */

@media (max-width: 600px) {

    .carousel-track {
        display: block;
    }

    .carousel-slide img {
        border-radius: 12px;
       
    }

    .carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 23px;
    }

    .carousel-prev {
        left: 8px;
    }

    .carousel-next {
        right: 8px;
    }

}