body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Bootstrap's .bg-light is a fixed light-gray utility, not a theme-reactive
   one — it stays light even under [data-bs-theme="dark"]. Every section on
   the site that uses it as an alternating-background stripe (home page,
   methodology pages, readiness standard pages, etc.) needs a dark-mode
   replacement so it doesn't show up as a stray white/light panel. */
[data-bs-theme="dark"] .bg-light {
    background-color: #2b2f36 !important;
    color: var(--bs-body-color);
}

.form-control {
    border-radius: 0.25rem;
}

.footer {
    margin-top: auto;
    padding: 1rem 0;
    text-align: center;
}

.footer-expanded {
    background-color: #12141d;
    border-top: 3px solid var(--bs-primary);
}

.footer-expanded h6 {
    color: #ffffff;
    letter-spacing: 0.03em;
}

.footer-expanded .text-muted {
    color: #9aa0ac !important;
}

.footer-expanded a.text-muted:hover {
    color: #ffffff !important;
}

.footer-expanded hr {
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}

.tasks-icon {
    background-color: #007bff;
    padding: 8px;
    border-radius: 50%;
    font-size: 1.2rem;
}

.nav-link-custom {
    color: #007bff !important;
    font-weight: bold;
    transition: color 0.3s, color 0.3s, border-radius 0.3s;
    padding: 5px 10px;
    border-radius: 0;
    margin-left: 10px;
}

.nav-link-custom:hover {
    color: #ffffff !important;
    background-color: #007bff;
    border-radius: 5px;
}

.nav-link-custom.active {
    color: #ffffff !important;
    background-color: #007bff;
    border-radius: 5px;
}

.tool-terminal {
    background: #0b0f0d;
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 0 0 12px rgba(0, 255, 120, 0.15);
}

.tool-terminal-header {
    background: #1b1f1d;
    padding: 0.4rem 0.6rem;
    display: flex;
    align-items: center;
    color: #8fffb0;
    font-size: 0.8rem;
}

.tool-terminal-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.tool-terminal-body {
    padding: 0.75rem 1rem;
    color: #33ff66;
    font-size: 0.85rem;
    min-height: 2.5rem;
}

.tool-terminal-cursor {
    display: inline-block;
    margin-left: 2px;
    animation: tool-terminal-blink 1s steps(1) infinite;
}

@keyframes tool-terminal-blink {
    50% { opacity: 0; }
}

.plan-feature {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.plan-feature i {
    margin-right: 0.5rem;
}

.feature-included {
    color: #28a745;
}

.feature-not-included {
    color: #dc3545;
}

.standard-badge {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    border-radius: 0 50% 50% 50%;
    border: 4px solid #0d6efd;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #0d6efd 50%, #0a58ca 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}

.standard-badge-name {
    color: #052c65;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0 0.5rem;
    line-height: 1.1;
}

.standard-badge-powered {
    color: #ffffff;
    font-weight: 500;
    font-size: 0.55rem;
    letter-spacing: 0.02em;
    padding: 0 0.4rem;
    line-height: 1.1;
    margin-top: 0.9rem;
}

.standard-badge-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.standard-badge-intro {
    color: #495057;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

[data-bs-theme="dark"] .standard-badge-intro {
    color: #ffffff;
}

/* Swagger UI (embedded on the API Docs page) ships its own fixed light
   theme with no dark-mode support of its own -- these overrides recolor
   its DOM to match the site's dark palette (same #2b2f36 dark-grey used
   for .bg-light above) rather than leaving a bright white panel sitting
   inside an otherwise-dark dashboard. Selectors target swagger-ui-dist's
   own stable class names, scoped under #swagger-ui-container so nothing
   here can leak into the rest of the site.

   !important throughout: swagger-ui-dist's own stylesheet loads AFTER
   this one (it's added via the docs page's own extra_head block) and its
   compiled selectors are often just as specific as ours, so without it
   the cascade's "last one wins on a tie" rule hands every fight back to
   swagger-ui-dist's built-in light colors regardless of our selectors. */
[data-bs-theme="dark"] #swagger-ui-container {
    background-color: #2b2f36 !important;
}

[data-bs-theme="dark"] .swagger-ui,
[data-bs-theme="dark"] .swagger-ui .info .title,
[data-bs-theme="dark"] .swagger-ui .info li,
[data-bs-theme="dark"] .swagger-ui .info p,
[data-bs-theme="dark"] .swagger-ui .info table,
[data-bs-theme="dark"] .swagger-ui .opblock-tag,
[data-bs-theme="dark"] .swagger-ui .opblock .opblock-summary-method,
[data-bs-theme="dark"] .swagger-ui .opblock .opblock-summary-path,
[data-bs-theme="dark"] .swagger-ui .opblock .opblock-summary-path__deprecated,
[data-bs-theme="dark"] .swagger-ui .opblock .opblock-summary-description,
[data-bs-theme="dark"] .swagger-ui .opblock-description-wrapper p,
[data-bs-theme="dark"] .swagger-ui .opblock-section-header h4,
[data-bs-theme="dark"] .swagger-ui .opblock-section-header label,
[data-bs-theme="dark"] .swagger-ui .tab li,
[data-bs-theme="dark"] .swagger-ui table thead tr td,
[data-bs-theme="dark"] .swagger-ui table thead tr th,
[data-bs-theme="dark"] .swagger-ui .parameter__name,
[data-bs-theme="dark"] .swagger-ui .parameter__type,
[data-bs-theme="dark"] .swagger-ui .parameter__in,
[data-bs-theme="dark"] .swagger-ui .parameter__deprecated,
[data-bs-theme="dark"] .swagger-ui .response-col_status,
[data-bs-theme="dark"] .swagger-ui .response-col_description,
[data-bs-theme="dark"] .swagger-ui .model-title,
[data-bs-theme="dark"] .swagger-ui .model,
[data-bs-theme="dark"] .swagger-ui .model .property,
[data-bs-theme="dark"] .swagger-ui section.models h4,
[data-bs-theme="dark"] .swagger-ui section.models.is-open h4 span,
[data-bs-theme="dark"] .swagger-ui .servers > label,
[data-bs-theme="dark"] .swagger-ui .servers-title,
[data-bs-theme="dark"] .swagger-ui .dialog-ux .modal-ux-header h3,
[data-bs-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content p,
[data-bs-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content h4,
[data-bs-theme="dark"] .swagger-ui .scheme-container .schemes-title,
[data-bs-theme="dark"] .swagger-ui .btn {
    color: #e6e6e6 !important;
}

[data-bs-theme="dark"] .swagger-ui .scheme-container,
[data-bs-theme="dark"] .swagger-ui section.models,
[data-bs-theme="dark"] .swagger-ui .opblock-tag,
[data-bs-theme="dark"] .swagger-ui .dialog-ux .modal-ux {
    background-color: #24272d !important;
    border-color: #3d4149 !important;
}

[data-bs-theme="dark"] .swagger-ui .opblock {
    background-color: #2f333b !important;
    border-color: #3d4149 !important;
}

[data-bs-theme="dark"] .swagger-ui .opblock .opblock-summary {
    background-color: transparent !important;
    border-color: #3d4149 !important;
    color: #e6e6e6 !important;
}

/* These need an explicit dark color, not transparent -- swagger-ui-dist
   paints an actual light background on each of them (not inherited), so
   "transparent" would just reveal whatever's behind, not our dark base. */
[data-bs-theme="dark"] .swagger-ui .opblock-description-wrapper,
[data-bs-theme="dark"] .swagger-ui .opblock-section-header,
[data-bs-theme="dark"] .swagger-ui .responses-wrapper,
[data-bs-theme="dark"] .swagger-ui .parameters-container,
[data-bs-theme="dark"] .swagger-ui .execute-wrapper,
[data-bs-theme="dark"] .swagger-ui table,
[data-bs-theme="dark"] .swagger-ui table thead tr,
[data-bs-theme="dark"] .swagger-ui table tbody tr td,
[data-bs-theme="dark"] .swagger-ui .parameters-col_description,
[data-bs-theme="dark"] .swagger-ui .response-col_links {
    background-color: #2f333b !important;
    border-color: #3d4149 !important;
    color: #e6e6e6 !important;
}

[data-bs-theme="dark"] .swagger-ui .model-box,
[data-bs-theme="dark"] .swagger-ui .model-box-control,
[data-bs-theme="dark"] .swagger-ui .response-col_description__inner div.markdown,
[data-bs-theme="dark"] .swagger-ui .response-col_description__inner div.renderedMarkdown {
    background-color: #24272d !important;
}

[data-bs-theme="dark"] .swagger-ui input[type=text],
[data-bs-theme="dark"] .swagger-ui input[type=password],
[data-bs-theme="dark"] .swagger-ui input[type=search],
[data-bs-theme="dark"] .swagger-ui input[type=email],
[data-bs-theme="dark"] .swagger-ui textarea,
[data-bs-theme="dark"] .swagger-ui select {
    background-color: #1e2126 !important;
    color: #e6e6e6 !important;
    border-color: #3d4149 !important;
}

[data-bs-theme="dark"] .swagger-ui section.models {
    border-color: #3d4149 !important;
}

[data-bs-theme="dark"] .swagger-ui .opblock-tag,
[data-bs-theme="dark"] .swagger-ui section.models h4 {
    border-bottom-color: #3d4149 !important;
}

/* "Cipherly" teaser section (home page, above the footer) -- promotes the
   planned suite of 10 free standalone mobile utility apps built on
   SecurAppt's existing tools/API. None of these apps are published yet, so
   the store badges below are deliberately non-interactive "Coming Soon"
   placeholders, not real download links. */
.cipherly-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.cipherly-wordmark {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #0d6efd;
}

.cipherly-app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    aspect-ratio: 1 / 1;
    padding: 1rem 0.5rem;
    border-radius: 1.25rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Each homepage app card links to its own detail page. Keep the app name in
   the body colour (not link blue) and add a subtle lift on hover/focus. */
.cipherly-app-link { display: block; }
.cipherly-app-link:hover .cipherly-app-card,
.cipherly-app-link:focus-visible .cipherly-app-card {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    border-color: var(--bs-primary);
}

/* Each app gets its own colored/gradient icon "tile" -- a real app icon
   look (unique symbol + unique color per app.looka.com/blog/app-logo/'s
   guidance) instead of a single flat-blue glyph repeated ten times. */
.cipherly-app-icon {
    width: 4.25rem;
    height: 5rem;
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

.cipherly-app-icon i {
    font-size: 1.7rem;
    color: #ffffff;
}

.cipherly-app-icon-initials {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
    color: #ffffff;
}

/* Ties each app icon back to the parent brand -- same "Powered by
   SecurAppt" idea already used on the standard-badge tiles above. */
.cipherly-app-icon-brand {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-size: 0.48rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.85);
}

.cipherly-icon--quantumpass { background: linear-gradient(135deg, #3d8bfd, #0a58ca); }
.cipherly-icon--passcheck { background: linear-gradient(135deg, #4dd8ac, #128a67); }
.cipherly-icon--myip { background: linear-gradient(135deg, #5cdcf6, #0aa8c9); }
.cipherly-icon--myip i, .cipherly-icon--myip .cipherly-app-icon-initials, .cipherly-icon--myip .cipherly-app-icon-brand { color: #05323f; }
.cipherly-icon--vpncheck { background: linear-gradient(135deg, #8a4bf7, #4c0bc4); }
.cipherly-icon--whoisit { background: linear-gradient(135deg, #fd9a4d, #d9600a); }
.cipherly-icon--hashit { background: linear-gradient(135deg, #ffd866, #e6ac00); }
.cipherly-icon--hashit i, .cipherly-icon--hashit .cipherly-app-icon-initials, .cipherly-icon--hashit .cipherly-app-icon-brand { color: #3d2f00; }
.cipherly-icon--devkit { background: linear-gradient(135deg, #9a6fe0, #59339c); }
.cipherly-icon--siteshield { background: linear-gradient(135deg, #3cba7a, #146c43); }
.cipherly-icon--cvefinder { background: linear-gradient(135deg, #ea6b77, #a52834); }
.cipherly-icon--domainhealth { background: linear-gradient(135deg, #e685b5, #ab296a); }

.cipherly-app-name {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    text-align: center;
    line-height: 1.2;
}

.cipherly-store-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    opacity: 0.7;
}

.cipherly-store-badge i {
    font-size: 1.5rem;
}

.cipherly-store-badge-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.cipherly-store-badge-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cipherly-store-badge-store {
    font-size: 0.95rem;
    font-weight: 600;
}

/* ---- Cipherly per-app landing page ---------------------------------- */
/* The page is themed from the app's own logo gradient: each page sets
   --app-start / --app-end (and --app-ink for readable text) inline, taken
   from the icon colours in this file, so the layout stays one template but
   every app gets its own colour. */
.cipherly-app-page {
    --app-start: #3d8bfd;
    --app-end: #0a58ca;
    --app-ink: #ffffff;
    --app-ink-soft: rgba(255, 255, 255, 0.88);
}

.app-hero {
    background: linear-gradient(135deg, var(--app-start) 0%, var(--app-end) 100%);
    color: var(--app-ink);
    padding: 3.5rem 0 4rem;
}

.app-hero-back {
    color: var(--app-ink-soft);
    font-weight: 600;
    font-size: 0.9rem;
}
.app-hero-back:hover { color: var(--app-ink); }

.app-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--app-ink-soft);
}

.app-hero-title {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.05;
}

.app-hero-tagline {
    font-size: 1.2rem;
    color: var(--app-ink-soft);
    max-width: 30rem;
}

/* A real phone mockup, like the device shots on the marketing site: dark
   phone body, notch, and a white app screen inside that reads cleanly on any
   hero colour. */
.app-phone {
    position: relative;
    width: 270px;
    max-width: 80vw;
    margin: 0 auto;
    background: #0f172a;
    border-radius: 2.75rem;
    padding: 0.8rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.app-phone::before {
    content: "";
    position: absolute;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 1.2rem;
    background: #0f172a;
    border-radius: 0 0 0.9rem 0.9rem;
    z-index: 2;
}

.app-phone-screen {
    background: #ffffff;
    color: #212529;
    border-radius: 2.1rem;
    padding: 2.1rem 1.25rem 1.4rem;
    min-height: 30rem;
    display: flex;
    flex-direction: column;
}

.app-phone-cta {
    display: block;
    text-align: center;
    font-weight: 600;
    border-radius: 0.9rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, var(--app-start), var(--app-end));
    color: var(--app-ink);
}

/* "Features that make the app different" cards. */
.app-feature-item {
    padding: 1.75rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.app-feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.app-feature-icon-lg {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    font-size: 1.25rem;
}

.app-device-screen-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c757d;
    font-weight: 600;
}

.app-input-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f6f7f9;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #495057;
}
.app-input-pill code { color: #495057; }

/* Store badges on the coloured hero / CTA -- translucent, using the page ink. */
.app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.38);
    color: var(--app-ink);
    border-radius: 0.9rem;
    padding: 0.5rem 1rem;
}
.app-store-badge i { font-size: 1.6rem; }
.cipherly-app-page[style*="1a1a1a"] .app-store-badge {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.18);
}

/* Accents tied to the app colour used throughout the body sections. */
.app-accent { color: var(--app-end); }

.app-feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--app-start), var(--app-end));
    color: var(--app-ink);
    flex: 0 0 auto;
}

.app-tool-card { border-top: 3px solid var(--app-end) !important; }
.app-benefits-card { border-top: 3px solid var(--app-end) !important; }

.app-cta {
    background: linear-gradient(135deg, var(--app-start), var(--app-end));
    color: var(--app-ink);
    border-radius: 1.5rem;
    padding: 3rem 1.5rem;
}