* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #020817;
    color: white;
    overflow-x: hidden;
    min-height: 100vh;
    width: 100%;
}

header,
.hero,
.hero-box {
    width: min(95%, 90rem);
    margin: auto;
}

.bg-glow {
    position: fixed;
    top: -32rem;
    left: 50%;
    transform: translateX(-50%);
    width: 75rem;
    height: 75rem;
    background: radial-gradient(circle,
            rgba(0, 119, 255, .25),
            transparent 70%);
    pointer-events: none;
}

header {
    width: 95%;
    margin: auto;
    padding: 0rem 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo {
    margin-right: 0.02rem;
}

.logo img {
    width: 3rem;
    height: 4.1rem;
}

.divider {
    width: 0.2rem;
    height: 4rem;
    background: #1f3b63;
    margin-right: 0.5rem;
}

.product h3 {
    color: #4de1ff;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    background: linear-gradient(90deg,
            #a9e451,
            #22d3ee,
            #8affe4);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 8px rgba(138, 182, 236, 0.6),
        0 0 15px rgba(34, 211, 238, .5),
        0 0 25px rgba(34, 211, 238, .4);

    animation: glowPulse 3s ease-in-out infinite;
}

.product p {
    font-size: 0.8rem;
    color: #dae8f8;
    width: 96%;
    margin-left: 2.7rem;
}

nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

nav a {
    color: #d5e4ff;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

nav a.active {
    color: white;
}

nav a.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.8rem;
    width: 90%;
    height: 0.25rem;
    background: #21c6ff;
    border-radius: 19%;
}

.nav-btns {
    justify-self: end;
    display: flex;
    gap: 1rem;
}

.login {
    background: transparent;
    color: white;
    padding: 0.1rem 1rem;
    border-radius: 1rem;
    font-size: 1rem;
    cursor: pointer;
}

.demo {
    border: none;
    background: linear-gradient(90deg,
            #2563eb,
            #38bdf8);
    color: rgb(0, 0, 0);
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    font-size: 1rem;
    cursor: pointer;
}

.hero {
    width: 94%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    gap: 1rem;
}

.hero-left {
    flex: 1;
}

.tag {
    display: inline-block;
    padding: 0.5rem 2rem;
    border-radius: 0.75rem;
    background: rgba(32, 89, 255, .15);
    border: 0.1rem solid rgba(32, 89, 255, .3);
    color: #6bcfff;
    margin-bottom: 2.2rem;
    font-size: 1rem;
    margin-left: 10rem;
}

.hero-left h1 {
    font-size: 3.3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.hero-left h1 span {
    color: rgb(67, 229, 26);
}

.hero-left p {
    font-size: 1rem;
    line-height: 1.1;
    color: #deebfb;
    max-width: 150rem;
    margin-bottom: 2.6rem;
}

.buttons {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    margin-left: 8rem;
}

.primary {
    padding: 0.7rem 2rem;
    border: none;
    border-radius: 1.75rem;
    background: linear-gradient(90deg,
            #2563eb,
            #38bdf8);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: 600;
}

.secondary {
    padding: 0.8rem 2rem;
    border: 0.1rem solid #2345a8;
    background: transparent;
    color: white;
    border-radius: 1.75rem;
    font-size: 1rem;
    cursor: pointer;
}

.features {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    margin-top: 1rem;
    color: #d7e6ff;
    overflow-x: auto;
}

.features div {
    font-size: 1.1rem;

}

.hero-right {
    flex: 1;
    display: flex;
    justify-content: end;
    align-items: flex-end;
}

.hero-right img {
    width: 100%;
    max-width: 39rem;
    object-fit: contain;
    background: transparent;
}

.hero-box {
    width: 90%;
    margin: 1rem auto;
    padding: .7rem;
    border-radius: 1.963rem;
    border: 0.2rem solid rgb(46, 149, 183);
    background: rgba(8, 18, 40, .85);

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.575rem;
}

.hero-item {
    padding: 0rem 0.7rem;
    border-right: 0.15rem solid rgba(10, 84, 140, 0.81);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 3.8rem;
}

.hero-item:last-child {
    border-right: none;
}

.hero-item h4 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
    color: #37c7ff;
}

.hero-item p {
    font-size: 0.8rem;
    color: #c8d7ea;
    line-height: 1;
}

.hero-item img {
    width: 3.8rem;
    height: 4.8rem;
}

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content h4 {
    margin-bottom: 0.1rem;
}

.hero-content p {
    line-height: 1.1;
}

@media (max-width:1400px) {

    header {
        width: 98%;
    }

    nav {
        gap: 1.2rem;
    }

    .hero-left h1 {
        font-size: 3rem;
    }

    .hero-right img {
        max-width: 35rem;
    }

    .hero-box {
        width: 95%;
    }

}

@media (max-width:1200px) {

    header {
        grid-template-columns: auto auto;
        row-gap: 1rem;
    }

    nav {
        grid-column: 1/3;
        justify-content: center;
    }

    .hero {
        gap: 2rem;
    }

    .hero-left h1 {
        font-size: 2.7rem;
    }

    .tag {
        margin-left: 0;
    }

    .buttons {
        margin-left: 0;
    }

    .hero-right img {
        max-width: 31rem;
    }

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

    .hero-item:nth-child(2) {
        border-right: none;
    }

}

@media (max-width:992px) {

    header {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
    }

    .logo-area {
        justify-content: center;
        flex-wrap: wrap;
    }

    nav {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .nav-btns {
        justify-content: center;
    }

    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-left {
        order: 2;
    }

    .hero-right {
        order: 1;
        justify-content: center;
    }

    .hero-right img {
        max-width: 28rem;
    }

    .hero-left h1 {
        font-size: 2.5rem;
    }

    .hero-left p {
        max-width: 45rem;
        margin: auto;
    }

    .tag {
        margin-left: 0;
    }

    .buttons {
        justify-content: center;
        margin-left: 0;
    }

    .hero-box {
        grid-template-columns: 1fr 1fr;
    }

    .hero-item {
        border-right: none;
        border-bottom: .1rem solid rgba(255, 255, 255, .1);
        padding: 1rem;
    }

    .hero-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

}

@media (max-width:768px) {

    .logo img {
        width: 3rem;
        height: auto;
    }

    .brand h2 {
        font-size: 1.3rem;
    }

    .product h3 {
        font-size: 1.3rem;
    }

    .product p {
        font-size: .7rem;
    }

    nav {
        gap: .8rem;
    }

    nav a {
        font-size: .9rem;
    }

    .hero-left h1 {
        font-size: 2.1rem;
    }

    .hero-left p {
        font-size: 1rem;
    }

    .buttons {
        flex-direction: column;
        align-items: center;
    }

    .primary,
    .secondary {
        width: 16rem;
    }

    .hero-box {
        grid-template-columns: 1fr;
    }

    .hero-item {
        border-right: none;
        border-bottom: .1rem solid rgba(255, 255, 255, .08);
    }

    .hero-item:last-child {
        border-bottom: none;
    }

}

@media (max-width:576px) {

    body {
        overflow-x: hidden;
    }

    header {
        width: 100%;
        padding: 1rem;
    }

    .logo-area {
        flex-direction: column;
        text-align: center;
    }

    .divider {
        display: none;
    }

    .product {
        text-align: center;
    }

    nav {
        gap: .8rem;
    }

    nav a {
        font-size: .85rem;
    }

    .hero {
        padding: 2rem 1rem;
    }

    .hero-left h1 {
        font-size: 1.8rem;
    }

    .hero-left p {
        font-size: .95rem;
    }

    .hero-right img {
        max-width: 18rem;
    }

    .primary,
    .secondary {
        width: 100%;
    }

    .hero-box {
        width: 100%;
    }

    .hero-item {
        flex-direction: column;
        text-align: center;
    }

    .hero-item img {
        width: 3rem;
    }

    .hero-content h4 {
        font-size: 1rem;
    }

    .hero-content p {
        font-size: .8rem;
    }

}

@media (max-width:400px) {

    .logo img {
        width: 2.7rem;
    }

    .brand h2 {
        font-size: 1.1rem;
    }

    .product h3 {
        font-size: 1rem;
    }

    .product p {
        font-size: .65rem;
    }

    .hero-left h1 {
        font-size: 1.5rem;
    }

    .hero-left p {
        font-size: .85rem;
    }

    nav {
        gap: .6rem;
    }

    nav a {
        font-size: .8rem;
    }

    .primary,
    .secondary {
        font-size: .9rem;
        padding: .8rem;
    }

}

.real-story {
    position: relative;
    width: 100%;
    margin: 3.5rem auto;
    padding: 3rem;

    border: 0.1rem solid rgba(0, 170, 255, .15);

    border-radius: 1rem;

    background:
        linear-gradient(180deg,
            rgba(9, 22, 55, .85),
            rgba(3, 10, 25, .95));

    overflow: hidden;
}

.story-glow {
    position: absolute;
    width: 30rem;
    height: 30rem;

    right: -10rem;
    top: -10rem;

    background:
        radial-gradient(circle,
            rgba(0, 140, 255, .3),
            transparent 70%);

    pointer-events: none;
}

.story-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.story-tag {
    display: inline-block;

    padding: .5rem 1.5rem;

    border-radius: 60rem;

    background:
        rgba(0, 150, 255, .12);

    border:
        0.01rem solid rgba(0, 150, 255, .25);

    color: #59d9ff;

    margin-bottom: 1rem;
    margin-left: 28rem;
}

.story-left h2 {
    font-size: 2.7rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    width: 60%;
}

.story-left h2 span {
    background:
        linear-gradient(90deg,
            #2de2ff,
            #3bf6ae,
            #03d972);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.story-desc {
    font-size: 1.1rem;
    color: #d7e6ff;
    line-height: 1.7;
    margin-bottom: 1.3rem;
    width: 80%;
}

.penalty-box {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 2rem;
    background:
        linear-gradient(135deg,
            rgba(45, 8, 35, .95),
            rgba(25, 10, 55, .95));
    border: 0.01rem solid rgba(255, 70, 120, .35);
    box-shadow:
        0 0 2rem rgba(255, 70, 120, .12),
        inset 0 0 2rem rgba(255, 70, 120, .05);
}

.penalty-icon {
    width: 4.5rem;
    height: 4.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    font-size: 2rem;
    background:
        linear-gradient(135deg,
            rgba(255, 60, 120, .18),
            rgba(255, 60, 120, .08));
    border: 0.01rem solid rgba(255, 60, 120, .4);
    box-shadow:
        0 0 3rem rgba(255, 60, 120, .2);
}

.penalty-content h3 {
    color: #ff4f8d;
    font-size: 1.7rem;
    margin-bottom: .1rem;
}

.penalty-content p {
    color: #ffffff;
    font-size: 1rem;
}

.risk-list {
    list-style: none;
}

.risk-list li {
    margin-bottom: .7rem;
    color: #d9e8ff;
}

.story-right img {
    width: 100%;
    max-width: 50rem;
    display: block;
    margin: auto;
    background: transparent;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.impact-card {
    padding: 1rem;
    text-align: center;
    border-radius: 2rem;
    background:
        linear-gradient(180deg,
            rgba(6, 20, 50, .95),
            rgba(2, 10, 30, .98));
    border: 0.01rem solid rgba(0, 150, 255, .15);
    transition: .35s;
}

.impact-card:hover {
    transform: translateY(-0.5rem);
    border-color: #00bfff;
    box-shadow:
        0 0 3rem rgba(0, 170, 255, .2);
}

.impact-card img {
    width: 8rem;
    height: 6rem;
    margin-bottom: 0.4rem;
    filter:
        drop-shadow(0 0 0.5rem #00a6ff);
}

.impact-card h3 {
    color: #4dd9ff;
    margin-bottom: .6rem;
    font-size: 1.5rem;
}

.impact-card p {
    color: #d4e5ff;
    font-size: 1rem;
}

.dpdp-timeline {
    width: 90%;
    margin: 0.1rem auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.1rem;
    background:
        linear-gradient(180deg,
            rgba(5, 20, 55, .85),
            rgba(2, 8, 25, .95));
    border-radius: 4rem;
    margin-left: 4rem;
}

.timeline-step {
    width: 7rem;
    text-align: center;
    position: relative;
}

.circle {
    width: 5rem;
    height: 4.9rem;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(0.1rem);
}

.circle::before {
    content: '';
    position: absolute;
    inset: -0.1rem;
    border-radius: 50%;
    border: 0.4rem solid currentColor;
    opacity: .35;
}

.circle img {
    width: 6rem;
    height: 5rem;
    object-fit: contain;
}

/* BLUE */
.blue {
    color: #25b8ff;
    border: 0.2rem solid #25b8ff;
    box-shadow:
        0 0 0.2rem #25b8ff,
        inset 0 0 0.2rem rgba(37, 184, 255, .2);
}

/* CYAN */
.cyan {
    color: #00e5ff;
    border: 0.2rem solid #00e5ff;
    box-shadow:
        0 0 0.2rem #00e5ff,
        inset 0 0 0.2rem rgba(0, 229, 255, .2);
}

/* PINK */
.pink {
    color: #ee6a12;
    border: 0.2rem solid #ee6a12;
    box-shadow:
        0 0 0.2rem #ee6a12,
        inset 0 0 0.2rem rgba(255, 46, 207, .2);
}

/* PURPLE */
.purple {
    color: #b24cff;
    border: 0.2rem solid #b24cff;
    box-shadow:
        0 0 0.2rem #b24cff,
        inset 0 0 0.2rem rgba(178, 76, 255, .2);
}

/* RED */
.red {
    color: #ff3131;
    border: 0.2rem solid #ff3131;
    box-shadow:
        0 0 0.25rem #ff3131,
        inset 0 0 0.25rem rgba(255, 49, 49, .2);
}

.timeline-step h3 {
    margin-top: 0.7rem;
    color: white;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}

.timeline-step p {
    margin-top: .7rem;
    color: #c7d8f3;
    font-size: .95rem;
    line-height: 1.2;
    width: 80%;
}

.arrow {
    font-size: 2.7rem;
    font-weight: bold;
    margin-top: 1rem;
    color: #4fc3ff;
    text-shadow:
        0 0 0.06rem #4fc3ff;
}

@media (max-width:1600px) {

    .real-story {
        padding: 3rem 2rem;
    }

    .story-content {
        gap: 3rem;
    }

    .dpdp-timeline {
        width: 100%;
        margin-left: 0;
    }

    .story-tag {
        margin-left: 0;
    }

}

@media (max-width:1400px) {

    .story-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .story-left h2 {
        width: 100%;
        font-size: 2.5rem;
    }

    .story-desc {
        width: 100%;
    }

    .story-tag {
        margin-left: 0;
    }

    .dpdp-timeline {
        width: 100%;
        margin-left: 0;
    }

}

@media (max-width:1200px) {

    .story-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .story-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .story-tag {
        margin-left: 0;
    }

    .story-left h2 {
        width: 100%;
    }

    .story-desc {
        width: 90%;
    }

    .penalty-box {
        width: 100%;
        max-width: 42rem;
    }

    .risk-list {
        width: 100%;
    }

    .dpdp-timeline {
        width: 100%;
        margin-left: 0;
    }

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

}

@media (max-width:992px) {

    .real-story {
        padding: 2rem;
    }

    .story-left h2 {
        font-size: 2.2rem;
    }

    .story-desc {
        font-size: 1rem;
    }

    .penalty-box {
        flex-direction: column;
        text-align: center;
    }

    .dpdp-timeline {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 2rem;

        border-radius: 2rem;

        padding: 2rem;

    }

    .arrow {
        display: none;
    }

    .timeline-step {
        width: 100%;
    }

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

}

@media (max-width:768px) {

    .real-story {
        padding: 1.5rem;
    }

    .story-tag {
        margin: auto;
    }

    .story-left h2 {
        font-size: 2rem;
    }

    .story-desc {
        width: 100%;
    }

    .penalty-content h3 {
        font-size: 1.4rem;
    }

    .penalty-content p {
        font-size: .95rem;
    }

    .dpdp-timeline {

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

    }

    .timeline-step {

        max-width: 10rem;

        margin: auto;

    }

    .circle {

        width: 4.5rem;

        height: 4.5rem;

    }

    .circle img {

        width: 3rem;

        height: 3rem;

    }

    .timeline-step h3 {
        font-size: .9rem;
    }

    .timeline-step p {
        width: 100%;
        font-size: .8rem;
    }

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

}

@media (max-width:576px) {

    .real-story {
        padding: 1.2rem;
    }

    .story-tag {
        font-size: .8rem;
    }

    .story-left h2 {
        font-size: 1.8rem;
    }

    .story-desc {
        font-size: .95rem;
    }

    .penalty-box {
        padding: 1rem;
    }

    .penalty-icon {

        width: 3.8rem;

        height: 3.8rem;

        font-size: 1.6rem;

    }

    .dpdp-timeline {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    .timeline-step {

        max-width: 14rem;

    }

    .circle {

        width: 4rem;

        height: 4rem;

    }

    .circle img {

        width: 2.8rem;

        height: 2.8rem;

    }

    .impact-card img {

        width: 5rem;

        height: 4rem;

    }

    .impact-card h3 {

        font-size: 1.2rem;

    }

    .impact-card p {

        font-size: .9rem;

    }

}

@media (max-width:400px) {

    .real-story {
        padding: 1rem;
    }

    .story-left h2 {
        font-size: 1.5rem;
    }

    .story-desc {
        font-size: .9rem;
    }

    .story-tag {

        width: 100%;

        text-align: center;

    }

    .penalty-content h3 {
        font-size: 1.2rem;
    }

    .penalty-content p {
        font-size: .85rem;
    }

    .risk-list li {
        font-size: .9rem;
    }

    .timeline-step h3 {
        font-size: .85rem;
    }

    .timeline-step p {
        font-size: .75rem;
    }

    .impact-card {

        padding: 1rem;

    }

}

.dpdp-act-section {
    position: relative;
    width: 100%;
    padding: 4rem 2rem;
    margin-top: 3rem;
    border-radius: 2rem;
    background:
        linear-gradient(180deg,
            rgba(9, 22, 55, .85),
            rgba(3, 10, 25, .95));
    overflow: hidden;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    border-radius: 3.125rem;
    border: 0.0625rem solid rgba(33, 196, 255, .25);
    background: rgba(33, 196, 255, .08);
    color: #84dfff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03125rem;
    margin-bottom: 2.25rem;
    margin-top: 1rem;
    backdrop-filter: blur(0.9375rem);
}

.section-glow {
    position: absolute;
    top: -12rem;
    right: -8rem;
    width: 30rem;
    height: 30rem;
    background:
        radial-gradient(circle,
            rgba(0, 170, 255, .18),
            transparent 70%);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: white;
}

.section-header h2 span {
    background:
        linear-gradient(90deg,
            #2de2ff,
            #3bf6ae,
            #03d972);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-header p {
    font-size: 1rem;
    text-align: center;
}

.header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.3rem;
    margin-top: 1.3rem;
}

.header-divider span {
    width: 12rem;
    height: 0.12rem;
    background:
        linear-gradient(90deg,
            transparent,
            #00cfff,
            transparent);
}

.shield-icon {
    font-size: 2.3rem;
}

.dpdp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.4rem;
}

.dpdp-card {
    position: relative;
    padding: 1rem;
    text-align: center;
    border-radius: 1.5rem;
    background:
        rgba(255, 255, 255, .04);
    backdrop-filter: blur(1rem);
    transition: .35s;
}

.dpdp-card:hover {
    transform: translateY(-0.5rem);
    box-shadow:
        0 0 2rem rgba(0, 200, 255, .2);
}

.card-image img {
    width: 100%;
    max-width: 8rem;
    height: auto;
    margin-bottom: 0.1rem;
}

.dpdp-card h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: white;
}

.dpdp-card p {
    color: #d6e4ff;
    line-height: 1.3;
    font-size: .95rem;
}

.dpdp-card strong {
    color: #ff1629;
}

.card-number {
    position: absolute;
    left: 50%;
    bottom: -2rem;
    transform: translateX(-50%);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-weight: 700;
}

/* COLORS */
.card-purple {
    border: 0.1rem solid rgba(153, 102, 255, .4);
}

.card-purple .card-number {
    background: #8b5cf6;
}

.card-blue {
    border: 0.1rem solid rgba(59, 130, 246, .4);
}

.card-blue .card-number {
    background: #3b82f6;
}

.card-green {
    border: 0.1rem solid rgba(0, 210, 170, .4);
}

.card-green .card-number {
    background: #00d4aa;
}

.card-orange {
    border: 0.1rem solid rgba(255, 140, 0, .4);
}

.card-orange .card-number {
    background: #ff8c00;
}

.card-cyan {
    border: 0.1rem solid rgba(0, 200, 255, .4);
}

.card-cyan .card-number {
    background: #00cfff;
}

@media(max-width:75rem) {
    .dpdp-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:48rem) {
    .section-header h2 {
        font-size: 2rem;
    }

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

@media(max-width:30rem) {
    .dpdp-grid {
        grid-template-columns: 1fr;
    }

    .header-divider span {
        width: 5rem;
    }
}

.compliance {
    width: 100%;
    padding: 2rem 2rem;
    overflow: hidden;
}

.heading {
    text-align: center;
}

.heading h1 {
    font-size: 2.9rem;
    font-weight: 800;
    letter-spacing: -0.05rem;
    margin-bottom: 0.1rem;
}

.heading h1 span {
    background:
        linear-gradient(90deg,
            #2de2ff,
            #3bf6ae,
            #03d972);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.heading p {
    margin-top: 0.1rem;
    font-size: 1.1rem;
    line-height: 1;
    color: white;
}

.heading strong {
    color: #ff1629;
}

.hero-area {
    position: relative;
    width: 100%;
    height: 32rem;
    margin-top: -4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.network-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.glow-path {
    fill: none;
    stroke: #4ddfff;
    stroke-width: .25rem;
    stroke-linecap: round;
    stroke-dasharray: .6rem .9rem;
    animation: flow 4s linear infinite;
    filter:
        drop-shadow(0 0 .3rem #4ddfff) drop-shadow(0 0 .7rem #4ddfff);
}

@keyframes flow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -12rem;
    }
}

.floating-node {
    position: absolute;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .03));
    backdrop-filter: blur(1rem);
    border: .12rem solid rgba(100, 200, 255, .4);
    z-index: 3;
    box-shadow:
        0 0 2rem rgba(80, 120, 255, .25);
    animation: float 4s infinite ease-in-out;
}

.node-1 {
    left: 25%;
    top: 14%;
}

.node-2 {
    left: 25%;
    bottom: 17%;
}

.node-3 {
    right: 25%;
    top: 14%;
}

.node-4 {
    right: 25%;
    bottom: 17%;
}

.floating-node img {
    width: 120%;
    height: 120%;
    object-fit: contain;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1rem);
    }
}

@keyframes pulse {

    0%,
    100% {
        filter:
            drop-shadow(0 0 1rem #4ddfff);
    }

    50% {
        filter:
            drop-shadow(0 0 3rem #4ddfff);
    }
}

.center-image {
    width: 20rem;
    position: relative;
    z-index: 5;
    animation: pulse 3s infinite;
}

.timeline-wrapper {
    position: relative;
    width: 100%;
    margin-top: -4.3rem;
}

.timeline-svg {
    position: absolute;
    top: 0.1rem;
    width: 100%;
    height: 5rem;
    z-index: 1;
}

.main-curve {
    fill: none;
    stroke: #48d9ff;
    stroke-width: 4;
}

.icon-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;
    z-index: 5;
    align-items: center;
}

.icon-node {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: none;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0.1rem 1rem rgba(0, 0, 0, .15);
}

.icon-node img {
    width: 12rem;
}

.connector-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: -0.11rem;
    position: relative;
    z-index: 2;
}

.connector-row span {
    width: 0.15rem;
    height: 3rem;
    margin: auto;
    background:
        repeating-linear-gradient(to bottom,
            #35d5ff 0 0.4rem,
            transparent 0.9rem 0.4rem);
}

.items {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2.5rem;
}

.box {
    background:
        linear-gradient(180deg,
            rgba(6, 20, 50, .95),
            rgba(2, 10, 30, .98));
    border: 0.01rem solid rgba(0, 150, 255, .15);
    border-radius: 2rem;
    border-color: #821b8b;
    padding: 1rem 1rem;
    text-align: center;
    backdrop-filter: blur(1rem);
    box-shadow:
        0 0 1.8rem rgba(80, 130, 255, .18);
    transition: .4s;
}

.box:hover {
    transform:
        translateY(-.8rem);
    box-shadow:
        0 0 3rem rgba(80, 130, 255, .4);
}

.box h3 {
    font-size: 1.2rem;
    line-height: 1.1;
    background:
        linear-gradient(90deg,
            #3ccbff,
            #05d5f1);
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: .3rem;
}

.box p {
    font-size: 1rem;
    line-height: 1;
    color: #fdfafa;
}

.desktop-timeline {
    display: block;
}

.mobile-timeline {
    display: none;
}

@media (max-width:768px) {

    .desktop-timeline {
        display: none;
    }

    .mobile-timeline {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }

    .mobile-card {

        display: flex;
        align-items: center;
        gap: 1rem;

        padding: 1rem;

        border-radius: 1rem;

        background: rgba(8, 25, 70, .8);

        border: 1px solid rgba(0, 180, 255, .3);

    }

    .mobile-card img {

        width: 4rem;
        height: 4rem;
        object-fit: contain;

    }

    .mobile-card h3 {

        font-size: 1rem;
        color: #35d5ff;

    }

    .mobile-card p {

        font-size: .85rem;
        color: white;

    }

    .node-1,
    .node-2,
    .node-3,
    .node-4 {
        display: none;
    }

    .center-image {
        margin-top: 4rem;
    }

}

@media (max-width:1600px) {

    .hero-area {
        height: 30rem;
    }

    .center-image {
        width: 18rem;
    }

    .floating-node {
        width: 6.5rem;
        height: 6.5rem;
    }

    .icon-node img {
        width: 10rem;
    }

    .items {
        gap: 2rem;
    }

}

@media (max-width:1400px) {

    .heading h1 {
        font-size: 2.6rem;
    }

    .hero-area {
        height: 28rem;
    }

    .center-image {
        width: 17rem;
    }

    .node-1 {
        left: 18%;
    }

    .node-2 {
        left: 18%;
    }

    .node-3 {
        right: 18%;
    }

    .node-4 {
        right: 18%;
    }

    .icon-node {
        width: 3.8rem;
        height: 3.8rem;
    }

    .icon-node img {
        width: 9rem;
    }

    .items {
        gap: 1.5rem;
    }

    .box {
        padding: .9rem;
    }

}

@media (max-width:1200px) {

    .heading h1 {
        font-size: 2.3rem;
    }

    .heading p {
        font-size: 1rem;
    }

    .hero-area {
        height: 25rem;
    }

    .center-image {
        width: 15rem;
    }

    .floating-node {
        width: 6rem;
        height: 6rem;
    }

    .node-1 {
        left: 12%;
    }

    .node-2 {
        left: 12%;
    }

    .node-3 {
        right: 12%;
    }

    .node-4 {
        right: 12%;
    }

    .icon-node img {
        width: 8rem;
    }

    .box h3 {
        font-size: 1rem;
    }

    .box p {
        font-size: .9rem;
    }

}

@media (max-width:992px) {

    .hero-area {

        height: auto;

        padding: 3rem 0;

    }

    .network-lines {

        display: none;

    }

    .hero-area {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

        justify-items: center;

    }

    .center-image {

        grid-column: 1/3;

        order: -1;

        width: 14rem;

    }

    .floating-node {

        position: static;

        width: 5.5rem;

        height: 5.5rem;

    }

    .timeline-svg {

        display: none;

    }

    .connector-row {

        display: none;

    }

    .icon-row {

        grid-template-columns: repeat(4, 1fr);

        row-gap: 2rem;

    }

    .items {

        grid-template-columns: repeat(2, 1fr);

    }

    .box {

        min-height: 9rem;

    }

    .desktop-timeline {
        display: none;
    }

    .mobile-timeline {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }

    .mobile-card {

        display: flex;
        align-items: center;
        gap: 1rem;

        padding: 1rem;

        border-radius: 1rem;

        background: rgba(8, 25, 70, .8);

        border: 1px solid rgba(0, 180, 255, .3);

    }

    .mobile-card img {

        width: 4rem;
        height: 4rem;
        object-fit: contain;

    }

    .mobile-card h3 {

        font-size: 1rem;
        color: #35d5ff;

    }

    .mobile-card p {

        font-size: .85rem;
        color: white;

    }

    .node-1,
    .node-2,
    .node-3,
    .node-4 {
        display: none;
    }

    .center-image {
        margin-top: 4rem;
    }

}

@media(max-width:576px) {

    .hero-area {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        justify-items: center;

        gap: 1.5rem;

        height: auto;

        padding: 2rem 0;

    }

    .center-image {

        grid-column: 1/3;

        width: 10rem;

        margin-bottom: 1rem;

    }

    .floating-node {

        position: static;

        width: 4.5rem;
        height: 4.5rem;

    }

    .desktop-timeline {
        display: none;
    }

    .mobile-timeline {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }

    .mobile-card {

        display: flex;
        align-items: center;
        gap: 1rem;

        padding: 1rem;

        border-radius: 1rem;

        background: rgba(8, 25, 70, .8);

        border: 1px solid rgba(0, 180, 255, .3);

    }

    .mobile-card img {

        width: 4rem;
        height: 4rem;
        object-fit: contain;

    }

    .mobile-card h3 {

        font-size: 1rem;
        color: #35d5ff;

    }

    .mobile-card p {

        font-size: .85rem;
        color: white;

    }

    .node-1,
    .node-2,
    .node-3,
    .node-4 {
        display: none;
    }

    .center-image {
        margin-top: 4rem;
    }

}

@media (max-width:400px) {

    .heading h1 {

        font-size: 1.5rem;

    }

    .heading p {

        font-size: .85rem;

    }

    .center-image {

        width: 8rem;

    }

    .floating-node {

        width: 4rem;

        height: 4rem;

    }

    .icon-node {

        width: 3.5rem;

        height: 3.5rem;

    }

    .icon-node img {

        width: 5rem;

    }

    .box {

        padding: .8rem;

    }

    .box h3 {

        font-size: 1rem;

    }

    .box p {

        font-size: .85rem;

    }

    .desktop-timeline {
        display: none;
    }

    .mobile-timeline {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }

    .mobile-card {

        display: flex;
        align-items: center;
        gap: 1rem;

        padding: 1rem;

        border-radius: 1rem;

        background: rgba(8, 25, 70, .8);

        border: 1px solid rgba(0, 180, 255, .3);

    }

    .mobile-card img {

        width: 4rem;
        height: 4rem;
        object-fit: contain;

    }

    .mobile-card h3 {

        font-size: 1rem;
        color: #35d5ff;

    }

    .mobile-card p {

        font-size: .85rem;
        color: white;

    }

    .node-1,
    .node-2,
    .node-3,
    .node-4 {
        display: none;
    }

    .center-image {
        margin-top: 4rem;
    }

}

.dpdp-showcase {
    padding: 0.625rem 1.25rem;
    position: relative;
    overflow: hidden;
}

.dpdp-showcase::before {
    content: "";
    position: absolute;
    width: 56.25rem;
    height: 56.25rem;
    background: radial-gradient(circle, rgba(87, 80, 255, .18), transparent 70%);
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
}

.head {
    text-align: center;
    max-width: 56.25rem;
    margin: auto;
}

.head h3 {
    font-size: 2.8rem;
    font-weight: 800;
}

.head span {
    background:
        linear-gradient(90deg,
            #2de2ff,
            #3bf6ae,
            #03d972);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.showcase-container {
    display: grid;
    grid-template-columns: 1fr 32rem 1fr;
    align-items: center;
    margin-top: 2rem;
}

.features-left,
.features-right {
    display: flex;
    flex-direction: column;
    gap: 1.5625rem;
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1.125rem;
    background: rgba(255, 255, 255, .04);
    border: 0.0625rem solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(1rem);
    border-radius: 1.5rem;
    padding: 1.375rem;
    position: relative;
    transition: .35s;
}

.feature-card:hover {
    transform: translateY(-0.5rem);
}

.feature-card .icon {
    width: 4.0625rem;
    height: 4.0625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.feature-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}

.feature-card p {
    color: #c9d3e1;
    line-height: 1.5;
    font-size: 0.9375rem;
}

/* COLORS */
.cyan .icon {
    background: rgba(34, 211, 238, .15);
    color: #22d3ee;
    box-shadow: 0 0 1.5625rem rgba(34, 211, 238, .4);
}

.purple .icon {
    background: rgba(168, 85, 247, .15);
    color: #a855f7;
    box-shadow: 0 0 1.5625rem rgba(168, 85, 247, .4);
}

.green .icon {
    background: rgba(16, 185, 129, .15);
    color: #10b981;
    box-shadow: 0 0 1.5625rem rgba(16, 185, 129, 0.662);
}

.orange .icon {
    background: rgba(251, 146, 60, .15);
    color: #fb923c;
    box-shadow: 0 0 1.5625rem rgba(251, 146, 60, .4);
}

.pink .icon {
    background: rgba(236, 72, 153, .15);
    color: #ec4899;
    box-shadow: 0 0 1.5625rem rgba(236, 72, 153, .4);
}

.blue .icon {
    background: rgba(96, 165, 250, .15);
    color: #60a5fa;
    box-shadow: 0 0 1.5625rem rgba(96, 165, 250, .4);
}

.center-shield {
    width: 31.25rem;
    height: 31.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* ANIMATION */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* Shield */
.shield-core {
    width: 11.25rem;
    height: 11.25rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5.625rem;
    animation: floatShield 4s ease-in-out infinite;
    background:
        radial-gradient(circle,
            rgba(139, 92, 246, .8),
            rgba(34, 211, 238, .3));
    box-shadow:
        0 0 2.5rem rgba(139, 92, 246, .5),
        0 0 5rem rgba(34, 211, 238, .3);
    z-index: 10;
}

/* Orbit Rings */
.orbit {
    position: absolute;
    border-radius: 50%;
    border: 0.125rem solid rgba(99, 102, 241, .25);
    animation: radarPulse 5s linear infinite;
}

.orbit-1 {
    width: 18.75rem;
    height: 18.75rem;
    animation: rotateRing 18s linear infinite;
}

.orbit-2 {
    width: 26.25rem;
    height: 26.25rem;
    border-color: rgba(34, 211, 238, .2);
    animation: rotateRingReverse 25s linear infinite;
}

/* Moving Radar Dots */
.orbit-1::before,
.orbit-2::before {
    content: "";
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow:
        0 0 0.9375rem #22d3ee,
        0 0 1.875rem #22d3ee;
}

.orbit-1::before {
    top: -0.4375rem;
    left: 50%;
}

.orbit-2::before {
    top: 50%;
    left: -0.4375rem;
}

/* Pulsing Radar Circle */
.radar-pulse {
    position: absolute;
    width: 13.75rem;
    height: 13.75rem;
    border-radius: 50%;
    border: 0.125rem solid rgba(34, 211, 238, .5);
    animation: pulseRadar 3s infinite;
}

.radar-pulse:nth-child(2) {
    animation-delay: 1s;
}

.radar-pulse:nth-child(3) {
    animation-delay: 2s;
}

.connection-dot {
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow:
        0 0 0.9375rem #22d3ee,
        0 0 1.875rem #22d3ee;
}

.dot1 {
    top: 50%;
    left: 2.5rem;
}

.dot2 {
    top: 50%;
    right: 2.5rem;
}

.dot3 {
    top: 5rem;
    left: 50%;
}

.dot4 {
    bottom: 5rem;
    left: 50%;
}

/* Animations */
@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateRingReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes pulseRadar {
    0% {
        transform: scale(.8);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ==========================================
   1600px and below (Large Desktop)
========================================== */
@media (max-width:100rem) {

    .showcase-container {
        grid-template-columns: 1fr 28rem 1fr;
        gap: 2rem;
    }

    .center-shield {
        width: 28rem;
        height: 28rem;
    }

    .orbit-1 {
        width: 17rem;
        height: 17rem;
    }

    .orbit-2 {
        width: 24rem;
        height: 24rem;
    }

}

/* ==========================================
   1400px
========================================== */

@media (max-width:87.5rem) {

    .dpdp-showcase {
        padding: 2rem;
    }

    .showcase-container {
        grid-template-columns: 1fr 24rem 1fr;
        gap: 1.5rem;
    }

    .center-shield {
        width: 24rem;
        height: 24rem;
    }

    .shield-core {
        width: 9rem;
        height: 9rem;
        font-size: 4.5rem;
    }

    .orbit-1 {
        width: 15rem;
        height: 15rem;
    }

    .orbit-2 {
        width: 21rem;
        height: 21rem;
    }

}

/* ==========================================
   Laptop (1200px)
========================================== */

@media (max-width:75rem) {

    .showcase-container {

        grid-template-columns: 1fr;

        gap: 2.5rem;

    }

    .center-shield {
        order: -1;
        margin: auto;
    }

    .features-left,
    .features-right {

        width: 100%;
        max-width: 55rem;
        margin: auto;

    }

    .head {
        max-width: 45rem;
    }

}

/* ==========================================
   Small Laptop (992px)
========================================== */

@media (max-width:62rem) {

    .head h3 {

        font-size: 2.4rem;

    }

    .head p {

        font-size: 1rem;

    }

    .feature-card {

        padding: 1.2rem;

    }

    .feature-card .icon {

        width: 3.6rem;
        height: 3.6rem;

        font-size: 1.5rem;

    }

}

/* ==========================================
   Tablets (768px)
========================================== */

@media (max-width:48rem) {

    .dpdp-showcase {

        padding: 2rem 1rem;

    }

    .head h3 {

        font-size: 2rem;

    }

    .head p {

        font-size: .95rem;
        line-height: 1.7;

    }

    .center-shield {

        width: 20rem;
        height: 20rem;

    }

    .shield-core {

        width: 8rem;
        height: 8rem;

        font-size: 4rem;

    }

    .orbit-1 {

        width: 13rem;
        height: 13rem;

    }

    .orbit-2 {

        width: 18rem;
        height: 18rem;

    }

    .feature-card {

        gap: 1rem;

    }

    .feature-card h3 {

        font-size: 1rem;

    }

    .feature-card p {

        font-size: .9rem;

    }

}

/* ==========================================
   Large Phones (600px)
========================================== */

@media (max-width:37.5rem) {

    .center-shield {

        width: 17rem;
        height: 17rem;

    }

    .shield-core {

        width: 6.8rem;
        height: 6.8rem;

        font-size: 3.3rem;

    }

    .orbit-1 {

        width: 11rem;
        height: 11rem;

    }

    .orbit-2 {

        width: 15rem;
        height: 15rem;

    }

    .feature-card {

        flex-direction: column;
        align-items: center;
        text-align: center;

    }

    .feature-card .icon {

        margin-bottom: .3rem;

    }

}

/* ==========================================
   Mobile (480px)
========================================== */

@media (max-width:30rem) {

    .head h3 {

        font-size: 1.7rem;

    }

    .head p {

        font-size: .9rem;

    }

    .center-shield {

        width: 14rem;
        height: 14rem;

    }

    .shield-core {

        width: 5.8rem;
        height: 5.8rem;

        font-size: 2.8rem;

    }

    .orbit-1 {

        width: 9rem;
        height: 9rem;

    }

    .orbit-2 {

        width: 12rem;
        height: 12rem;

    }

    .feature-card {

        padding: 1rem;

    }

    .feature-card h3 {

        font-size: .95rem;

    }

    .feature-card p {

        font-size: .82rem;
        line-height: 1.6;

    }

}

/* ==========================================
   Very Small Phones (360px)
========================================== */

@media (max-width:22.5rem) {

    .head h3 {

        font-size: 1.45rem;

    }

    .head p {

        font-size: .8rem;

    }

    .center-shield {

        width: 12rem;
        height: 12rem;

    }

    .shield-core {

        width: 5rem;
        height: 5rem;

        font-size: 2.4rem;

    }

    .orbit-1 {

        width: 8rem;
        height: 8rem;

    }

    .orbit-2 {

        width: 10.5rem;
        height: 10.5rem;

    }

}

.dpdpa-container {
    padding: 2rem;
    overflow: hidden;
}

.header-transform {
    text-align: center;
    margin-bottom: 1rem;
}

.header-transform h1 {
    font-size: 3rem;
    color: white;
}

.header-transform span {
    background:
        linear-gradient(90deg,
            #ff315c,
            #00ff9d);
    -webkit-background-clip: text;
    color: transparent;
}

.header-transform p {
    margin-top: -4.5rem;
    margin-bottom: 3rem;
    font-size: 1rem;
    color: #f8f8f8;
}

.comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    position: relative;
}

.panel {
    width: 32rem;
    padding: 1.5rem;
    border-radius: 2rem;
    backdrop-filter: blur(2rem);
    position: relative;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    padding: .2rem;
    background:
        linear-gradient(45deg,
            transparent,
            white,
            transparent);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite:
        exclude;
}

.before {
    box-shadow:
        0 0 4rem rgba(253, 3, 57, 0.675);
}

.after {
    box-shadow:
        0 0 4rem rgba(6, 245, 145, 0.519);
}

.title {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin-bottom: 1rem;
}

.title img {
    width: 6rem;
    height: 5.3rem;
}

.title h2 {
    font-size: 1.5rem;
    color: rgb(140, 0, 255);
}

.item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.8rem 0;
    padding: 0.2rem;
    border-radius: 1rem;
    background:
        rgba(4, 18, 99, 0.723);
    color: white;
}

.item img {
    width: 3rem;
}

.item-image img {
    margin-left: -0.3rem;
    width: 4rem;
    height: 3rem;
    object-fit: contain;
    display: flex-start;
}

.item-image {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.vs {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    background:
        rgba(20, 40, 90, .8);
    box-shadow:
        0 0 3rem #00c8ff;
    border: .15rem solid #00c8ff;
}

/* animations */
.panel {
    animation:
        glow 4s infinite alternate;
}

@keyframes glow {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-.5rem);
    }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

/* 1600px */
@media (max-width:100rem) {

    .comparison {
        gap: 2rem;
    }

    .panel {
        width: 30rem;
    }

}

/* 1400px */
@media (max-width:87.5rem) {

    .dpdpa-container {
        padding: 2rem;
    }

    .comparison {
        gap: 1.8rem;
    }

    .panel {
        width: 28rem;
    }

    .header-transform h1 {
        font-size: 2.7rem;
    }

}

/* =========================
   1200px
========================= */

@media (max-width:75rem) {

    .comparison {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    /* KEEP THE ORDER */
    .before {
        order: 1;
    }

    .vs {
        order: 2;
    }

    .after {
        order: 3;
    }

    .panel {
        width: 100%;
        max-width: 46rem;
    }

    .header-transform h1 {
        font-size: 2.5rem;
    }

    .header-transform p {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .vs {
        width: 5rem;
        height: 5rem;
        font-size: 1.6rem;
    }

}

/* =========================
   992px
========================= */

@media (max-width:62rem) {

    .dpdpa-container {
        padding: 2rem 1.5rem;
    }

    .header-transform h1 {
        font-size: 2.2rem;
    }

    .header-transform p {
        font-size: .95rem;
    }

    .title img {
        width: 5rem;
        height: 4.5rem;
    }

    .title h2 {
        font-size: 1.3rem;
    }

}

/* =========================
   768px
========================= */

@media (max-width:48rem) {

    .dpdpa-container {
        padding: 2rem 1rem;
    }

    .header-transform h1 {
        font-size: 2rem;
    }

    .header-transform p {
        font-size: .9rem;
        line-height: 1.5;
    }

    .panel {
        padding: 1.2rem;
    }

    .title {
        gap: .8rem;
    }

    .title img {
        width: 4.5rem;
        height: 4rem;
    }

    .title h2 {
        font-size: 1.2rem;
    }

    .item {
        gap: .8rem;
        padding: .6rem;
    }

    .item img {
        width: 2.7rem;
    }

    .item-image img {
        width: 3.5rem;
        height: 2.7rem;
    }

    .item span {
        font-size: .9rem;
        line-height: 1.4;
    }

    .vs {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 1.4rem;
    }

}

/* =========================
   600px
========================= */

@media (max-width:37.5rem) {

    .header-transform h1 {
        font-size: 1.8rem;
    }

    .panel {
        padding: 1rem;
    }

    .title {
        flex-direction: column;
        text-align: center;
        gap: .6rem;
    }

    .title img {
        width: 4rem;
        height: 4rem;
    }

    .title h2 {
        font-size: 1.15rem;
    }

    .item {
        gap: .7rem;
        padding: .8rem;
    }

    .item img {
        width: 2.7rem;
    }

    .item-image img {
        width: 3rem;
        height: 3rem;
        margin-left: 0;
    }

    .item span {
        font-size: .88rem;
    }

}

/* =========================
   480px
========================= */

@media (max-width:30rem) {

    .header-transform h1 {
        font-size: 1.55rem;
    }

    .header-transform p {
        font-size: .85rem;
    }

    .panel {
        border-radius: 1.3rem;
    }

    .title h2 {
        font-size: 1rem;
    }

    .item {
        margin: .6rem 0;
    }

    .item span {
        font-size: .82rem;
    }

    .vs {
        width: 4rem;
        height: 4rem;
        font-size: 1.2rem;
    }

}

/* =========================
   360px
========================= */

@media (max-width:22.5rem) {

    .header-transform h1 {
        font-size: 1.35rem;
    }

    .header-transform p {
        font-size: .8rem;
    }

    .title img {
        width: 3.5rem;
        height: 3.5rem;
    }

    .title h2 {
        font-size: .95rem;
    }

    .item {
        flex-direction: column;
        text-align: center;
    }

    .item-image {
        flex-direction: column;
        align-items: center;
    }

    .item span {
        font-size: .75rem;
    }

    .vs {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1rem;
    }

}

.workflow {
    padding: 3rem 3rem;
    overflow: hidden;
}

h1 {
    text-align: center;
    font-size: 2.9rem;
    color: white;
    margin-bottom: 5rem;
    margin-top: -2rem;
    letter-spacing: -.05rem;
}

h1 span {
    background:
        linear-gradient(90deg,
            #37a8ff,
            #00f0a8);
    -webkit-background-clip: text;
    color: transparent;
}

.process {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2.5rem;
    position: relative;
    margin-bottom: 5rem;
}

.line {
    position: absolute;
    height: .15rem;
    background:
        linear-gradient(90deg,
            #328cff,
            #00ffb3);
    top: 3rem;
    left: 8%;
    right: 8%;
    box-shadow:
        0 0 2rem #00aaff;
}

.step {
    width: 12rem;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 1rem;
    border-radius: 1.5rem;
    transition: .4s;
}

.step:hover {
    transform:
        translateY(-1rem);


}

.journey-step {
    position: relative;
    text-align: center;
    z-index: 2;
    flex: 1;
}

.step-circle {
    width: 5.3125rem;
    height: 5.3125rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg,
            #00d4ff,
            #7c4dff);
    box-shadow:
        0 0 1.5625rem rgba(0, 212, 255, .4);
}

.journey-step h3 {
    margin-top: 1.5625rem;
    color: white;
}

.journey-step p {
    color: #bfcce6;
    line-height: 1.3;
    margin-top: 0.625rem;
}

.icon {
    width: 6rem;
    height: 6rem;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        rgba(40, 120, 255, .15);
    border:
        .1rem solid rgba(70, 170, 255, .5);
    box-shadow:
        0 0 2rem rgba(30, 140, 255, .7);
    backdrop-filter: blur(1rem);
}

.icon.green {
    background:
        rgba(0, 255, 160, .15);
    box-shadow:
        0 0 2rem rgba(0, 255, 160, .8);
}

.icon img {
    width: 9.2rem;
    height: 8.2rem;
    object-fit: contain;
    filter:
        drop-shadow(0 0 1rem #45b8ff);
}

.step h3 {
    color: white;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    line-height: 1.4;
}

.step p {
    color: #9fb4d9;
    font-size: .9rem;
    line-height: 1.6;
    margin-top: .8rem;
}

@keyframes floating {
    50% {
        transform:
            translateY(-.5rem);
    }
}

/* TABLET */
@media(max-width:75rem) {
    .process {
        display: grid;
        grid-template-columns:
            repeat(3, 1fr);
        gap: 3rem;
    }

    .line {
        display: none;
    }
}

/* MOBILE */
@media(max-width:45rem) {
    .workflow {
        padding: 3rem 1rem;
    }

    h1 {
        font-size: 2rem;
        margin-bottom: 3rem;
    }

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

    .step {
        width: 100%;
    }

    .icon {
        width: 5rem;
        height: 5rem;
    }

    .icon img {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.neurowings {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 4rem;
    align-items: center;
    padding: 2.5rem;
    /* start se center */
}

.heading-neurowings {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    height: 100%;
}

.heading-neurowings h1 {
    font-size: 2.9rem;
    line-height: 1;
    color: rgb(251, 249, 249);
    margin-top: 0.1rem;
}

.heading-neurowings h1 span {
    background:
        linear-gradient(90deg,
            #36a8ff,
            #00ffb0);
    -webkit-background-clip: text;
    color: transparent;
}

.heading-neurowings p {
    margin-top: -3.9rem;
    font-size: 1.1rem;
    line-height: 1.1;
    color: #ffffff;
}

.card {
    width: 100%;
    padding: 1rem;
    border-radius: 2rem;
    background:
        rgba(255, 255, 255, .06);
    border:
        .2rem solid rgba(100, 170, 255, .2);
    backdrop-filter: blur(2rem);
    box-shadow:
        0 0 4rem rgba(0, 120, 255, .25);
}

.feature {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    padding: 0.4rem;
    border-radius: 1.5rem;
    margin-bottom: 0.7rem;
    transition: .3s;
    position: relative;
}

.feature:hover {
    background:
        rgba(0, 180, 255, .1);
    transform:
        translateX(.8rem);
    box-shadow:
        0 0 2rem rgba(0, 200, 255, .3);
}

.feature::after {
    content: "";
    position: absolute;
    left: 5rem;
    right: 0;
    bottom: 0;
    top: 6.5rem;
    height: 0.1rem;
    background: linear-gradient(90deg,
            transparent,
            rgba(27, 167, 206, 0.596),
            transparent);
}

.feature:last-child::after {
    display: none;
}

.feature img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    filter:
        drop-shadow(0 0 1rem #1ca7ff);
}

.feature-image img {
    margin-left: -2.3rem;
    width: 9rem;
    height: 6rem;
    object-fit: contain;
    display: flex-start;
}

.feature-image {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.feature h2 {
    font-size: 1.15rem;
    color: rgb(4, 249, 249);
    line-height: 1.2;
}

.feature p {
    margin-top: .2rem;
    font-size: .95rem;
    line-height: 1.2;
    color: #eef1f7;
}

/*glow animation */
.card {
    animation:
        floating 5s infinite ease-in-out;
}

/* ==========================================
   1600px and below (Large Desktop)
========================================== */

@media (max-width:100rem) {

    .neurowings {

        width: 92%;
        gap: 3rem;

    }

    .heading-neurowings h1 {

        font-size: 2.8rem;

    }

}

/* ==========================================
   1400px
========================================== */

@media (max-width:87.5rem) {

    .neurowings {

        width: 95%;
        gap: 2.5rem;
        padding: 2rem;

    }

    .heading-neurowings h1 {

        font-size: 2.6rem;

    }

    .card {

        padding: 1rem;

    }

}

/* ==========================================
   1200px Laptop
========================================== */

@media (max-width:75rem) {

    .neurowings {

        grid-template-columns: .9fr 1.2fr;
        gap: 2rem;

    }

    .heading-neurowings h1 {

        font-size: 2.3rem;

    }

    .heading-neurowings p {

        font-size: 1rem;
        margin-top: .8rem;

    }

}

/* ==========================================
   992px
========================================== */

@media (max-width:62rem) {

    .neurowings {

        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;

    }

    .heading-neurowings {

        order: 1;

    }

    .card {

        order: 2;
        width: 100%;
        max-width: 42rem;
        margin: auto;

    }

    .heading-neurowings h1 {

        font-size: 2.2rem;

    }

}

/* ==========================================
   Tablets (768px)
========================================== */

@media (max-width:48rem) {

    .neurowings {

        padding: 2rem 1rem;

    }

    .heading-neurowings h1 {

        font-size: 2rem;

    }

    .heading-neurowings p {

        font-size: .95rem;
        line-height: 1.5;

    }

    .feature {

        gap: 1rem;
        padding: .8rem;

    }

    .feature img {

        width: 4rem;
        height: 4rem;

    }

    .feature-image img {

        width: 6rem;
        height: 4.5rem;
        margin-left: 0;

    }

    .feature h2 {

        font-size: 1.05rem;

    }

    .feature p {

        font-size: .9rem;

    }

    .feature::after {

        left: 4rem;

    }

}

/* ==========================================
   Large Phones (600px)
========================================== */

@media (max-width:37.5rem) {

    .card {

        padding: .8rem;

    }

    .feature {

        flex-direction: column;
        text-align: center;

    }

    .feature-image {

        flex-direction: column;
    }

    .feature img {

        width: 4rem;
        height: 4rem;

    }

    .feature-image img {

        width: 4.5rem;
        height: 4.5rem;

    }

    .feature::after {

        display: none;

    }

    .heading-neurowings h1 {

        font-size: 1.8rem;

    }

}

/* ==========================================
   Mobile (480px)
========================================== */

@media (max-width:30rem) {

    .neurowings {

        width: 100%;
        padding: 1.5rem .8rem;

    }

    .heading-neurowings h1 {

        font-size: 1.6rem;

    }

    .heading-neurowings p {

        font-size: .85rem;

    }

    .feature {

        padding: .8rem .5rem;

    }

    .feature h2 {

        font-size: .95rem;

    }

    .feature p {

        font-size: .8rem;

    }

    .feature img {

        width: 3.5rem;
        height: 3.5rem;

    }

}

/* ==========================================
   Very Small Phones (360px)
========================================== */

@media (max-width:22.5rem) {

    .heading-neurowings h1 {

        font-size: 1.4rem;

    }

    .heading-neurowings p {

        font-size: .78rem;

    }

    .feature h2 {

        font-size: .85rem;

    }

    .feature p {

        font-size: .72rem;

    }

    .feature img {

        width: 3rem;
        height: 3rem;

    }

}

.faq-section {
    min-height: 100vh;
    padding: 4rem 1rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.heading-faq {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.heading-faq h1 {
    font-size: 3rem;
    margin-top: 0.001rem;
    color: rgb(255, 255, 255);
}

.heading-faq p {
    margin-top: -4.7rem;
    margin-left: 14rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #f9fafc;
    line-height: 1.2;
    width: 100%;
}

.faq-container {
    width: 45rem;
    padding: 1rem;
    border-radius: 2rem;
    margin-top: -3rem;
    background:
        rgba(255, 255, 255, .05);
    backdrop-filter:
        blur(2rem);
    border:
        .1rem solid rgba(80, 160, 255, .25);
    box-shadow:
        0 0 4rem rgba(0, 150, 255, .25);
}

.faq-item {
    border-bottom:
        .1rem solid rgba(255, 255, 255, .1);
}

.faq-item button {
    width: 100%;
    padding: 1rem;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

.faq-item span {
    font-size: 1.8rem;
    color: #ffffff;
    transition: .3s;
}

.answer {
    max-height: 0;
    overflow: hidden;
    color: #f5f7fa;
    font-size: .95rem;
    line-height: 1.3;
    transition: .4s;
    padding: 0 1.3rem;
}

.faq-item.active .answer {
    max-height: 6rem;
    padding-bottom: 1.2rem;
}

.faq-item.active span {
    transform:
        rotate(45deg);
}

.faq-item:hover {
    background:
        rgba(0, 170, 255, .08);
}

.view-btn {
    margin-top: 2rem;
    padding: 1rem 2rem;
    border-radius: 3rem;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1rem;
    background:
        linear-gradient(90deg,
            #237cff,
            #00dca8);
    box-shadow:
        0 0 2rem #168cff;
}

/* =========================================================
   4K MONITORS (2560px and above)
========================================================= */
@media (min-width:160rem) {

    .faq-section {
        max-width: 110rem;
        margin: auto;
    }

    .heading-faq h1 {
        font-size: 4rem;
    }

    .heading-faq p {
        font-size: 1.4rem;
        margin-left: 18rem;
        margin-top: -5rem;
    }

    .faq-container {
        width: 60rem;
    }

    .faq-item button {
        font-size: 1.2rem;
    }

    .answer {
        font-size: 1.05rem;
    }

}


/* =========================================================
   LARGE DESKTOP (1920px)
========================================================= */

@media (max-width:120rem) {

    .faq-container {
        width: 45rem;
    }

}


/* =========================================================
   DESKTOP / LAPTOP
========================================================= */

@media (max-width:90rem) {

    .faq-section {
        padding: 4rem 2rem;
    }

    .heading-faq h1 {
        font-size: 2.7rem;
    }

    .heading-faq p {
        margin-left: 12rem;
        margin-top: -4.3rem;
    }

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width:75rem) {

    .heading-faq h1 {
        font-size: 2.4rem;
    }

    .heading-faq p {
        margin-left: 10rem;
        margin-top: -3.8rem;
        font-size: 1rem;
    }

    .faq-container {
        width: 40rem;
    }

}


/* =========================================================
   TABLETS (Landscape)
========================================================= */

@media (max-width:64rem) {

    .faq-section {
        padding: 3rem 1.5rem;
    }

    .heading-faq {

        flex-direction: column;
        align-items: center;
        text-align: center;

    }

    .heading-faq h1 {
        font-size: 2.3rem;
    }

    .heading-faq p {

        margin: 1rem 0 2rem;
        width: 100%;

    }

    .faq-container {

        width: 100%;
        max-width: 42rem;

    }

}


/* =========================================================
   TABLETS (Portrait)
========================================================= */

@media (max-width:48rem) {

    .faq-section {

        padding: 3rem 1rem;

    }

    .heading-faq h1 {

        font-size: 2rem;

    }

    .heading-faq p {

        font-size: .95rem;

    }

    .faq-container {

        width: 100%;

    }

    .faq-item button {

        font-size: .95rem;
        text-align: left;
        gap: 1rem;

    }

    .faq-item span {

        font-size: 1.5rem;

    }

}


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

@media (max-width:36rem) {

    .heading-faq h1 {

        font-size: 1.8rem;

    }

    .heading-faq p {

        font-size: .9rem;

    }

    .faq-container {

        padding: .8rem;
        border-radius: 1.5rem;

    }

    .faq-item button {

        font-size: .9rem;
        padding: 1rem .8rem;

    }

    .answer {

        font-size: .9rem;
        padding: 0 .8rem;

    }

}


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

@media (max-width:30rem) {

    .faq-section {

        padding: 2.5rem .8rem;

    }

    .heading-faq h1 {

        font-size: 1.6rem;

    }

    .heading-faq p {

        font-size: .85rem;

    }

    .faq-item button {

        font-size: .85rem;

    }

    .faq-item span {

        font-size: 1.3rem;

    }

    .answer {

        font-size: .82rem;
        line-height: 1.5;

    }

}


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

@media (max-width:22rem) {

    .heading-faq h1 {

        font-size: 1.4rem;

    }

    .heading-faq p {

        font-size: .8rem;

    }

    .faq-item button {

        padding: .9rem .6rem;
        font-size: .8rem;

    }

    .faq-item span {

        font-size: 1.2rem;

    }

    .answer {

        font-size: .78rem;

    }

}

.footer-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5625rem;
    padding: 3.125rem 8%;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, .08);
}

.feature-item {
    text-align: center;
}

.feature-icon {
    font-size: 1.25rem;
    margin-bottom: 0.3125rem;
}

.feature-item h4 {
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
}

.feature-item p {
    font-size: 0.75rem;
    line-height: 1.5;
    color: #bfcce6;
}

/* MAIN FOOTER */
.footer {
    background-color: black;
    margin-top: 0.5rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(0.9375rem);
}

.footer-content {
    padding: 0.1875rem 6%;
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr;
    gap: 0.8125rem;
}

.footer-column h2 {
    font-size: 1.5rem;
    margin-bottom: 0.05rem;
}

.footer-column h3 {
    font-size: 1.125rem;
    margin-bottom: 0.05rem;
}

.footer-column p {
    font-size: 0.9375rem;
    line-height: 1.3;
    color: #c9d3e1;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.125rem;
}

.footer-column ul li a {
    font-size: 0.8125rem;
    color: #c9d3e1;
    text-decoration: none;
    transition: .3s;
}

.footer-column ul li a:hover {
    color: #21c4ff;
}

/* BADGES */
.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
    margin-top: 0.25rem;
}

.footer-badges span {
    padding: 0.1875rem 0.5rem;
    border-radius: 3.125rem;
    background: rgba(33, 196, 255, .1);
    border: 0.0625rem solid rgba(33, 196, 255, .2);
    color: #84dfff;
    font-size: 0.6875rem;
}

.footer,
.footer-features,
.footer-content {
    width: 100%;
}

.footer-bottom {
    border-top: 0.0625rem solid rgba(255, 255, 255, .08);
    padding: 0.05rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p,
.footer-bottom a {
    color: #f0f2f7;
    text-decoration: none;
    font-size: 0.75rem;
}

/* =========================================================
   4K & ULTRA WIDE (2560px+)
========================================================= */

@media (min-width:160rem) {

    .footer-content {
        max-width: 110rem;
        margin: auto;
    }

    .footer-features {
        max-width: 110rem;
        margin: auto;
    }

    .footer-column h2 {
        font-size: 2rem;
    }

    .footer-column h3 {
        font-size: 1.5rem;
    }

    .footer-column p,
    .footer-column ul li a {
        font-size: 1rem;
    }

}


/* =========================================================
   LARGE DESKTOP (1920px)
========================================================= */

@media (max-width:120rem) {

    .footer-features {
        padding: 3rem 5%;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (max-width:90rem) {

    .footer-features {
        gap: 1.5rem;
        padding: 2.5rem 4%;
    }

    .footer-content {
        gap: 2rem;
        padding: 2rem 4%;
    }

}


/* =========================================================
   SMALL LAPTOP
========================================================= */

@media (max-width:75rem) {

    .footer-content {

        grid-template-columns: 1.5fr 1fr 1fr;

    }

    .footer-column h2 {

        font-size: 1.4rem;

    }

}


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

@media (max-width:64rem) {

    .footer-features {

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

    }

    .footer-content {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 2rem;

    }

    .footer-badges {

        justify-content: center;

    }

    .footer-column ul {

        padding: 0;

    }

}


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

@media (max-width:48rem) {

    .footer {

        text-align: center;

    }

    .footer-features {

        grid-template-columns: 1fr 1fr;

        padding: 2rem 1.5rem;

    }

    .feature-item {

        padding: 1rem;

    }

    .feature-icon {

        font-size: 1.8rem;

    }

    .footer-content {

        padding: 2rem 1.5rem;

    }

    .footer-bottom {

        flex-direction: column;

        gap: .8rem;

        padding: 1rem;

        text-align: center;

    }

}


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

@media (max-width:36rem) {

    .footer-features {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    .feature-item {

        border-bottom: 1px solid rgba(255, 255, 255, .08);

        padding-bottom: 1rem;

    }

    .feature-item:last-child {

        border: none;

    }

    .footer-column h2 {

        font-size: 1.3rem;

    }

    .footer-column h3 {

        font-size: 1.1rem;

    }

    .footer-column p {

        font-size: .9rem;

    }

    .footer-column ul li a {

        font-size: .9rem;

    }

    .footer-badges {

        justify-content: center;

    }

}


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

@media (max-width:30rem) {

    .footer {

        margin-top: 2rem;

    }

    .footer-features {

        padding: 1.5rem 1rem;

    }

    .feature-icon {

        font-size: 1.5rem;

    }

    .feature-item h4 {

        font-size: 1rem;

    }

    .feature-item p {

        font-size: .8rem;

    }

    .footer-content {

        padding: 1.5rem 1rem;

        gap: 1.5rem;

    }

    .footer-column h2 {

        font-size: 1.2rem;

    }

    .footer-column h3 {

        font-size: 1rem;

    }

    .footer-column p {

        font-size: .85rem;

    }

    .footer-column ul li {

        margin-bottom: .5rem;

    }

    .footer-column ul li a {

        font-size: .85rem;

    }

    .footer-badges span {

        font-size: .7rem;

        padding: .35rem .7rem;

    }

    .footer-bottom p,
    .footer-bottom a {

        font-size: .8rem;

    }

}


/* =========================================================
   SMALL MOBILE (320px)
========================================================= */

@media (max-width:22rem) {

    .footer-features {

        padding: 1rem .7rem;

    }

    .feature-item h4 {

        font-size: .9rem;

    }

    .feature-item p {

        font-size: .75rem;

    }

    .footer-content {

        padding: 1rem .7rem;

    }

    .footer-column h2 {

        font-size: 1.05rem;

    }

    .footer-column h3 {

        font-size: .95rem;

    }

    .footer-column p,
    .footer-column ul li a {

        font-size: .75rem;

    }

    .footer-badges {

        gap: .4rem;

    }

    .footer-badges span {

        font-size: .65rem;

        padding: .25rem .5rem;

    }

    .footer-bottom {

        padding: .8rem .5rem;

    }

    .footer-bottom p,
    .footer-bottom a {

        font-size: .7rem;

    }

}

.trust-section {
    padding: .0001rem 5%;
}

.trust-container {
    max-width: 75rem;
    margin: auto;
}

.trust-header {
    text-align: center;
    margin-bottom: 2.1rem;
}

.trust-header h3 {
    font-size: 2.5rem;
    margin-bottom: 0.0625rem;
    color: #f7f8f9;
}

.trust-section h3 span {
    background:
        linear-gradient(90deg,
            #36a8ff,
            #00ffb0);
    -webkit-background-clip: text;
    color: transparent;
}

.trust-header p {
    max-width: 53.125rem;
    margin: auto;
    color: #f4f5f7;
    line-height: 1.3;
}

.trust-timeline {
    position: relative;
    max-width: 56.25rem;
    margin: auto;
}

.trust-timeline::before {
    content: '';
    position: absolute;
    left: 1.875rem;
    top: 0;
    width: 0.25rem;
    height: 100%;
    background: linear-gradient(to bottom,
            #2563eb,
            #06b6d4);
    border-radius: 3.125rem;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5625rem;
    margin-bottom: 3rem;
    position: relative;
}

.trust-icon {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;

    border-radius: 50%;

    background: rgb(249, 247, 247);

    box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.08);

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

    font-size: 1.5625rem;

    z-index: 2;

    transition: 0.3s;
}

.trust-items:hover .trust-icon {
    transform: scale(1.15);
}

.trust-content {
    background: rgb(2, 53, 100);
    padding: 1.3rem;
    border-radius: 1.125rem;

    box-shadow: 0 0.625rem 1.875rem rgb(25, 114, 222);

    flex: 1;
    transition: 0.3s;
}

.trust-item:hover .trust-content {
    transform: translateX(0.5rem);
}

.trust-content h3 {
    color: #eff3fe;
    margin-bottom: 0.625rem;
    font-size: 1.1rem;
}

.trust-content p {
    font-size: 0.9375rem;
    color: #d4e5fa;
    line-height: 1;
}

@keyframes radarPulse {

    0% {
        transform: scale(.9);
        opacity: .3;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.1);
        opacity: .2;
    }

}

@keyframes floatShield {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.1rem);
    }

}

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(2rem);
    }

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

}

a {
    color: white;
    text-decoration: none;
}