:root {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-soft: #f0f7ff;
    --ink: #111827;
    --muted: #5b6472;
    --line: #e5eaf0;
    --primary: var(--site-primary, #0957d9);
    --primary-dark: #073f9e;
    --green: #0f9f6e;
    --orange: #f97316;
    --red: #ef4444;
    --shadow: 0 18px 50px rgba(17, 24, 39, .10);
    --radius: 24px;
    --max: 1180px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(9, 87, 217, .13), transparent 36rem),
        radial-gradient(circle at 85% 12%, rgba(15, 159, 110, .14), transparent 28rem),
        var(--bg);
    color: var(--ink);
}

a { color: inherit; }

.site-shell { min-height: 100vh; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(246, 248, 251, .86);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(229, 234, 240, .9);
}
.navbar {
    max-width: var(--max);
    margin: 0 auto;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: -.03em;
}
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #00c853, #00b0ff 68%, #0957d9);
    box-shadow: 0 12px 30px rgba(9, 87, 217, .22);
}
.brand-logo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 12px;
}
.brand-text small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #273244;
    font-weight: 700;
    font-size: 14px;
}
.nav-links a {
    text-decoration: none;
    padding: 9px 10px;
    border-radius: 12px;
}
.nav-links a:hover { background: #eaf0f8; }
.nav-actions { display: flex; gap: 10px; align-items: center; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 850;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #00a1ff);
    box-shadow: 0 16px 34px rgba(9, 87, 217, .25);
}
.btn-primary:hover { box-shadow: 0 20px 40px rgba(9, 87, 217, .30); }
.btn-light {
    color: var(--ink);
    background: #fff;
    border-color: var(--line);
}
.btn-ghost {
    color: var(--ink);
    background: transparent;
    border-color: var(--line);
}
.btn-whatsapp {
    color: #fff;
    background: linear-gradient(135deg, #0f9f6e, #06c167);
    box-shadow: 0 16px 34px rgba(15, 159, 110, .23);
}
.btn-dark { color: #fff; background: #111827; }

.container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 22px;
}
.hero {
    padding: 72px 0 54px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 42px;
    align-items: center;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e9f6ff;
    color: #07539d;
    border: 1px solid #cce9ff;
    font-size: 13px;
    font-weight: 850;
}
.hero h1 {
    margin: 18px 0 16px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: .98;
    letter-spacing: -.06em;
}
.hero h1 span { color: var(--primary); }
.hero-lead {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.65;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 24px;
}
.trust-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 680px;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #354052;
    font-weight: 750;
    font-size: 14px;
}
.check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dcfce7;
    color: #047857;
    font-size: 14px;
    flex: 0 0 auto;
}
.product-card {
    position: relative;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(229, 234, 240, .9);
    border-radius: 32px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.product-top {
    padding: 22px;
    background: linear-gradient(135deg, #0f172a, #0b4cc7 58%, #00a96e);
    color: #fff;
}
.product-top .mini-title { opacity: .78; font-weight: 750; font-size: 13px; }
.order-card {
    margin: 18px 0 0;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.20);
}
.order-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
}
.order-line:last-child { border-bottom: 0; }
.order-line strong { font-size: 15px; }
.order-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #064e3b;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 850;
}
.product-body { padding: 22px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.metric {
    padding: 16px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #edf1f6;
}
.metric b { display: block; font-size: 25px; letter-spacing: -.04em; }
.metric span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.floating {
    position: absolute;
    right: 18px;
    bottom: 112px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 14px 32px rgba(154, 52, 18, .13);
    font-weight: 850;
    font-size: 13px;
}
.section { padding: 58px 0; }
.section-head { max-width: 780px; margin-bottom: 26px; }
.eyebrow {
    color: var(--primary);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 950;
    margin-bottom: 10px;
}
.section h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.06;
    letter-spacing: -.045em;
}
.section p.sub {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.feature-card {
    min-height: 190px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(17, 24, 39, .055);
}
.icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #eef6ff;
    color: var(--primary);
    font-size: 23px;
    margin-bottom: 16px;
}
.feature-card h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.02em; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    counter-reset: step;
}
.step {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
}
.step::before {
    counter-increment: step;
    content: counter(step);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    font-weight: 900;
    margin-bottom: 14px;
}
.step h3 { margin: 0 0 8px; }
.step p { margin: 0; color: var(--muted); line-height: 1.5; }
.cta-panel {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
    align-items: center;
    padding: 34px;
    border-radius: 32px;
    background: linear-gradient(135deg, #111827, #0b4cc7 72%, #00a96e);
    color: #fff;
    box-shadow: var(--shadow);
}
.cta-panel h2 { color: #fff; }
.cta-panel p { color: rgba(255,255,255,.82); line-height: 1.65; font-size: 17px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }
.cta-actions .btn-light { color: #111827; }
.footer {
    padding: 34px 0 44px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    margin-top: 34px;
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.access-wrap { padding: 54px 0; }
.access-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}
.access-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-height: 250px;
}
.access-card h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.035em; }
.access-card p { color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.access-card .btn { margin-top: auto; width: 100%; }
.note {
    margin-top: 18px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
    padding: 16px;
    border-radius: 18px;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .nav-links { display: none; }
    .hero { grid-template-columns: 1fr; padding-top: 46px; }
    .feature-grid, .flow, .access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cta-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .navbar { padding: 13px 14px; }
    .brand-text small { display: none; }
    .nav-actions .btn-ghost { display: none; }
    .container { padding: 0 16px; }
    .hero { padding: 36px 0 34px; }
    .hero-lead { font-size: 16px; }
    .trust-row { grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; }
    .feature-grid, .flow, .access-grid, .metric-grid { grid-template-columns: 1fr; }
    .floating { position: static; margin: 12px 22px 0; }
    .cta-panel { padding: 24px; border-radius: 24px; }
}

/* Bloco 21D - login proprio e demo self-service */
.auth-wrap{min-height:72vh;display:flex;align-items:center;justify-content:center;padding-top:48px;padding-bottom:72px}.auth-card{width:min(100%,520px);background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:28px;box-shadow:0 24px 80px rgba(15,23,42,.12);padding:34px}.auth-card h1,.auth-card h2{margin:8px 0 10px;font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:-.045em}.site-form{display:grid;gap:18px;margin-top:24px}.form-field{display:grid;gap:8px}.form-field label{font-weight:800;color:#0f172a}.form-control,.site-form input[type=text],.site-form input[type=password],.site-form input[type=email]{width:100%;border:1px solid #dbe3ef;border-radius:14px;padding:13px 14px;font-size:16px;background:#fff;color:#0f172a;outline:none;box-sizing:border-box}.form-control:focus,.site-form input:focus{border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.10)}.btn-full{width:100%;justify-content:center}.field-error{color:#b91c1c;font-weight:700}.form-alert{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:16px;padding:12px 14px;font-weight:700}.auth-foot{margin-top:18px;text-align:center;color:#64748b}.auth-foot a{font-weight:800;color:#0f766e;text-decoration:none}.demo-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:36px;align-items:center;padding-top:50px;padding-bottom:80px}.demo-copy h1{font-size:clamp(40px,6vw,72px);line-height:.95;letter-spacing:-.06em;margin:18px 0}.demo-benefits{display:grid;gap:12px;margin-top:24px}.demo-benefits div{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:18px;padding:14px 16px;font-weight:750;box-shadow:0 12px 32px rgba(15,23,42,.08)}.demo-benefits strong{color:#16a34a;margin-right:8px}.demo-form-card{width:auto}.form-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid-two .wide,.checkbox-field{grid-column:1 / -1}.checkbox-field{display:flex!important;align-items:center;gap:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:12px}.checkbox-field label{order:2;font-weight:700;color:#334155}.form-check-input{width:18px;height:18px}.form-note{margin-top:12px;color:#64748b;font-size:14px}.highlight-card{border-color:rgba(22,163,74,.28)!important;box-shadow:0 18px 50px rgba(22,163,74,.14)!important}.site-messages{margin:18px 0}.site-messages .message{padding:12px 14px;border-radius:14px;background:#ecfdf5;color:#065f46;font-weight:700}.userbox-actions{display:flex!important;align-items:center;gap:12px}.userbox-actions form{margin:0}.btn.danger-soft,.btn-danger-soft{background:#fff1f2!important;color:#be123c!important;border:1px solid #fecdd3!important}.logout-form{margin:0;display:inline-flex}
@media (max-width: 900px){.demo-wrap{grid-template-columns:1fr}.form-grid-two{grid-template-columns:1fr}.auth-card{padding:24px}.nav-actions{flex-wrap:wrap}}