:root{
    --bg:#050505;
    --panel:#0b0b0c;
    --panel-2:#111214;
    --panel-3:#17181b;

    --border:#232427;
    --border-strong:#3a3c40;

    --text:#f3f3f1;
    --text-soft:#c8ccd1;
    --text-muted:#8a9098;

    --white:#ffffff;

    --shadow-sm:0 4px 14px rgba(0,0,0,.24);
    --shadow-md:0 14px 36px rgba(0,0,0,.38);
    --shadow-lg:0 30px 70px rgba(0,0,0,.58);

    --radius-sm:.45rem;
    --radius-md:.75rem;
    --radius-lg:.95rem;

    --transition:180ms cubic-bezier(.2,.8,.2,1);

    --space-1:.35rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.25rem;
    --space-6:1.5rem;
    --space-8:2rem;
    --space-10:2.5rem;
    --space-12:3rem;
    --space-16:4rem;
    --space-20:5rem;

    --text-xs:clamp(.72rem,.68rem + .12vw,.82rem);
    --text-sm:clamp(.88rem,.84rem + .12vw,.98rem);
    --text-base:clamp(1rem,.98rem + .14vw,1.05rem);
    --text-lg:clamp(1.15rem,1.08rem + .35vw,1.4rem);
    --text-xl:clamp(1.6rem,1.25rem + 1vw,2.35rem);
    --text-display:clamp(2.4rem,1.6rem + 6vw,6.6rem);
}

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

html{
    scroll-behavior:smooth;
    color-scheme:dark;
    -webkit-font-smoothing:antialiased;
}

body{
    min-height:100vh;
    background:linear-gradient(180deg,#060606 0%,#050505 100%);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    letter-spacing:.01em;
    overflow-x:hidden;
}

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

a, button{
    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.container{
    width:min(1380px,100% - 2rem);
    margin:auto;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:1.5rem 0;
    border-bottom:1px solid var(--border);
}

.topbar span{
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--text-muted);
    font-weight:700;
}

.hero{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:3rem;
    align-items:end;
    padding:5rem 0;
    border-bottom:1px solid var(--border);
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    padding:.7rem 1rem;
    border:1px solid var(--border);
    background:var(--panel);
    border-radius:999px;
    margin-bottom:1.5rem;
    max-width:100%;
}

.hero-kicker::before{
    content:"";
    width:8px;
    height:8px;
    background:var(--white);
    border-radius:50%;
    flex:0 0 auto;
}

.hero-kicker span{
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:700;
    color:var(--text-soft);
}

.hero h1{
    font-size:var(--text-display);
    line-height:.86;
    letter-spacing:-.03em;
    font-weight:900;
    text-transform:none;
    max-width:none;
    overflow-wrap:anywhere;
}

.hero-copy{
    margin-top:1.75rem;
    max-width:62ch;
    color:var(--text-soft);
    font-size:1.03rem;
}

.hero-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    margin-top:2.5rem;
}

.hero-stat{
    padding-top:1rem;
    border-top:1px solid var(--border);
    min-width:0;
}

.hero-stat strong{
    display:block;
    font-size:1.3rem;
    font-weight:800;
    margin-bottom:.2rem;
}

.hero-stat span{
    color:var(--text-muted);
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.12em;
}

.hero-panel{
    border:1px solid var(--border);
    background:linear-gradient(180deg,#111214 0%,#090909 100%);
    border-radius:var(--radius-lg);
    padding:2rem;
    box-shadow:var(--shadow-lg);
    position:relative;
    overflow:hidden;
    min-width:0;
}

.hero-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
            180deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 34px
        );
    pointer-events:none;
}

.hero-panel::after{
    content:"";
    position:absolute;
    inset:-30%;
    background:radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 45%);
    pointer-events:none;
}

.panel-label{
    position:relative;
    z-index:2;
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--text-muted);
    margin-bottom:2rem;
    font-weight:800;
}

.protocol-stack{
    display:grid;
    gap:1.5rem;
    position:relative;
    z-index:2;
}

.protocol-item{
    padding-bottom:1.5rem;
    border-bottom:1px solid var(--border);
}

.protocol-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.protocol-item h2{
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:.5rem;
}

.protocol-item p{
    color:var(--text-soft);
    font-size:.95rem;
}

.products{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem;
    padding:4rem 0;
}

.product-card{
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:linear-gradient(180deg,#101113 0%,#090909 100%);
    box-shadow:var(--shadow-md);
    position:relative;
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
    min-width:0;
}

.product-card:hover{
    transform:translateY(-6px);
    border-color:var(--border-strong);
    box-shadow:0 24px 60px rgba(0,0,0,.5);
}

.product-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.015), transparent 35%);
    pointer-events:none;
}

.product-media{
    aspect-ratio:4 / 5;
    display:grid;
    place-items:center;
    padding:2rem;
    border-bottom:1px solid var(--border);
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#0d0d0f 0%,#111214 100%);
}

.product-media::before{
    content:"";
    position:absolute;
    inset:1rem;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:.65rem;
}

.pouch{
    width:min(80%,18rem);
    aspect-ratio:2 / 3;
    background:linear-gradient(180deg,#171717 0%,#0a0a0a 100%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:1rem 1rem .7rem .7rem;
    padding:1rem;
    display:flex;
    align-items:flex-end;
    box-shadow:
        0 20px 40px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.04);
    position:relative;
}

.pouch::before{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:.8rem;
    height:.35rem;
    background:rgba(255,255,255,.08);
    border-radius:999px;
}

.label{
    width:100%;
    background:#f4f4f1;
    color:#0a0a0a;
    padding:1rem;
    border-radius:.12rem;
    min-height:44%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.label strong{
    font-size:1.05rem;
    line-height:.92;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    overflow-wrap:anywhere;
}

.label span,
.label small{
    font-size:.64rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#444;
}

.label small{
    margin-top:.8rem;
    padding-top:.4rem;
    border-top:1px solid #ddd;
    font-weight:800;
}

.product-body{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1.5rem;
    flex:1;
    min-width:0;
}

.product-head{
    padding-bottom:1rem;
    border-bottom:1px solid var(--border);
}

.product-title{
    font-size:var(--text-xl);
    line-height:.94;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:-.04em;
    overflow-wrap:anywhere;
}

.product-tagline{
    margin-top:.5rem;
    color:var(--text-muted);
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:700;
}

.product-copy{
    color:var(--text-soft);
    font-size:.96rem;
}

.micro-specs{
    display:grid;
    gap:.7rem;
}

.micro-specs span{
    padding-top:.7rem;
    border-top:1px solid var(--border);
    color:var(--text-muted);
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.12em;
}

.price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-top:auto;
    padding-top:1.2rem;
    border-top:1px solid var(--border);
}

.price{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.price strong{
    font-size:1.7rem;
    line-height:1;
    font-weight:900;
}

.price span{
    color:var(--text-muted);
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.12em;
}

.btn-buy{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:.9rem 1.25rem;
    border:1px solid var(--white);
    background:var(--white);
    color:#090909;
    border-radius:.45rem;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:var(--text-xs);
    font-weight:800;
    white-space:nowrap;
}

.btn-buy:hover{
    background:transparent;
    color:var(--white);
    transform:translateY(-2px);
}

.commerce-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    padding:0 0 4rem;
}

.commerce-strip div{
    border:1px solid var(--border);
    background:var(--panel);
    padding:1.25rem;
    border-radius:var(--radius-md);
}

.commerce-strip strong{
    display:block;
    margin-bottom:.5rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:var(--text-xs);
}

.commerce-strip span{
    color:var(--text-soft);
    font-size:.92rem;
}

.labs-section{
    padding:3rem;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:linear-gradient(180deg,#101113 0%,#090909 100%);
    box-shadow:var(--shadow-md);
    margin-bottom:2rem;
}

.labs-section:last-of-type {
    margin-bottom: 0;
}

.section-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:1rem;
    align-items:end;
    padding-bottom:2rem;
    margin-bottom:2rem;
    border-bottom:1px solid var(--border);
}

.section-head h2{
    font-size:clamp(2rem,1.3rem + 2vw,3.5rem);
    line-height:.92;
    letter-spacing:-.05em;
    text-transform:uppercase;
    font-weight:900;
    overflow-wrap:anywhere;
}

.section-head p{
    max-width:58ch;
    color:var(--text-soft);
}

.protocol-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}

.spec-card{
    border:1px solid var(--border);
    background:var(--panel-2);
    border-radius:var(--radius-md);
    padding:1.5rem;
    transition:
        border-color var(--transition),
        transform var(--transition);
    min-width:0;
}

.spec-card:hover{
    transform:translateY(-4px);
    border-color:var(--border-strong);
}

.spec-index{
    display:inline-block;
    margin-bottom:1rem;
    color:var(--text-muted);
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
}

.spec-card h3{
    font-size:1.2rem;
    line-height:1.08;
    text-transform:uppercase;
    margin-bottom:.9rem;
    overflow-wrap:anywhere;
}

.spec-card p{
    color:var(--text-soft);
    font-size:.95rem;
}

.footer{
    display:flex;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    padding:3rem 0;
    margin-top:3rem;
    border-top:1px solid var(--border);
}

.footer span,
.footer a{
    color:var(--text-muted);
    text-decoration:none;
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:.12em;
}

.footer a:hover{
    color:var(--white);
}

.footer div{
    display:flex;
    flex-wrap:wrap;
    gap:1rem 1.25rem;
}

@media (max-width:980px){
    .hero,
    .products,
    .protocol-grid,
    .section-head,
    .commerce-strip{
        grid-template-columns:1fr;
    }

    .hero{
        gap:2rem;
    }

    .hero-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .section-head{
        align-items:start;
    }
}

@media (max-width:768px){
    .topbar{
        flex-direction:column;
        align-items:flex-start;
        padding:1rem 0 1.25rem;
    }

    .hero{
        padding:3.5rem 0;
        gap:1.5rem;
    }

    .hero-kicker{
        width:100%;
        border-radius:var(--radius-md);
        padding:.85rem 1rem;
    }

    .hero-kicker span{
        line-height:1.4;
    }

    .hero h1{
        max-width:none;
        line-height:.9;
    }

    .hero-copy{
        margin-top:1.25rem;
        font-size:1rem;
    }

    .hero-stats{
        grid-template-columns:1fr;
        gap:.85rem;
        margin-top:2rem;
    }

    .products{
        gap:1.25rem;
        padding:3rem 0;
    }

    .product-media{
        padding:1.5rem;
    }

    .pouch{
        width:min(78%,15rem);
    }

    .labs-section{
        padding:1.5rem;
    }

    .section-head{
        padding-bottom:1.5rem;
        margin-bottom:1.5rem;
    }
}

@media (max-width:640px){
    .container{
        width:min(100% - 1rem,1380px);
    }

    .topbar span{
        letter-spacing:.12em;
    }

    .hero{
        padding:2.75rem 0;
    }

    .hero-kicker{
        margin-bottom:1rem;
    }

    .hero h1{
        font-size:clamp(2.35rem,1.75rem + 5vw,3.6rem);
        line-height:.92;
        letter-spacing:-.05em;
    }

    .hero-panel{
        padding:1.25rem;
    }

    .panel-label{
        margin-bottom:1.25rem;
    }

    .protocol-stack{
        gap:1rem;
    }

    .protocol-item{
        padding-bottom:1rem;
    }

    .protocol-item h2{
        font-size:.92rem;
        line-height:1.35;
    }

    .protocol-item p{
        font-size:.92rem;
    }

    .product-body{
        padding:1.25rem;
        gap:1rem;
    }

    .product-title{
        font-size:clamp(1.45rem,1.15rem + 1.2vw,1.9rem);
    }

    .product-copy{
        font-size:.94rem;
    }

    .micro-specs{
        gap:.55rem;
    }

    .micro-specs span{
        letter-spacing:.1em;
    }

    .price-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .btn-buy{
        width:100%;
    }

    .section-head h2{
        font-size:clamp(1.7rem,1.2rem + 3vw,2.35rem);
        line-height:.96;
    }

    .footer{
        padding:2rem 0;
        margin-top:2rem;
        flex-direction:column;
        align-items:flex-start;
    }

    .footer div{
        flex-direction:column;
        align-items:flex-start;
        gap:.65rem;
    }
}

@media (max-width:420px){
    .container{
        width:min(100% - .75rem,1380px);
    }

    .topbar{
        gap:.5rem;
    }

    .hero{
        padding:2.25rem 0;
    }

    .hero-kicker{
        padding:.75rem .85rem;
    }

    .hero-kicker span,
    .topbar span,
    .product-tagline,
    .panel-label,
    .spec-index,
    .footer span,
    .footer a{
        letter-spacing:.11em;
    }

    .product-media{
        padding:1rem;
    }

    .product-media::before{
        inset:.75rem;
    }

    .pouch{
        width:min(82%,13.2rem);
        padding:.8rem;
    }

    .label{
        padding:.8rem;
    }

    .label strong{
        font-size:.95rem;
    }

    .label span,
    .label small{
        font-size:.58rem;
    }

    .labs-section{
        padding:1rem;
    }

    .spec-card{
        padding:1rem;
    }

    .price strong{
        font-size:1.45rem;
    }

    .btn-buy{
        padding:.85rem 1rem;
    }
}

@media (hover:none){
    .product-card:hover,
    .spec-card:hover,
    .btn-buy:hover{
        transform:none;
    }

    .btn-buy:active{
        background:transparent;
        color:var(--white);
    }
}

@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

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