/* ==========================================================================
   RCY Network and Data Solutions — design tokens
   Palette: deep signal navy + cyan pulse + amber ledger accent
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
   ========================================================================== */
:root {
    --bg-deep: #090d18;
    --bg-surface: #121a2e;
    --bg-surface-2: #1a2440;
    --bg-surface-3: #212c4c;
    --line: #263258;
    --line-soft: #1b2440;

    --signal: #2fd0e0;
    --signal-dim: #1a8b98;
    --amber: #f5b942;
    --amber-dim: #b9862a;
    --success: #37d399;
    --danger: #f2665f;

    --text-hi: #eef2fb;
    --text-mid: #b7c1dd;
    --text-low: #7686aa;

    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    --radius: 14px;
    --radius-sm: 8px;
    --shadow-lift: 0 20px 60px -20px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }
body {
    margin: 0;
    background: var(--bg-deep);
    background-image:
        radial-gradient(ellipse 900px 500px at 15% -10%, rgba(47,208,224,0.10), transparent),
        radial-gradient(ellipse 700px 500px at 100% 10%, rgba(245,185,66,0.06), transparent);
    color: var(--text-hi);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(47,208,224,0.15);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
button, a, input, select, textarea { -webkit-tap-highlight-color: rgba(47,208,224,0.15); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 .5em; letter-spacing: -0.02em; }
p { margin: 0 0 1em; color: var(--text-mid); }
.mono { font-family: var(--font-mono); }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Nav ---------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(9,13,24,0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
    padding-top: env(safe-area-inset-top);
}
.site-nav .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-hi);
}
.brand-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--signal), var(--signal-dim));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #04141a; font-size: .85rem;
    box-shadow: 0 6px 18px -6px rgba(47,208,224,0.6);
}
.brand small { display:block; font-family: var(--font-body); font-weight: 400; font-size: .68rem; color: var(--text-low); letter-spacing: .04em; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: .9rem; color: var(--text-mid); transition: color .15s; }
.nav-links a:hover { color: var(--signal); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-toggle {
    display: none;
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
    width: 40px; height: 40px; align-items: center; justify-content: center;
    color: var(--text-hi); cursor: pointer; flex-shrink: 0;
}
.nav-toggle svg { width: 20px; height: 20px; }
.mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 16px; border-top: 1px solid var(--line-soft); }
.mobile-menu a { padding: 11px 6px; font-size: .95rem; color: var(--text-mid); border-radius: var(--radius-sm); }
.mobile-menu a:hover { background: var(--bg-surface-2); color: var(--text-hi); }
.mobile-menu .mobile-menu-ctas { display: flex; gap: 10px; margin-top: 10px; }
.mobile-menu.open { display: flex; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .88rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--signal); color: #04181d; box-shadow: 0 10px 26px -10px rgba(47,208,224,0.7); }
.btn-primary:hover { box-shadow: 0 14px 32px -10px rgba(47,208,224,0.9); }
.btn-amber { background: var(--amber); color: #241503; box-shadow: 0 10px 26px -10px rgba(245,185,66,0.6); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-hi); }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
.btn-sm { padding: 7px 14px; font-size: .78rem; }
.btn-danger { background: var(--danger); color: #260403; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
    padding: 84px 0 60px;
    position: relative;
    overflow: hidden;
}
.hero .inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--signal);
    background: rgba(47,208,224,0.08);
    border: 1px solid rgba(47,208,224,0.25);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(47,208,224,.7); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(47,208,224,.55); }
    70% { box-shadow: 0 0 0 8px rgba(47,208,224,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,208,224,0); }
}
.hero h1 {
    font-size: clamp(2.3rem, 4.4vw, 3.5rem);
    line-height: 1.05;
    color: var(--text-hi);
}
.hero h1 span { color: var(--signal); }
.hero p.lead { font-size: 1.08rem; max-width: 46ch; }
.hero-ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 30px; margin-top: 44px; flex-wrap: wrap; }
.hero-stats .stat b { display:block; font-family: var(--font-display); font-size: 1.5rem; color: var(--text-hi); }
.hero-stats .stat span { font-size: .78rem; color: var(--text-low); text-transform: uppercase; letter-spacing: .05em; }

/* Signature: network topology visual */
.net-diagram { position: relative; aspect-ratio: 1/1; max-width: 480px; margin: 0 auto; }
.net-diagram svg { width: 100%; height: 100%; overflow: visible; }
.net-line { stroke: url(#lineGrad); stroke-width: 1.4; fill: none; stroke-dasharray: 6 7; animation: dash-flow 3.5s linear infinite; opacity: .8; }
@keyframes dash-flow { to { stroke-dashoffset: -130; } }
.net-node { fill: var(--bg-surface-2); stroke: var(--signal); stroke-width: 1.6; }
.net-node.core { fill: var(--signal); }
.net-pulse { fill: none; stroke: var(--signal); stroke-width: 1.2; opacity: 0; transform-origin: center; animation: ping 3s ease-out infinite; }
@keyframes ping { 0% { opacity:.9; transform: scale(.4);} 80%{opacity:0;} 100% { opacity:0; transform: scale(2.6);} }
.net-label { font-family: var(--font-mono); font-size: 8px; fill: var(--text-low); }

/* ---------- Sections ---------- */
section { padding: 76px 0; }
.section-head { max-width: 640px; margin: 0 auto 46px; text-align: center; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.section-head p { font-size: 1rem; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.card {
    background: linear-gradient(180deg, var(--bg-surface), var(--bg-surface) 60%, var(--bg-surface-2));
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 28px;
}
.service-card .icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: rgba(47,208,224,0.1); border: 1px solid rgba(47,208,224,.3);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px; color: var(--signal);
}
.service-card h3 { font-size: 1.15rem; }
.service-card p { font-size: .92rem; margin-bottom: 0; }

.plan-card { position: relative; }
.plan-card.featured { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset, var(--shadow-lift); }
.plan-card .tag { position: absolute; top: -12px; right: 20px; background: var(--amber); color: #241503; font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.plan-card .price { font-family: var(--font-display); font-size: 2.1rem; color: var(--text-hi); margin: 10px 0; }
.plan-card .price span { font-size: .95rem; color: var(--text-low); font-weight: 400; }
.plan-card ul { list-style: none; padding: 0; margin: 18px 0; font-size: .88rem; color: var(--text-mid); }
.plan-card ul li { padding: 7px 0; border-top: 1px dashed var(--line); }
.plan-card ul li:first-child { border-top: none; }

.cta-band {
    background: linear-gradient(120deg, var(--bg-surface-2), var(--bg-surface-3));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 48px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band h3 { font-size: 1.5rem; margin-bottom: 6px; }

footer.site-footer {
    border-top: 1px solid var(--line-soft);
    padding: 48px 0 28px;
    margin-top: 40px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer-grid h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-low); margin-bottom: 14px; }
.footer-grid a, .footer-grid p { font-size: .88rem; color: var(--text-mid); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; color: var(--text-low); font-size: .8rem; flex-wrap: wrap; gap: 10px; }

/* ---------- Forms ---------- */
.form-shell {
    max-width: 620px;
    margin: 0 auto;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .82rem; color: var(--text-mid); margin-bottom: 7px; font-weight: 600; }
.field .hint { font-size: .76rem; color: var(--text-low); margin-top: 5px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.date-grid { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
input, select, textarea {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: .92rem;
    transition: border-color .15s;
}
textarea { resize: vertical; min-height: 100px; }
input:focus, select:focus, textarea:focus { border-color: var(--signal); outline: none; }
input[readonly] { color: var(--text-mid); }

.alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 20px; border: 1px solid; }
.alert-success { background: rgba(55,211,153,.08); border-color: rgba(55,211,153,.4); color: var(--success); }
.alert-error { background: rgba(242,102,95,.08); border-color: rgba(242,102,95,.4); color: var(--danger); }
.alert-info { background: rgba(47,208,224,.08); border-color: rgba(47,208,224,.35); color: var(--signal); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .72rem; padding: 4px 10px; border-radius: 999px; border: 1px solid; text-transform: uppercase; letter-spacing: .04em; }
.badge-open { color: var(--danger); border-color: rgba(242,102,95,.4); background: rgba(242,102,95,.08); }
.badge-progress { color: var(--amber); border-color: rgba(245,185,66,.4); background: rgba(245,185,66,.08); }
.badge-resolved { color: var(--success); border-color: rgba(55,211,153,.4); background: rgba(55,211,153,.08); }
.badge-closed { color: var(--text-low); border-color: var(--line); background: var(--bg-surface); }

/* ---------- App shell (dashboards) ---------- */
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app-sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--line-soft);
    padding: 22px 16px;
    display: flex; flex-direction: column; gap: 4px;
    transition: transform .25s ease;
}
.app-sidebar .brand { padding: 0 8px 22px; }
.side-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--text-mid); font-size: .89rem; font-weight: 500;
}
.side-link:hover { background: var(--bg-surface-2); color: var(--text-hi); }
.side-link.active { background: rgba(47,208,224,.12); color: var(--signal); }
.side-group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-low); padding: 16px 12px 6px; }
.side-foot { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--text-low); }

.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

.app-main { padding: 30px 34px; max-width: 1240px; }
.app-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; flex-wrap: wrap; gap: 14px; }
.app-topbar h1 { font-size: 1.5rem; }
.app-topbar p.sub { margin: 4px 0 0; font-size: .88rem; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.kpi-row-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-card { background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px; }
.kpi-card span.label { font-size: .76rem; color: var(--text-low); text-transform: uppercase; letter-spacing: .05em; }
.kpi-card .value { font-family: var(--font-display); font-size: 1.7rem; margin-top: 8px; color: var(--text-hi); }
.kpi-card .value.amber { color: var(--amber); }
.kpi-card .value.signal { color: var(--signal); }
.kpi-card .value.success { color: var(--success); }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
table th { text-align: left; color: var(--text-low); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--line); }
table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text-mid); }
table tr:hover td { background: rgba(255,255,255,0.015); }
.table-wrap { background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.table-wrap .table-head-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; gap: 12px; }
.table-head-bar h3 { font-size: 1.02rem; margin: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 100%; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-bar select, .filter-bar input { width: auto; padding: 8px 12px; font-size: .82rem; }

.modal-overlay { position: fixed; inset: 0; background: rgba(4,6,12,0.7); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal-box { background: var(--bg-surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-box h3 { margin-bottom: 18px; }

/* ---------- Messenger ---------- */
.messenger { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 160px); background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.thread-list { border-right: 1px solid var(--line-soft); overflow-y: auto; }
.thread-item { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.thread-item:hover, .thread-item.active { background: var(--bg-surface-2); }
.thread-item .name { font-weight: 600; font-size: .9rem; color: var(--text-hi); }
.thread-item .preview { font-size: .78rem; color: var(--text-low); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-pane { display: flex; flex-direction: column; height: 100%; }
.chat-head { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.chat-back {
    display: none; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0;
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text-hi); cursor: pointer;
}
.chat-log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 68%; padding: 10px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.4; }
.bubble.mine { align-self: flex-end; background: var(--signal); color: #04181d; border-bottom-right-radius: 4px; }
.bubble.theirs { align-self: flex-start; background: var(--bg-surface-3); color: var(--text-hi); border-bottom-left-radius: 4px; }
.bubble .meta { display: block; font-size: .66rem; opacity: .65; margin-top: 4px; }
.chat-input { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.chat-input input { flex: 1; font-size: 16px; }
.empty-pane { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-low); }

/* ---------- Auth pages ---------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 420px; background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 34px; }
.auth-card .brand { justify-content: center; margin-bottom: 26px; }
.auth-switch { text-align: center; margin-top: 18px; font-size: .86rem; color: var(--text-low); }
.auth-switch a { color: var(--signal); font-weight: 600; }
.role-pills { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.role-pill { flex: 1; text-align: center; padding: 9px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: .78rem; color: var(--text-mid); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { display:flex; gap: 8px; }
.small { font-size: .82rem; color: var(--text-low); }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 90;
        transform: translateX(-100%); box-shadow: 20px 0 40px rgba(0,0,0,.4);
        padding-top: calc(22px + env(safe-area-inset-top));
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
        overflow-y: auto;
    }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-backdrop {
        display: none; position: fixed; inset: 0; background: rgba(4,6,12,.6); z-index: 80;
    }
    .sidebar-backdrop.show { display: block; }
    .mobile-topbar {
        display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 40;
        background: rgba(9,13,24,0.92); backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line-soft);
        padding: 14px 20px;
        padding-top: calc(14px + env(safe-area-inset-top));
    }
    .mobile-nav-toggle {
        background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
        width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
        color: var(--text-hi); cursor: pointer; flex-shrink: 0;
    }
    .mobile-nav-toggle svg { width: 18px; height: 18px; }

    .hero .inner { grid-template-columns: 1fr; }
    .net-diagram { max-width: 320px; }
    .grid-3, .grid-2, .footer-grid, .kpi-row { grid-template-columns: 1fr 1fr; }
    .messenger { grid-template-columns: 1fr; height: calc(100vh - 200px); }
    .messenger .thread-list { display: none; }
    .messenger.show-threads .thread-list { display: block; }
    .messenger.show-threads .chat-pane { display: none; }
    .chat-back { display: inline-flex; }
}
@media (max-width: 640px) {
    .grid-3, .grid-2, .footer-grid, .kpi-row, .row-2, .date-grid { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
    .cta-band { flex-direction: column; text-align: center; }

    .container { padding: 0 16px; }
    .app-main { padding: 20px 16px; }
    .mobile-topbar { padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
    .app-topbar { flex-direction: column; align-items: stretch; }
    .app-topbar > a, .app-topbar > button { align-self: flex-start; }
    .modal-box { padding: 20px; }
    .modal-overlay { padding: 12px; }

    /* Prevent iOS Safari from zooming in on focus for inputs under 16px */
    input, select, textarea { font-size: 16px; }
    .filter-bar select, .filter-bar input { font-size: 16px; }

    .hero { padding: 56px 0 40px; }
    .kpi-row { grid-template-columns: 1fr 1fr; gap: 12px; }
    .kpi-card { padding: 16px; }
    .kpi-card .value { font-size: 1.4rem; }
}