@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --ink: #081126;
    --navy: #05091f;
    --muted: #6b7280;
    --line: #eceff4;
    --panel: #ffffff;
    --soft: #eafbf5;
    --soft-2: #f2f7fb;
    --red: #13bfa6;
    --red-dark: #0b8f8f;
    --rose: #e7fff7;
    --lime: #a6ff4d;
    --coral: #ff6b6b;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #fff;
}

a,
button {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button,
input,
textarea {
    font: inherit;
}

input:focus,
textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(239, 35, 60, .12);
    outline: none;
}

.site-header {
    border-bottom: 1px solid #f1f1f1;
    background: rgba(255, 255, 255, .96);
}

.brand-mark {
    display: grid;
    height: 2rem;
    width: 2rem;
    place-items: center;
    color: var(--ink);
}

.brand-mark svg {
    height: 1.85rem;
    width: 1.85rem;
}

.hamburger-btn {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--line);
    background: #fff;
}

.hamburger-btn span {
    display: block;
    height: 2px;
    width: 1.15rem;
    border-radius: 999px;
    background: var(--ink);
    transform-origin: center;
    transition: transform .18s ease, opacity .18s ease;
}

.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu a {
    padding-block: .55rem;
}

.home-hero {
    background:
        radial-gradient(circle at 18% 20%, rgba(166, 255, 77, .26), transparent 25%),
        linear-gradient(135deg, #eafff7 0%, #f7fbff 52%, #edf4ff 100%);
    overflow: hidden;
}

.home-hero-visual {
    position: relative;
    min-height: 380px;
}

.home-hero-visual::before {
    content: "";
    position: absolute;
    inset: 20% 4% 12% 18%;
    background: #d8f4ec;
    transform: skewY(-9deg);
}

.hero-expert-image {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: 420px;
    border: 1px solid rgba(255, 255, 255, .65);
    object-fit: cover;
    box-shadow: 0 28px 70px rgba(8, 17, 38, .18);
}

.floating-badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    padding: .75rem .95rem;
    color: var(--ink);
    font-size: .72rem;
    line-height: 1.2;
    box-shadow: 0 16px 36px rgba(8, 17, 38, .12);
}

.floating-badge-left {
    left: 1rem;
    top: 22%;
}

.floating-badge-right {
    right: 0;
    bottom: 18%;
}

.badge-icon,
.icon-bubble {
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-weight: 900;
}

.badge-icon {
    height: 2rem;
    width: 2rem;
}

.icon-bubble {
    height: 3.25rem;
    width: 3.25rem;
    margin-inline: auto;
    box-shadow: 0 12px 24px rgba(239, 35, 60, .18);
}

.mini-icon {
    display: inline-grid;
    height: 2.45rem;
    width: 2.45rem;
    place-items: center;
    border-radius: .35rem;
    background: var(--rose);
    color: var(--red);
}

.section-heading {
    margin-inline: auto;
    max-width: 760px;
    text-align: center;
}

.section-heading p,
.eyebrow,
.page-kicker {
    color: var(--red);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: 0;
}

.section-heading h2 {
    margin-top: .65rem;
    color: var(--ink);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.1;
}

.section-heading span {
    display: block;
    margin-top: 1rem;
    color: var(--muted);
    line-height: 1.75;
}

.section-heading-dark p {
    color: #ff5b6d;
}

.section-heading-dark h2,
.section-heading-dark span {
    color: #fff;
}

.section-heading-dark span {
    color: #cfd5e5;
}

.page-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 0;
    background:
        radial-gradient(circle at 82% 18%, rgba(166, 255, 77, .22), transparent 25%),
        linear-gradient(135deg, #071023 0%, #0b1b3a 58%, #063c46 100%);
}

.page-hero::before {
    content: "";
    position: absolute;
    right: -8rem;
    top: -10rem;
    width: 32rem;
    height: 32rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
}

.page-hero::after {
    content: "";
    position: absolute;
    right: 6%;
    bottom: -5rem;
    width: 24rem;
    height: 14rem;
    background:
        linear-gradient(135deg, rgba(19, 191, 166, .16), rgba(166, 255, 77, .1));
    transform: skewY(-10deg);
}

.page-hero > div {
    position: relative;
    z-index: 1;
}

.page-hero > div::after {
    content: "";
    position: absolute;
    right: 2rem;
    top: 50%;
    width: min(330px, 28vw);
    height: 210px;
    border: 1px solid rgba(255, 255, 255, .16);
    background:
        radial-gradient(circle at 78% 28%, var(--lime) 0 8px, transparent 9px),
        radial-gradient(circle at 24% 70%, #6be7ff 0 6px, transparent 7px),
        linear-gradient(90deg, rgba(107, 231, 255, .35) 0 38%, transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
    transform: translateY(-50%) skewY(-5deg);
    pointer-events: none;
}

.page-hero > div::before {
    content: "";
    position: absolute;
    right: 5.5rem;
    top: calc(50% - 18px);
    z-index: 1;
    width: 130px;
    height: 76px;
    border-radius: 0;
    background:
        linear-gradient(90deg, var(--lime) 0 36%, transparent 36%),
        linear-gradient(#6be7ff 0 0) 0 0 / 100% 8px no-repeat,
        linear-gradient(#6be7ff 0 0) 0 24px / 76% 8px no-repeat,
        linear-gradient(#6be7ff 0 0) 0 48px / 58% 8px no-repeat;
    opacity: .9;
    pointer-events: none;
}

.page-hero p:not(.page-kicker),
.page-hero .text-slate-500 {
    color: #cbd8e8 !important;
}

.page-hero .page-kicker {
    color: var(--lime);
}

.page-title {
    color: #fff;
    font-size: clamp(2.15rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: 0;
}

.page-title .accent,
.accent {
    color: var(--lime);
}

.recommendation-section {
    background: var(--soft-2);
}

.warm-section {
    background: #fbf4ea;
}

.dark-section {
    background:
        radial-gradient(circle at 0 45%, rgba(19, 191, 166, .2), transparent 26%),
        linear-gradient(135deg, #03061a, #071023 58%, #022f37);
    color: #fff;
}

.review-panel,
.recommendation-card,
.feature-card,
.step-card,
.testimonial-card,
.brand-tile,
.product-card,
.best-card,
.review-list-card,
.dark-card {
    border-radius: 0;
}

.review-panel,
.recommendation-card,
.feature-card,
.step-card,
.testimonial-card,
.product-card,
.best-card,
.review-list-card {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 18px 42px rgba(8, 17, 38, .07);
}

.page-hero + .recommendation-section,
.page-hero + .bg-white {
    border-top: 6px solid var(--lime);
}

.review-panel.prose h2 {
    margin-top: 1.75rem;
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 900;
}

.review-panel.prose p {
    margin-top: .85rem;
    line-height: 1.8;
}

.service-card,
.feature-card,
.step-card,
.testimonial-card {
    padding: 1.5rem;
}

.service-card:hover,
.recommendation-card:hover,
.feature-card:hover,
.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 52px rgba(8, 17, 38, .1);
}

.review-list-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.05rem;
}

.review-list-card strong {
    display: grid;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-weight: 900;
}

.feature-card span,
.support-row span {
    display: inline-grid;
    height: 2.35rem;
    width: 2.35rem;
    place-items: center;
    border-radius: 999px;
    background: var(--rose);
}

.feature-card span::before,
.support-row span::before {
    content: "";
    height: .8rem;
    width: .8rem;
    border-radius: 999px;
    background: var(--red);
}

.feature-card h2,
.feature-card h3,
.dark-card h3,
.step-card h3 {
    margin-top: 1rem;
    color: var(--ink);
    font-size: 1.03rem;
    font-weight: 900;
}

.feature-card p,
.dark-card p,
.step-card p,
.testimonial-card blockquote {
    margin-top: .5rem;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.65;
}

.step-card strong {
    color: rgba(239, 35, 60, .18);
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1;
}

.recommendation-card {
    position: relative;
    min-height: 100%;
    padding: 2rem 1.35rem 1.35rem;
}

.recommendation-card.is-featured {
    border-color: rgba(239, 35, 60, .35);
    box-shadow: 0 22px 52px rgba(239, 35, 60, .1);
}

.ribbon {
    position: absolute;
    right: 1rem;
    top: .75rem;
    background: #071023;
    color: #fff;
    padding: .25rem .7rem;
    font-size: .66rem;
    font-weight: 900;
}

.form-shell input,
.form-shell textarea {
    border-radius: 0;
    border-color: #e1e5ed;
    background: #fff;
}

.btn-primary,
.visit-btn,
.outline-blue-btn,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .78rem 1.15rem;
    font-size: .82rem;
    font-weight: 900;
}

.btn-primary,
.visit-btn-red {
    border: 1px solid var(--red);
    background: var(--red);
    color: #fff;
    box-shadow: 0 14px 30px rgba(19, 191, 166, .2);
}

.btn-primary:hover,
.visit-btn-red:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    transform: translateY(-2px);
}

.visit-btn,
.outline-blue-btn,
.btn-secondary {
    border: 1px solid #e3e7ef;
    background: #fff;
    color: var(--ink);
}

.visit-btn:hover,
.outline-blue-btn:hover,
.btn-secondary:hover {
    border-color: var(--red);
    color: var(--red);
}

.visit-btn-red:hover {
    color: #fff;
}

.product-image-panel {
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(239, 35, 60, .06), rgba(8, 17, 38, .03)),
        #fff;
    border: 1px solid var(--line);
}

.product-image {
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 96%;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(8, 17, 38, .18));
}

.product-image-card {
    height: 210px;
    max-width: 96%;
}

.product-image-detail {
    width: 100%;
    height: 300px;
    max-width: 100%;
}

.product-image-cart {
    height: 76px;
    max-width: 96%;
    filter: drop-shadow(0 8px 12px rgba(8, 17, 38, .14));
}

.home-product-image-panel {
    width: min(230px, 100%);
    height: 180px;
}

.home-product-image {
    width: auto;
    max-width: 100%;
    height: 170px;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 28px rgba(8, 17, 38, .18));
}

.metric-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    padding: 1.2rem;
}

.metric-tile strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 900;
}

.metric-tile span {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    font-weight: 700;
    color: #cfd5e5;
}

.metric-tile .mini-icon {
    background: rgba(166, 255, 77, .16);
    color: var(--lime);
}

.faq-item {
    padding: 1.05rem 1.25rem;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 900;
    color: var(--ink);
}

.faq-item p {
    margin-top: .75rem;
    color: var(--muted);
    line-height: 1.7;
}

.article-link {
    display: grid;
    gap: .65rem;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 900;
    line-height: 1.55;
}

.article-link span {
    display: block;
    height: 3px;
    width: 4rem;
    background: var(--red);
}

.news-image-frame {
    display: grid;
    aspect-ratio: 16 / 10;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 18% 20%, rgba(166, 255, 77, .28), transparent 24%),
        linear-gradient(135deg, #eafbf5, #f4f8ff);
}

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

.real-section-image {
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 28px 70px rgba(8, 17, 38, .14);
}

.service-banner {
    width: 100%;
    background: var(--navy);
}

.service-banner picture,
.service-banner img {
    display: block;
    width: 100%;
}

.service-banner img {
    height: auto;
}

.mesh-bg {
    background: var(--soft-2);
}

.brand-tile {
    border: 1px solid var(--line);
    background: #fff;
    padding: 1.2rem;
    text-align: center;
    font-weight: 900;
    color: var(--ink);
    box-shadow: 0 12px 34px rgba(8, 17, 38, .05);
}

.dark-card {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    padding: 1.5rem;
}

.dark-card h3 {
    color: #fff;
}

.dark-card p {
    color: #cfd5e5;
}

.best-card {
    display: grid;
    gap: 1.5rem;
    padding: 1.25rem;
}

.support-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--line);
    background: #fff;
    padding: 1rem;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(8, 17, 38, .05);
}

.testimonial-card figcaption {
    margin-top: 1rem;
    font-weight: 900;
    color: var(--ink);
}

footer.site-footer {
    border-top: 0;
    background:
        linear-gradient(135deg, rgba(19, 191, 166, .13), transparent 38%),
        #05091f;
    color: #fff;
}

footer.site-footer a,
footer.site-footer p,
footer.site-footer span {
    color: #cfd5e5;
}

footer.site-footer .brand-mark {
    color: #fff;
}

@media (min-width: 1024px) {
    .page-hero > div:not(:has(.review-panel)) {
        padding-right: 24rem;
        min-height: 340px;
        align-items: center;
    }

    .page-hero > div:has(.review-panel)::before,
    .page-hero > div:has(.review-panel)::after {
        display: none;
    }
}

@media (min-width: 768px) {
    .best-card {
        grid-template-columns: 220px 1fr;
        align-items: center;
    }
}

@media (max-width: 640px) {
    .home-hero-visual {
        min-height: 320px;
    }

    .floating-badge {
        display: none;
    }

    .product-image-card {
        height: 190px;
    }

    .product-image-detail {
        height: 260px;
    }

    .page-hero > div::before,
    .page-hero > div::after {
        display: none;
    }
}