/*
 * CTS Platform — design layer on top of Tabler (Bootstrap 5).
 *
 * Brand: navy #0F2540 + cyan #4FB8D9 (+ paper #F4F4F1), per the CTS brand sheet.
 * Direction: "quiet fintech authority" — editorial serif (Fraunces) + crisp
 * grotesk (Hanken Grotesk), soft depth, hairline borders, generous air.
 * Additive overrides + a few component classes (.cts-hero, .plan-card …).
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --cts-navy: #0f2540;
    --cts-navy-2: #16365e;
    --cts-cyan: #4fb8d9;
    --cts-cyan-deep: #2f93b6;
    --cts-primary: #15446e;       /* interactive navy-blue (buttons/links/focus) */
    --cts-primary-2: #0f2540;
    --cts-bg: #f4f6fb;
    --cts-surface: #ffffff;
    --cts-muted: #5d6b82;
    --cts-line: #e6ebf3;

    /* Tabler tokens */
    --tblr-primary: #15446e;
    --tblr-primary-rgb: 21, 68, 110;
    --tblr-link-color: #15446e;
    --tblr-link-color-rgb: 21, 68, 110;

    --cts-radius: 14px;
    --cts-radius-sm: 10px;
    --cts-shadow: 0 1px 2px rgba(15, 37, 64, .04), 0 8px 24px -12px rgba(15, 37, 64, .16);
    --cts-shadow-lg: 0 2px 4px rgba(15, 37, 64, .05), 0 24px 56px -20px rgba(15, 37, 64, .3);

    --tblr-font-sans-serif: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --tblr-border-radius: var(--cts-radius-sm);
}

body {
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    background-color: var(--cts-bg);
    color: #1f2d44;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

h1, h2, h3, .h1, .h2, .h3, .page-title, .card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    letter-spacing: -0.015em;
    color: var(--cts-navy);
}
.card-title { font-size: 1.05rem; font-weight: 600; }

/* ---- Navbar: hairline + soft blur ---- */
.navbar.navbar-light {
    background-color: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--cts-line) !important;
}
.navbar-brand-image { height: 30px; width: auto; }
.navbar .nav-link { font-weight: 500; color: #33425a; }
.navbar .nav-link:hover { color: var(--cts-primary); }

/* ---- Buttons ---- */
.btn { font-weight: 600; border-radius: var(--cts-radius-sm); letter-spacing: -0.01em; }
.btn-primary {
    background: linear-gradient(180deg, #1d5288, var(--cts-primary));
    border-color: var(--cts-primary);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 16px -8px rgba(15, 37, 64, .55);
}
.btn-primary:hover { background: linear-gradient(180deg, #16456f, #0f3458); border-color: #0f3458; }
.btn-outline-primary { color: var(--cts-primary); border-color: #c4d2e4; }
.btn-outline-primary:hover { background: var(--cts-primary); border-color: var(--cts-primary); }
.btn-lg { padding: .72rem 1.4rem; font-size: 1.02rem; }
a { color: var(--cts-primary); }

/* ---- Cards ---- */
.card { border: 1px solid var(--cts-line); border-radius: var(--cts-radius); box-shadow: var(--cts-shadow); }
.card-header { border-bottom: 1px solid var(--cts-line); background: transparent; }

/* ---- Forms ---- */
.form-control, .form-select { border-radius: var(--cts-radius-sm); border-color: #dbe2ee; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--cts-cyan); box-shadow: 0 0 0 3px rgba(79, 184, 217, .3); }
.form-label { font-weight: 600; color: #2c3a52; font-size: .82rem; }

/* ========== HERO (landing) ========== */
.cts-hero {
    position: relative; overflow: hidden;
    margin: -1.5rem -1rem 2.5rem; padding: 5rem 1rem 5.5rem;
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(79, 184, 217, .28), transparent 60%),
        radial-gradient(760px 380px at 92% 6%, rgba(79, 184, 217, .16), transparent 55%),
        linear-gradient(160deg, #0c1f38 0%, #143459 55%, #0c1f38 100%);
    color: #eef4fb;
}
.cts-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
.cts-hero > * { position: relative; z-index: 1; }
.cts-hero .eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 600; color: var(--cts-cyan); margin-bottom: 1rem; }
.cts-hero h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.02; font-weight: 600; color: #fff; max-width: 16ch; margin-bottom: 1.1rem; }
.cts-hero h1 .accent { color: var(--cts-cyan); font-style: italic; }
.cts-hero p.lead { color: #bccbe2; font-size: 1.16rem; max-width: 52ch; margin-bottom: 1.8rem; }
.cts-hero .btn-light { background: #fff; border: 0; color: var(--cts-navy); }
.cts-hero .btn-ghost { color: #eef4fb; border: 1px solid rgba(255, 255, 255, .28); background: transparent; }
.cts-hero .btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Trust strip */
.cts-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center; margin-top: 2.4rem; }
.cts-trust span { color: #8fa6c6; font-weight: 600; font-size: .92rem; }
.cts-trust .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cts-cyan); display: inline-block; }

/* ========== Product / pricing cards ========== */
.product-head h3 { font-size: 1.5rem; }
.plan-card { border: 1px solid var(--cts-line); border-radius: var(--cts-radius); background: var(--cts-surface); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--cts-shadow-lg); }
.plan-card.is-current { border-color: var(--cts-cyan); box-shadow: 0 0 0 1px var(--cts-cyan); }
.plan-price { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cts-navy); }
.plan-price .per { font-family: 'Hanken Grotesk', sans-serif; font-size: .85rem; color: var(--cts-muted); font-weight: 500; }

.section-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 700; color: var(--cts-cyan-deep); }

/* Avatar tint (empty states) */
.bg-primary-lt { background: rgba(79, 184, 217, .14); color: var(--cts-primary); }

/* ---- Footer ---- */
.footer.footer-transparent { padding-top: 1.5rem; padding-bottom: 1.5rem; border-top: 1px solid var(--cts-line); }

/* Account sidebar active state */
.list-group-item.list-group-item-action.active {
    background-color: rgba(var(--tblr-primary-rgb), 0.08);
    color: var(--cts-primary);
    border-left: 3px solid var(--cts-cyan);
    font-weight: 600;
}