:root {
    --navy: #14213a;
    --blue: #1769e0;
    --text: #172033;
    --muted: #667085;
    --border: #dce3ed;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body.home-page {
    margin: 0;
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 10% 10%, rgba(23, 105, 224, .14), transparent 30%),
        radial-gradient(circle at 90% 85%, rgba(20, 33, 58, .1), transparent 30%),
        #f4f7fb;
}

.home-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(20, 33, 58, .025) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(20, 33, 58, .025) 1px, transparent 1px);
    background-size: 32px 32px;
}

.home-shell {
    position: relative;
    width: min(1180px, calc(100% - 40px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 38px 0 28px;
    display: flex;
    flex-direction: column;
}

.home-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.home-brand {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 31px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--blue), var(--navy));
    box-shadow: 0 10px 24px rgba(23, 105, 224, .24);
}

.home-eyebrow {
    margin: 0 0 2px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.home-header h1 {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
    line-height: 1.1;
}

.module-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 0 80px;
}

.section-heading { margin-bottom: 30px; }

.section-heading h2 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: clamp(27px, 3vw, 38px);
    letter-spacing: -.03em;
}

.section-heading p { margin: 0; color: var(--muted); font-size: 15px; }

.module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.module-card {
    position: relative;
    min-height: 300px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(220, 227, 237, .95);
    border-radius: 18px;
    color: var(--text);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 40px rgba(20, 33, 58, .08);
    text-decoration: none;
    overflow: hidden;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}

.module-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--accent, var(--blue));
}

.module-card.admin { --accent: #1769e0; }
.module-card.pdv { --accent: #0a9b68; }
.module-card.mobile { --accent: #7a4ce0; }
.module-card.entregador { --accent: #e5790b; }

.module-card:hover, .module-card:focus-visible {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 24px 52px rgba(20, 33, 58, .15);
    outline: 0;
}

.module-image {
    height: 150px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 14px;
    background: #f6f8fb;
}

.module-image img {
    display: block;
    width: auto;
    max-width: 185px;
    max-height: 130px;
    object-fit: contain;
}

.module-card.admin .module-image img,
.module-card.pdv .module-image img {
    width: auto;
    height: 130px;
    max-width: 210px;
}
.module-card.mobile .module-image img {
    width: auto;
    height: 105px;
    max-width: 90px;
    max-height: 105px;
}
.module-card.entregador .module-image img {
    width: auto;
    height: 130px;
    max-width: 185px;
    max-height: 130px;
}

.module-content { display: flex; flex-direction: column; gap: 7px; padding-right: 30px; }
.module-content strong { color: var(--navy); font-size: 21px; }
.module-content small { color: var(--muted); font-size: 13px; line-height: 1.45; }

.module-arrow {
    position: absolute;
    right: 28px;
    bottom: 29px;
    color: var(--accent);
    font-size: 26px;
    font-weight: 700;
    transition: transform .2s;
}

.module-card:hover .module-arrow { transform: translateX(4px); }

.home-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #7a8496;
    font-size: 12px;
}

.keyboard-key {
    min-width: 28px;
    padding: 4px 7px;
    border: 1px solid #d2d9e4;
    border-bottom-width: 2px;
    border-radius: 5px;
    color: #505a6c;
    background: #fff;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 1100px) {
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .module-grid { grid-template-columns: 1fr; }
    .module-card { min-height: 180px; display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 24px; }
    .module-image { height: 120px; margin: 0; }
    .module-arrow { bottom: 50%; transform: translateY(50%); }
    .module-card:hover .module-arrow { transform: translate(4px, 50%); }
}

@media (max-width: 560px) {
    .home-shell { width: min(100% - 28px, 1180px); padding-top: 24px; }
    .module-section { padding: 55px 0; }
    .module-card { min-height: 255px; padding: 24px; display: flex; gap: 0; }
    .module-image { width: 100%; height: 110px; margin-bottom: 20px; }
    .module-arrow { right: 24px; bottom: 24px; transform: none; }
    .module-card:hover .module-arrow { transform: translateX(4px); }
    .home-footer { flex-wrap: wrap; }
}