/* ==========================================================
   ASLI777 GADGET
   MODERN TECH STORE
   MAIN STYLESHEET
========================================================== */


/* ==========================================================
   RESET
========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: #111827;
    background: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

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

button {
    font: inherit;
}

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

.container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* ==========================================================
   HEADER
========================================================== */

.site-header {
    position: relative;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(15px);
}

.header-inner {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


/* LOGO */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.logo-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #ffffff;
    background: #111827;

    font-size: 20px;
    font-weight: 900;

    box-shadow: 0 8px 25px rgba(17, 24, 39, 0.15);
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-text strong {
    color: #111827;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.5px;
}

.logo-text small {
    margin-top: 4px;
    color: #64748b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.8px;
}


/* NAVIGATION */

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.main-nav a {
    position: relative;

    color: #64748b;

    font-size: 14px;
    font-weight: 650;

    transition:
        color 0.25s ease;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -9px;

    width: 0;
    height: 2px;

    background: #0ea5e9;

    transform: translateX(-50%);

    transition:
        width 0.25s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: #111827;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 18px;
}


/* HEADER BUTTON */

.header-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 18px;

    border-radius: 10px;

    color: #ffffff;
    background: #111827;

    font-size: 13px;
    font-weight: 750;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.header-button:hover {
    background: #0ea5e9;
    transform: translateY(-2px);
}

.header-button span {
    font-size: 17px;
}


/* ==========================================================
   GLOBAL BUTTONS
========================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 750;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: #ffffff;
    background: #111827;

    box-shadow:
        0 10px 25px rgba(17, 24, 39, 0.16);
}

.button-primary:hover {
    background: #0ea5e9;

    box-shadow:
        0 14px 30px rgba(14, 165, 233, 0.25);
}

.button-secondary {
    color: #334155;
    background: #ffffff;
    border: 1px solid #dbe1e8;
}

.button-secondary:hover {
    border-color: #94a3b8;
}

.button-light {
    color: #111827;
    background: #ffffff;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12);
}

.button-light:hover {
    background: #f8fafc;
}


/* ==========================================================
   HERO
========================================================== */

.hero {
    position: relative;

    padding: 92px 0 105px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(56, 189, 248, 0.13),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}

.hero-grid {
    min-height: 550px;

    display: grid;
    grid-template-columns: 1fr 0.9fr;

    align-items: center;

    gap: 70px;
}


/* HERO CONTENT */

.hero-content {
    max-width: 650px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 21px;

    padding: 7px 12px;

    border: 1px solid #dbeafe;
    border-radius: 999px;

    color: #0369a1;
    background: #f0f9ff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #0ea5e9;

    box-shadow:
        0 0 0 4px rgba(14, 165, 233, 0.1);
}

.hero h1 {
    max-width: 680px;

    color: #0f172a;

    font-size: clamp(44px, 6vw, 72px);

    line-height: 1.02;

    letter-spacing: -3.5px;

    font-weight: 900;
}

.hero h1 span {
    display: block;
    color: #0ea5e9;
}

.hero-content > p {
    max-width: 590px;

    margin-top: 25px;

    color: #64748b;

    font-size: 17px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;
}


/* HERO TRUST */

.hero-trust {
    display: flex;
    flex-wrap: wrap;

    gap: 32px;

    margin-top: 42px;
}

.trust-item {
    display: flex;
    flex-direction: column;
}

.trust-item strong {
    color: #111827;

    font-size: 18px;
    font-weight: 850;
}

.trust-item span {
    color: #94a3b8;

    margin-top: 2px;

    font-size: 11px;
    font-weight: 600;
}


/* HERO VISUAL */

.hero-visual {
    position: relative;

    min-height: 520px;

    display: grid;
    place-items: center;
}

.hero-glow {
    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(14, 165, 233, 0.19),
            rgba(14, 165, 233, 0)
        );

    filter: blur(3px);
}


/* PHONE */

.phone-display {
    position: relative;

    width: 310px;
    height: 470px;

    display: grid;
    place-items: center;
}

.phone-frame {
    position: relative;

    width: 230px;
    height: 455px;

    padding: 8px;

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #334155,
            #0f172a 45%,
            #475569
        );

    box-shadow:
        25px 35px 70px rgba(15, 23, 42, 0.25),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.phone-screen {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 31px;

    background:
        radial-gradient(
            circle at 50% 25%,
            #38bdf8,
            #075985 45%,
            #020617 100%
        );
}

.screen-top {
    position: relative;
    z-index: 2;

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

    padding: 17px 19px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 8px;
    font-weight: 700;
}

.screen-content {
    position: absolute;

    inset: 0;

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

    text-align: center;

    color: #ffffff;
}

.screen-label {
    margin-bottom: 15px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}

.screen-content strong {
    font-size: 28px;
    line-height: 0.95;
    letter-spacing: -1px;
}

.screen-circle {
    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    margin-top: 35px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

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

    backdrop-filter: blur(10px);

    font-size: 25px;
    font-weight: 900;
}

.phone-camera {
    position: absolute;

    top: 14px;
    left: 50%;

    width: 72px;
    height: 20px;

    border-radius: 20px;

    background: #020617;

    transform: translateX(-50%);

    z-index: 5;
}


/* FLOATING CARDS */

.floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 12px 15px;

    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 14px;

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

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.12);

    backdrop-filter: blur(15px);

    animation: floatCard 4s ease-in-out infinite;
}

.floating-card strong,
.floating-card small {
    display: block;
}

.floating-card strong {
    color: #111827;
    font-size: 11px;
}

.floating-card small {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 9px;
}

.floating-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #0284c7;
    background: #e0f2fe;

    font-size: 13px;
    font-weight: 900;
}

.card-one {
    top: 110px;
    left: 0;
}

.card-two {
    right: -5px;
    bottom: 105px;

    animation-delay: -2s;
}

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

    50% {
        transform: translateY(-10px);
    }
}


/* ==========================================================
   SECTION GLOBAL
========================================================== */

section {
    position: relative;
}

.section-heading {
    max-width: 620px;
}

.section-heading.center-heading {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

.section-label {
    display: inline-block;

    margin-bottom: 11px;

    color: #0284c7;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.8px;
}

.section-heading h2,
.benefits-intro h2,
.faq-intro h2,
.cta-box h2 {
    color: #0f172a;

    font-size: clamp(31px, 4vw, 45px);

    line-height: 1.12;

    letter-spacing: -1.8px;

    font-weight: 900;
}

.section-heading h2 span,
.benefits-intro h2 span,
.faq-intro h2 span,
.cta-box h2 span {
    color: #0ea5e9;
}

.section-heading p,
.benefits-intro > p,
.faq-intro > p,
.cta-box > p {
    margin-top: 14px;

    color: #64748b;

    font-size: 14px;
    line-height: 1.75;
}


/* ==========================================================
   BRANDS
========================================================== */

.brands-section {
    padding: 92px 0;

    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;

    background: #ffffff;
}

.brand-grid {
    display: grid;

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

    gap: 14px;

    margin-top: 42px;
}

.brand-card {
    min-height: 130px;

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

    padding: 18px;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.brand-card:hover {
    border-color: #bae6fd;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.07);

    transform: translateY(-4px);
}

.brand-symbol {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    margin-bottom: 11px;

    border-radius: 12px;

    color: #0f172a;
    background: #f1f5f9;

    font-size: 16px;
    font-weight: 900;
}

.brand-card strong {
    color: #1e293b;
    font-size: 13px;
}

.brand-card small {
    margin-top: 2px;

    color: #94a3b8;

    font-size: 9px;
    font-weight: 600;
}


/* ==========================================================
   PRODUCTS
========================================================== */

.products-section {
    padding: 105px 0;

    background: #f8fafc;
}

.section-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
}

.text-link {
    display: inline-flex;
    align-items: center;

    color: #0284c7;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.text-link:hover {
    color: #0369a1;

    transform: translateX(3px);
}


/* PRODUCT GRID */

.product-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 42px;
}


/* PRODUCT CARD */

.product-card {
    overflow: hidden;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.product-card:hover {
    border-color: #cbd5e1;

    box-shadow:
        0 22px 45px rgba(15, 23, 42, 0.09);

    transform: translateY(-6px);
}


/* PRODUCT IMAGE */

.product-image {
    position: relative;

    height: 285px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            #e0f2fe,
            #f8fafc 65%
        );
}

.product-badge {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 3;

    padding: 5px 8px;

    border-radius: 6px;

    color: #0369a1;
    background: #e0f2fe;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.wishlist {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border: 1px solid #e2e8f0;
    border-radius: 50%;

    color: #64748b;
    background: #ffffff;

    cursor: pointer;

    font-size: 18px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.wishlist:hover {
    color: #ef4444;

    transform: scale(1.08);
}


/* MINI PHONE */

.product-phone {
    position: relative;

    width: 110px;
    height: 205px;

    border: 4px solid #1e293b;
    border-radius: 19px;

    box-shadow:
        15px 20px 35px rgba(15, 23, 42, 0.18);

    transition:
        transform 0.35s ease;
}

.product-card:hover .product-phone {
    transform:
        translateY(-7px)
        rotate(2deg);
}

.product-phone::after {
    content: "";

    position: absolute;

    top: 4px;
    left: 50%;

    width: 32px;
    height: 7px;

    border-radius: 10px;

    background: #111827;

    transform: translateX(-50%);
}

.product-phone span {
    position: absolute;

    left: 50%;
    bottom: 22px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;

    transform: translateX(-50%);
}

.product-phone-blue {
    background:
        linear-gradient(
            145deg,
            #38bdf8,
            #0369a1
        );
}

.product-phone-dark {
    background:
        linear-gradient(
            145deg,
            #334155,
            #020617
        );
}

.product-phone-purple {
    background:
        linear-gradient(
            145deg,
            #a78bfa,
            #6d28d9
        );
}

.product-phone-silver {
    background:
        linear-gradient(
            145deg,
            #e2e8f0,
            #64748b
        );
}


/* MINI CAMERA */

.mini-camera {
    position: absolute;

    top: 12px;
    left: 11px;

    width: 37px;
    height: 44px;

    display: grid;

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

    gap: 3px;

    padding: 5px;

    border-radius: 9px;

    background: rgba(15, 23, 42, 0.75);
}

.mini-camera i {
    width: 11px;
    height: 11px;

    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;

    background: #0f172a;
}


/* PRODUCT INFO */

.product-info {
    padding: 21px;
}

.product-category {
    color: #0ea5e9;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.product-info h3 {
    margin-top: 6px;

    color: #111827;

    font-size: 17px;
    font-weight: 850;

    letter-spacing: -0.4px;
}

.product-spec {
    margin-top: 5px;

    color: #94a3b8;

    font-size: 10px;
}

.product-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 10px;

    margin-top: 20px;
}

.price-label {
    display: block;

    color: #94a3b8;

    font-size: 8px;
    font-weight: 600;
}

.product-price {
    display: block;

    margin-top: 2px;

    color: #111827;

    font-size: 15px;
    font-weight: 900;
}

.product-arrow {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: #ffffff;
    background: #111827;

    font-size: 16px;
    font-weight: 800;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.product-arrow:hover {
    background: #0ea5e9;
    transform: translateX(2px);
}


/* ==========================================================
   BENEFITS
========================================================== */

.benefits-section {
    padding: 105px 0;

    background: #ffffff;
}

.benefits-layout {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    align-items: center;

    gap: 80px;
}

.benefits-intro {
    max-width: 450px;
}

.benefits-intro .button {
    margin-top: 27px;
}

.benefits-grid {
    display: grid;

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

    gap: 15px;
}

.benefit-card {
    padding: 27px;

    border: 1px solid #e5e7eb;
    border-radius: 17px;

    background: #ffffff;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.benefit-card:hover {
    border-color: #bae6fd;

    box-shadow:
        0 18px 35px rgba(15, 23, 42, 0.06);
}

.benefit-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    border-radius: 12px;

    color: #0284c7;
    background: #e0f2fe;

    font-size: 17px;
    font-weight: 900;
}

.benefit-card h3 {
    color: #111827;

    font-size: 15px;
    font-weight: 850;
}

.benefit-card p {
    margin-top: 7px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.7;
}


/* ==========================================================
   PROMO
========================================================== */

.promo-section {
    padding: 0 0 105px;

    background: #ffffff;
}

.promo-banner {
    position: relative;

    min-height: 330px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 55px 65px;

    border-radius: 25px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(14, 165, 233, 0.35),
            transparent 25%
        ),
        linear-gradient(
            115deg,
            #020617,
            #0f172a 55%,
            #082f49
        );

    box-shadow:
        0 25px 60px rgba(15, 23, 42, 0.15);
}

.promo-content {
    position: relative;
    z-index: 4;

    max-width: 530px;
}

.promo-label {
    display: block;

    margin-bottom: 10px;

    color: #7dd3fc;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 2px;
}

.promo-content h2 {
    font-size: clamp(32px, 4vw, 49px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 900;
}

.promo-content p {
    max-width: 450px;

    margin: 15px 0 25px;

    color: #cbd5e1;

    font-size: 13px;
}

.promo-shapes {
    position: absolute;

    top: 0;
    right: 0;

    width: 47%;
    height: 100%;
}

.promo-phone {
    position: absolute;

    width: 130px;
    height: 260px;

    border: 5px solid #334155;
    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #38bdf8,
            #0c4a6e
        );

    box-shadow:
        20px 25px 40px rgba(0, 0, 0, 0.3);

    transform: rotate(12deg);
}

.promo-phone::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 50%;

    width: 40px;
    height: 8px;

    border-radius: 10px;

    background: #020617;

    transform: translateX(-50%);
}

.promo-phone::after {
    content: "ASLI";

    position: absolute;

    left: 50%;
    bottom: 35px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;

    transform: translateX(-50%);
}

.promo-phone-one {
    top: 48px;
    right: 165px;

    opacity: 0.65;

    transform:
        rotate(-12deg)
        scale(0.9);
}

.promo-phone-two {
    top: 27px;
    right: 45px;

    transform:
        rotate(14deg);
}


/* ==========================================================
   REVIEWS
========================================================== */

.reviews-section {
    padding: 105px 0;

    background: #f8fafc;
}

.review-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 43px;
}

.review-card {
    padding: 29px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #ffffff;
}

.review-stars {
    color: #f59e0b;

    font-size: 13px;
    letter-spacing: 2px;
}

.review-card > p {
    min-height: 105px;

    margin-top: 17px;

    color: #475569;

    font-size: 13px;
    line-height: 1.8;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 20px;

    padding-top: 17px;

    border-top: 1px solid #f1f5f9;
}

.review-avatar {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #0369a1;
    background: #e0f2fe;

    font-size: 9px;
    font-weight: 900;
}

.review-author strong,
.review-author span {
    display: block;
}

.review-author strong {
    color: #1e293b;
    font-size: 11px;
}

.review-author span {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 9px;
}

.review-link {
    margin-top: 30px;

    text-align: center;
}


/* ==========================================================
   FAQ
========================================================== */

.faq-section {
    padding: 105px 0;

    background: #ffffff;
}

.faq-layout {
    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 80px;

    align-items: start;
}

.faq-intro {
    position: sticky;
    top: 30px;

    max-width: 430px;
}

.faq-intro .text-link {
    margin-top: 24px;
}

.faq-list {
    border-top: 1px solid #e2e8f0;
}

.faq-list details {
    border-bottom: 1px solid #e2e8f0;
}

.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 23px 0;

    color: #1e293b;

    cursor: pointer;

    list-style: none;

    font-size: 14px;
    font-weight: 800;
}

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

.faq-list summary span {
    color: #0ea5e9;

    font-size: 20px;
    font-weight: 400;

    transition:
        transform 0.25s ease;
}

.faq-list details[open] summary span {
    transform: rotate(45deg);
}

.faq-list details p {
    max-width: 700px;

    padding: 0 35px 23px 0;

    color: #64748b;

    font-size: 12px;
    line-height: 1.8;
}


/* ==========================================================
   CTA
========================================================== */

.cta-section {
    padding: 0 0 105px;

    background: #ffffff;
}

.cta-box {
    padding: 70px 30px;

    border: 1px solid #bae6fd;
    border-radius: 25px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(14, 165, 233, 0.1),
            transparent 45%
        ),
        #f8fdff;
}

.cta-box {
    margin-right: auto;
    margin-left: auto;
}

.cta-box > p {
    max-width: 540px;

    margin-right: auto;
    margin-left: auto;
}

.cta-box .button {
    margin-top: 25px;
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {
    padding: 70px 0 25px;

    color: #94a3b8;

    background: #020617;
}

.footer-grid {
    display: grid;

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

    gap: 60px;

    padding-bottom: 55px;

    border-bottom: 1px solid #1e293b;
}

.footer-brand {
    max-width: 340px;
}

.footer-logo .logo-text strong {
    color: #ffffff;
}

.footer-logo .logo-text small {
    color: #64748b;
}

.footer-brand p {
    margin-top: 18px;

    color: #64748b;

    font-size: 12px;
    line-height: 1.8;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    margin-bottom: 17px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;
}

.footer-column a,
.footer-column span {
    margin-bottom: 9px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.6;

    transition:
        color 0.25s ease;
}

.footer-column a:hover {
    color: #38bdf8;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 24px;

    color: #475569;

    font-size: 10px;
}


/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media (max-width: 1050px) {

    .main-nav {
        gap: 18px;
    }

    .main-nav a {
        font-size: 12px;
    }

    .hero-grid {
        gap: 30px;
    }

    .hero h1 {
        font-size: 55px;
    }

    .brand-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

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

    .benefits-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .benefits-intro {
        max-width: 650px;
    }

    .faq-layout {
        gap: 45px;
    }

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

}


/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 760px) {

    .container {
        width: min(100% - 28px, 600px);
    }


    /* HEADER */

    .header-inner {
        min-height: 70px;
    }

    .main-nav {
        display: none;
    }

    .header-button {
        padding: 10px 14px;

        font-size: 11px;
    }

    .logo-icon {
        width: 38px;
        height: 38px;
    }

    .logo-text strong {
        font-size: 15px;
    }


    /* HERO */

    .hero {
        padding: 60px 0 70px;
    }

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

        min-height: auto;

        text-align: center;
    }

    .hero-content {
        margin: 0 auto;
    }

    .eyebrow {
        margin-right: auto;
        margin-left: auto;
    }

    .hero h1 {
        font-size: clamp(42px, 12vw, 57px);

        letter-spacing: -2.5px;
    }

    .hero-content > p {
        font-size: 14px;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;

        gap: 23px;
    }

    .hero-visual {
        min-height: 480px;

        margin-top: 15px;
    }

    .card-one {
        left: -5px;
    }

    .card-two {
        right: -5px;
    }


    /* SECTION */

    .brands-section,
    .products-section,
    .benefits-section,
    .reviews-section,
    .faq-section {
        padding: 75px 0;
    }

    .section-heading h2,
    .benefits-intro h2,
    .faq-intro h2,
    .cta-box h2 {
        font-size: 32px;
    }


    /* BRAND */

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

        gap: 10px;
    }

    .brand-card {
        min-height: 115px;
    }


    /* PRODUCTS */

    .section-top {
        display: block;
    }

    .section-top .text-link {
        margin-top: 20px;
    }

    .product-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .product-image {
        height: 300px;
    }


    /* BENEFITS */

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


    /* PROMO */

    .promo-section {
        padding-bottom: 75px;
    }

    .promo-banner {
        min-height: 500px;

        padding: 45px 30px;

        align-items: flex-start;
    }

    .promo-content {
        max-width: 100%;
    }

    .promo-content h2 {
        font-size: 35px;
    }

    .promo-shapes {
        top: auto;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 270px;
    }

    .promo-phone-one {
        right: 45%;
    }

    .promo-phone-two {
        right: 13%;
    }


    /* REVIEWS */

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

    .review-card > p {
        min-height: auto;
    }


    /* FAQ */

    .faq-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .faq-intro {
        position: static;
    }


    /* CTA */

    .cta-section {
        padding-bottom: 75px;
    }

    .cta-box {
        padding: 55px 20px;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 400px) {

    .header-button span {
        display: none;
    }

    .hero h1 {
        font-size: 39px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-trust {
        gap: 16px;
    }

    .phone-frame {
        width: 205px;
        height: 410px;
    }

    .phone-display {
        transform: scale(0.9);
    }

    .floating-card {
        padding: 10px;
    }

    .floating-card small {
        font-size: 8px;
    }

    .card-one {
        left: -17px;
    }

    .card-two {
        right: -17px;
    }

    .product-image {
        height: 280px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.35);
    outline-offset: 3px;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}
/* ==========================================================
   PART 2 — PRODUCTS PAGE
========================================================== */


/* BREADCRUMB */

.breadcrumb-section {
    padding: 18px 0;

    border-bottom: 1px solid #e5e7eb;

    background: #ffffff;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    color: #94a3b8;

    font-size: 11px;
}

.breadcrumb a {
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #0ea5e9;
}

.breadcrumb strong {
    color: #334155;
    font-weight: 750;
}


/* PAGE HERO */

.page-hero {
    min-height: 420px;

    display: flex;
    align-items: center;

    padding: 70px 0;
}

.page-hero .hero-content {
    max-width: 720px;
}


/* FILTER */

.brand-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 38px 0 30px;
}

.filter-button {
    padding: 9px 15px;

    border: 1px solid #dbe1e8;
    border-radius: 999px;

    color: #64748b;
    background: #ffffff;

    font-size: 11px;
    font-weight: 750;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.filter-button:hover,
.filter-button.active {
    border-color: #0ea5e9;

    color: #ffffff;
    background: #0ea5e9;
}


/* PRODUCT GUIDE */

.product-guide-grid {
    margin-top: 42px;
}


/* ==========================================================
   PRODUCT DETAIL
========================================================== */

.product-detail-section {
    padding: 75px 0 100px;

    background: #ffffff;
}

.product-detail-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 80px;
}


/* DETAIL VISUAL */

.product-detail-visual {
    position: relative;

    min-height: 540px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(56, 189, 248, 0.25),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #f8fafc,
            #e0f2fe
        );
}

.detail-badge {
    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 3;

    padding: 7px 10px;

    border-radius: 7px;

    color: #0369a1;
    background: #ffffff;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1px;
}


/* LARGE PHONE */

.large-phone {
    position: relative;

    width: 235px;
    height: 455px;

    border: 7px solid #1e293b;
    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            #38bdf8,
            #0369a1 55%,
            #0f172a
        );

    box-shadow:
        25px 35px 65px rgba(15, 23, 42, 0.22);

    transform:
        rotate(5deg);

    transition:
        transform 0.35s ease;
}

.product-detail-visual:hover .large-phone {
    transform:
        rotate(2deg)
        translateY(-7px);
}

.large-phone::before {
    content: "";

    position: absolute;

    top: 10px;
    left: 50%;

    width: 70px;
    height: 19px;

    border-radius: 20px;

    background: #020617;

    transform: translateX(-50%);
}

.large-phone::after {
    content: "SMART TECHNOLOGY";

    position: absolute;

    left: 50%;
    bottom: 70px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;

    white-space: nowrap;

    transform: translateX(-50%);
}

.large-phone-camera {
    position: absolute;

    top: 24px;
    left: 22px;

    width: 55px;
    height: 62px;

    display: grid;

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

    gap: 5px;

    padding: 7px;

    border-radius: 13px;

    background: rgba(2, 6, 23, 0.8);
}

.large-phone-camera i {
    width: 17px;
    height: 17px;

    border: 3px solid rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    background: #020617;
}

.large-phone-brand {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 75px;
    height: 75px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 50%;

    color: #ffffff;

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

    font-size: 18px;
    font-weight: 900;

    transform: translate(-50%, -50%);
}


/* DETAIL CONTENT */

.product-detail-content {
    max-width: 590px;
}

.product-detail-content h1 {
    margin-top: 5px;

    color: #0f172a;

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

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 900;
}

.detail-description {
    margin-top: 20px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.8;
}

.detail-rating {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 22px;

    color: #94a3b8;

    font-size: 11px;
}

.rating-stars {
    color: #f59e0b;

    letter-spacing: 2px;
}

.detail-price {
    display: flex;
    flex-direction: column;

    margin-top: 27px;
}

.detail-price span {
    color: #94a3b8;

    font-size: 10px;
}

.detail-price strong {
    margin-top: 3px;

    color: #111827;

    font-size: 28px;
    font-weight: 900;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 27px;
}


/* HIGHLIGHTS */

.detail-highlights {
    display: grid;

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

    margin-top: 35px;

    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.detail-highlights > div {
    display: flex;
    flex-direction: column;

    padding: 18px 12px;

    border-right: 1px solid #e2e8f0;
}

.detail-highlights > div:last-child {
    border-right: 0;
}

.detail-highlights strong {
    color: #111827;

    font-size: 15px;
    font-weight: 900;
}

.detail-highlights span {
    margin-top: 3px;

    color: #94a3b8;

    font-size: 9px;
}


/* ==========================================================
   SPECIFICATIONS
========================================================== */

.specification-section {
    padding: 100px 0;

    background: #f8fafc;
}

.spec-grid {
    display: grid;

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

    gap: 15px;

    margin-top: 42px;
}

.spec-card {
    padding: 25px;

    border: 1px solid #e2e8f0;
    border-radius: 17px;

    background: #ffffff;
}

.spec-card span,
.spec-card strong,
.spec-card small {
    display: block;
}

.spec-card span {
    color: #94a3b8;

    font-size: 10px;
    font-weight: 700;
}

.spec-card strong {
    margin-top: 7px;

    color: #111827;

    font-size: 17px;
    font-weight: 900;
}

.spec-card small {
    margin-top: 3px;

    color: #94a3b8;

    font-size: 9px;
}


/* ==========================================================
   PART 2 RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .product-detail-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .product-detail-content {
        max-width: 100%;
    }

    .product-detail-visual {
        min-height: 500px;
    }

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

}


@media (max-width: 760px) {

    .page-hero {
        min-height: auto;

        padding: 60px 0 65px;
    }

    .brand-filter {
        gap: 6px;
    }

    .filter-button {
        padding: 8px 12px;

        font-size: 10px;
    }

    .product-detail-section {
        padding: 45px 0 75px;
    }

    .product-detail-visual {
        min-height: 440px;
    }

    .large-phone {
        width: 200px;
        height: 390px;

        border-radius: 32px;
    }

    .large-phone::after {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .large-phone-camera {
        top: 19px;
        left: 18px;

        width: 48px;
        height: 55px;
    }

    .large-phone-camera i {
        width: 14px;
        height: 14px;
    }

    .product-detail-content h1 {
        font-size: 39px;
    }

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

    .detail-highlights > div:nth-child(2) {
        border-right: 0;
    }

    .detail-highlights > div:nth-child(-n+2) {
        border-bottom: 1px solid #e2e8f0;
    }

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

}


@media (max-width: 420px) {

    .product-detail-visual {
        min-height: 400px;
    }

    .large-phone {
        width: 175px;
        height: 350px;
    }

    .detail-actions {
        flex-direction: column;
    }

    .detail-actions .button {
        width: 100%;
    }

}
/* ==========================================================
   PART 3 — ABOUT PAGE
========================================================== */

.about-intro-section {
    padding: 100px 0;

    background: #ffffff;
}

.about-intro-grid {
    display: grid;

    grid-template-columns:
        1fr 0.9fr;

    align-items: center;

    gap: 80px;
}

.about-intro-content {
    max-width: 620px;
}

.about-intro-content h2 {
    margin-top: 8px;

    color: #0f172a;

    font-size: clamp(35px, 5vw, 56px);

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 900;
}

.about-intro-content h2 span {
    display: block;

    color: #0ea5e9;
}

.about-intro-content p {
    margin-top: 18px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.85;
}

.about-intro-content .button {
    margin-top: 27px;
}


/* ABOUT VISUAL */

.about-visual {
    min-height: 480px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 26px;

    background:
        radial-gradient(
            circle at center,
            rgba(56, 189, 248, 0.25),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #f8fafc,
            #e0f2fe
        );
}

.about-tech-card {
    position: relative;

    width: 300px;
    height: 360px;

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

    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 25px;

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

    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.1);

    backdrop-filter: blur(15px);

    transform: rotate(3deg);

    transition: transform 0.35s ease;
}

.about-visual:hover .about-tech-card {
    transform:
        rotate(0deg)
        translateY(-8px);
}

.tech-circle {
    width: 130px;
    height: 130px;

    display: grid;
    place-items: center;

    border: 8px solid rgba(14, 165, 233, 0.12);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0ea5e9,
            #0369a1
        );

    box-shadow:
        0 20px 45px rgba(14, 165, 233, 0.25);
}

.tech-circle span {
    color: #ffffff;

    font-size: 58px;
    font-weight: 950;
}

.tech-lines {
    width: 170px;

    margin-top: 32px;
}

.tech-lines span {
    display: block;

    height: 5px;

    margin: 7px 0;

    border-radius: 99px;

    background: #cbd5e1;
}

.tech-lines span:nth-child(1) {
    width: 100%;
}

.tech-lines span:nth-child(2) {
    width: 75%;
}

.tech-lines span:nth-child(3) {
    width: 88%;
}

.tech-lines span:nth-child(4) {
    width: 55%;
}

.tech-label {
    display: flex;
    flex-direction: column;

    margin-top: 24px;

    text-align: center;
}

.tech-label strong {
    color: #0f172a;

    font-size: 17px;
    font-weight: 950;

    letter-spacing: 1px;
}

.tech-label small {
    margin-top: 4px;

    color: #94a3b8;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 2px;
}


/* ==========================================================
   ABOUT OFFER
========================================================== */

.about-offer-section {
    padding: 100px 0;

    background: #ffffff;
}

.offer-grid {
    display: grid;

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

    gap: 16px;

    margin-top: 45px;
}

.offer-card {
    position: relative;

    min-height: 290px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid #e2e8f0;
    border-radius: 20px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.offer-card:hover {
    transform: translateY(-5px);

    border-color: #bae6fd;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.08);
}

.offer-number {
    color: #0ea5e9;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
}

.offer-card h3 {
    margin-top: 45px;

    color: #0f172a;

    font-size: 22px;
    font-weight: 900;
}

.offer-card p {
    margin-top: 12px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.75;
}

.offer-card a {
    position: absolute;

    left: 30px;
    bottom: 25px;

    color: #0284c7;

    font-size: 10px;
    font-weight: 850;
}

.offer-card a:hover {
    color: #0369a1;
}


/* ==========================================================
   CONTACT PAGE
========================================================== */

.contact-section {
    padding: 100px 0;

    background: #ffffff;
}

.contact-grid {
    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 80px;

    align-items: start;
}

.contact-information {
    max-width: 530px;
}

.contact-information h2 {
    margin-top: 8px;

    color: #0f172a;

    font-size: clamp(34px, 5vw, 52px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 900;
}

.contact-information h2 span {
    display: block;

    color: #0ea5e9;
}

.contact-information > p {
    margin-top: 18px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.8;
}


/* CONTACT LIST */

.contact-list {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin-top: 35px;
}

.contact-item {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 17px;

    border: 1px solid #e2e8f0;
    border-radius: 14px;

    background: #ffffff;
}

.contact-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #0284c7;
    background: #e0f2fe;

    font-size: 16px;
    font-weight: 900;
}

.contact-item div:last-child {
    display: flex;
    flex-direction: column;
}

.contact-item span {
    color: #94a3b8;

    font-size: 9px;
    font-weight: 700;
}

.contact-item strong {
    margin-top: 3px;

    color: #1e293b;

    font-size: 12px;
    font-weight: 850;
}

.contact-item small {
    margin-top: 2px;

    color: #94a3b8;

    font-size: 9px;
}


/* CONTACT NOTE */

.contact-note {
    margin-top: 25px;

    padding: 18px;

    border-left: 3px solid #0ea5e9;

    background: #f8fafc;
}

.contact-note strong {
    color: #334155;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.contact-note p {
    margin-top: 7px;

    color: #64748b;

    font-size: 10px;

    line-height: 1.7;
}


/* CONTACT FORM */

.contact-form-wrapper {
    width: 100%;
}

.contact-form-card {
    padding: 38px;

    border: 1px solid #e2e8f0;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.06);
}

.contact-form-card h2 {
    margin-top: 7px;

    color: #0f172a;

    font-size: 30px;
    font-weight: 900;
}

.contact-form-card > p {
    margin-top: 8px;

    color: #94a3b8;

    font-size: 11px;
}

.contact-form {
    margin-top: 28px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 10px;
    font-weight: 800;
}

.form-group input,
.form-group textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #dbe1e8;
    border-radius: 10px;

    outline: none;

    color: #1e293b;
    background: #ffffff;

    font-family: inherit;
    font-size: 11px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input {
    height: 45px;
}

.form-group textarea {
    resize: vertical;

    min-height: 130px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #b0bac7;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #38bdf8;

    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.1);
}

.contact-form .button {
    width: 100%;

    border: 0;

    cursor: pointer;
}


/* ==========================================================
   CONTACT LINKS
========================================================== */

.contact-links-section {
    padding: 100px 0;

    background: #f8fafc;
}

.contact-links-grid {
    display: grid;

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

    gap: 15px;

    margin-top: 42px;
}

.contact-link-card {
    position: relative;

    min-height: 205px;

    display: flex;
    flex-direction: column;

    padding: 26px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.contact-link-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.08);
}

.contact-link-number {
    color: #0ea5e9;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}

.contact-link-card strong {
    margin-top: 35px;

    color: #0f172a;

    font-size: 17px;
    font-weight: 900;
}

.contact-link-card p {
    margin-top: 7px;

    max-width: 230px;

    color: #64748b;

    font-size: 10px;

    line-height: 1.65;
}

.contact-link-arrow {
    position: absolute;

    right: 25px;
    bottom: 24px;

    color: #0ea5e9;

    font-size: 20px;
}


/* ==========================================================
   CTA ACTIONS
========================================================== */

.cta-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-top: 25px;
}


/* ==========================================================
   PART 3 RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .about-intro-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .about-intro-content {
        max-width: 100%;
    }

    .contact-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .contact-information {
        max-width: 100%;
    }

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

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

}


@media (max-width: 650px) {

    .about-intro-section,
    .about-offer-section,
    .contact-section,
    .contact-links-section {
        padding: 70px 0;
    }

    .about-visual {
        min-height: 410px;
    }

    .about-tech-card {
        width: 270px;
        height: 330px;
    }

    .tech-circle {
        width: 110px;
        height: 110px;
    }

    .tech-circle span {
        font-size: 48px;
    }

    .offer-grid,
    .contact-links-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        padding: 25px;
    }

}


@media (max-width: 420px) {

    .about-intro-content h2,
    .contact-information h2 {
        font-size: 35px;
    }

    .about-tech-card {
        width: 245px;
        height: 310px;
    }

    .contact-item {
        align-items: flex-start;
    }

    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .button {
        width: 100%;
    }

}
/* ==========================================================
   PART 4 — FAQ
========================================================== */

.faq-section {
    padding: 100px 0;

    background: #ffffff;
}

.faq-list {
    width: min(850px, 100%);

    margin: 50px auto 0;
}

.faq-item {
    border-top: 1px solid #e2e8f0;
}

.faq-item:last-child {
    border-bottom: 1px solid #e2e8f0;
}

.faq-item summary {
    display: grid;

    grid-template-columns: 45px 1fr 25px;

    align-items: center;

    gap: 10px;

    min-height: 78px;

    cursor: pointer;

    list-style: none;

    color: #0f172a;

    font-size: 14px;
    font-weight: 850;
}

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

.faq-item summary span {
    color: #0ea5e9;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1px;
}

.faq-item summary b {
    color: #94a3b8;

    font-size: 20px;
    font-weight: 400;

    text-align: center;

    transition: transform 0.2s ease;
}

.faq-item[open] summary b {
    transform: rotate(45deg);

    color: #0ea5e9;
}

.faq-answer {
    padding:
        0
        45px
        28px
        45px;
}

.faq-answer p {
    max-width: 700px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.85;
}


/* ==========================================================
   PART 4 — REVIEW
========================================================== */

.review-summary-section {
    padding: 90px 0;

    background: #f8fafc;
}

.review-summary {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 60px;
}

.review-summary-main {
    max-width: 570px;
}

.review-summary-main h2 {
    margin-top: 8px;

    color: #0f172a;

    font-size: clamp(35px, 5vw, 52px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 900;
}

.review-summary-main h2 span {
    display: block;

    color: #0ea5e9;
}

.review-summary-main p {
    margin-top: 18px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.8;
}

.review-stats {
    display: grid;

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

    gap: 10px;
}

.review-stats div {
    min-height: 140px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 20px;

    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #ffffff;
}

.review-stats strong {
    color: #0ea5e9;

    font-size: 26px;
    font-weight: 950;
}

.review-stats span {
    margin-top: 10px;

    color: #64748b;

    font-size: 9px;
    font-weight: 750;

    line-height: 1.4;
}


/* REVIEWS GRID */

.reviews-section {
    padding: 100px 0;

    background: #ffffff;
}

.reviews-grid {
    display: grid;

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

    gap: 16px;

    margin-top: 45px;
}

.review-card {
    display: flex;
    flex-direction: column;

    min-height: 285px;

    padding: 27px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.review-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.08);
}

.review-stars {
    color: #f59e0b;

    font-size: 13px;

    letter-spacing: 2px;
}

.review-text {
    margin-top: 22px;

    color: #475569;

    font-size: 12px;

    line-height: 1.8;
}

.review-author {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-top: auto;

    padding-top: 25px;
}

.review-avatar {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #0284c7;

    background: #e0f2fe;

    font-size: 10px;
    font-weight: 900;
}

.review-author div:last-child {
    display: flex;
    flex-direction: column;
}

.review-author strong {
    color: #1e293b;

    font-size: 11px;
    font-weight: 850;
}

.review-author span {
    margin-top: 3px;

    color: #94a3b8;

    font-size: 9px;
}


/* ==========================================================
   PART 4 RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .review-summary {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .review-summary-main {
        max-width: 100%;
    }

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

}


@media (max-width: 650px) {

    .faq-section,
    .reviews-section,
    .review-summary-section {
        padding: 70px 0;
    }

    .faq-item summary {
        grid-template-columns:
            32px 1fr 22px;

        min-height: 70px;

        font-size: 12px;
    }

    .faq-answer {
        padding:
            0
            25px
            25px
            32px;
    }

    .faq-answer p {
        font-size: 11px;
    }

    .review-stats {
        grid-template-columns: 1fr;
    }

    .review-stats div {
        min-height: 90px;
    }

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

}
/* ==========================================================
   LEGAL / CONTENT PAGES
========================================================== */

.content-section {
    padding: 90px 0;
    background: #ffffff;
}

.legal-content {
    width: min(850px, 100%);
    margin: 0 auto;
}

.legal-content h2 {
    margin-top: 12px;

    color: #0f172a;

    font-size: clamp(32px, 5vw, 48px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    font-weight: 900;
}

.legal-content h3 {
    margin-top: 38px;
    margin-bottom: 10px;

    color: #0f172a;

    font-size: 17px;

    font-weight: 850;
}

.legal-content p {
    margin-bottom: 16px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.9;
}

.legal-content a {
    color: #0284c7;

    font-weight: 750;

    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}


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

@media (max-width: 650px) {

    .content-section {
        padding: 65px 0;
    }

    .legal-content h2 {
        font-size: 32px;
    }

    .legal-content h3 {
        margin-top: 30px;

        font-size: 15px;
    }

    .legal-content p {
        font-size: 12px;

        line-height: 1.8;
    }

}