@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    --primary: #00A86B;
    --primary-variant: #00824D;
    --secondary: #003049;
    --secondary-variant: #013A50;
    --surface: #ffffff;
    --text: #000000;
}

html,
body {
    background: var(--surface);
    color: var(--text);
}

/* navbar */
.navbar {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.navbar-brand .brand-text {
    color: var(--secondary);
}

.navbar-brand img {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .04));
}

.nav-link {
    font-weight: 500;
    color: var(--text);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--primary-variant);
}

.nav-link.active {
    color: var(--primary);
}

.navbar-toggler .fa-bars {
    color: var(--primary);
}

.navbar.sticky-top {
    backdrop-filter: saturate(120%) blur(4px);
}

/* hero */

.hero-grid {
    position: relative;
    min-height: 100svh;
    background: var(--surface);
    overflow: hidden;
}

.hero-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg,
            rgba(1, 58, 80, .05) 0, rgba(1, 58, 80, 0.037) 1px,
            transparent 1px, transparent 70px),
        repeating-linear-gradient(90deg,
            rgba(1, 58, 80, .05) 0, rgba(1, 58, 80, .037) 1px,
            transparent 1px, transparent 70px);
    pointer-events: none;
}

.container {
    max-width: 1140px;
}

.content {
    max-width: 640px;
}

/* subtle top/bottom glows */
.glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    filter: blur(48px);
    opacity: .25;
    pointer-events: none;
    z-index: 0;
}

.g-top {
    top: -120px;
    right: -80px;
    background: radial-gradient(circle, color-mix(in oklab, var(--primary) 28%, transparent), transparent 60%);
}

.g-bottom {
    bottom: -140px;
    left: -100px;
    background: radial-gradient(circle, color-mix(in oklab, var(--secondary) 22%, transparent), transparent 60%);
}

/* text styles */
.eyebrow-hero {
    display: inline-block;
    font-size: .82rem;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--secondary) 70%, var(--text));
    background: color-mix(in oklab, var(--primary) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
    padding: .2rem 1rem;
    border-radius: 25rem;
    margin-bottom: .9rem;
}

.hero-heading {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
    color: var(--secondary);
    font-size: clamp(2.2rem, 3.6vw + .6rem, 4rem);
    margin: 0 .0 .4rem 0;
}

.brand-accent {
    color: var(--primary);
}

.hero-sub {
    color: color-mix(in oklab, var(--secondary-variant) 55%, var(--text));
    font-size: clamp(1rem, .8vw + .8rem, 1.15rem);
    margin: 0;
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .9rem 1.15rem;
    border-radius: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.cta-primary {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}

.cta-primary:hover {
    background: var(--primary-variant);
    border-color: var(--primary-variant);
    transform: translateY(-2px);
}

.cta-outline {
    background: transparent;
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.cta-outline:hover {
    background: var(--secondary);
    color: #fff;
    transform: translateY(-2px);
}

.points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .7rem;
}

.points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, 0.938);
    border: 1px solid rgba(0, 0, 0, .08);
    padding: .6rem .75rem;
}

.points i {
    color: var(--secondary-variant);
}

.device-group {
    position: relative;
    width: min(560px, 92vw);
    height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
}

.device {
    position: absolute;
    z-index: 1;
}

.device.behind {
    z-index: 0;
    left: 28px;
    top: 36px;
}

.device.main {
    right: 0;
    top: 0;
}

.frame {
    width: 260px;
    height: 520px;
    border-radius: 28px;
    padding: 8px;
    overflow: hidden;
}

.frame img {
    width: 260px;
    height: 520px;
    border-radius: 28px;
    padding: 8px;
    background: linear-gradient(180deg, #0d0f10, #121416);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .06),
        inset 0 0 0 2px rgba(0, 0, 0, .6);
    overflow: hidden;
}

.device.behind .frame {
    width: 228px;
    height: 456px;
}

.screen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Icon backgrounds */
.icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #0c3b33;
    /* icon color */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.bg-soft-teal {
    background: linear-gradient(180deg, #e8fff6, #d9fff2);
}

.bg-soft-amber {
    background: linear-gradient(180deg, #fff7e6, #ffefd1);
    color: #644a02;
}

.bg-soft-blue {
    background: linear-gradient(180deg, #eef7ff, #e2f1ff);
    color: #0a2a63;
}

/* Subtle hover for desktop */
@media (hover:hover) {
    .points .list-group-item:hover {
        background: #fcfdff;
    }
}

/* responsiveness */
@media (max-width: 991.98px) {
    .device-group {
        height: 460px;
    }

    .frame {
        width: 220px;
        height: 440px;
    }

    .device.behind .frame {
        width: 196px;
        height: 392px;
    }
}

@media (max-width: 575.98px) {
    .cta-outline, .cta-primary{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .content {
        text-align: center;
    }

    .device-group {
        height: 400px;
    }

    .frame {
        width: 200px;
        height: 400px;
    }

    .device.behind .frame {
        width: 176px;
        height: 352px;
    }
}

/* section 2 */

.section-one {
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(0, 168, 107, .10), transparent 60%),
        radial-gradient(70% 50% at 100% 0%, rgba(0, 48, 73, .08), transparent 60%),
        var(--surface);
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.wrap {
    width: min(1120px, 92vw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}

.col-text {
    animation: fadeUp .8s ease both;
}

.col-media {
    animation: fadeUp .8s ease .15s both;
}

.eyebrow {
    display: inline-block;
    font-size: .82rem;
    text-transform: uppercase;
    color: var(--secondary-variant);
    background: rgba(0, 168, 107, .10);
    border: 1px solid rgba(0, 168, 107, .25);
    padding: .35rem .9rem;
    border-radius: 999px;
    margin-bottom: .9rem;
}

.title {
    color: var(--secondary);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.12;
    font-size: clamp(1.6rem, 3.2vw + .5rem, 3rem);
    margin: 0 0 .4rem 0;
}

.sub {
    color: rgba(0, 0, 0, .72);
    font-size: 1.065rem;
    margin: 0 0 1.1rem 0;
}

.bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    display: grid;
    gap: .7rem;
}

.bullets li {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: rgba(0, 168, 107, .08);
    border: 1px solid rgba(0, 168, 107, .18);
    border-radius: 14px;
    padding: .6rem .75rem;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.bullets li:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    background: rgba(0, 168, 107, .12);
}

.bullets i {
    color: var(--primary);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.bullets span {
    color: var(--text);
    font-weight: 500;
}

.btn-app {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.05rem;
    border-radius: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    box-shadow: 0 12px 28px rgba(0, 168, 107, .25);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.btn-app:hover {
    background: var(--primary-variant);
    border-color: var(--primary-variant);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 130, 77, .28);
}

.btn-app i {
    font-size: 1.1rem;
}

.screens {
    position: relative;
    width: 100%;
    aspect-ratio: 1.1 / 1;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .12));
}

.screen img {
    display: block;
    width: 100%;
    height: auto;
}

.s1 {
    /* transform: rotate(-8deg) translate(-18%, -4%);
    animation: floatA 6s ease-in-out infinite; */
    z-index: 3;
}

.s2 {
    /* transform: rotate(4deg) translate(12%, 10%);
    animation: floatB 7s ease-in-out infinite; */
    z-index: 2;
}

.s3 {
    transform: rotate(-2deg) translate(5%, -6%);
    /* animation: floatC 8s ease-in-out infinite; */
    z-index: 1;
}

@keyframes floatA {

    0%,
    100% {
        transform: rotate(-8deg) translate(-18%, -4%);
    }

    50% {
        transform: rotate(-8deg) translate(-18%, -12%);
    }
}

@keyframes floatB {

    0%,
    100% {
        transform: rotate(4deg) translate(12%, 10%);
    }

    50% {
        transform: rotate(4deg) translate(12%, 2%);
    }
}

@keyframes floatC {

    0%,
    100% {
        transform: rotate(-2deg) translate(5%, -6%);
    }

    50% {
        transform: rotate(-2deg) translate(5%, -14%);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@media (max-width: 992px) {
    .wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .col-media {
        order: -1;
    }

    .screens {
        aspect-ratio: auto;
        min-height: 360px;
    }

    .screen {
        width: 62%;
    }
}

/* section-two  */

.badge-theme {
    background: rgba(0, 168, 107, .12);
    color: var(--secondary-variant);
    border: 1px solid rgba(0, 168, 107, .28);
}

.nav-pills{
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-pills .nav-link {
    color: var(--secondary);
    background: rgba(0, 48, 73, .04);
    border: 1px solid rgba(0, 48, 73, .18);
    width: 12rem;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.nav-pills .nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.nav-pills .nav-link.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 12px 28px rgba(0, 168, 107, .25);
}

.icon-theme {
    color: var(--primary);
}

.card-feature {
    transition: transform .2s ease, box-shadow .2s ease;
}

.card-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

@media (max-width: 600px) {
    .nav-pills{
        flex-direction: column;
    }
}

/* third section */

.section-three {
    background: #00a86a08;
}

.badge-theme {
    background: rgba(0, 168, 107, .12);
    color: var(--secondary-variant);
    border: 1px solid rgba(0, 168, 107, .28);
}

.collage .card {
    transition: transform .25s ease, box-shadow .25s ease;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .10));
}

.collage .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

.tilt-left {
    transform: rotate(-2.5deg);
}

.tilt-right {
    transform: rotate(2.5deg);
}

.list-group-item {
    background: rgba(0, 48, 73, .035);
    border-color: rgba(0, 48, 73, .12);
}

.icon-ring {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 10px 24px rgba(0, 168, 107, .25);
    flex-shrink: 0;
}


.chip {
    display: inline-block;
    font-size: .85rem;
    padding: .35rem .6rem;
    width: 10rem;
    text-align: center;
    border-radius: 999px;
    color: var(--secondary-variant);
    background: rgba(0, 168, 107, .10);
    border: 1px solid rgba(0, 168, 107, .25);
}

/* responsive polish */
@media (max-width: 991.98px) {

    .tilt-left,
    .tilt-right {
        transform: none;
    }
}

@media (max-width: 500px) {

    .chip {
        width: 100%;
    }
}

/* carousel */

/* this is the number: 2711 */

.badge-theme {
    background: rgba(0, 168, 107, .12);
    color: var(--secondary-variant);
}

.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(0, 48, 73, .25);
    border: 1px solid rgba(0, 48, 73, .35);
    margin: 0 6px;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.carousel-indicators .active {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.15);
    box-shadow: 0 10px 24px rgba(0, 168, 107, .25);
}

.control-pill {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 12px 28px rgba(0, 168, 107, .25);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.carousel-control-prev,
.carousel-control-next {
    width: auto;
    opacity: 1;
}

.carousel-control-prev:hover .control-pill,
.carousel-control-next:hover .control-pill {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 130, 77, .28);
    background: var(--primary-variant);
}

.caption-pill {
    display: inline-block;
    margin: 0;
    padding: .35rem .6rem;
    font-weight: 600;
    font-size: .9rem;
    border-radius: 999px;
    color: var(--secondary-variant);
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(0, 48, 73, .18);
    backdrop-filter: blur(4px);
}

#screenshots .ratio-9x16 {
    --bs-aspect-ratio: 177.78%;
}

.object-fit-cover {
    object-fit: cover;
}

#screenshots .carousel-inner .carousel-item {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

#screenshots .col-slide {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width:1200px) {
    #screenshots .col-slide {
        flex: 0 0 20%;
        max-width: 20%;
    }

    /* 5 items */
}

#screenshots .shot {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .06);
    background: #f8f9fa;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
}

/* responsive tweaks */
@media (max-width: 575.98px) {
    .control-pill {
        width: 40px;
        height: 40px;
    }
}

/* ===== Footer ===== */
#site-footer {
    background:
        radial-gradient(1200px 600px at -10% -20%, rgba(0, 184, 148, .18), transparent 50%),
        radial-gradient(900px 500px at 110% 0%, rgba(14, 165, 233, .18), transparent 55%),
        linear-gradient(180deg, #0b1720 0%, #07121a 100%);
    color: #d7e3ea;
}

#site-footer .text-muted {
    color: #a9bac6 !important;
}

#site-footer a {
    color: #d7e3ea;
    text-decoration: none;
}

#site-footer a:hover {
    color: #47e0c5;
}

/* Brand/logo */
#site-footer .brand {
    display: flex;
    align-items: center;
}

#site-footer .brand h5 {
    font-weight: 500;
    font-size: 1.6rem;
}

#site-footer .brand .logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #0fd1b3, #0aa58e);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .12);
    display: grid;
    place-items: center;
}

#site-footer .brand .logo img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
}

/* Link columns */
#site-footer .footer-links .title {
    font-weight: 600;
    letter-spacing: .2px;
    color: #eaf3f8;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

#site-footer .footer-links ul {
    margin: 0;
}

#site-footer .footer-links li+li {
    margin-top: .9rem;
}

/* Bottom bar */
#site-footer .bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, .08);
}