:root {

    --bg: #050b18;

    --bg2: #0b1730;

    --accent: #1e90ff;

    --accent-soft: #3aa0ff;

    --text: #ffffff;

    --muted: #9aa4c2;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    background-color: var(--bg);

    color: var(--text);

}



a {

    color: var(--text);

    text-decoration: none;

}



header {

    background-color: #040816;

    border-bottom: 1px solid #111a33;

    padding: 15px 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.logo {

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 1px;

}



.logo span {

    color: var(--accent);

}



nav a {

    margin-left: 20px;

    font-size: 15px;

    color: var(--muted);

}



nav a:hover {

    color: var(--accent-soft);

}



nav .cart-link {

    padding: 6px 12px;

    border-radius: 999px;

    background-color: #0b1730;

    border: 1px solid #1b2a4d;

}



nav .cart-link span {

    color: var(--accent-soft);

    font-weight: 600;

}



.main {

    max-width: 1100px;

    margin: 30px auto 60px;

    padding: 0 20px;

}



/* Hero */



.hero {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    align-items: center;

    margin-bottom: 40px;

}



.hero-text {

    flex: 1 1 280px;

}



.hero-text h1 {

    font-size: 34px;

    margin-bottom: 10px;

}



.hero-text p {

    color: var(--muted);

    margin-bottom: 20px;

}



.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 12px;

    border-radius: 999px;

    background-color: #071024;

    border: 1px solid #1b2a4d;

    font-size: 13px;

    color: var(--muted);

    margin-bottom: 12px;

}



.hero-cta {

    display: flex;

    gap: 12px;

    margin-top: 10px;

}



.btn {

    border: none;

    cursor: pointer;

    border-radius: 999px;

    padding: 10px 20px;

    font-size: 15px;

    font-weight: 500;

}



.btn-primary {

    background-color: var(--accent);

    color: #fff;

}



.btn-primary:hover {

    background-color: var(--accent-soft);

}



.btn-ghost {

    background-color: transparent;

    border: 1px solid #1b2a4d;

    color: var(--muted);

}



.btn-ghost:hover {

    border-color: var(--accent-soft);

    color: var(--accent-soft);

}



.hero-robot {

    flex: 0 0 260px;

    background: radial-gradient(circle at top, #1e90ff33, transparent 60%);

    border-radius: 24px;

    padding: 20px;

    text-align: center;

    border: 1px solid #1b2a4d;

}



.hero-robot img {

    width: 200px;

    height: 200px;

    object-fit: cover;

    border-radius: 18px;

    margin-bottom: 10px;

}



.hero-robot p {

    color: var(--muted);

    font-size: 14px;

}



/* Products */



.section-title {

    font-size: 22px;

    margin-bottom: 10px;

}



.section-subtitle {

    color: var(--muted);

    margin-bottom: 20px;

}



.products-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 20px;

}



.product-card {

    background-color: var(--bg2);

    border-radius: 16px;

    padding: 16px;

    border: 1px solid #1b2a4d;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.product-card img {

    width: 100%;

    height: 718px;

    object-fit: cover;

    border-radius: 12px;

    margin-bottom: 12px;

}



.product-name {

    font-size: 18px;

    margin-bottom: 4px;

}



.product-desc {

    font-size: 14px;

    color: var(--muted);

    margin-bottom: 10px;

}



.product-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 8px;

}



.price {

    font-size: 18px;

    font-weight: 600;

    color: var(--accent-soft);

}



/* Cart & checkout */



.cart-wrapper {

    background-color: var(--bg2);

    border-radius: 16px;

    padding: 20px;

    border: 1px solid #1b2a4d;

}



.cart-items {

    list-style: none;

    margin-bottom: 15px;

}



.cart-items li {

    display: flex;

    justify-content: space-between;

    padding: 6px 0;

    border-bottom: 1px solid #111a33;

    font-size: 14px;

}



.cart-items li span {

    color: var(--muted);

}



.cart-summary {

    display: flex;

    justify-content: space-between;

    margin-top: 10px;

    font-weight: 600;

}



.empty {

    color: var(--muted);

    font-size: 14px;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 16px;

    margin-top: 15px;

}



label {

    font-size: 14px;

    margin-bottom: 4px;

    display: block;

}



input, textarea {

    width: 100%;

    padding: 8px 10px;

    border-radius: 8px;

    border: 1px solid #1b2a4d;

    background-color: #050b18;

    color: var(--text);

    font-size: 14px;

}



textarea {

    resize: vertical;

    min-height: 80px;

}



input:focus, textarea:focus {

    outline: none;

    border-color: var(--accent-soft);

}



.bank-info {

    margin-top: 15px;

    padding: 12px;

    border-radius: 10px;

    background-color: #071024;

    border: 1px solid #1b2a4d;

    font-size: 14px;

    color: var(--muted);

}



.bank-info strong {

    color: var(--accent-soft);

}



/* Static pages */



.text-block {

    background-color: var(--bg2);

    border-radius: 16px;

    padding: 20px;

    border: 1px solid #1b2a4d;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.6;

}



.text-block h2 {

    color: var(--text);

    margin-bottom: 10px;

}



/* Footer */



footer {

    border-top: 1px solid #111a33;

    padding: 15px 20px;

    text-align: center;

    font-size: 13px;

    color: var(--muted);

    background-color: #040816;

}



/* Responsive */



@media (max-width: 700px) {

    header {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

}

.logo img {

    height: 85px; /* můžeš upravit podle velikosti loga */

    border-radius: 12px;

    display: block;

}