:root {

    --ink: #14213D;

    --muted: #69718b;

    --purple: #2457A7;

    --violet: #EAF2FF;

    --line: #e8e9f0;

    --yellow: #ffdc72;

    --cyan: #17c6ec;

    --pink: #ff3d9a;

    --white: #fff;

}





* {

    box-sizing: border-box
}



html {

    scroll-behavior: smooth
}



body {

    margin: 0;

    background: #fff;

    color: var(--ink);

    font-family: 'DM Sans', system-ui, sans-serif;

    -webkit-font-smoothing: antialiased
}



a {

    color: inherit;

    text-decoration: none
}



button {

    font: inherit
}



.container {

    width: min(1160px, calc(100% - 48px));

    margin-inline: auto
}



header {

    position: relative;

    z-index: 10;

    background: #fff;

    border-bottom: 1px solid var(--line)
}



.nav {

    min-height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px
}



.brand {

    display: flex;

    align-items: center;

    gap: 11px;

    font-weight: 800;

    font-size: 18px;

    letter-spacing: -.6px;

    white-space: nowrap
}



.brand img {

    width: 200px;

    height: 80px;

    object-fit: contain
}

.product-visual img {
    width: 100%;
    max-width: 550px;
    height: auto;
    object-fit: contain;
    display: block;
}



.nav-links {

    display: flex;

    align-items: center;

    gap: 32px;

    font-size: 14px;

    font-weight: 700
}



.nav-links>a:not(.btn):hover {

    color: var(--purple)
}



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 15px 21px;

    border: 3px solid var(--ink);

    border-radius: 14px;

    background: var(--purple);

    box-shadow: 5px 5px 0 var(--ink);

    color: var(--white);

    font-weight: 800;

    font-size: 14px;

    transition: transform .18s, box-shadow .18s;

    white-space: nowrap
}



.btn:hover {

    transform: translate(3px, 3px);

    box-shadow: 2px 2px 0 var(--ink)
}



.btn.secondary {

    color: var(--ink);

    background: #fff
}



.btn.small {

    padding: 10px 16px;

    font-size: 13px;

    border-width: 2px;

    box-shadow: 3px 3px 0 var(--ink)
}



.hero {

    position: relative;

    overflow: hidden;

    padding: 112px 0 110px;

    background:

        radial-gradient(circle at 83% 38%,

            #EAF2FF 0,

            transparent 37%),

        radial-gradient(circle at 20% 90%,

            #F3FAFF 0,

            transparent 33%),

        #fff;

}



.hero-grid {

    display: grid;

    grid-template-columns: 1.04fr .96fr;

    gap: 60px;

    align-items: center
}



.kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    border: 1px solid #dbe9fa;

    background: #eff6ff;

    color: #2457A7;

    border-radius: 50px;

    padding: 9px 13px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase
}



.kicker .dot {

    width: 8px;

    height: 8px;

    background: var(--purple);

    border-radius: 3px
}



.hero h1 {

    font-size: clamp(52px, 6.2vw, 88px);

    line-height: 1.04;

    letter-spacing: -5px;

    margin: 27px 0 25px;

    font-weight: 800
}





.gradient-text {

    background: linear-gradient(100deg,

            #14213D,

            #2457A7,

            #17C6EC);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}





.hero-copy {

    font-size: 19px;

    line-height: 1.8;

    color: #58617b;

    max-width: 530px;

    margin: 0
}



.actions {

    display: flex;

    flex-wrap: wrap;

    gap: 17px;

    margin-top: 34px
}



.hero-note {

    font-size: 12px;

    color: #8890a5;

    margin-top: 25px;

    font-weight: 700
}



.hero-art {
        min-width: 0;
        min-height: 510px;
        position: relative;
        display: grid;
        place-items: center;
    }

    .hero-orbit {
        width: min(435px, 100%);
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        background: #eaf2ff;
        border: 6px solid #14213D;
        box-shadow: 0 0 0 28px #eaf2ff80;
    }

    .hero-orbit-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }



.phone {

    width: 260px;

    height: 468px;

    border: 8px solid #202446;

    border-radius: 39px;

    background: #fff;

    position: relative;

    z-index: 2;

    box-shadow: 22px 24px 50px #32365b2b;

    transform: rotate(5deg);

    padding: 27px 19px
}



.phone:before {

    content: "";

    position: absolute;

    top: 10px;

    left: 93px;

    width: 62px;

    height: 9px;

    background: #202446;

    border-radius: 20px
}



.app-head {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 16px;

    font-weight: 800;

    margin: 21px 0 24px
}



.app-head .app-icon {

    display: grid;

    place-items: center;

    width: 29px;

    height: 29px;

    background: #eaf2ff;

    border-radius: 9px;

    color: #2457A7;

    font-size: 18px
}



.app-label {

    text-align: center;

    color: #9295a9;

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 800
}



.app-timer {

    text-align: center;

    font-size: 35px;

    letter-spacing: -1.6px;

    font-weight: 800;

    margin: 6px 0 16px
}



.progress {

    width: 182px;

    height: 182px;

    border-radius: 50%;

    margin: auto;

    display: grid;

    place-items: center;

    background: conic-gradient(#2457A7 0 72%, #eaf2ff 72% 100%)
}



.progress-inner {

    width: 146px;

    height: 146px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center
}



.progress-inner strong {

    font-size: 30px;

    letter-spacing: -1px
}



.progress-inner span {

    font-size: 10px;

    font-weight: 700;

    color: #8b8ea6
}



.phone-bottom {

    background: #eff6ff;

    border-radius: 14px;

    padding: 15px;

    margin-top: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 12px;

    font-weight: 800
}



.phone-bottom span:last-child {

    color: #2457A7
}



.float-chip {

    position: absolute;

    z-index: 3;

    background: #fff;

    border: 1px solid #dbe5f2;

    box-shadow: 0 15px 35px #20244615;

    border-radius: 16px;

    padding: 15px 18px;

    font-size: 13px;

    font-weight: 800
}



.chip-a {

    top: 74px;

    left: 0;

    transform: rotate(-7deg)
}



.chip-b {

    bottom: 70px;

    right: -4px;

    transform: rotate(6deg)
}



.tiny-square {

    position: absolute;

    width: 17px;

    height: 17px;

    border-radius: 5px;

    background: var(--cyan);

    top: 36px;

    right: 50px;

    transform: rotate(18deg)
}



.tiny-square.pink {

    background: var(--pink);

    top: auto;

    right: auto;

    bottom: 56px;

    left: 48px;

    width: 12px;

    height: 12px
}



.section {

    padding: 106px 0
}



.section-top {

    max-width: 670px
}



.overline {

    color: #2457A7;

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: 1.8px;

    font-weight: 800
}



.section h2 {

    font-size: clamp(36px, 4.5vw, 58px);

    line-height: 1.13;

    letter-spacing: -2.5px;

    margin: 17px 0
}



.section-desc {

    font-size: 18px;

    line-height: 1.75;

    color: var(--muted);

    margin: 0
}



.showcase {

    display: grid;

    grid-template-columns: .92fr 1.08fr;

    gap: 76px;

    align-items: center
}



.showcase-visual {

    min-height: 410px;

    border-radius: 30px;

    background: linear-gradient(145deg, #edf4ff, #e8f8ff);

    position: relative;

    overflow: hidden;

    display: grid;

    place-items: center
}



.showcase-visual:before,

.showcase-visual:after {

    content: "";

    position: absolute;

    border: 1px solid #ffffff99;

    border-radius: 50%;

    width: 330px;

    height: 330px
}



.showcase-visual:after {

    width: 240px;

    height: 240px
}



.visual-card {

    position: relative;

    z-index: 2;

    width: 240px;

    padding: 24px;

    border-radius: 24px;

    background: #fff;

    box-shadow: 0 25px 60px #244b8b20;

    transform: rotate(-5deg)
}



.visual-card .topline {

    font-weight: 800;

    font-size: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between
}



.visual-card .number {

    font-size: 49px;

    letter-spacing: -2px;

    font-weight: 800;

    margin: 27px 0 2px
}



.visual-card .sub {

    color: #8189a2;

    font-size: 12px
}



.bars {

    display: flex;

    align-items: end;

    gap: 9px;

    height: 70px;

    margin-top: 22px
}



.bars i {

    display: block;

    flex: 1;

    border-radius: 6px 6px 3px 3px;

    background: #a8c6ef
}



.bars i:nth-child(2) {

    height: 68%;

    background: #77ade7
}



.bars i:nth-child(3) {

    height: 46%;

    background: #d9e9ff
}



.bars i:nth-child(4) {

    height: 85%;

    background: #478bd3
}



.bars i:nth-child(5) {

    height: 100%;

    background: #2457A7
}



.bars i:nth-child(6) {

    height: 74%;

    background: #8ebde9
}



.bars i:nth-child(7) {

    height: 93%;

    background: #ff8cbd
}



.pill-list {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin: 25px 0 30px
}



.pill {

    border: 1px solid #dce6f3;

    border-radius: 50px;

    background: #fff;

    padding: 10px 14px;

    font-size: 12px;

    font-weight: 800;

    color: #48516e
}



.showcase-copy p {

    font-size: 18px;

    line-height: 1.8;

    color: var(--muted)
}



.features-wrap {

    background: #f8f9fd;

    border-top: 1px solid #f0f1f5;

    border-bottom: 1px solid #f0f1f5
}



.features-heading {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 47px
}



.features-heading .section-desc {

    margin: auto
}



.cards {

    display: grid;

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

    gap: 20px
}



.card {

    background: #fff;

    border: 1px solid #e9eaf1;

    border-radius: 23px;

    padding: 31px;

    box-shadow: 0 10px 28px #1c224007;

    transition: transform .2s, box-shadow .2s
}



.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 18px 34px #1c224014
}



.card-icon {

    display: grid;

    place-items: center;

    width: 58px;

    height: 58px;

    border-radius: 17px;

    background: #eaf2ff;

    color: #2457A7;

    font-size: 26px;

    font-weight: 800
}



.card:nth-child(2) .card-icon {

    background: #e4f9ff;

    color: #10a7ce
}



.card:nth-child(3) .card-icon {

    background: #fff0f6;

    color: #ed4c93
}



.card h3 {

    font-size: 21px;

    letter-spacing: -.6px;

    margin: 23px 0 9px
}



.card p {

    font-size: 15px;

    line-height: 1.75;

    color: var(--muted);

    margin: 0
}



.studio {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 85px;

    align-items: center
}



.studio-art {

    height: 330px;

    border-radius: 28px;

    background: #eff6ff;

    position: relative;

    display: grid;

    place-items: center;

    overflow: hidden
}



.studio-art img {

    width: 190px;

    height: 190px;

    object-fit: contain;

    filter: drop-shadow(0 20px 22px #244b8b20);

    position: relative;

    z-index: 2
}



.studio-art:before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: #dceafe
}


.studio p {

    font-size: 18px;

    line-height: 1.8;

    color: var(--muted)
}



.contact {

    padding: 90px 24px;

    background: linear-gradient(130deg, #eaf2ff, #edfaff);

    text-align: center
}



.contact h2 {

    font-size: clamp(37px, 5vw, 60px);

    letter-spacing: -2.5px;

    margin: 16px 0
}



.contact p {

    font-size: 18px;

    color: var(--muted);

    margin: 0 auto 30px;

    max-width: 550px;

    line-height: 1.7
}



footer {

    padding: 30px 0
}



.footer-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #8088a0;

    font-size: 13px;

    font-weight: 700
}



.footer-inner img {

    width: 200px;

    height: 80px;

    object-fit: contain
}



.footer-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--ink)
}



@media(max-width:900px) {



    .hero-grid,

    .showcase,

    .studio {

        grid-template-columns: 1fr;

        gap: 50px
    }



    .hero {

        padding: 75px 0
    }



    .hero-art {

        min-height: 480px
    } 




    .hero h1 {

        font-size: clamp(52px, 9vw, 76px)
    }



    .showcase-visual {

        order: 2
    }



    .cards {

        grid-template-columns: 1fr 1fr
    }



    .studio-art {

        order: -1
    }



    .section {

        padding: 80px 0
    }

}



@media(max-width:620px) {

    .container {

        width: min(100% - 36px, 1160px)
    }



    .nav {

        min-height: 72px
    }



    .brand {

        font-size: 15px
    }



    .brand img {

        width: 40px;

        height: 40px
    }



    .nav-links {

        gap: 12px
    }



    .nav-links>a:not(.btn) {

        display: none
    }



    .hero {

        padding: 60px 0 68px
    }



    .hero h1 {

        letter-spacing: -3px
    }



    .hero-copy {

        font-size: 17px
    }



    .hero-art {

        min-height: 430px
    }



    .hero-orbit {

        width: 340px;

        height: 340px
    }



    .phone {

        transform: rotate(5deg) scale(.84)
    }



    .chip-a {

        left: 0;

        top: 50px
    }



    .chip-b {

        right: 0;

        bottom: 50px
    }



    .float-chip {

        font-size: 11px;

        padding: 12px
    }



    .section {

        padding: 72px 0
    }



    .section h2 {

        letter-spacing: -1.5px
    }



    .section-desc,

    .showcase-copy p,

    .studio p {

        font-size: 16px
    }



    .showcase-visual {

        min-height: 350px
    }



    .cards {

        grid-template-columns: 1fr
    }



    .studio-art {

        height: 275px
    }



    .footer-inner {

        flex-direction: column;

        text-align: center
    }



    .contact {

        padding: 75px 18px
    }

}



@media(prefers-reduced-motion:reduce) {



    *,

    *:before,

    *:after {

        scroll-behavior: auto !important;

        transition: none !important
    }

}


/* Shared multi-page refinements */
.nav-links .active {
    color: #2457a7
}

.feature-link {
    margin-top: 26px
}

.studio-art img {
    max-width: 70%;
    height: auto
}

.feature-badge {
    display: inline-block;
    background: #eaf2ff;
    border: 1px solid #d6e7fb;
    color: #2457a7;
    border-radius: 50px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 800
}

.coming-soon {
    padding: 42px;
    border: 1px solid #dfe8f4;
    border-radius: 24px;
    background: #f7fbff
}

.coming-soon p {
    color: var(--muted);
    line-height: 1.75
}

.product-hero {
    padding: 96px 0 100px;
    background: radial-gradient(circle at 80% 35%, #dbeeff, transparent 38%), #fff
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center
}

.product-hero h1 {
    font-size: clamp(46px, 5.7vw, 76px);
    line-height: 1.07;
    letter-spacing: -3.5px;
    margin: 24px 0
}

.product-hero p {
    font-size: 19px;
    line-height: 1.75;
    color: var(--muted)
}

.product-visual {
    min-height: 500px;
    position: relative;
    display: grid;
    place-items: center
}

.product-visual .hero-orbit {
    background: linear-gradient(145deg, #dceafe, #dff9ff)
}

.product-visual .phone {
    transform: rotate(4deg)
}

.feature-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center
}

.feature-detail.reverse .feature-detail-art {
    order: 2
}

.feature-detail-art {
    min-height: 320px;
    background: #eaf2ff;
    border-radius: 28px;
    display: grid;
    place-items: center;
    padding: 40px
}

.feature-detail-art .visual-card {
    transform: rotate(-3deg)
}

.feature-detail h2 {
    font-size: clamp(34px, 4vw, 52px);
    letter-spacing: -2px
}

.feature-detail p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8
}

.small-note {
    font-size: 13px !important;
    color: #7b8497 !important
}

.page-hero {
    padding: 85px 0 45px
}

.page-hero h1 {
    font-size: clamp(42px, 5vw, 64px);
    letter-spacing: -2px
}

.prose {
    max-width: 760px;
    line-height: 1.8;
    color: #4d5870
}



.prose h2 {
    font-size: clamp(22px, 2.5vw, 28px);
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin: 28px 0 12px;
}

.footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.footer-links a:hover {
    color: #2457a7
}

@media(max-width:900px) {

    .product-grid,
    .feature-detail {
        grid-template-columns: 1fr
    }

    .feature-detail.reverse .feature-detail-art {
        order: 0
    }

    .product-hero {
        padding: 65px 0
    }

    .product-visual {
        min-height: 450px
    }
}

@media(max-width:620px) {
    .product-hero h1 {
        letter-spacing: -2px
    }

    .feature-detail-art {
        min-height: 270px
    }

    .footer-links {
        justify-content: center
    }
}

/* Support page */
.support-content {
    display: grid;
    gap: 24px;
}

.support-card {
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid #e4e7ec;
    border-radius: 24px;
    background: #fff;
}

.support-card h2 {
    margin: 0 0 16px;
}

.support-card p {
    line-height: 1.7;
}

.support-features {
    padding-left: 22px;
    line-height: 1.8;
}

.faq-panel>summary,
.faq-item>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none;
}

.faq-panel>summary::-webkit-details-marker,
.faq-item>summary::-webkit-details-marker {
    display: none;
}

.faq-panel>summary {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 800;
}

.faq-panel>summary::after,
.faq-item>summary::after {
    content: "";
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.faq-panel[open]>summary::after,
.faq-item[open]>summary::after {
    transform: rotate(225deg);
}

.faq-panel>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 800;
}

.faq-panel>summary::-webkit-details-marker {
    display: none;
}

.faq-panel>summary::after {
    content: "";
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.faq-panel[open]>summary::after {
    transform: rotate(225deg);
}

.faq-panel>summary:focus-visible {
    outline: 3px solid #7165e8;
    outline-offset: 4px;
}

.faq-content {
    margin-top: 28px;
}

.faq-content h2 {
    font-size: clamp(22px, 2.5vw, 28px);
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin: 28px 0 12px;
}

.faq-content h3 {
    margin: 24px 0 8px;
    font-size: 1rem;
}

.faq-content p {
    margin-top: 0;
}

.faq-item>summary {
    padding: 20px 0;
    font-weight: 700;
    line-height: 1.5;
}

.faq-item p {
    margin: 0;
    padding: 0 24px 20px 0;
}

.support-form {
    display: grid;
    gap: 20px;
    margin-top: 28px;
}

.support-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.support-field label {
    font-weight: 700;
}

.support-field input,
.support-field textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #cbd2dc;
    border-radius: 12px;
    background: #fff;
    color: #222;
    font: inherit;
    line-height: 1.5;
}

.support-field textarea {
    min-height: 180px;
    resize: vertical;
}

.support-form .btn {
    justify-self: start;
    cursor: pointer;
    font: inherit;
}

.support-email {
    margin-top: 24px;
    overflow-wrap: anywhere;
}

.support-field input:focus-visible,
.support-field textarea:focus-visible,
.support-form .btn:focus-visible,
.faq-panel>summary:focus-visible,
.faq-item>summary:focus-visible {
    outline: 3px solid #7165e8;
    outline-offset: 4px;
}

.support-section {
    padding-top: 0;
}