/* ==========================================================================
   CaseDiarySecure — marketing site theme
   Palette: white #ffffff · blue #0a4fd6 · black #0b1220
   ========================================================================== */

:root {
    --csd-blue: #0a4fd6;
    --csd-blue-dark: #073a9e;
    --csd-blue-light: #e8effc;
    --csd-black: #0b1220;
    --csd-gray: #5a6472;

    --bs-primary: var(--csd-blue);
    --bs-primary-rgb: 10, 79, 214;
    --bs-link-color: var(--csd-blue);
    --bs-link-hover-color: var(--csd-blue-dark);
    --bs-body-color: #232a33;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: #fff;
}

/* ---- Buttons ---- */
.btn-primary {
    --bs-btn-bg: var(--csd-blue);
    --bs-btn-border-color: var(--csd-blue);
    --bs-btn-hover-bg: var(--csd-blue-dark);
    --bs-btn-hover-border-color: var(--csd-blue-dark);
    --bs-btn-active-bg: var(--csd-blue-dark);
    --bs-btn-active-border-color: var(--csd-blue-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--csd-blue);
    --bs-btn-border-color: var(--csd-blue);
    --bs-btn-hover-bg: var(--csd-blue);
    --bs-btn-hover-border-color: var(--csd-blue);
    --bs-btn-active-bg: var(--csd-blue);
    --bs-btn-active-border-color: var(--csd-blue);
}
.text-primary { color: var(--csd-blue) !important; }
.bg-primary { background-color: var(--csd-blue) !important; }

/* ---- Navbar ---- */
.csd-navbar {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #eef1f5;
    transition: box-shadow .2s ease;
}
.csd-navbar.scrolled { box-shadow: 0 .25rem 1rem rgba(11, 18, 32, .08); }
.csd-navbar .nav-link { color: var(--csd-black); font-weight: 500; }
.csd-navbar .nav-link:hover,
.csd-navbar .nav-link.active { color: var(--csd-blue); }

/* ---- Hero ---- */
.csd-hero {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(10, 79, 214, .14), transparent 60%),
        radial-gradient(800px 420px at -10% 110%, rgba(10, 79, 214, .10), transparent 55%),
        #fff;
    padding: 5rem 0 4rem;
}
.csd-hero h1 {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--csd-black);
}
.csd-hero .lead { color: var(--csd-gray); }
.csd-screenshot {
    border-radius: .75rem;
    border: 1px solid #e3e8ef;
    box-shadow: 0 1.25rem 3rem rgba(11, 18, 32, .14);
}

/* ---- Sections ---- */
.section-title { font-weight: 800; letter-spacing: -.02em; color: var(--csd-black); }
.section-kicker {
    color: var(--csd-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
}
.csd-section-alt { background: #f7f9fc; }

/* ---- Feature / benefit cards ---- */
.csd-card {
    border: 1px solid #e8edf3;
    border-radius: .9rem;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.csd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .9rem 2rem rgba(11, 18, 32, .09);
}
.csd-icon {
    width: 52px;
    height: 52px;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--csd-blue-light);
    color: var(--csd-blue);
    font-size: 1.5rem;
}

/* ---- Steps ---- */
.csd-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--csd-black);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Pricing ---- */
.csd-price-card {
    border: 1px solid #e8edf3;
    border-radius: 1rem;
}
.csd-price-card.featured { border: 2px solid var(--csd-blue); }
.csd-price {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--csd-black);
}
.csd-calc output { font-variant-numeric: tabular-nums; }
.form-range::-webkit-slider-thumb { background: var(--csd-blue); }
.form-range::-moz-range-thumb { background: var(--csd-blue); }

/* ---- CTA band ---- */
.csd-cta-band {
    background: linear-gradient(120deg, var(--csd-black) 0%, #122a5c 60%, var(--csd-blue) 130%);
    color: #fff;
    border-radius: 1.25rem;
}

/* ---- Footer ---- */
.csd-footer { background: var(--csd-black); color: #fff; }
.csd-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.csd-footer a:hover { color: #fff; }
.csd-footer-logo { filter: brightness(0) invert(1); }

/* ---- Feature rows (features page) ---- */
.feature-row { padding: 3.5rem 0; }
.feature-row + .feature-row { border-top: 1px solid #eef1f5; }

/* ---- Misc ---- */
.check-list li { margin-bottom: .5rem; }
.check-list i { color: var(--csd-blue); }