:root {
    --red:#ff1f2d;
    --red-dark:#b90011;
    --bg:#050507;
    --panel:#111217;
    --panel-soft:#171922;
    --text:#ffffff;
    --muted:#aeb3bf;
    --line:rgba(255,255,255,.08);
}

body {
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--text);
    transition:.25s ease;
}

body.light {
    --bg:#f5f6f8;
    --panel:#ffffff;
    --panel-soft:#eef0f4;
    --text:#16171a;
    --muted:#606775;
    --line:rgba(0,0,0,.08);
}

.page {
    min-height:100vh;
    padding:24px 34px 50px;
    background:
        radial-gradient(circle at 75% 18%, rgba(255,31,45,.18), transparent 34%),
        linear-gradient(135deg, var(--bg), #090b10);
}

body.light .page {
    background:
        radial-gradient(circle at 75% 18%, rgba(255,31,45,.10), transparent 34%),
        linear-gradient(135deg, #ffffff, #eef0f4);
}

.topnav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    padding:8px 0 28px;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    letter-spacing:.5px;
}

.brand-icon {
    color:var(--red);
    font-size:24px;
}

.brand strong,
.brand span {
    display:block;
    line-height:1.05;
}

.brand span {
    color:var(--text);
}

.mainnav {
    display:flex;
    gap:28px;
}

.mainnav a {
    color:var(--text);
    text-decoration:none;
    font-size:14px;
    opacity:.88;
}

.nav-right {
    display:flex;
    align-items:center;
    gap:12px;
}

.theme-btn,
.login-btn {
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--text);
    border-radius:12px;
    padding:10px 14px;
    text-decoration:none;
    cursor:pointer;
}

.login-btn {
    background:var(--red);
    color:white;
    border-color:transparent;
    font-weight:700;
}

.hero {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:50px;
    align-items:center;
    min-height:470px;
}

.badge {
    display:inline-flex;
    padding:8px 12px;
    border:1px solid rgba(255,31,45,.35);
    background:rgba(255,31,45,.10);
    color:var(--red);
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

.hero h1 {
    margin:22px 0 18px;
    font-size:64px;
    line-height:.98;
    letter-spacing:-2px;
}

.hero h1 span {
    color:var(--red);
}

.hero p {
    max-width:620px;
    color:var(--muted);
    font-size:18px;
    line-height:1.55;
}

.search-box {
    display:flex;
    max-width:660px;
    margin-top:30px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.search-box input {
    flex:1;
    border:0;
    outline:0;
    padding:18px 20px;
    background:transparent;
    color:var(--text);
    font-size:15px;
}

.search-box button {
    border:0;
    background:linear-gradient(135deg, var(--red), var(--red-dark));
    color:white;
    padding:0 28px;
    font-weight:700;
    cursor:pointer;
}

.quick-tags {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.quick-tags span {
    background:var(--panel);
    border:1px solid var(--line);
    padding:7px 11px;
    border-radius:999px;
    color:var(--muted);
    font-size:13px;
}

.hero-visual {
    display:flex;
    justify-content:center;
}

.storage-grid {
    width:520px;
    min-height:330px;
    background:linear-gradient(145deg, var(--panel), var(--panel-soft));
    border:1px solid var(--line);
    border-radius:28px;
    padding:28px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.32);
}

.box {
    border-radius:18px;
    background:#222;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
}

.box:after {
    content:"";
    position:absolute;
    inset:18px;
    border-radius:12px;
    background:rgba(255,255,255,.16);
}

.box.red { background:#d91522; }
.box.black { background:#070707; }
.box.blue { background:#1155cc; }
.box.yellow { background:#f0c018; }
.box.gray { background:#8b8f98; }
.box.green { background:#158442; }

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

.feature {
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    padding:20px;
}

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

.feature span {
    margin-top:6px;
    color:var(--muted);
    font-size:14px;
}

.categories {
    margin-top:46px;
}

.section-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.section-title h2 {
    margin:0;
}

.section-title a {
    color:var(--red);
    text-decoration:none;
}

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

.cat-card {
    min-height:150px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:22px;
    padding:22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.part {
    width:74px;
    height:42px;
    border-radius:10px;
    box-shadow:inset 0 -8px 0 rgba(0,0,0,.18);
}

.part.red { background:#df1523; }
.part.gray { background:#bfc3ca; }
.part.blue { background:#1166e8; }
.part.small { width:76px; height:28px; }

.head {
    width:52px;
    height:52px;
    background:#f3c21b;
    border-radius:50%;
    box-shadow:inset 0 -8px 0 rgba(0,0,0,.16);
}

@media (max-width:900px) {
    .mainnav {
        display:none;
    }

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

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

    .features,
    .category-grid {
        grid-template-columns:1fr;
    }

    .storage-grid {
        width:100%;
    }
}