:root {
    --red:#c51d2b;
    --red2:#ef3340;
    --ink:#151518;
    --muted:#62656c;
    --paper:#fff;
    --soft:#f5f5f6;
    --line:#e7e7ea;
    --max:1240px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:95px
}

body {
    margin:0;
    font-family:Inter,Arial,Helvetica,sans-serif;
    color:var(--ink);
    background:#fff;
    overflow-x:hidden
}

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

button,input,textarea,select {
    font:inherit
}

.container {
    width:min(var(--max),calc(100% - 44px));
    margin:auto
}

.topline {
    width: 100%;
    flex-shrink: 0;
    height: 5px;
    background:linear-gradient(90deg,var(--red),#ff5b61,var(--red));
    background-size:200% 100%;
    animation:shine 5s linear infinite
}

@keyframes shine {
    to {
        background-position:200% 0
    }
}

header {
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(20,20,20,.08)
}

.nav {
    height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}

/* =====================================
   XLNTS LOGO — DESKTOP AND MOBILE
   ===================================== */

/* Desktop */
.brand {
    display: flex;
    align-items: center;
    min-width: 125px;
    flex-shrink: 0;
}

.brand img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    max-height: 75px;
    object-fit: contain;
}

/* Mobile and tablet */
@media (max-width: 760px) {
    .brand {
        min-width: 0;
        flex-shrink: 1;
    }

    .brand img {
        width: 145px;
        max-width: 100%;
        height: auto;
        max-height: 55px;
        object-fit: contain;
    }
}

/* Small mobile phones */
@media (max-width: 430px) {
    .brand img {
        width: 130px;
        max-height: 48px;
    }
}

.links {
    display:flex;
    align-items:center;
    gap:25px;
    font-size:13px;
    font-weight:750
}

.navlink {
    padding:32px 0;
    position:relative
}

.navlink:after {
    content:"";
    position:absolute;
    bottom:22px;
    left:0;
    width:0;
    height:2px;
    background:var(--red);
    transition:.25s
}

.navlink:hover:after,.navlink:focus-visible:after {
    width:100%
}

.nav-cta,.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:var(--red);
    color:#fff;
    border:1px solid var(--red);
    border-radius:4px;
    padding:14px 19px;
    font-size:13px;
    font-weight:800;
    transition:transform .25s,box-shadow .25s,background .25s
}

.nav-cta:hover,.btn:hover {
    background:#a81421;
    transform:translateY(-3px);
    box-shadow:0 12px 25px #c51d2b30
}

.menu-toggle {
    display:none;
    border:0;
    background:var(--ink);
    color:white;
    border-radius:4px;
    padding:10px 13px
}

.mega {
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 24px 45px #1112;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.25s ease
}

.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega {
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}

.mega-inner {
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr 1.1fr;
    gap:35px;
    padding:32px 0 38px
}

.mega-kicker,.eyebrow {
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:900;
    color:var(--red)
}

.mega h3 {
    font-size:20px;
    margin:10px 0
}

.mega p {
    font-size:13px;
    line-height:1.7;
    color:var(--muted)
}

.mega-col a {
    display:block;
    padding:9px 0;
    border-bottom:1px solid #f0f0f0;
    font-size:13px;
    color:#3c3d42;
    transition:color .2s,padding .2s
}

.mega-col a:hover {
    color:var(--red);
    padding-left:5px
}

.mega-feature {
    background:var(--ink);
    color:white;
    border-radius:8px;
    padding:24px;
    overflow:hidden;
    position:relative
}

.mega-feature:after {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border:30px solid #c51d2b55;
    border-radius:50%;
    right:-60px;
    bottom:-70px
}

/* YIJIAO-inspired hover image preview for product mega menu */

.mega-col a.preview-trigger {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}

.preview-arrow {
    opacity:.55;
    font-size:15px;
    transition:transform .2s,opacity .2s
}

.preview-trigger:hover .preview-arrow,.preview-trigger:focus-visible .preview-arrow {
    opacity:1;
    transform:translate(2px,-2px)
}

.product-hover-preview {
    position:fixed;
    z-index:9999;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    width:min(770px,calc(100vw - 32px));
    height:min(520px,calc(100vh - 32px));
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:12px;
    box-shadow:0 26px 80px #0005;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transform:translateY(9px) scale(.985);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
    pointer-events:none;
    padding:10px
}

.product-hover-preview.is-visible {
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1)
}

.product-hover-preview img {
    width:100%;
    height:100%;
    min-height:0;
    object-fit:contain;
    display:block;
    background:#171717;
    border-radius:7px
}

.product-hover-preview .preview-caption {
    padding:13px 7px 5px;
    font-size:16px;
    font-weight:850;
    letter-spacing:.2px;
    color:#171717;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.product-hover-preview .preview-caption small {
    display:block;
    font-size:12px;
    font-weight:500;
    color:#666;
    margin-top:3px
}

.product-hover-preview .preview-caption span {
    color:var(--red);
    font-size:20px
}

@media(max-width:760px) {
    .product-hover-preview {
        display:none
    }
}

.mega-feature h3 {
    position:relative;
    z-index:1
}

.mega-feature a {
    color:white;
    display:inline-block;
    margin-top:15px;
    border-bottom:1px solid var(--red);
    padding-bottom:6px;
    font-weight:800;
    font-size:12px;
    position:relative;
    z-index:1
}

.hero {
    min-height:660px;
    display:grid;
    align-items:center;
    position:relative;
    color:white;
    background:var(--ink);
    isolation:isolate;
    overflow:hidden
}

.hero:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(13,13,15,.94) 0%,rgba(13,13,15,.83) 43%,rgba(13,13,15,.2) 100%),url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2000&q=85') center/cover;
    z-index:-2;
    animation:heroZoom 18s ease-in-out infinite alternate
}

.hero:after {
    content:"";
    position:absolute;
    right:-120px;
    top:-150px;
    width:520px;
    height:520px;
    border:1px solid #ffffff24;
    border-radius:50%;
    box-shadow:0 0 0 55px #ffffff08,0 0 0 110px #ffffff05;
    z-index:-1;
    animation:orbit 24s linear infinite
}

@keyframes heroZoom {
    to {
        transform:scale(1.07)
    }
}

@keyframes orbit {
    to {
        transform:rotate(360deg)
    }
}

.hero-content {
    padding:90px 0 100px;
    max-width:760px
}

.hero .eyebrow {
    color:#ff6a72;
    display:flex;
    align-items:center;
    gap:10px
}

.hero .eyebrow:before {
    content:"";
    width:34px;
    height:2px;
    background:var(--red2)
}

h1 {
    font-size:clamp(42px,6vw,78px);
    letter-spacing:-3px;
    line-height:1.02;
    margin:22px 0;
    font-weight:900
}

.hero h1 span {
    color:#ff4652;
    display:inline-block;
    animation:wordIn .8s both
}

.hero p {
    max-width:590px;
    font-size:17px;
    line-height:1.8;
    color:#e0e0e2
}

.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px
}

.btn-outline {
    background:transparent;
    border-color:#ffffff70
}

.btn-outline:hover {
    background:white;
    color:var(--ink)
}

.hero-stats {
    display:flex;
    gap:36px;
    flex-wrap:wrap;
    margin-top:54px
}

.stat strong {
    font-size:27px;
    display:block
}

.stat span {
    font-size:11px;
    color:#c5c5ca;
    text-transform:uppercase;
    letter-spacing:1.2px
}

.scroll-cue {
    position:absolute;
    right:5%;
    bottom:36px;
    display:flex;
    gap:10px;
    align-items:center;
    color:#ddd;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    writing-mode:vertical-rl
}

.scroll-cue i {
    width:1px;
    height:48px;
    background:var(--red);
    animation:scrollLine 1.4s ease-in-out infinite alternate
}

@keyframes scrollLine {
    to {
        height:72px
    }
}

.trustbar {
    background:var(--red);
    color:white
}

.trustgrid {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}

.trustitem {
    padding:22px 18px;
    border-right:1px solid #ffffff40;
    display:flex;
    align-items:center;
    gap:13px
}

.trustitem:last-child {
    border:0
}

.trustitem b {
    font-size:13px
}

.trustitem span {
    display:block;
    font-size:11px;
    opacity:.8;
    margin-top:4px
}

.trusticon {
    font-size:25px
}

.section {
    padding:100px 0
}

.section.soft {
    background:var(--soft)
}

.section-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:42px
}

.section h2 {
    font-size:clamp(32px,4vw,52px);
    letter-spacing:-1.8px;
    line-height:1.08;
    margin:12px 0 0
}

.section-head p {
    max-width:440px;
    color:var(--muted);
    line-height:1.8;
    font-size:14px
}

.feature-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px
}

.feature {
    min-height:340px;
    padding:35px;
    border-radius:8px;
    position:relative;
    overflow:hidden;
    color:white;
    background:#17171a;
    display:flex;
    flex-direction:column;
    justify-content:end;
    isolation:isolate
}

.feature:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#111e 0%,#1113 60%),var(--photo) center/cover;
    z-index:-2;
    transition:transform .6s
}

.feature:hover:before {
    transform:scale(1.07)
}

.feature:after {
    content:"";
    position:absolute;
    inset:0;
    border:1px solid #ffffff18;
    z-index:-1
}

.feature .eyebrow {
    color:#ff7078
}

.feature h3 {
    font-size:30px;
    max-width:450px;
    margin:10px 0
}

.feature p {
    color:#ddd;
    max-width:440px;
    line-height:1.7;
    font-size:14px
}

.arrow-link {
    font-size:12px;
    font-weight:900;
    color:var(--red);
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:12px
}

.feature .arrow-link {
    color:white
}

.arrow-link span {
    transition:transform .2s
}

.arrow-link:hover span {
    transform:translateX(5px)
}

.product-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.product {
    background:white;
    border:1px solid var(--line);
    border-radius:7px;
    overflow:hidden;
    transition:transform .3s,box-shadow .3s
}

.product:hover {
    transform:translateY(-8px);
    box-shadow:0 20px 40px #16161612
}

.product-img {
    height:205px;
    background:#ddd;
    overflow:hidden;
    position:relative
}

.product-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s
}

.product:hover .product-img img {
    transform:scale(1.08)
}

.product-img:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#0003,transparent 50%)
}

.product-body {
    padding:21px
}

.product-body small {
    font-size:10px;
    text-transform:uppercase;
    color:var(--red);
    font-weight:900;
    letter-spacing:1.3px
}

.product-body h3 {
    font-size:18px;
    margin:9px 0
}

.product-body p {
    font-size:12px;
    line-height:1.7;
    color:var(--muted);
    min-height:42px
}

.product-body a {
    font-size:12px;
    font-weight:900
}

.cta {
    background:var(--red);
    color:white;
    position:relative;
    overflow:hidden
}

.cta:after {
    content:"XLNTS";
    position:absolute;
    right:-10px;
    bottom:-90px;
    font-size:240px;
    font-weight:900;
    color:#ffffff0b;
    letter-spacing:-15px;
    pointer-events:none
}

.cta-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    position:relative;
    z-index:1
}

.cta h2 {
    font-size:clamp(32px,4vw,54px);
    letter-spacing:-2px;
    max-width:760px;
    margin:10px 0
}

.cta p {
    color:#ffe6e8;
    line-height:1.7
}

.btn-white {
    background:white;
    color:var(--red);
    border-color:white;
    white-space:nowrap
}

.btn-white:hover {
    background:var(--ink);
    color:white;
    border-color:var(--ink)
}

.process-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}

.process {
    padding:25px;
    background:white;
    border:1px solid var(--line);
    border-radius:7px;
    transition:all .3s
}

.process:hover {
    border-color:var(--red);
    transform:translateY(-5px)
}

.process .num {
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--lightred, #ffeaec);
    color:var(--red);
    display:grid;
    place-items:center;
    font-weight:900
}

.process h3 {
    font-size:17px;
    margin:20px 0 8px
}

.process p {
    font-size:13px;
    line-height:1.7;
    color:var(--muted)
}

.project-grid {
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    gap:18px
}

.project {
    min-height:300px;
    border-radius:7px;
    overflow:hidden;
    position:relative;
    background:#333;
    color:white;
    isolation:isolate
}

.project img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
    transition:transform .6s
}

.project:hover img {
    transform:scale(1.08)
}

.project:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,#111d,#1111 80%);
    z-index:-1
}

.project div {
    position:absolute;
    left:23px;
    right:20px;
    bottom:23px
}

.project small {
    color:#ff737b;
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:1.4px;
    font-weight:900
}

.project h3 {
    font-size:21px;
    margin:8px 0
}

.testimonial-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.quote-card {
    padding:28px;
    border:1px solid var(--line);
    border-radius:7px;
    background:white
}

.stars {
    color:var(--red);
    letter-spacing:3px
}

.quote-card p {
    line-height:1.8;
    color:#555;
    font-size:14px
}

.quote-card b {
    font-size:13px
}

.quote-card small {
    display:block;
    color:var(--muted);
    margin-top:5px
}

.contact-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:60px
}

.contact-copy p {
    color:var(--muted);
    line-height:1.8
}

.contact-form {
    background:white;
    border:1px solid var(--line);
    padding:28px;
    border-radius:8px;
    box-shadow:0 15px 40px #11108
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px
}

.field {
    display:flex;
    flex-direction:column;
    gap:7px
}

.field.full {
    grid-column:1/-1
}

.field label {
    font-size:12px;
    font-weight:800
}

.field input,.field select,.field textarea {
    border:1px solid #ddd;
    border-radius:4px;
    padding:12px 13px;
    background:#fff;
    min-width:0
}

.field input:focus,.field select:focus,.field textarea:focus {
    outline:2px solid #c51d2b33;
    border-color:var(--red)
}

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

.form-note {
    font-size:11px;
    color:var(--muted);
    line-height:1.6
}

.success {
    display:none;
    padding:13px;
    background:#eaf8ef;
    color:#176c35;
    border-radius:4px;
    font-size:13px;
    margin-bottom:15px
}

footer {
    background:#151518;
    color:white;
    padding:58px 0 25px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:35px
}

.footer-brand {
    font-size:26px;
    font-weight:900;
    color:#ff4652
}

.footer-grid p,.footer-grid a {
    color:#c5c5ca;
    font-size:13px;
    line-height:1.8
}

.footer-grid h4 {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.2px
}

.footer-grid a {
    display:block;
    margin:7px 0
}

.footer-grid a:hover {
    color:white
}

.copyright {
    border-top:1px solid #ffffff20;
    margin-top:38px;
    padding-top:20px;
    color:#999;
    font-size:11px;
    display:flex;
    justify-content:space-between;
    gap:20px
}

.reveal {
    opacity:0;
    transform:translateY(28px);
    transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)
}

.reveal.visible {
    opacity:1;
    transform:translateY(0)
}

.delay1 {
    transition-delay:.12s
}

.delay2 {
    transition-delay:.24s
}

.delay3 {
    transition-delay:.36s
}

.float {
    animation:float 5s ease-in-out infinite
}

@keyframes float {
    50% {
        transform:translateY(-9px)
    }
}

@keyframes wordIn {
    from {
        opacity:0;
        transform:translateY(18px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}

/* =========================================
   XLNTS MOBILE SCREEN WIDTH FIX
   ========================================= */

@media screen and (max-width: 760px) {

    html {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow-x: clip;
    }

    #home,
    main,
    header,
    footer,
    section,
    .hero,
    .hero-content,
    .container,
    .section,
    .section-head,
    .feature-grid,
    .product-grid,
    .project-grid,
    .contact-grid,
    .cta-inner,
    .trustgrid,
    .process-grid,
    .testimonial-grid,
    .footer-grid {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .container {
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Mobile header */
    .nav {
        width: 100%;
        max-width: 100%;
        height: 70px;
        padding: 0 15px;
        box-sizing: border-box;
        justify-content: space-between;
        gap: 12px;
    }

    .brand {
        min-width: 0;
        flex-shrink: 1;
    }

    .brand img {
        width: 135px;
        max-width: 100%;
        height: auto;
        max-height: 55px;
        object-fit: contain;
    }

    /* Show hamburger; hide desktop navigation */
    .menu-toggle {
        display: inline-flex !important;
        flex-shrink: 0;
    }

    .links {
        display: none !important;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
        padding: 15px 20px 25px;
        box-sizing: border-box;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        z-index: 9999;
    }

    .links.mobile-open {
        display: flex !important;
    }

    .navlink {
        display: block;
        width: 100%;
        padding: 13px 0;
        font-size: 14px;
        box-sizing: border-box;
    }

    /* Hero background and content */
    .hero {
        width: 100%;
        min-height: 0;
        background-size: cover;
        background-position: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 55px 0;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(30px, 7.5vw, 44px);
        line-height: 1.12;
        letter-spacing: -1px;
        overflow-wrap: break-word;
    }

    .hero p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
    }

    .scroll-cue {
        display: none;
    }

    /* Responsive grids */
    .feature-grid,
    .contact-grid,
    .testimonial-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-grid,
    .project-grid,
    .process-grid,
    .trustgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-grid > *,
    .project-grid > *,
    .process-grid > *,
    .trustgrid > * {
        min-width: 0;
    }

    .product-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Prevent oversized media */
    img,
    video,
    iframe {
        max-width: 100%;
    }
}

/* Small phones */
@media screen and (max-width: 430px) {

    .container {
        width: calc(100% - 30px);
    }

    .brand img {
        width: 125px;
        max-height: 48px;
    }

    .hero-content {
        padding: 45px 0;
    }

    .hero h1 {
        font-size: clamp(28px, 8vw, 35px);
    }

    .section {
        padding: 40px 0;
    }

    .project-grid,
    .process-grid,
    .trustgrid,
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .project:first-child {
        grid-column: auto;
    }

    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}