* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {

    font-family: "Geologica", sans-serif;
    background: linear-gradient(180deg,#f7f5ff 0%,#eef2ff 45%,#edfdf8 100%);
    color: #1d2433;
    min-height: 100vh;
    line-height: 1.8;
    overflow-x: hidden;
    transition: 0.3s ease;
}

body.dark_mode {
    background: linear-gradient(180deg,#08111f 0%,#10192d 45%,#132535 100%);
    color: #eef4ff;
}

body.dark_mode p,
body.dark_mode li {
    color: #b8c5d9;
}

body.dark_mode header,
body.dark_mode footer {
    background: rgba(7, 15, 27, 0.75);
    border-color: rgba(255,255,255,0.06);
}

body.dark_mode .benefit,
body.dark_mode .hero_benefits div,
body.dark_mode .terms_section,
body.dark_mode #benefits_ul li,
body.dark_mode .project_btn,
body.dark_mode #dropdown_menu {
    background: rgba(17, 28, 48, 0.82);
    border: 0.1rem solid rgba(255,255,255,0.06);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.35);
}

body.dark_mode .cta,
body.dark_mode .project_btn.active,
body.dark_mode .project_btn:hover {
    background: linear-gradient(135deg,#7d7cff,#33d6c9);
}

body.dark_mode a {
    color: #eef4ff;
}

body.dark_mode .logo_card {
    background: rgba(17, 28, 48, 0.82);
    border: 0.1rem solid rgba(255,255,255,0.06);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.35);
}

body.dark_mode #preview_wrapper {
    background: rgba(17, 28, 48, 0.82);
    border: 0.1rem solid rgba(255,255,255,0.06);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.35);
}

body.dark_mode details {
    background: rgba(17, 28, 48, 0.82);
    border: 0.1rem solid rgba(255,255,255,0.06);
}

body.dark_mode summary {
    color: #eef4ff;
}

body.dark_mode details p,
body.dark_mode details ul {
    color: #b8c5d9;
}

body.dark_mode #img_address a {
    color: #eef4ff;
}

body.dark_mode #footer_identity {
    color: #b8c5d9;
}

body.dark_mode .logo,
body.dark_mode #theme_icon,
body.dark_mode #theme_toggle_mobile,
body.dark_mode .benefit_icon {
    filter: invert(1);
}

.dark_mode #why_worth {
    background: linear-gradient(135deg, rgba(120, 104, 255, 0.15), rgba(120, 104, 255, 0.05));
    border: 0.1rem solid rgba(120, 104, 255, 0.2);
}

body.dark_mode #why_worth::before {
    background: rgba(120, 104, 255, 0.08);
}

body.dark_mode #why_worth p {
    color: #c7c9d1;
}

body.dark_mode .why_worth_card {
    background: rgba(24, 28, 36, 0.9);
    border: 0.1rem solid rgba(255, 255, 255, 0.08);
}

body.dark_mode .why_worth_card span {
    color: #c7c9d1;
}

body.dark_mode #no_subscription {
    background: rgba(24, 28, 36, 0.9);
    border: 0.1rem solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.35);
}

body.dark_mode #no_subscription p {
    color: #c7c9d1;
}

body.dark_mode .no_subscription_badge {
    background: rgba(76, 175, 80, 0.15);
    color: #7dff9b;
}


body.dark_mode #blog_promo_content {
    background: rgba(24, 28, 36, 0.9);
    border: 0.1rem solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.35);
}

body.dark_mode #blog_promo p {
    color: #c7c9d1;
}

body.dark_mode #blog_links a {
    background: rgba(120, 104, 255, 0.12);
    color: #ececf5;
}

body.dark_mode #blog_links a:hover {
    background: rgba(120, 104, 255, 0.22);
}

body.dark_mode .blog_badge {
    background: rgba(120, 104, 255, 0.18);
    color: #b9adff;
}

body.dark_mode #why_worth h2,
body.dark_mode #no_subscription h2,
body.dark_mode #blog_promo h2 {
    color: #ffffff;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

h1,
h2,
h3 {
    text-align: center;
    line-height: 1.15;
    color: inherit;
}

h1 {
    font-size: clamp(5.4rem, 8vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.3rem;
    margin-bottom: 4.8rem;
}

h2 {
    font-size: clamp(4rem, 6vw, 6.2rem);
    margin-bottom: 4.8rem;
    font-weight: 700;
}

h3 {
    font-size: 3rem;
    margin-bottom: 2.8rem;
}

p,
li,
a,
summary {
    font-size: 2rem;
}

p {
    max-width: 92rem;
    margin: 0 auto;
    text-align: center;
    color: #57627a;
}

section {
    width: 100%;
    padding: 12rem 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(2.4rem);
    background: rgba(255,255,255,0.7);
    border-bottom: 0.1rem solid rgba(20,30,50,0.06);
}

#header_wrapper {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 3.4rem 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 11rem;
}

.logo_link {
    display: flex;
    align-items: center;
}

#desktop_nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

#desktop_nav a {
    color: inherit;
    padding: 1.8rem 2.8rem;
    border-radius: 2rem;
    transition: 0.3s ease;
}

#desktop_nav a:hover {
    background: rgba(120, 104, 255, 0.1);
    color: #7868ff;
}

#desktop_nav .nav_cta {
    background: linear-gradient(135deg, #7868ff, #3fd0c9);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 1.4rem 3.2rem rgba(90,100,255,0.2);
}

#desktop_nav .nav_cta:hover {
    color: #ffffff;
    transform: translateY(-0.2rem);
    box-shadow: 0 2rem 4.4rem rgba(90,100,255,0.28);
}

#dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

#dropdownbtn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border: none;
    background: rgba(255,255,255,0.8);
    padding: 1.8rem 2.8rem;
    border-radius: 2rem;
    cursor: pointer;
    color: inherit;
    box-shadow: 0 1rem 3rem rgba(40,60,90,0.08);
}

#dropdown_menu {
    position: absolute;
    top: calc(100% + 2rem);
    right: 0;
    width: 32rem;
    border-radius: 3rem;
    overflow: hidden;
    display: none;
    background: #ffffff;
    box-shadow: 0 2.4rem 6rem rgba(50,70,120,0.15);
}

#dropdown_menu.show {
    display: block;
}

#dropdown_menu a {
    display: block;
    padding: 2.4rem;
    text-align: center;
    color: inherit;
}

#dropdown_menu a:hover {
    background: rgba(120,104,255,0.08);
}

@media (max-width: 450px) {
    #dropdownbtn {
        font-size: 0;
    }

    #dropdownbtn img {
        font-size: initial;
    }
}

@media (max-width: 375px) {
    #dropdown {
        flex-direction: column;
        align-items: flex-end;
    }

    #dropdownbtn {
        width: auto;
    }

    #theme_toggle_mobile {
        margin-top: 1rem;
        align-self: center;
    }
}

.theme_toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
}

.theme_toggle img {
    width: 3.2rem;
    height: 3.2rem;
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem 4.8rem;
    border-radius: 2.4rem;
    background: linear-gradient(135deg, #7868ff, #3fd0c9);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2rem 5rem rgba(90,100,255,0.22);
    transition: 0.3s ease;
}
.cta:hover {
    box-shadow: 0 3rem 7rem rgba(90,100,255,0.3);
}

.hero_benefits div,
.benefit,
details,
#benefits_ul li {

    transition: 0.3s ease;

}

#main_wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

#main_wrapper::before {
    content: "";
    position: absolute;
    width: 70rem;
    height: 70rem;
    background:rgba(120,104,255,0.14);
    border-radius: 50%;
    top: -20rem;
    left: -15rem;
    filter: blur(9rem);
}

#main_wrapper::after {
    content: "";
    position: absolute;
    width: 60rem;
    height: 60rem;
    background:rgba(63,208,201,0.16);
    border-radius: 50%;
    right: -12rem;
    bottom: -18rem;
    filter: blur(9rem);
}

#start {
    width: 100%;
    max-width: 1280px;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8rem;
    padding: 18rem 4rem;
}

#main_text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.6rem;
}
#hero_content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8rem;
    align-items: center;
}

#hero_mockup {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#hero_mockup img {
    width: 100%;
    max-width: 62rem;
    border-radius: 3.6rem;
    box-shadow: 0 3rem 8rem rgba(50,70,120,0.18);
    transition: 0.3s ease;
}

#hero_mockup img:hover {
    transform: translateY(-0.8rem);
    box-shadow: 0 4rem 10rem rgba(50,70,120,0.24);
}

.hero_btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    margin-top: 5.2rem;
}

.hero_benefits {
    width: 100%;
    display: grid;
    gap: 3rem;
}

.hero_benefits div {
    padding: 5.2rem;
    border-radius: 3.4rem;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(2rem);
    border: 0.1rem solid rgba(20,30,50,0.06);
    box-shadow: 0 2rem 5rem rgba(70,90,130,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

#benefits {
    width: 100%;
    max-width: 1400px;
    display: grid;
    gap: 4rem;
    align-items: stretch;
}

#benefits h2 {
    grid-column: 1 / -1;
}

.benefit {
    min-height: 42rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6.4rem 5rem;
}

.benefit:hover {
    transform: translateY(-0.8rem);
}

.benefit_icon {
    width: 7rem;
    height: 7rem;
    margin-bottom: 3rem;
    object-fit: contain;
}

#order .cta {
    margin-top: 4.8rem;
}

#why_us {
    width: 100%;
    position: relative;
}

#why_us_wrapper {
    width: 100%;
    max-width: 1300px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7rem;
    align-items: center;
}

#why_us_img {
    width: 100%;
    display: flex;
    justify-content: center;
}

#why_us_img img {
    width: 100%;
    max-width: 58rem;
    border-radius: 3.6rem;
    box-shadow: 0 3rem 8rem rgba(50, 70, 120, 0.14);
    transition: 0.3s ease;
}

#why_us_img img:hover {
    transform: translateY(-0.8rem) scale(1.02);
    filter: saturate(1.05);
}

#why_us_content {
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
    text-align: center;
}

#why_us_content h2 {
    text-align: center;
    margin-bottom: 1rem;
}

#why_us_content p {
    text-align: center;
    max-width: 70rem;
    margin: 0;
    font-size: 2rem;
    line-height: 1.9;
    color: #57627a;
}

#logo_offer {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.logo_intro {
    margin-bottom: 5rem;
}

.logo_card {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 5rem;
    border-radius: 3rem;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);
    border: 0.1rem solid rgba(20,30,50,0.06);
    box-shadow: 0 2rem 5rem rgba(70,90,130,0.1);
}

.logo_price {
    font-size: 5rem;
    font-weight: 800;
    margin: 3rem 0;
    color: #7868ff;
}

.logo_features {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin: 4rem 0;
}

.logo_features li {
    font-size: 2rem;
}

.logo_note {
    opacity: 0.8;
}

#why_worth {
    width: calc(100% - 4rem);
    max-width: 120rem;

    margin: 8rem auto;
    padding: 5rem 3rem;

    border-radius: 3rem;

    background:linear-gradient(135deg,rgba(120,104,255,0.12),rgba(120,104,255,0.04));

    border: 0.1rem solid rgba(120,104,255,0.15);

    text-align: center;

    position: relative;
    overflow: hidden;
}

#why_worth::before {
    content: "";

    position: absolute;

    width: 30rem;
    height: 30rem;

    top: -15rem;
    right: -15rem;

    border-radius: 50%;

    background: rgba(120,104,255,0.08);

    pointer-events: none;
}

#why_worth h2 {
    margin-bottom: 2.5rem;

    font-size: 3.2rem;
    line-height: 1.2;
}

#why_worth p {
    max-width: 80rem;

    margin: 0 auto 2rem auto;

    font-size: 1.8rem;
    line-height: 1.8;

    color: #57627a;
}

#why_worth p:last-of-type {
    margin-bottom: 0;
}

#why_worth_cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;

    margin-top: 4rem;
}

.why_worth_card {
    padding: 2rem;

    border-radius: 2rem;

    background: rgba(255,255,255,0.65);

    backdrop-filter: blur(1rem);

    border: 0.1rem solid rgba(120,104,255,0.08);
}

.why_worth_card strong {
    display: block;

    margin-bottom: 0.8rem;

    font-size: 3rem;
    font-weight: 800;

    color: #7868ff;
}

.why_worth_card span {
    font-size: 1.6rem;
    color: #57627a;
}

#projects_preview {
    width: 100%;
}

#preview_wrapper {
    width: 80%;
    max-width: 1100px;
    margin: 6rem auto;
    border-radius: 4rem;
    object-fit: contain;
    overflow: hidden;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);
    border: 0.1rem solid rgba(20,30,50,0.06);
    box-shadow: 0 3rem 8rem rgba(50,70,120,0.14);
}

#preview_wrapper picture,
#preview_wrapper img {
    width: 100%;
    display: block;
}

#preview_wrapper img {
    transition: 0.3s ease;
}

#preview_wrapper:hover img {
    transform: scale(1.02);
}

#projects_preview .cta {
    margin-top: 4rem;
}

#price {
    font-size: 7.2rem;
    font-weight: 800;
    text-shadow: 0 2rem 5rem rgba(120, 104, 255, 0.2);
    margin: 4rem 0;
}

#price_text {
    margin-top: 4.8rem;
}

#process {
    margin-top: 5rem;
}

#blog_promo {
    width: calc(100% - 4rem);
    max-width: 120rem;

    margin: 8rem auto;
}

#blog_promo_content {
    padding: 4rem 3rem;

    border-radius: 3rem;

    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);

    border: 0.1rem solid rgba(20,30,50,0.06);
    box-shadow: 0 1.6rem 4rem rgba(0,0,0,0.08);

    text-align: center;
}

#blog_links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-bottom: 3rem;
}

#blog_links a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.4rem;
    border-radius: 2rem;
    background: rgba(120,104,255,0.08);
    border: 0.1rem solid rgba(120,104,255,0.12);
    font-size: 1.8rem;
    font-weight: 600;
    color: inherit;
    transition: 0.3s ease;
    overflow: hidden;
}

#blog_links a:hover {
    transform: translateY(-0.4rem);
    background: rgba(120,104,255,0.16);
    border-color: rgba(120,104,255,0.25);
    box-shadow: 0 1.6rem 3.5rem rgba(120,104,255,0.18);
}

.blog_badge {
    display: inline-block;

    margin-bottom: 1.6rem;
    padding: 0.8rem 1.6rem;

    border-radius: 999rem;

    font-size: 1.4rem;
    font-weight: 700;

    background: rgba(120,104,255,0.12);
    color: #7868ff;
}

#blog_promo h2 {
    margin-bottom: 2rem;

    font-size: 3.2rem;
    line-height: 1.2;
}

#blog_promo p {
    max-width: 80rem;

    margin: 0 auto 3rem auto;

    font-size: 1.8rem;
    line-height: 1.8;
    color: #57627a;
}

#blog_links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    margin-bottom: 3rem;
}

#blog_links a {
    padding: 1.6rem 2rem;

    border-radius: 1.6rem;

    background: rgba(120,104,255,0.06);

    font-size: 1.8rem;
    font-weight: 600;

    transition: 0.25s ease;
}

#blog_links a:hover {
    transform: translateY(-0.2rem);
    background: rgba(120,104,255,0.12);
}

#benefits_title {
    margin-top: 8rem;
    margin-bottom: 3rem;
    font-size: 2.8rem;
    font-weight: 700;
}


#benefits_ul {
    width: 100%;
    max-width: 100rem;
    display: grid;
    gap: 2.4rem;
    margin-top: 5rem;
}

#benefits_ul li {
    padding: 3.2rem;
    border-radius: 2.6rem;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 1rem 3rem rgba(70,90,130,0.08);
}

#no_subscription {
    width: calc(100% - 4rem);
    max-width: 120rem;

    margin: 8rem auto;
    padding: 4rem 3rem;

    border-radius: 3rem;

    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);

    border: 0.1rem solid rgba(20,30,50,0.06);
    box-shadow: 0 1.6rem 4rem rgba(0,0,0,0.08);

    text-align: center;
}

#no_subscription h2 {
    margin-bottom: 2rem;

    font-size: 3.2rem;
    line-height: 1.2;
}

#no_subscription p {
    max-width: 80rem;

    margin: 0 auto 1.8rem auto;

    font-size: 1.8rem;
    line-height: 1.8;
    color: #57627a;
}

#no_subscription p:last-child {
    margin-bottom: 0;
}

#faq {
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

details {
    width: 100%;
    border-radius: 2.4rem;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(1.8rem);
    border: 0.1rem solid rgba(20,30,50,0.08);
    box-shadow: 0 1.4rem 4rem rgba(0,0,0,0.08);
    overflow: hidden;
    transition: 0.3s ease;
}

details:hover {
    transform: translateY(-0.6rem);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.14);
}

summary {
    list-style: none;
    cursor: pointer;
    padding: 3.2rem 3.6rem;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s ease;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "▾";
    font-size: 2rem;
    transition: transform 0.3s ease;
}

details[open] summary::after {
    transform: rotate(180deg);
}

details p,
details ul {
    padding: 0 3.6rem 3.2rem;
    text-align: left;
    font-size: 1.8rem;
    color: #57627a;
}

details[open] {
    animation: faqOpen 0.35s ease;
}

@keyframes faqOpen {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#contact a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

#contact a:hover {
    opacity: 0.8;
}

#subscription_offer,
#ownership_offer,
#contact {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.offer_badge,
.popular_label {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 999rem;
    background: rgba(120,104,255,0.12);
    color: #7868ff;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 2rem;
}

.secondary_badge {
    background: rgba(63,208,201,0.12);
    color: #159c96;
}

.pricing_grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 6rem;
}

.pricing_card,
.ownership_card,
.comparison_card,
#offer_form {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);
    border: 0.1rem solid rgba(20,30,50,0.06);
    border-radius: 3rem;
    box-shadow: 0 1.6rem 4rem rgba(0,0,0,0.08);
}

.pricing_card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 3rem;
    text-align: center;
    transition: 0.3s ease;
}

.pricing_card:hover {
    transform: translateY(-0.6rem);
    box-shadow: 0 2.4rem 6rem rgba(50,70,120,0.16);
}

.featured_plan {
    border-color: rgba(120,104,255,0.28);
    box-shadow: 0 2.4rem 6rem rgba(120,104,255,0.16);
}

.popular_label {
    background: linear-gradient(135deg, #7868ff, #3fd0c9);
    color: #ffffff;
}

.plan_price,
.ownership_price {
    margin: 0 0 2rem;
    color: #7868ff;
    font-size: 5rem;
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
}

.plan_price span,
.ownership_price span {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    color: #57627a;
}

.plan_start_cost {
    width: 100%;
    margin: 0 0 2.4rem;
    padding: 1.8rem;
    border-radius: 2rem;
    background: rgba(63,208,201,0.1);
    border: 0.1rem solid rgba(63,208,201,0.18);
    text-align: center;
}

.plan_start_cost strong {
    display: block;
    margin-bottom: 0.6rem;
    color: #159c96;
    font-size: 2.2rem;
    line-height: 1.2;
}

.plan_start_cost span {
    display: block;
    color: #57627a;
    font-size: 1.4rem;
    line-height: 1.55;
}

.plan_desc {
    min-height: 8rem;
    margin-bottom: 3rem;
    font-size: 1.8rem;
}

.pricing_card ul,
.ownership_card ul,
.comparison_card ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 0 0 3rem;
    text-align: left;
}

.pricing_card li,
.ownership_card li,
.comparison_card li {
    position: relative;
    padding-left: 2.6rem;
    font-size: 1.6rem;
    line-height: 1.6;
}

.pricing_card li::before,
.ownership_card li::before,
.comparison_card li::before {
    content: "";
    position: absolute;
    top: 0.8rem;
    left: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 999rem;
    background: linear-gradient(135deg, #7868ff, #3fd0c9);
}

.plan_cta,
.form_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 6.4rem;
    margin-top: auto;
    padding: 1.8rem 2.4rem;
    border: none;
    border-radius: 2.2rem;
    background: linear-gradient(135deg, #7868ff, #3fd0c9);
    color: #ffffff;
    font-family: inherit;
    font-size: 1.8rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2rem 5rem rgba(90,100,255,0.22);
    transition: 0.3s ease;
}

.plan_cta:hover,
.form_submit:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 3rem 7rem rgba(90,100,255,0.3);
}

.pricing_notes {
    width: 100%;
    max-width: 100rem;
    display: grid;
    gap: 2rem;
    margin: 5rem auto 0;
}

.pricing_notes p {
    padding: 2.4rem;
    border-radius: 2.4rem;
    background: rgba(120,104,255,0.08);
    border: 0.1rem solid rgba(120,104,255,0.12);
    font-size: 1.8rem;
}

#ownership_offer {
    padding-top: 6rem;
}

.ownership_intro {
    max-width: 90rem;
    margin: 0 auto 5rem;
}

.ownership_grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.ownership_card,
.comparison_card {
    padding: 4rem 3rem;
}

.comparison_card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.comparison_card h3,
.ownership_card h3 {
    font-size: 2.6rem;
}

.form_intro {
    max-width: 90rem;
    margin: 0 auto 5rem;
    text-align: center;
}

#offer_form {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 3.2rem 2.4rem;
    text-align: left;
}

#offer_form fieldset {
    border: 0;
    border-top: 0.1rem solid rgba(20,30,50,0.1);
    padding: 3rem 0 0;
    margin: 0 0 3rem;
}

#offer_form legend {
    padding-right: 2rem;
    font-size: 2.1rem;
    font-weight: 800;
    color: #1d2433;
}

#offer_form label {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.8rem;
    color: #1d2433;
    font-size: 1.6rem;
    font-weight: 700;
}

#offer_form label span,
#offer_form small {
    color: #7868ff;
    font-size: 1.3rem;
}

#offer_form input,
#offer_form select,
#offer_form textarea {
    width: 100%;
    border: 0.1rem solid rgba(20,30,50,0.14);
    border-radius: 1.6rem;
    padding: 1.6rem 1.8rem;
    background: rgba(255,255,255,0.86);
    color: #1d2433;
    font-family: inherit;
    font-size: 1.7rem;
    outline: none;
    transition: 0.25s ease;
}

.select_hint {
    max-width: none;
    margin: -0.6rem 0 0;
    padding: 1.6rem 1.8rem;
    border-radius: 1.6rem;
    background: rgba(120,104,255,0.08);
    border: 0.1rem solid rgba(120,104,255,0.12);
    color: #57627a;
    text-align: left;
    font-size: 1.5rem;
    line-height: 1.6;
}

#offer_form textarea {
    resize: vertical;
    min-height: 12rem;
}

#offer_form input:not([type="checkbox"]):focus,
#offer_form select:focus,
#offer_form textarea:focus,
.category_filter:focus-visible,
.plan_cta:focus-visible,
.form_submit:focus-visible,
.cta:focus-visible {
    border-color: #7868ff;
    box-shadow: 0 0 0 0.4rem rgba(120,104,255,0.16);
}

.form_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.checkbox_label {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 1.4rem !important;
    min-height: 0;
    font-weight: 500 !important;
    line-height: 1.7;
}

.checkbox_label input {
    appearance: auto;
    -webkit-appearance: checkbox;
    flex: 0 0 2.2rem;
    width: 2.2rem !important;
    min-width: 2.2rem;
    max-width: 2.2rem;
    height: 2.2rem;
    min-height: 2.2rem;
    margin: 0.35rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    accent-color: #7868ff;
    cursor: pointer;
    transform: none;
    transition: none;
}

.checkbox_label input:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.35rem rgba(120,104,255,0.16);
}

.checkbox_label span {
    display: block;
    flex: 1 1 auto;
    color: #57627a !important;
    font-size: 1.6rem !important;
}

.honeypot_field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.form_rules {
    margin-top: 2.2rem;
    min-height: auto;
}

.form_rules summary {
    min-height: auto;
}

.form_rules .rules_content {
    padding: 0 3rem 3rem;
}

.form_rules h3 {
    text-align: left;
    font-size: 2.4rem;
}

.form_rules ol {
    padding-left: 2rem;
}

.form_rules li,
.form_rules p {
    max-width: none;
    text-align: left;
    font-size: 1.6rem;
}

.form_message {
    max-width: none;
    margin-top: 2rem;
    padding: 2rem;
    border-radius: 1.8rem;
    background: rgba(120,104,255,0.08);
    text-align: left;
    font-size: 1.7rem;
    display: none;
}

.form_message.show {
    display: block;
}

.form_message.error {
    background: rgba(220, 65, 65, 0.1);
    color: #8f2424;
}

.form_message.success {
    background: rgba(63,208,201,0.12);
    color: #126963;
}

body.dark_mode .pricing_card,
body.dark_mode .ownership_card,
body.dark_mode .comparison_card,
body.dark_mode #offer_form {
    background: rgba(17, 28, 48, 0.82);
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.35);
}

body.dark_mode .plan_price span,
body.dark_mode .ownership_price span,
body.dark_mode .plan_start_cost span,
body.dark_mode .pricing_notes p,
body.dark_mode .select_hint,
body.dark_mode .checkbox_label span,
body.dark_mode .form_rules li,
body.dark_mode .form_rules p {
    color: #b8c5d9 !important;
}

body.dark_mode #offer_form legend,
body.dark_mode #offer_form label,
body.dark_mode .blog_cta_points strong {
    color: #eef4ff;
}

body.dark_mode #offer_form input,
body.dark_mode #offer_form select,
body.dark_mode #offer_form textarea {
    background: rgba(9, 18, 32, 0.78);
    border-color: rgba(255,255,255,0.1);
    color: #eef4ff;
}

body.dark_mode .checkbox_label input {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.dark_mode .pricing_notes p,
body.dark_mode .plan_start_cost,
body.dark_mode .select_hint,
body.dark_mode .form_message {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

footer {
    width: 100%;
    margin-top: 12rem;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);
}

#footer_wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10rem 4rem;
    display: grid;
    gap: 6rem;
    justify-items: center;
    text-align: center;
}

#img_address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}

#img_address .logo {
    display: block;
    width: 11rem;
    height: auto;
}


#footer_identity {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 4rem;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #57627a;
    opacity: 0.9;
}

#footer_identity a {
    color: inherit;
    font-weight: 600;
    transition: 0.3s ease;
}

#footer_identity a:hover {
    color: #7868ff;
}

#links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

footer a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s ease;
}

footer a:hover {
    color: #7868ff;
}

#link_desc {
    max-width: 46rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
}

#link_desc a {
    font-size: 2.6rem;
    font-weight: 700;
}

#link_desc a.width_2:link,
#link_desc a.width_2:visited {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

#img_address a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

#img_address a:hover {
    opacity: 0.8;
}

#description {
    font-size: 2rem;
    line-height: 1.9;
    max-width: 42rem;
}

#copyright_footer {
    font-size: 1.6rem;
    padding: 4rem;
    text-align: center;

}

.footer_note {
    margin-top: 2rem;
    font-size: 1.4rem;
    opacity: 0.6;
    line-height: 1.7;
    max-width: 60rem;
}

#hero_mockup img,
#why_us_img img,
#preview_wrapper img {
    transition: 0.3s ease;
    will-change: transform;
}

#hero_mockup img:hover,
#why_us_img img:hover,
#preview_wrapper img:hover {
    transform: translateY(-0.8rem) scale(1.02);
    filter: saturate(1.05);
}

@media (min-width: 768px) {

    section {
        padding: 22rem 4rem;
    }

    #start {
        padding: 22rem 3rem;
        gap: 10rem;
    }

    h1 {
        margin-bottom: 5.6rem;
    }

    h2 {
        margin-bottom: 5.2rem;
    }

    p {
        line-height: 1.95;
    }

    .hero_btns {
        gap: 2.8rem;
        margin-top: 5rem;
    }

    .hero_benefits {
        gap: 3.6rem;
    }

    .hero_benefits div {
        padding: 6rem 4rem;
    }
    #benefits {
        gap: 4rem;
    }

    .benefit {
        min-height: auto;
        padding: 7rem 4rem;
    }

    .benefit:last-child {
        grid-column: 1 / -1;
        max-width: 48%;
        justify-self: center;
    }

    #benefits_ul {
        gap: 3rem;
    }

    #benefits_ul li {
        padding: 4rem 3rem;

    }

    #why_us_content {
        gap: 3rem;
        text-align: center;
        align-items: center;
    }

    #why_us_content h2 {
        text-align: center;
    }

    #why_us_content p {
        text-align: center;
        margin: 0 auto;
    }

    #blog_promo_content {
        padding: 5rem;
    }

    #blog_promo h2 {
        font-size: 4rem;
    }

    #blog_links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .logo_card {
        padding: 6rem;
    }

    .logo_price {
        font-size: 6rem;
    }

    .logo_features {
        gap: 2.2rem;
    }

    #no_subscription {
        padding: 5rem;
    }

    #no_subscription h2 {
        font-size: 4rem;
    }

    #no_subscription p {
        font-size: 2rem;
    }

    #why_worth {
        padding: 7rem 5rem;
    }

    #why_worth h2 {
        font-size: 4.2rem;
    }

    #why_worth p {
        font-size: 2rem;
    }

    #why_worth_cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 70rem;
        margin: 4rem auto 0 auto;
    }

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

    .featured_plan {
        grid-column: 1 / -1;
    }

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

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

    #offer_form {
        padding: 4rem;
    }

    #faq {
        gap: 3rem;
    }

    details {
        min-height: 15rem;
    }

    summary {
        min-height: 15rem;
        padding: 4.6rem 3rem;
    }

    #footer_wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 8rem;
        padding: 12rem 3rem;
    }
    #footer_identity {
        text-align: center;
        padding: 1rem 4rem 3rem;
    }
}


@media (min-width: 1024px) {
    #desktop_nav {
        display: flex;
    }

    #dropdown {
        display: none;
    }

    section {
        padding: 18rem 5rem;
    }

    #start {
        padding: 20rem 5rem;
        gap: 10rem;
    }

    #hero_content {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 6rem;
    }

    #main_text {
        align-items: flex-start;
        text-align: left;
    }

    #main_text p {
        margin: 0;
        text-align: left;
    }

    .hero_benefits div {
        padding: 6rem 4rem;
    }

    .hero_btns {
        flex-direction: row;
        gap: 5rem;
        margin-top: 6.4rem;
    }

    .benefit:last-child {
        grid-column: 1 / -1;
        max-width: 100%;
        justify-self: center;
    }

    #benefits {
        gap: 5rem;
    }

    .benefit {
        min-height: 46rem;
        padding: 7rem 5rem;
    }

    #why_us_wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 8rem;
    }

    #why_us_content {
        align-self: center;
    }

    #logo_offer {
        max-width: 1200px;
    }

    .logo_card {
        max-width: 800px;
        padding: 7rem;
    }

    .logo_price {
        font-size: 7rem;
    }

    .logo_features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem 4rem;
        text-align: left;
        max-width: 700px;
        margin: 4rem auto;
    }

    .logo_features li {
        font-size: 2rem;
    }

    .pricing_grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }

    .featured_plan {
        grid-column: auto;
        transform: translateY(-2rem);
    }

    .featured_plan:hover {
        transform: translateY(-2.6rem);
    }

    .ownership_grid {
        grid-template-columns: 0.8fr 1.2fr;
        align-items: stretch;
    }

    #process {
        margin-top: 7rem;
    }

    #faq {
        gap: 4rem;
    }

    details {
        min-height: 16rem;
    }

    summary {
        min-height: 16rem;
        padding: 5rem 4rem;
    }

}

#projects_nav {
    width: 100%;
    max-width: 120rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 6rem 4rem;
}

.project_btn {
    width: 100%;
    padding: 2.2rem 2.6rem;
    border-radius: 2.8rem;
    font-size: 2rem;
    font-weight: 700;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);
    border: 0.1rem solid rgba(20,30,50,0.06);
    box-shadow: 0 1.6rem 4rem rgba(60,80,120,0.08);
    transition: 0.3s ease;
}

.project_btn:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 2.4rem 6rem rgba(70,90,130,0.16);
}

.project_btn.active {
    background: linear-gradient(135deg, #7868ff, #3fd0c9);
    color: #ffffff;
    box-shadow: 0 2.4rem 6rem rgba(90,100,255,0.28);
}

#project_view {
    width: 100%;
    padding: 4rem;
}

.frame {
    position: relative;
    width: 100%;
    max-width: 150rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 4rem;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);
    border: 0.1rem solid rgba(20,30,50,0.06);
    box-shadow: 0 3rem 8rem rgba(50,70,120,0.14);
}

#project_frame {
    width: 100%;
    height: 70rem;
    border: none;
    background: #ffffff;
}

aside {
    width: 100%;
    padding: 2rem 4rem 10rem;
    display: flex;
    justify-content: center;
}

.project_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 2.4rem 4.8rem;
    border-radius: 2.4rem;
    background: linear-gradient(135deg,#7868ff,#3fd0c9);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2rem 5rem rgba(90,100,255,0.22);
    transition: 0.3s ease;
}

.project_link:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 3rem 7rem rgba(90,100,255,0.3);
}

.project_link::after {
    content: "→";
    font-size: 2rem;
}

.frame_loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 20, 35, 0.45);
    backdrop-filter: blur(1.2rem);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    z-index: 5;
}

.frame.loading .frame_loading {
    display: flex;
}

body.dark_mode .frame,
body.dark_mode .project_btn {
    background: rgba(17, 28, 48, 0.82);
    border: 0.1rem solid rgba(255,255,255,0.06);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.35);
}

body.dark_mode #project_frame {
    background: #ffffff;
}

@media (min-width: 768px) {
    #projects_nav {
        grid-template-columns: repeat(2, 1fr);
    }

    .project_btn {
        width: 100%;
        max-width: none;
    }

    .project_btn:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 42rem;
    }

    #project_frame {
        height: 85rem;
    }
}


@media (min-width: 1024px) {

    #projects_nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 2.4rem;
        max-width: 100rem;
        margin: 0 auto;
        width: 100%;
    }

    .project_btn {
        flex: 1 1 0;
        width: auto !important;
        max-width: none;
    }
}

#projects_page {
    width: 100%;
}

.projects_hero {
    width: 100%;
    max-width: 115rem;
    margin: 0 auto;
    padding: 7rem 2rem 3rem;
    text-align: center;
}

.projects_hero h1 {
    margin: 1.4rem auto 2rem;
    font-size: clamp(4.2rem, 7vw, 8rem);
    line-height: 1.05;
}

.projects_hero p {
    max-width: 86rem;
    margin: 0 auto;
}

.demo_notice,
.projects_demo_summary {
    margin-top: 2.4rem !important;
    padding: 1.8rem 2rem;
    border: 0.1rem solid rgba(120,104,255,0.14);
    border-radius: 2rem;
    background: rgba(120,104,255,0.08);
    color: #57627a;
    font-size: 1.55rem;
}

.demo_projects_grid {
    width: 100%;
    max-width: 136rem;
    margin: 0 auto;
    padding: 4rem 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.demo_project_card {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(28rem, 0.9fr) minmax(0, 1.1fr);
    border: 0.1rem solid rgba(20,30,50,0.08);
    border-radius: 3rem;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 2.4rem 6rem rgba(50,70,120,0.1);
}

.demo_project_card > img {
    width: 100%;
    height: 100%;
    min-height: 48rem;
    object-fit: cover;
}

.demo_project_content {
    padding: clamp(2.6rem, 4vw, 5rem);
}

.project_industry {
    margin-bottom: 1rem;
    color: #7868ff;
    font-size: 1.35rem;
    font-weight: 900;
    text-transform: uppercase;
}

.demo_project_content h2 {
    margin-bottom: 1.2rem;
    font-size: clamp(2.8rem, 4vw, 4.8rem);
    line-height: 1.08;
}

.project_package {
    display: inline-flex;
    margin-bottom: 2rem;
    padding: 0.7rem 1.2rem;
    border-radius: 999rem;
    background: rgba(120,104,255,0.12);
    color: #5142d8;
    font-size: 1.35rem;
    font-weight: 900;
}

.demo_project_content ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1.8rem;
    margin: 2.4rem 0;
    padding-left: 1.8rem;
}

.demo_project_content li {
    font-size: 1.45rem;
}

.demo_project_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.demo_project_actions .project_btn,
.demo_project_actions a {
    width: auto;
    min-height: 4.8rem;
    padding: 1.2rem 1.8rem;
    border-radius: 999rem;
    font-size: 1.45rem;
    font-weight: 900;
}

.demo_project_actions .project_btn {
    border: 0;
    background: linear-gradient(135deg, #7868ff, #3fd0c9);
    color: #ffffff;
}

.demo_project_actions .project_btn.active {
    background: #1d2433;
    box-shadow: none;
}

.demo_project_actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid rgba(20,30,50,0.1);
    background: #ffffff;
    color: #1d2433;
}

.demo_project_card_garage {
    border-top: 0.45rem solid #e33a2f;
}

.demo_project_card_beauty {
    border-top: 0.45rem solid #8a7a62;
}

.demo_project_card_school {
    border-top: 0.45rem solid #2f7fd7;
}

.projects_demo_summary {
    max-width: 92rem;
    margin: 1rem auto 3rem !important;
    text-align: center;
}

#projects_page #project_view {
    padding: 4rem 2rem;
}

#projects_page .frame {
    border-radius: 3rem;
}

#projects_page #project_frame {
    height: min(88rem, 78vh);
}

.project_open_aside {
    padding: 0 2rem 7rem;
}

.project_link::after {
    content: "->";
}

#projects_contact {
    width: min(100% - 4rem, 96rem);
    margin: 0 auto 8rem;
    padding: 5rem 2.4rem;
    border-radius: 3rem;
    background: rgba(255,255,255,0.78);
    border: 0.1rem solid rgba(20,30,50,0.08);
    box-shadow: 0 2.4rem 6rem rgba(50,70,120,0.1);
    text-align: center;
}

#projects_contact h2 {
    margin-bottom: 1.6rem;
    font-size: clamp(3.2rem, 5vw, 5.6rem);
}

#projects_contact p {
    max-width: 68rem;
    margin: 0 auto 2.4rem;
}

body.dark_mode .demo_project_card,
body.dark_mode #projects_contact {
    background: rgba(17, 28, 48, 0.82);
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.35);
}

body.dark_mode .demo_project_actions a {
    background: rgba(255,255,255,0.06);
    color: #eef4ff;
    border-color: rgba(255,255,255,0.1);
}

@media (max-width: 900px) {
    .demo_project_card {
        grid-template-columns: 1fr;
    }

    .demo_project_card > img {
        min-height: 30rem;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .projects_hero {
        padding-top: 4rem;
    }

    .demo_project_content ul {
        grid-template-columns: 1fr;
    }

    #projects_page #project_frame {
        height: 72vh;
    }
}

#terms {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    text-align: center;
}

#terms h1 {
    font-size: 3rem;
    margin: 2rem 0;
    font-weight: 800;
}

.terms_section {
    width: 100%;
    max-width: 900px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3rem 2.4rem;
    border-radius: 2.4rem;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(1.6rem);
    border: 1px solid rgba(20, 30, 50, 0.08);
    box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.terms_definitions {
    background: rgba(120, 104, 255, 0.06);
    border: 1px solid rgba(120, 104, 255, 0.18);
}

.terms_definitions ul {
    text-align: left;
    padding-left: 1.8rem;
    margin-top: 1rem;
}

.terms_definitions li {
    font-size: 1.4rem;
    line-height: 1.75;
    margin-bottom: 1rem;
    color: #57627a;
}

.terms_definitions strong {
    color: inherit;
    font-weight: 700;
}

.terms_section:hover {
    transform: translateY(-0.6rem);
    box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.14);
}

.terms_section h2 {
    font-size: 2rem;
    margin-bottom: 1.6rem;
}

.terms_section ol {
    text-align: left;
    padding-left: 1.6rem;
}

.terms_section li {
    font-size: 1.4rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #57627a;
}

.terms_section ul {
    margin-top: 1rem;
    padding-left: 1.6rem;
}

.terms_section ul li {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}

@media (min-width: 768px) {

    #terms h1 {
        font-size: 3.4rem;
    }

    .terms_section {
        min-height: 380px;
        padding: 3.4rem;
    }

    .terms_section h2 {
        font-size: 2.2rem;
    }
}

@media (min-width: 1024px) {

    #terms {
        padding: 6rem 2rem;
    }

    .terms_section {
        min-height: 420px;
    }
}

body.dark_mode .terms_section {
    background: rgba(17, 28, 48, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.35);
}

body.dark_mode .terms_section li {
    color: #b8c5d9;
}

body.dark_mode .terms_definitions {
    background: rgba(120, 104, 255, 0.08);
    border: 1px solid rgba(120, 104, 255, 0.25);
}

body.dark_mode .terms_definitions li {
    color: #b8c5d9;
}


#process_page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10rem 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
}

.process_header {
    text-align: center;
    max-width: 80rem;
}

.process_header h1 {
    font-size: 4.8rem;
    margin-bottom: 2rem;
}

.process_header p {
    font-size: 2rem;
    color: #57627a;
}

.process_timeline {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    position: relative;
}

.process_timeline::before {
    content: "";
    position: absolute;
    left: 3.2rem;
    top: 0;
    bottom: 0;
    width: 0.3rem;
    background: linear-gradient(180deg, #7868ff, #3fd0c9);
    border-radius: 2rem;
}

.process_step {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    position: relative;
}

.step_number {
    width: 6.4rem;
    height: 6.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(2rem);
    border: 0.1rem solid rgba(20,30,50,0.08);
    box-shadow: 0 1.6rem 4rem rgba(0,0,0,0.08);
    font-weight: 800;
    font-size: 1.8rem;
    z-index: 2;
}

.step_content {
    flex: 1;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2rem);
    border: 0.1rem solid rgba(20,30,50,0.06);
    border-radius: 3rem;
    padding: 3.2rem;
    box-shadow: 0 1.6rem 4rem rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step_content:hover {
    transform: translateY(-0.6rem);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.14);
}

.step_content h3 {
    text-align: left;
    margin-bottom: 1.4rem;
    font-size: 2.2rem;
}

.step_content p {
    text-align: left;
    font-size: 1.8rem;
    color: #57627a;
    max-width: none;
}

body.dark_mode .step_content,
body.dark_mode .step_number {
    background: rgba(17, 28, 48, 0.82);
    border: 0.1rem solid rgba(255,255,255,0.06);
    box-shadow: 0 2.4rem 6rem rgba(0,0,0,0.35);
}

body.dark_mode .process_header p,
body.dark_mode .step_content p {
    color: #b8c5d9;
}

@media (min-width: 768px) {
    .process_header h1 {
        font-size: 5.6rem;
    }

    .step_content {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    #process_page {
        padding: 12rem 4rem;
    }

    .process_timeline::before {
        left: 3.6rem;
    }
}

/* Regulaminy i proces - nadpisania porządkujące odstępy oraz długie treści. */
#terms {
    max-width: 1180px;
    padding: 7rem 2rem 4rem;
    gap: 3rem;
}

#terms h1 {
    font-size: clamp(3.6rem, 5vw, 5.8rem);
    margin: 1.2rem 0 1.8rem;
}

.terms_hero {
    padding: 4rem 2rem 2rem;
}

.terms_hero p,
.regulation_heading p,
.process_group_intro {
    max-width: 82rem;
    font-size: 1.8rem;
    line-height: 1.75;
}

.regulation_picker {
    width: 100%;
    max-width: 1120px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
}

.regulation_tab {
    border: 0.1rem solid rgba(120,104,255,0.18);
    border-radius: 2.2rem;
    padding: 2.2rem;
    background: rgba(255,255,255,0.76);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1.2rem 3rem rgba(50,70,120,0.08);
    transition: 0.25s ease;
}

.regulation_tab strong,
.regulation_tab span {
    display: block;
}

.regulation_tab strong {
    margin-bottom: 0.8rem;
    font-size: 1.9rem;
}

.regulation_tab span {
    color: #57627a;
    font-size: 1.45rem;
    line-height: 1.55;
}

.regulation_tab:hover,
.regulation_tab.active {
    transform: translateY(-0.3rem);
    border-color: transparent;
    background: linear-gradient(135deg, rgba(120,104,255,0.96), rgba(63,208,201,0.96));
    color: #ffffff;
    box-shadow: 0 1.8rem 4rem rgba(90,100,255,0.2);
}

.regulation_tab:hover span,
.regulation_tab.active span {
    color: rgba(255,255,255,0.86);
}

.regulation_content {
    width: 100%;
    padding: 2rem 0 0;
}

.regulation_panel {
    display: none;
    width: 100%;
}

.regulation_panel.active {
    display: block;
}

.regulation_heading {
    margin: 0 auto 3rem;
    text-align: center;
}

.regulation_heading h2 {
    margin-bottom: 1.8rem;
    font-size: clamp(3rem, 4vw, 4.8rem);
}

#terms .terms_section {
    max-width: 1000px;
    min-height: 0;
    margin: 0 auto 2.4rem;
    padding: 3rem 2.4rem;
}

#terms .terms_section:hover {
    transform: none;
}

#terms .terms_section h3 {
    margin-bottom: 1.6rem;
    text-align: left;
    font-size: 2.2rem;
}

#terms .terms_section p {
    max-width: none;
    margin: 0 0 1.4rem;
    text-align: left;
    font-size: 1.55rem;
    line-height: 1.75;
}

#terms .terms_section li {
    font-size: 1.45rem;
}

.terms_table_wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 2rem 0;
}

.terms_table {
    width: 100%;
    min-width: 64rem;
    border-collapse: collapse;
    font-size: 1.45rem;
    text-align: left;
}

.terms_table th,
.terms_table td {
    padding: 1.4rem;
    border-bottom: 0.1rem solid rgba(20,30,50,0.1);
}

.terms_table th {
    background: rgba(120,104,255,0.1);
    color: #1d2433;
}

.process_variants {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
}

.process_variants a {
    padding: 1.2rem 1.8rem;
    border-radius: 999rem;
    background: rgba(120,104,255,0.1);
    color: #1d2433;
    font-weight: 800;
    font-size: 1.55rem;
}

.process_group {
    width: 100%;
    padding: 4rem 0 0;
}

.process_group h2 {
    margin-bottom: 1.6rem;
    font-size: clamp(3rem, 4vw, 4.8rem);
}

.process_group .process_timeline {
    margin-top: 4rem;
}

#process_contact {
    padding-top: 4rem;
}

body.dark_mode .regulation_tab,
body.dark_mode .process_variants a {
    background: rgba(17, 28, 48, 0.82);
    border-color: rgba(255,255,255,0.08);
    color: #eef4ff;
}

body.dark_mode .regulation_tab span,
body.dark_mode .process_group_intro {
    color: #b8c5d9;
}

body.dark_mode .terms_table th {
    background: rgba(255,255,255,0.06);
    color: #eef4ff;
}

body.dark_mode .terms_table td,
body.dark_mode .terms_table th {
    border-color: rgba(255,255,255,0.08);
}

@media (max-width: 640px) {
    #terms {
        padding: 4rem 1.4rem 2rem;
    }

    #terms .terms_section {
        padding: 2.2rem 1.8rem;
        border-radius: 1.8rem;
    }

    .process_step {
        display: grid;
        grid-template-columns: 5.4rem 1fr;
        gap: 1.6rem;
    }

    .step_number {
        width: 5.4rem;
        height: 5.4rem;
        border-radius: 1.6rem;
    }

    .step_content {
        padding: 2.4rem;
        border-radius: 2.2rem;
    }

    .process_timeline::before {
        left: 2.7rem;
    }
}

@media (min-width: 768px) {
    .regulation_picker {
        grid-template-columns: repeat(3, 1fr);
    }
}