/* Conexion Rapida - landing publica de captacion de leads para conexion OLT/Mikrotik */

.cr-section { padding: 70px 0; }
.cr-section h2 { font-size: 30px; color: #0c1424; text-align: center; margin-bottom: 8px; }
.cr-subtitle { text-align: center; color: #6b7280; margin-bottom: 35px; }
.cr-section-alt { background: #f6f8fb; }

.cr-btn, .cr-btn-primary, .cr-btn-outline { display: inline-block; padding: 13px 28px; border-radius: 6px;
    font-weight: bold; text-decoration: none; transition: all .2s ease; cursor: pointer;
    background: #0069ff; color: #fff; border: 2px solid #0069ff; }
.cr-btn:hover, .cr-btn-primary:hover, .cr-btn-outline:hover { background: #0050c7; border-color: #0050c7; color: #fff; }
.cr-btn-block { width: 100%; text-align: center; font-size: 16px; }
.cr-btn-xsm { padding: 5px 10px; font-size: 13px; border-radius: 4px; }

/* Hero */
.cr-hero { background: #0c1424; padding: 70px 0; }
.cr-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; }
.cr-hero-text { min-width: 0; }
.cr-hero-kicker { display: inline-block; color: #7dd3fc; background: rgba(125,211,252,.12);
    border: 1px solid rgba(125,211,252,.3); border-radius: 20px; padding: 4px 14px; font-size: 12px;
    font-weight: bold; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 16px; }
.cr-hero-text h1 { color: #fff; font-size: 40px; line-height: 1.25; margin: 0 0 20px 0; font-weight: 700; }
.cr-green { color: #0069ff; }
.cr-hero-text p { color: #b7c0cf; font-size: 17px; line-height: 1.6; margin-bottom: 28px; max-width: 540px; }
.cr-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.cr-hero-media { min-width: 0; }

.cr-hero-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.cr-hero-badges li { color: #d6dde8; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cr-hero-badges i { color: #7dd3fc; font-size: 15px; }

/* Mockup del dashboard (espacio reservado para imagen/logo real) */
.cr-hero-mockup { overflow: hidden; }
.cr-mockup-topbar { display: flex; gap: 8px; padding: 12px 14px; background: #0f1830; }
.cr-mockup-topbar span { width: 10px; height: 10px; border-radius: 50%; background: #2c3a57; }
.cr-mockup-body { display: flex; min-height: 230px; }
.cr-mockup-sidebar { width: 60px; background: #0f1830; }
.cr-mockup-content { flex: 1; padding: 18px; min-width: 0; }
.cr-hero-gif { display: block; width: 100%; height: auto; border-radius: 6px; }
.cr-mockup-cards { display: flex; gap: 10px; margin-bottom: 20px; }
.cr-mockup-card { flex: 1; height: 46px; border-radius: 6px; background: #1c2a47; }
.cr-mockup-chart { display: flex; align-items: flex-end; gap: 10px; height: 90px; }
.cr-mockup-chart span { flex: 1; background: #22c55e; border-radius: 4px 4px 0 0; opacity: .85; }

/* Dashboard interactivo */
.cr-dashboard-card { max-width: 1000px; margin: 0 auto; background: #fff; border: 1px solid #e6e9ef;
    border-radius: 10px; padding: 28px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.cr-dashboard-topbar { font-size: 16px; font-weight: 600; color: #313a46; padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7; margin-bottom: 18px; }
.cr-dashboard-topbar #cr-dashboard-company { font-weight: 700; }
.cr-dashboard-example-tag { float: right; font-size: 12px; font-weight: normal; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .02em; }
.cr-dashboard-subtitle { font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: #313a46;
    margin: 0 0 10px 0; }

/* Lista de OLT's, igual a la tabla de panel_real_time.html */
.cr-olt-table-wrap { overflow-x: auto; margin-bottom: 26px; }
.cr-olt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cr-olt-table th, .cr-olt-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef2f7;
    white-space: nowrap; }
.cr-olt-table th { color: #64748b; font-size: 12px; text-transform: uppercase; background: #f8fafc; }
.cr-olt-cell { display: flex; align-items: center; gap: 10px; }
.cr-olt-cell-icon { width: 32px; height: 32px; border-radius: 6px; background: #eef2f7; color: #6c757d;
    display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.cr-olt-model { display: block; font-size: 14px; color: #313a46; }
.cr-olt-brand { display: block; font-size: 12px; color: #94a3b8; }

/* Tiles del dashboard, mismo lenguaje visual que panel_real_time.html (.card.tilebox-one) */
.cr-kpi-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cr-kpi-column-title { font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: #313a46;
    margin: 0 0 10px 0; }
.cr-tile { position: relative; background: #fff; border: none; border-radius: 0.25rem; padding: 0.6rem 1.2rem;
    margin-bottom: 8px; box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15); overflow: hidden; }
.cr-tile-clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.cr-tile-clickable:hover, .cr-tile-clickable:focus { transform: translateY(-2px);
    box-shadow: 0 4px 18px 0 rgba(154, 161, 171, .35); outline: none; }
.cr-tile-clickable.active { box-shadow: 0 0 0 2px #22c55e, 0 4px 18px 0 rgba(154, 161, 171, .35); }
.cr-tile-icon { position: absolute; right: 1rem; top: 0.7rem; font-size: 1.4rem; opacity: .3; }
.cr-tile-value { display: block; font-size: 1.4rem; font-weight: 600; color: #313a46; margin: 0.3rem 0; }
.cr-tile-label { display: block; font-size: 0.7rem; color: #313a46; text-transform: uppercase; letter-spacing: .02em; }
.cr-text-success { color: #0acf97 !important; }
.cr-text-danger { color: #fa5c7c !important; }
.cr-text-warning { color: #ffbc00 !important; }
.cr-text-info { color: #39afd1 !important; }
.cr-text-secondary { color: #6c757d !important; }
.cr-text-dark { color: #313a46 !important; }

.cr-tile-detail { margin-top: 18px; background: #f8fafc; border: 1px solid #e6e9ef; border-radius: 8px; padding: 18px; }
.cr-tile-detail-title { margin: 0 0 12px 0; font-size: 14px; text-transform: uppercase; color: #313a46; letter-spacing: .02em; }
.cr-detail-table-wrap { overflow-x: auto; }
.cr-detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cr-detail-table th, .cr-detail-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #e6e9ef; }
.cr-detail-table th { color: #64748b; font-size: 12px; text-transform: uppercase; background: #eef2f7; }
.cr-detail-table tbody tr:hover { background: #f1f5f9; }
.cr-pill { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;
    color: #fff; }
.cr-pill-success { background: #0acf97; }
.cr-pill-warning { background: #ffbc00; }
.cr-pill-danger { background: #fa5c7c; }
.cr-detail-count { margin: 10px 0 0 0; font-size: 12px; color: #94a3b8; text-align: right; }

.cr-dashboard-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.cr-dashboard-dots span { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; cursor: pointer; }
.cr-dashboard-dots span.active { background: #22c55e; }
.cr-dashboard-note { text-align: center; color: #94a3b8; font-size: 13px; margin-top: 18px; margin-bottom: 0; }

.cr-value-strip { list-style: none; max-width: 1000px; margin: 26px auto 0; padding: 0; display: flex;
    flex-wrap: wrap; justify-content: center; gap: 14px 36px; }
.cr-value-strip li { display: flex; align-items: center; gap: 8px; color: #334155; font-size: 14px; }

/* Funcionalidades */
.cr-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cr-feature-card { background: #fff; border-radius: 10px; padding: 26px 22px; text-align: left;
    box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.cr-feature-icon { font-size: 26px; color: #0069ff; margin-bottom: 14px; display: inline-block; }
.cr-feature-icon-ia { width: 48px; height: 33px; transform: scale(.85); transform-origin: left center;
    margin-bottom: 14px; }
.cr-feature-card h3 { font-size: 16px; color: #0c1424; margin: 0 0 8px 0; }
.cr-feature-card p { font-size: 14px; color: #64748b; line-height: 1.55; margin: 0; }

@media (max-width: 992px) {
    .cr-features-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Configuracion + Form */
.cr-config-grid { display: flex; flex-direction: column; gap: 30px; }
.cr-config-text h2 { text-align: left; }
.cr-config-text ul { padding-left: 20px; color: #334155; line-height: 1.7; }
.cr-config-text p { color: #334155; line-height: 1.7; }
.cr-config-form { min-width: 0; background: #fff; border: 1px solid #e6e9ef;
    border-radius: 10px; padding: 36px; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.cr-form label { display: block; font-size: 14px; font-weight: bold; color: #334155; margin: 18px 0 8px 0; }
.cr-form input, .cr-form select, .cr-form textarea { width: 100%; box-sizing: border-box; height: 50px;
    padding: 0 16px; border: 1px solid #dbe2eb; border-radius: 6px; background: #fff; color: #0c1424;
    font-size: 15px; }
.cr-form textarea { height: auto; padding: 10px 14px; }
.cr-form input:focus, .cr-form select:focus, .cr-form textarea:focus { outline: none; border-color: #0069ff; }
.cr-form p { margin: 0 0 2px 0; }
.cr-form-hrow { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.cr-form .cr-form-hlabel { min-width: 190px; flex-shrink: 0; text-align: right; padding-top: 13px;
    font-size: 13px; font-weight: 600; color: #6c757d; display: block; margin: 0; }
.cr-form-hfield { flex: 1; min-width: 0; }
@media (max-width: 600px) {
    .cr-form-hrow { flex-direction: column; gap: 4px; }
    .cr-form .cr-form-hlabel { min-width: unset; text-align: left; padding-top: 0; }
}
.cr-form-success { text-align: center; padding: 30px 10px; }
.cr-form-success i { font-size: 42px; color: #16a34a; margin-bottom: 14px; }

.cr-check-result:empty { display: none; }
.cr-check-result { margin-top: 18px; padding-top: 4px; }
.cr-check-line { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #334155;
    line-height: 1.5; margin: 0 0 10px 0; }
.cr-check-line i { margin-top: 2px; flex-shrink: 0; }
.cr-check-success, .cr-check-success i { color: #16a34a; }
.cr-check-error, .cr-check-error i { color: #dc2626; }

/* Mini-dashboard con datos reales (vía SNMP) de la OLT del visitante, ver get_explora_adminolt_mini_dashboard_task */
.cr-mini-dashboard { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e6e9ef; }
.cr-mini-dashboard-title { font-size: 14px; text-transform: uppercase; letter-spacing: .02em; color: #313a46;
    margin: 0 0 14px 0; }
.cr-kpi-columns-mini { align-items: stretch; }
.cr-kpi-column-locked { display: flex; align-items: center; justify-content: center; background: #f8fafc;
    border: 1px dashed #dbe2eb; border-radius: 8px; padding: 16px; }
.cr-locked-message { margin: 0; font-size: 13px; color: #64748b; text-align: center; line-height: 1.5; }
.cr-locked-message i { color: #94a3b8; margin-right: 4px; }

@media (max-width: 768px) {
    .cr-kpi-columns-mini { grid-template-columns: 1fr; }
}

/* Panel de progreso que inserta websocket-celery-channels.js (igual mecanismo que usa el panel interno
   para check_olt_connection). Oculto por defecto: ese script lo muestra/oculta con show()/hide() según
   llegan mensajes PROGRESS/DONE de la tarea Celery. */
.cr-config-form .jobstatic-panel { display: none; margin-top: 18px; padding: 14px 16px; background: #f8fafc;
    border: 1px solid #e6e9ef; border-radius: 8px; font-size: 14px; color: #334155; }
.cr-config-form .jobstatic-panel p { margin: 0 0 6px 0; }
/* El ícono (far fa-hourglass) lo pone websocket-celery-channels.js, un script compartido por ~35
   plantillas de otras apps -- no se toca ese archivo. Lo hacemos girar solo aquí con CSS puro,
   escopeado a .cr-config-form, sin depender de la clase fa-spin ni de cambiar su HTML. */
.cr-config-form .jobstatic-panel p i { display: inline-block; animation: cr-spin 1s linear infinite; }
@keyframes cr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cr-config-form .jobstatic-result { margin: 0; font-size: 13px; font-weight: normal; color: #94a3b8; }
.cr-check-warning, .cr-check-warning i { color: #b45309; }

/* Mapa */
.cr-map-intro { max-width: 820px; margin: 0 auto 30px; text-align: center; color: #475569; line-height: 1.6; }
.cr-map-frame { position: relative; width: 100%; height: 580px; border: 1px solid #dbe2eb; border-radius: 10px;
    overflow: hidden; box-shadow: 0 10px 30px rgba(15,23,42,.06); }
.cr-map { width: 100%; height: 100%; }

/* Bootstrap mínimo para #mainContainerSearch inyectado por map_seed.js */
#mainContainerSearch .input-group-prepend { display: flex; align-items: stretch; }
#mainContainerSearch .input-group-text { display: flex; align-items: center;
    padding: 0.15rem 0.5rem; font-size: 0.8rem; font-weight: 400; line-height: 1;
    color: #495057; text-align: center; white-space: nowrap;
    border: 1px solid #ced4da; border-radius: 0.25rem 0 0 0.25rem; }
#mainContainerSearch .custom-select { display: block; height: 28px;
    padding: 0.15rem 0.5rem; font-size: 0.8rem; font-weight: 400;
    line-height: 1; color: #495057; background-color: #fff;
    border: 1px solid #ced4da; border-radius: 0 0.25rem 0.25rem 0;
    border-left: none; outline: none; }
#mainContainerSearch .custom-select:focus { border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }

/* Bootstrap mínimo para #mainDrawingActions inyectado por map_seed.js */
#mainDrawingActions { background: #fff; border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem; margin: 5px; padding: 5px; display: inline-block; }
#mainDrawingActions .cr-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
#mainDrawingActions .cr-row + .cr-row { margin-top: 4px; }
#mainDrawingActions .btn { display: inline-flex; align-items: center; justify-content: center;
    font-weight: 400; text-align: center; cursor: pointer; user-select: none;
    background-color: transparent; border: 1px solid transparent;
    padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5;
    border-radius: 0.2rem; transition: color .15s, background-color .15s, border-color .15s; }
#mainDrawingActions .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
#mainDrawingActions .btn-secondary:hover { color: #fff; background-color: #5a6268; border-color: #545b62; }

.cr-map-disclaimer { max-width: 820px; margin: 14px auto 0; text-align: center; color: #94a3b8;
    font-size: 12px; line-height: 1.5; }
.cr-map-disclaimer i { margin-right: 4px; }

.cr-map-frame-fallback { background: #eef2f7; }
.cr-map-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cr-map-zone { stroke-width: 1.5; cursor: pointer; }
.cr-map-cable { fill: none; stroke-width: 0.8; cursor: pointer; }

.cr-map-marker { position: absolute; transform: translate(-50%, -50%); }
.cr-map-dot { display: block; width: 14px; height: 14px; border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,.7); cursor: pointer; }
.cr-map-dot-default { background: #2563eb; }
.cr-map-dot-very-good { background: #22c55e; }
.cr-map-dot-warning { background: #f59e0b; }
.cr-map-dot-critical { background: #dc2626; }
.cr-map-dot-poste, .cr-map-dot-split_closure { width: 8px; height: 8px; background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.cr-map-dot-olt { width: 18px; height: 18px; background: #1f2937; }
.cr-map-dot-rack { width: 16px; height: 16px; background: #0ea5e9; }

/* Modal "Editar Marcador": réplica visual del modal real (modals_edit_marker_form.html, tema Hyper/
   Bootstrap del panel: header bg-info #39afd1, tabs nav-bordered con acento #727cf5, backdrop #313a46).
   Implementado sin Bootstrap JS porque home/base.html no lo carga en esta landing pública. */
.cr-marker-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.cr-marker-modal.cr-marker-modal-open { display: flex; }
.cr-marker-modal-overlay { position: absolute; inset: 0; background: #313a46; opacity: .7; }
.cr-marker-modal-dialog { position: relative; width: 92%; max-width: 480px; max-height: 90vh; background: #fff;
    border-radius: 0.2rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); display: flex; flex-direction: column;
    overflow: hidden; }
/* El diagrama Vue/D3 real (rack | svg | cable) necesita más ancho que el form simple de un solo hilo */
.cr-marker-modal-dialog.cr-marker-modal-wide { max-width: 760px; }
.cr-marker-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem;
    background: #39afd1; color: #fff; border-top-left-radius: 0.2rem; border-top-right-radius: 0.2rem; }
.cr-marker-modal-header h4 { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.cr-marker-modal-header h4 i { margin-right: 6px; }
.cr-marker-modal-close { background: none; border: none; color: #fff; font-size: 1.3rem; line-height: 1;
    cursor: pointer; padding: 0; opacity: .9; }
.cr-marker-modal-close:hover { opacity: 1; }
.cr-marker-modal-tabs { display: flex; list-style: none; margin: 0; padding: 0;
    border-bottom: 2px solid rgba(152,166,173,.2); }
.cr-marker-modal-tab { flex: 1; text-align: center; padding: 0.625rem 0.5rem; color: #6c757d; font-weight: 600;
    font-size: 14px; cursor: pointer; border: 1px solid #ddd; border-bottom: 0; border-left: 0; }
.cr-marker-modal-tab:first-child { border-left: 1px solid #ddd; }
.cr-marker-modal-tab.active { color: #495057; background: #fff; border-bottom: 2px solid #727cf5; margin-bottom: -2px; }
.cr-marker-modal-tab.d-none { display: none; }
.cr-marker-modal-body { padding: 1rem; overflow-y: auto; }
.cr-marker-modal-pane { display: none; }
.cr-marker-modal-pane.active { display: block; }

/* Filas de hilos: mismo look que el componente Vue real (TCCableThreadV2 / vTCCableThreadV2.html):
   badge de número en negro, badge de potencia con rayo en gris oscuro, y a la derecha la franja de
   color del buffer y la franja de color del hilo dentro de ese buffer. */
.cr-thread-panel { margin-bottom: 14px; }
.cr-thread-panel:last-child { margin-bottom: 0; }
.cr-thread-panel-title { font-size: 13px; font-weight: 600; color: #0c1424; margin-bottom: 6px; }
.cr-thread-panel-rows { max-height: 220px; overflow-y: auto; }
.cr-thread-row { display: flex; align-items: center; height: 30px; margin-bottom: 2px; font-size: 12px; }
.cr-thread-number { display: flex; align-items: center; justify-content: center; width: 26px; height: 100%;
    background: #000; color: #fff; font-weight: 700; flex-shrink: 0; }
.cr-thread-bolt { display: flex; align-items: center; gap: 4px; flex: 1; height: 100%; padding: 0 8px;
    margin-left: 2px; background: #495057; color: #fff; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.cr-thread-bolt i { color: #ffbc00; }
.cr-thread-bolt.is-free { background: #cbd5e1; color: #475569; }
.cr-thread-bolt.is-free i { color: #94a3b8; }
.cr-thread-buffer-swatch, .cr-thread-swatch { width: 26px; height: 100%; margin-left: 2px;
    border: 1px solid rgba(0,0,0,.25); flex-shrink: 0; }

/* Diagrama Vue/D3 real (ThreadConnection/TCCable/TCSplitter/TCRackOlt, ver
   Bitol/templates/explora_adminolt/vue/), reusado casi tal cual (mismas clases/CSS que los
   componentes reales en Bitol/apps/red_ftth/templates/ftth_map/vue/FtthMap/components/...). Esta
   página no carga Bootstrap, así que solo agregamos el layout flex de ".row"/".col" que el
   template real espera (thread-connection-template), escopado a este contenedor para no afectar
   el resto de la página. */
#cr-thread-connection-app { display: none; }
#cr-thread-connection-app .row { display: flex; align-items: stretch; }
#cr-thread-connection-app .col { flex: 1; min-width: 0; }
#cr-thread-connection-app svg.col { min-height: 200px; overflow: visible; }

/* Barra con el botón de recargar arriba del diagrama de hilos, igual que en el editor real
   (fondo gris, fila con los botones alineados a la izquierda). En el original son dos ".card"
   separadas (una para la barra, otra para el diagrama) y cada ".card" trae "margin-bottom: 24px" --
   sin reproducir la sombra/borde de esas cards (eso se vio mal), pero sí ese espacio en blanco entre
   la barra y el diagrama. */
.cr-thread-connection-toolbar-row { padding: 5px; background-color: #e0e0e0; line-height: 0;
    margin-bottom: 24px; }
/* Mismo tamaño/posición/color que el botón real (base.css .btn-xsm + .btn-primary): no se reutiliza
   .cr-btn-primary (azul #0069ff de esta landing) porque el original usa el primary del tema admin.
   Tamaño en px fijos (no rem) para que no dependa de ningún font-size heredado de esta página. */
#cr-thread-connection-reload { display: inline-block; box-sizing: border-box; text-align: center;
    vertical-align: middle; cursor: pointer; width: 26px; height: 22px; padding: 0; font-size: 11px;
    line-height: 20px; border-radius: 3px; margin-left: 2px; color: #fff; background-color: #727cf5;
    border: 1px solid #727cf5; }
#cr-thread-connection-reload:hover { background-color: #4e5bf2; border-color: #4250f2; }

/* Street View real (Google Maps StreetViewPanorama), igual mecanismo que el editor real
   (google_maps_markers_ftth.js): un <div> de tamaño fijo donde se monta el panorama. */
.cr-streetview-container { width: 100%; min-height: 250px; }
#marker-streetview-modal { width: 100%; height: 250px; }

/* CTA final */
.cr-cta { background: #0c1424; padding: 60px 0; text-align: center; }
.cr-cta h2 { color: #fff; font-size: 28px; margin-bottom: 10px; }
.cr-cta p { color: #b7c0cf; margin: 0 auto 26px; max-width: 640px; line-height: 1.6; }
.cr-cta-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 768px) {
    .cr-kpi-columns { grid-template-columns: 1fr; }
    .cr-hero-grid { grid-template-columns: 1fr; }
    .cr-hero-text h1 { font-size: 30px; }
    .cr-map-frame { height: 380px; }
    .cr-features-grid { grid-template-columns: 1fr; }
}