/* ================================================================
   Kveldo Brand Theme v2.0
   Unified with the Kveldo application palette (Kveldo.App/site.css):
     Oxford Blue  #0B1426   — the dark ground
     Deep Indigo  #10104F / #1E1E63 — gradient mid-tones
     Action Blue  #487FFF   — primary interactive color
   Logo gradient: Violet #7C3AED → Blue #2F6BFF → Cyan #22CFFF
   Headings: Montserrat (matches the app). Body: Outfit.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
    /* Brand ground — Oxford Blue family, shared with the app */
    --kveldo-oxford:     #0B1426;
    --kveldo-oxford-700: #10104F;
    --kveldo-oxford-600: #1E1E63;

    /* Interactive + accents.
       --color-theme is the site-wide primary; it is the app's action blue so a
       button here and a button in the product read as the same control. */
    --color-theme:       #487FFF;
    --color-theme-dark:  #2F63D6;   /* hover-darkened, same value the app uses */
    --color-violet:      #7C3AED;
    --color-indigo:      #2F6BFF;
    --color-cyan:        #22CFFF;

    /* Semantic attention. Deliberately rose, never amber — the Kveldo
       application made the same move in its interface standard, because amber
       reads as decoration on a dark ground and as a caution nobody acts on.
       Use these for "waiting", "blocked", "overdue", "needs attention". */
    --color-attention:      #9F1239;   /* text on a light tint */
    --color-attention-mid:  #BE123C;
    --color-attention-tint: rgba(159, 18, 57, 0.12);

    /* The affirmative counterpart. Green stays — success is the one place a
       green reads correctly and every accounting tool uses it — but it was
       declared six times across two files in four different values
       (#15803D, #16A34A, #147637, rgba(34,197,94)). One role, one token. */
    --color-affirm:        #15803D;   /* text on a light ground — 4.9:1 on white */
    --color-affirm-bright: #4ADE80;   /* the dark-ground counterpart */
    --color-affirm-tint:   rgba(21, 128, 61, 0.13);

    /* Legacy alias — older rules reference --color-black for the nav/footer
       ground. Pointing it at Oxford Blue re-colors them without a rewrite. */
    --color-black:       #0B1426;
    --color-dark:        #0F1B31;
    --color-dark-alt:    #131F3A;
    --color-card-dark:   #16233F;

    --color-light:       #ffffff;
    --color-light-alt:   #F6F8FC;
    --color-light-mid:   #EDF2FF;
    --color-border-light: rgba(72,127,255,0.16);
    --color-border-dark:  rgba(72,127,255,0.30);

    /* The logo's own sweep — violet → blue → cyan. Used for display text,
       accent rails and icon fills, never for large fields of color. */
    --gradient-main:     linear-gradient(135deg, #7C3AED 0%, #2F6BFF 52%, #22CFFF 100%);
    --gradient-text:     linear-gradient(135deg, #7C3AED 0%, #2F6BFF 52%, #22CFFF 100%);
    /* Deep ground gradient for heroes, CTA panels and the footer. */
    --gradient-ground:   linear-gradient(135deg, #0B1426 0%, #10104F 42%, #1E1E63 68%, #3B1C64 100%);

    --text-dark:         #0B1426;
    --text-mid:          #4A5568;
    /* Muted is the smallest text on the site (captions, meta, mock labels), so it
       has to clear WCAG AA 4.5:1 on BOTH light grounds — white and #F6F8FC.
       #7A8699 measured 3.4–3.7:1 and failed; this clears 4.7:1 on the darker of
       the two. The app holds itself to the same bar (see its stat-card rule). */
    --text-muted:        #656F82;
    /* On-dark text. Never use these on a light ground — see --text-mid instead. */
    --text-light:        #E2E8F0;
    --text-light-muted:  #94A3B8;

    /* Elevation — one shadow scale so cards across the site agree. */
    --shadow-sm:  0 4px 18px rgba(11, 20, 38, 0.05);
    --shadow-md:  0 14px 32px rgba(11, 20, 38, 0.10);
    --shadow-lg:  0 28px 70px -24px rgba(11, 20, 38, 0.34);
}

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0 !important; padding: 0 !important; }
header { margin: 0 !important; padding: 0 !important; }

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: var(--color-light) !important;
    color: var(--text-mid) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', 'Outfit', sans-serif !important;
    color: var(--text-dark) !important;
    letter-spacing: -0.015em;
}

p { color: var(--text-mid); }

/* Body-size links need 4.5:1. #487FFF only reaches 3.65:1 on white, so the
   darkened variant is the base and hover goes darker still. The bright blue
   stays for buttons and on-dark surfaces. */
a { color: var(--color-theme-dark); }
a:hover { color: #1F4CB0; }

/* ── Utility ─────────────────────────────────────────────────────── */
.kveldo-gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Light sections */
.bg-gray { background: var(--color-light-alt) !important; }

/* Dark sections (footer, CTA, hero) keep their dark bg */
.bg-dark { background: var(--color-black) !important; }

/* ── Preloader ───────────────────────────────────────────────────── */
#preloader { background: var(--color-black); }
.tranzi-loader-item { background: var(--color-theme); }

/* ── Navbar — always black ───────────────────────────────────────── */
nav.navbar.validnavs {
    background: var(--color-black) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    top: 0 !important;
}
nav.navbar.validnavs.affix,
nav.navbar.validnavs.sticking {
    background: var(--color-black) !important;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
nav.navbar.validnavs.inner-page-nav {
    background: var(--color-black) !important;
}

nav.navbar.validnavs .nav > li > a {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
nav.navbar.validnavs .nav > li > a:hover,
nav.navbar.validnavs .nav > li.active > a {
    color: #7FA9FF !important;
}
nav.navbar.validnavs .dropdown-menu {
    background: #101B33 !important;
    border: 1px solid rgba(72,127,255,0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
    padding: 8px !important;
    min-width: 230px !important;
    margin-top: 8px !important;
}
nav.navbar.validnavs .dropdown-menu li {
    border-radius: 8px;
    overflow: hidden;
}
nav.navbar.validnavs .dropdown-menu li a {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.15s, color 0.15s !important;
}
nav.navbar.validnavs .dropdown-menu li a i {
    width: 16px;
    text-align: center;
    color: var(--color-cyan);
    font-size: 0.8rem;
}
nav.navbar.validnavs .dropdown-menu li a:hover {
    color: #fff !important;
    background: rgba(72,127,255,0.2) !important;
}
nav.navbar.validnavs .dropdown-menu li a:hover i {
    color: #7FA9FF;
}
.navbar-header .navbar-toggle i { color: rgba(255,255,255,0.85); }
.collapse-header { background: #101B33; }

/* Kill the white diagonal decorative shapes from the light base theme */
@media (min-width: 1200px) {
    nav.navbar.navbar-style-one.validnavs .navbar-header::after,
    nav.navbar.navbar-style-one.validnavs .navbar-header::before {
        display: none !important;
    }
    nav.navbar.navbar-style-one.validnavs .navbar-header img {
        top: 0 !important;
    }
}

/* Hide dropdown carets */
nav.navbar.validnavs ul.nav > li.dropdown > a.dropdown-toggle::after { display: none !important; }

/* Log In button */
.nav-login-btn {
    border: 1px solid rgba(72,127,255,0.5) !important;
    color: rgba(255,255,255,0.85) !important;
    border-radius: 100px;
    padding: 7px 22px !important;
    transition: all 0.2s;
}
.nav-login-btn:hover {
    border-color: #7FA9FF !important;
    color: #7FA9FF !important;
    background: rgba(72,127,255,0.12) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn.btn-theme,
.btn-theme {
    background: var(--gradient-main) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 20px rgba(72,127,255,0.3);
    transition: box-shadow 0.25s, transform 0.2s;
}
.btn.btn-theme:hover, .btn-theme:hover {
    box-shadow: 0 8px 32px rgba(72,127,255,0.45);
    transform: translateY(-1px);
    color: #fff !important;
}

.btn.btn-dark, .btn-dark {
    background: #232323 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
}
.btn.btn-dark:hover {
    background: #333 !important;
    color: #fff !important;
}

/* attr-nav CTA (Free Trial button in nav) */
.attr-nav .button a {
    background: var(--gradient-main) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 9px 26px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 16px rgba(72,127,255,0.3);
    white-space: nowrap;
    text-decoration: none;
}
.attr-nav .button a:hover {
    box-shadow: 0 8px 28px rgba(72,127,255,0.45);
    color: #fff !important;
}

/* round-btn arrow — now owned entirely by kveldo-theme-v2.css ("Card 'go'
   affordance"). The old rule here forced a gradient fill and a transparent
   border with !important, which silently defeated the resting outline of the
   new design. Kept as a pointer so the next person looks in one place. */

/* btn-animate */
.btn-animate .circle { background: var(--gradient-main); }
.btn-animate .button-text { color: var(--text-dark); font-weight: 600; }
.btn-animate:hover .button-text { color: var(--color-theme-dark); }

/* btn-animation */
.btn-animation { color: var(--text-dark); font-weight: 600; }
.btn-animation:hover { color: var(--color-theme); }
.btn-animation.dark { color: var(--text-dark); }
.btn-animation.dark:hover { color: var(--color-theme); }

/* ── Site Heading / Section Titles ──────────────────────────────── */
/* Eyebrows are ~12px uppercase, so they need the 4.5:1 small-text ratio.
   --color-theme (#487FFF) only reaches 3.4–3.65:1 on the light grounds; the
   hover-darkened variant clears 5.1:1. Buttons keep the brighter blue — they
   are large, or white-on-fill. */
.site-heading .sub-title,
h4.sub-title,
span.sub-title {
    color: var(--color-theme-dark) !important;
    border: none !important;
    background: rgba(72,127,255,0.08);
    padding: 4px 14px !important;
    border-radius: 100px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.site-heading .title,
.heading-left .title { color: var(--text-dark) !important; }

.site-heading .devider {
    background: var(--gradient-main);
    height: 3px;
    width: 60px;
    border-radius: 2px;
    margin: 16px auto 0;
    border: none;
}
.site-heading p { color: var(--text-mid); }

/* ── Services / Feature Cards (light) ────────────────────────────── */
.services-style-one-area,
.services-style-one-items { background: transparent; }

.services-style-one-item {
    background: var(--color-light) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 16px !important;
    padding: 36px 28px !important;
    box-shadow: 0 2px 16px rgba(72,127,255,0.06);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.services-style-one-item:hover {
    border-color: rgba(72,127,255,0.4) !important;
    box-shadow: 0 12px 40px rgba(72,127,255,0.12);
    transform: translateY(-4px);
}
.services-style-one-item .icon { margin-bottom: 20px; }
.services-style-one-item .icon i {
    font-size: 2.4rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.services-style-one-item h4 {
    color: var(--text-dark) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}
.services-style-one-item h4 a { color: var(--text-dark) !important; }
.services-style-one-item h4 a:hover { color: var(--color-theme) !important; }
.services-style-one-item p { color: var(--text-mid); font-size: 0.9rem; line-height: 1.7; }

/* On dark bg sections, flip cards back to dark */
.bg-dark .services-style-one-item,
.choose-us-style-one-area.text-light .services-style-one-item {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.bg-dark .services-style-one-item h4,
.bg-dark .services-style-one-item h4 a { color: #E2E8F0 !important; }
.bg-dark .services-style-one-item p { color: #94A3B8; }

/* ── Process Steps (light) ────────────────────────────────────────── */
.process-style-one-area { background: var(--color-light-alt); }

.process-style-one {
    background: var(--color-light);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 16px rgba(72,127,255,0.05);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.process-style-one.active,
.process-style-one:hover {
    border-color: rgba(72,127,255,0.4);
    box-shadow: 0 8px 32px rgba(72,127,255,0.12);
    transform: translateY(-4px);
}
.process-style-one .thumb { position: relative; margin-bottom: 20px; border-radius: 12px; overflow: hidden; }
.process-style-one .thumb img { border-radius: 12px; width: 100%; height: 180px; object-fit: cover; }
.process-style-one .thumb span {
    position: absolute;
    bottom: -1px;
    right: 16px;
    background: var(--gradient-main);
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.process-style-one h4 {
    color: var(--text-dark) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}
.process-style-one p { color: var(--text-mid); font-size: 0.9rem; }

/* ── Choose Us — light by default, dark when .text-light is present ── */
/* Suppress the template's dark skewed ::after pseudo on light sections */
.choose-us-style-one-area:not(.text-light)::after { display: none !important; }
.choose-us-style-one-area:not(.text-light) .cover-bg { display: none !important; }
.choose-us-style-one-area { background: var(--color-light); }
.choose-us-style-one-area.bg-gray { background: var(--color-light-alt) !important; }
.choose-us-style-one-area h2,
.choose-us-style-one-area h3,
.choose-us-style-one-area h4 { color: var(--text-dark) !important; }
.choose-us-style-one-area p { color: var(--text-mid); }
.choose-us-style-one .list-item li h4 { color: var(--text-dark) !important; }
.choose-us-style-one .list-item li p { color: var(--text-mid); }
.choose-us-style-one .list-item li::before { background: var(--gradient-main); border-color: transparent; }
.choose-us-style-one-area .feature-bullets li { color: var(--text-mid); }

/* Dark variant — only when .text-light is explicitly on the section */
.choose-us-style-one-area.text-light { background: #0B1426 !important; }
.choose-us-style-one-area.text-light .cover-bg {
    background: linear-gradient(135deg, rgba(72,127,255,0.2) 0%, rgba(11,20,38,0.98) 100%) !important;
}
.choose-us-style-one-area.text-light h2,
.choose-us-style-one-area.text-light h3,
.choose-us-style-one-area.text-light h4 { color: #E2E8F0 !important; }
.choose-us-style-one-area.text-light p { color: #94A3B8; }
.choose-us-style-one-area.text-light .choose-us-style-one .list-item li h4 { color: #E2E8F0 !important; }
.choose-us-style-one-area.text-light .choose-us-style-one .list-item li p { color: #94A3B8; }
.choose-us-style-one-area.text-light .feature-bullets li { color: #94A3B8; }

.text-invisible { color: rgba(255,255,255,0.03) !important; }

/* ── Pill tag ──────────────────────────────────────────────────────── */
.pill-tag {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 100px;
    background: rgba(72,127,255,0.1);
    border: 1px solid rgba(72,127,255,0.25);
    color: var(--color-theme-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.feature-bullets { list-style: none; padding: 0; margin: 20px 0; }
.feature-bullets li {
    color: var(--text-mid);
    padding: 6px 0 6px 28px;
    position: relative;
    font-size: 0.92rem;
    line-height: 1.6;
}
.feature-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gradient-main);
}
/* Feature bullets. This rule used to hardcode the on-dark gray and, sitting
   below the correct one at ~line 402, silently won the cascade — so every
   bullet on the light Features sections rendered at 2.5:1. The on-dark color
   belongs to the .text-light variant only. */
.choose-us-style-one-area .feature-bullets li { color: var(--text-mid); }

/* ── About Style One ─────────────────────────────────────────────── */
.about-style-one-area { background: var(--color-light); }
.about-style-one-area.bg-gray { background: var(--color-light-alt) !important; }
.about-thumb img { border-radius: 16px; }
.about-card {
    background: var(--color-light);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(72,127,255,0.08);
}
.about-card .icon i {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about-card .fun-fact .timer { color: var(--text-dark) !important; }
.about-card .fun-fact .operator { color: var(--color-theme) !important; }
.about-card .fun-fact .medium { color: var(--text-mid); }

/* Accordions (light) */
.accordion-single {
    background: var(--color-light) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 10px !important;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(72,127,255,0.04);
}
.accordion-button {
    background: var(--color-light) !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    color: var(--color-theme-dark) !important;
    background: rgba(72,127,255,0.04) !important;
}
.accordion-body {
    background: var(--color-light) !important;
    color: var(--text-mid) !important;
}

/* ── Partner Area ─────────────────────────────────────────────────── */
.partner-style-one-area { background: var(--color-light-alt); }
.partner-items ul li img { filter: grayscale(1) opacity(0.4); transition: filter 0.2s; }
.partner-items ul li img:hover { filter: none; }
.mask-text { color: var(--color-theme) !important; }

/* ── Counter / Fun Fact ──────────────────────────────────────────── */
.achivement-counter .fun-fact .timer { color: #fff !important; }
.achivement-counter .fun-fact .operator { color: var(--color-cyan) !important; }
.achivement-counter .fun-fact .medium { color: #94A3B8; }
.request-call-back-area { background: #0B1426 !important; }
.request-call-back-area h2 { color: #E2E8F0 !important; }
.request-call-back-area p { color: #94A3B8; }

/* ── Stats Bar ────────────────────────────────────────────────────── */
.kveldo-stats-bar {
    background: var(--color-light-alt);
    padding: 48px 0;
    border-top: 1px solid rgba(72,127,255,0.1);
    border-bottom: 1px solid rgba(72,127,255,0.1);
}
.stat-number {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 8px;
}
.stat-label { color: var(--text-muted); font-size: 0.88rem; font-weight: 500; }

/* ── Hero ─────────────────────────────────────────────────────────── */
/* The hero is the one full-bleed dark field on the home page: Oxford Blue
   deepening into indigo/violet, with two radial glows layered over it so the
   surface has depth instead of reading as a flat color block. */
.kveldo-hero {
    background: var(--gradient-ground);
    padding: 150px 0 110px;
    position: relative;
    overflow: hidden;
}
.kveldo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 22% 28%, rgba(124,58,237,0.34), transparent 60%),
        radial-gradient(ellipse at 88% 68%, rgba(34,207,255,0.20), transparent 58%);
    pointer-events: none;
}
.kveldo-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Faint grid, the way a data product's own chrome looks. */
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
    pointer-events: none;
}
.kveldo-hero > .container { position: relative; z-index: 2; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: #CFE0FF;
    backdrop-filter: blur(6px);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
}
.hero-badge .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-cyan);
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}
.kveldo-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin-bottom: 22px;
}
/* On the dark hero the accent line is a light tint, not the logo gradient —
   gradient text on a dark violet field loses too much contrast at display size. */
.kveldo-hero .gradient-line { color: #7FD4FF; }
.kveldo-hero p { color: rgba(226,232,240,0.86); font-size: 1.08rem; line-height: 1.75; max-width: 540px; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(226,232,240,0.78);
    font-size: 0.84rem;
    font-weight: 500;
}
.trust-badge .badge-icon { color: #4ADE80; font-weight: 700; }

.hero-image-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 30px 80px rgba(0,0,0,0.42);
}
.hero-float-badge {
    position: absolute;
    background: #fff;
    border: 1px solid rgba(72,127,255,0.15);
    border-radius: 12px;
    padding: 12px 18px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.28);
    z-index: 10;
}
.hero-float-badge .float-num {
    font-size: 1.4rem;
    font-weight: 800;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-float-badge .float-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

.img-placeholder {
    background: var(--color-light-mid);
    border-radius: 16px;
    border: 1px dashed rgba(72,127,255,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}
.img-placeholder .ph-icon { font-size: 3rem; margin-bottom: 12px; }
.img-placeholder p { color: var(--text-muted); font-size: 0.8rem; margin: 0; line-height: 1.5; }

/* ── Security Section ─────────────────────────────────────────────── */
.security-section { background: var(--color-light-alt); padding: 80px 0; }
.security-item {
    background: var(--color-light);
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 2px 12px rgba(72,127,255,0.05);
    transition: border-color 0.25s, box-shadow 0.25s;
    height: 100%;
}
.security-item:hover {
    border-color: rgba(72,127,255,0.35);
    box-shadow: 0 8px 28px rgba(72,127,255,0.1);
}
.security-item .sec-icon {
    /* These were emoji (a padlock, a cloud, and theater masks standing in for
       "UI data masking"). Emoji render differently on every platform, cannot
       take the brand color, and sat at roughly half the size of every other
       icon on the site. Now the standard 46px gradient tile. */
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--gradient-main);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(47, 107, 255, 0.24);
}
.security-item .sec-icon i {
    font-size: 1.15rem;
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.security-item h5 { color: var(--text-dark) !important; font-size: 0.97rem !important; font-weight: 700 !important; margin-bottom: 6px !important; }
.security-item p { color: var(--text-mid); font-size: 0.85rem; line-height: 1.6; margin: 0; }

/* ── Testimonials ─────────────────────────────────────────────────── */
.testimonial-style-one-area { background: var(--color-light-alt); }
.testimonial-style-one { background: transparent; }
.testimonial-style-one .item {
    background: var(--color-light);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 16px rgba(72,127,255,0.06);
}
.testimonial-style-one .content h2 { color: var(--text-dark) !important; font-size: 1.1rem !important; font-weight: 700 !important; }
.testimonial-style-one .content p { color: var(--text-mid); font-size: 0.9rem; line-height: 1.75; }
.testimonial-style-one .provider { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.testimonial-style-one .provider .avt { width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(72,127,255,0.2); object-fit: cover; }
.testimonial-style-one .provider i.flaticon-quote { color: rgba(72,127,255,0.15); font-size: 2rem; }
.testimonial-style-one .provider .info h4 { color: var(--text-dark) !important; font-size: 0.95rem !important; font-weight: 700 !important; margin: 0 !important; }
.testimonial-style-one .provider .info span { color: var(--text-muted); font-size: 0.8rem; }

/* ── Pricing (light) ──────────────────────────────────────────────── */
.pricing-style-one-area { background: var(--color-light-alt); }
.pricing-style-one {
    background: var(--color-light) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 20px !important;
    padding: 36px 28px !important;
    box-shadow: 0 2px 16px rgba(72,127,255,0.06);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pricing-style-one:hover {
    border-color: rgba(72,127,255,0.35) !important;
    box-shadow: 0 16px 48px rgba(72,127,255,0.12);
    transform: translateY(-4px);
}
.pricing-style-one.active {
    background: var(--color-light) !important;
    border-color: var(--color-theme) !important;
    box-shadow: 0 16px 48px rgba(72,127,255,0.2);
}
.pricing-style-one .pricing-header h4 {
    color: var(--text-dark) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px !important;
}
.pricing-style-one .pricing-header p { color: var(--text-muted); font-size: 0.85rem; }
.pricing-style-one hr { border-color: rgba(72,127,255,0.1); margin: 20px 0; }
.pricing-style-one .price h2 {
    color: var(--text-dark) !important;
    font-size: 2.6rem !important;
    font-weight: 900 !important;
    margin: 0 0 4px !important;
    line-height: 1;
}
.pricing-style-one .price h2 sup { font-size: 1.2rem; vertical-align: super; color: var(--color-theme); }
.pricing-style-one .price h2 sub { font-size: 0.9rem; color: var(--text-muted); font-weight: 400; }
.pricing-style-one.active .price h2 { color: var(--color-theme) !important; }
.pricing-style-one .pricing-content { flex: 1; }
.pricing-style-one .pricing-content ul { list-style: none; padding: 0; margin: 20px 0 28px; }
.pricing-style-one .pricing-content ul li {
    color: var(--text-mid);
    font-size: 0.88rem;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pricing-style-one .pricing-content ul li:last-child { border-bottom: none; }
.pricing-style-one .pricing-content ul li i.fa-check-circle { color: var(--color-affirm); flex-shrink: 0; margin-top: 2px; }
.pricing-style-one .pricing-content ul li i.fa-times-circle { color: #ccc; flex-shrink: 0; margin-top: 2px; }
.pricing-badge {
    display: inline-block;
    background: var(--gradient-main);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}

/* ── Blog Cards (light) ───────────────────────────────────────────── */
.home-blog-area, .blog-style-one-area { background: var(--color-light-alt); }
.blog-style-one {
    background: var(--color-light);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(72,127,255,0.05);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    height: 100%;
}
.blog-style-one:hover {
    border-color: rgba(72,127,255,0.3);
    box-shadow: 0 12px 36px rgba(72,127,255,0.1);
    transform: translateY(-3px);
}
.blog-style-one .thumb img { width: 100%; height: 200px; object-fit: cover; }
.blog-style-one .info { padding: 24px; }
.blog-style-one .blog-meta ul { list-style: none; padding: 0; margin: 0 0 12px; display: flex; gap: 16px; }
.blog-style-one .blog-meta ul li { color: var(--text-muted); font-size: 0.8rem; }
.blog-style-one .blog-meta ul li a { color: var(--color-theme-dark); font-weight: 600; }
.blog-style-one h4 a { color: var(--text-dark); font-size: 1rem; font-weight: 700; line-height: 1.45; }
.blog-style-one h4 a:hover { color: var(--color-theme); }
.blog-style-one .btn-animate .button-text { color: var(--color-theme-dark); }

/* ── Contact ──────────────────────────────────────────────────────── */
.contact-style-one-area { background: var(--color-light); }
.contact-style-one-info h2 { color: var(--text-dark) !important; }
.contact-style-one-info p { color: var(--text-mid); }
.contact-style-one-info ul { list-style: none; padding: 0; }
.contact-style-one-info ul li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
.contact-style-one-info ul li .icon {
    width: 48px; height: 48px; flex-shrink: 0;
    background: rgba(72,127,255,0.08);
    border: 1px solid rgba(72,127,255,0.15);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.contact-style-one-info ul li .icon i { color: var(--color-theme); font-size: 1.1rem; }
.contact-style-one-info ul li .content h5,
.contact-style-one-info ul li .info h5 { color: var(--text-dark) !important; font-size: 0.85rem !important; margin-bottom: 4px !important; }
.contact-style-one-info ul li .content a,
.contact-style-one-info ul li .info a { color: var(--text-mid); }
.contact-style-one-info ul li .content a:hover,
.contact-style-one-info ul li .info a:hover { color: var(--color-theme); }
.contact-style-one-info ul li .info p { color: var(--text-mid); font-size: 0.88rem; margin: 0; }

.contact-form-style-one {
    background: var(--color-light-alt);
    border: 1px solid rgba(72,127,255,0.1);
    border-radius: 20px;
    padding: 36px;
}
.contact-form-style-one h5.sub-title { color: var(--color-theme) !important; }
.contact-form-style-one h2 { color: var(--text-dark) !important; font-size: 1.6rem !important; font-weight: 800 !important; margin-bottom: 24px !important; }
.contact-form-style-one .form-group { margin-bottom: 16px; }
.contact-form-style-one .form-control {
    background: var(--color-light) !important;
    border: 1px solid rgba(72,127,255,0.15) !important;
    color: var(--text-dark) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-family: 'Outfit', sans-serif !important;
}
.contact-form-style-one .form-control:focus {
    border-color: rgba(72,127,255,0.5) !important;
    box-shadow: 0 0 0 3px rgba(72,127,255,0.08) !important;
    outline: none;
}
.contact-form-style-one .form-control::placeholder { color: var(--text-muted); }
.contact-form-style-one select.form-control { appearance: auto; }
.contact-form-style-one textarea.form-control { min-height: 130px; resize: vertical; }
.contact-form-style-one button[type="submit"] {
    background: var(--gradient-main) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 14px 36px !important;
    border-radius: 100px !important;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(72,127,255,0.3);
    transition: box-shadow 0.25s, transform 0.2s;
}
.contact-form-style-one button[type="submit"]:hover {
    box-shadow: 0 8px 32px rgba(72,127,255,0.45);
    transform: translateY(-1px);
}

/* ── Breadcrumb / Inner Page Hero (dark gradient) ─────────────────── */
.breadcrumb-area {
    background: linear-gradient(135deg, #0B1426 0%, #1E1E63 50%, #0B1426 100%) !important;
    border-bottom: 1px solid rgba(72,127,255,0.2);
    padding: 170px 0 80px !important;
}
.breadcrumb-area h1 { color: #E2E8F0 !important; font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 900 !important; letter-spacing: -0.02em; }
.breadcrumb-area ul.breadcrumb { background: transparent !important; justify-content: center; display: flex; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; }
.breadcrumb-area ul.breadcrumb li { color: #64748B; font-size: 0.88rem; }
.breadcrumb-area ul.breadcrumb li a { color: #7FA9FF; }
.breadcrumb-area ul.breadcrumb li + li::before { content: '›'; margin-right: 8px; color: #64748B; }

/* ── Footer (stays dark/black) ────────────────────────────────────── */
footer.bg-dark {
    background: var(--kveldo-oxford) !important;
    border-top: 1px solid rgba(255,255,255,0.06);
}
footer .f-items { padding: 70px 0 80px; }
footer .f-item.about .logo { height: 36px; width: auto; }
footer .f-item.about > p { color: #94A3B8; font-size: 0.88rem; line-height: 1.7; margin: 16px 0 24px; }
footer .widget-title { color: #E2E8F0 !important; font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 20px !important; }
footer .f-item.link ul { list-style: none; padding: 0; }
footer .f-item.link ul li { margin-bottom: 10px; }
footer .f-item.link ul li a { color: #94A3B8; font-size: 0.88rem; transition: color 0.2s; }
footer .f-item.link ul li a:hover { color: #7FA9FF; padding-left: 4px; }
footer .f-item.newsletter p { color: #94A3B8; font-size: 0.88rem; margin-bottom: 16px; }
footer .f-item.newsletter form {
    display: flex;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(72,127,255,0.25);
    border-radius: 100px;
    padding: 4px 4px 4px 18px;
    margin-bottom: 20px;
}
footer .f-item.newsletter form input {
    background: transparent;
    border: none;
    color: #E2E8F0;
    flex: 1;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
}
footer .f-item.newsletter form input::placeholder { color: #64748B; }
footer .f-item.newsletter form button {
    background: var(--gradient-main);
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
footer .f-item.newsletter form button svg path { stroke: #fff; }
footer .footer-social { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
footer .footer-social li a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #94A3B8;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; transition: all 0.2s;
}
footer .footer-social li a:hover {
    background: var(--gradient-main);
    border-color: transparent;
    color: #fff;
}
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 20px 0;
}
.footer-bottom p { color: #64748B; font-size: 0.85rem; margin: 0; }
.footer-bottom p a { color: #7FA9FF; }
.footer-bottom ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; justify-content: flex-end; }
.footer-bottom ul li a { color: #64748B; font-size: 0.85rem; }
.footer-bottom ul li a:hover { color: #7FA9FF; }

/* ── Comparison Table ─────────────────────────────────────────────── */
.comparison-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.comparison-table th {
    background: var(--color-light-alt);
    color: var(--text-dark);
    font-weight: 700;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(72,127,255,0.15);
}
.comparison-table th.kveldo-col { background: rgba(72,127,255,0.08); color: var(--color-theme-dark); }
.comparison-table td {
    padding: 12px 16px;
    color: var(--text-mid);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.comparison-table tr:hover td { background: rgba(72,127,255,0.03); }
.comparison-table .check { color: var(--color-affirm); font-weight: 700; }
.comparison-table .cross  { color: #ccc; }
.comparison-table .kveldo-col { color: var(--color-theme-dark); font-weight: 600; }

/* ── Values / Cards ───────────────────────────────────────────────── */
.value-card {
    background: var(--color-light);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 28px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(72,127,255,0.05);
    transition: border-color 0.25s, transform 0.25s;
}
.value-card:hover { border-color: rgba(72,127,255,0.3); transform: translateY(-3px); }
/* The standard 46px gradient tile with a white glyph, like every other card
   icon on the site. This used to be the vendor's gradient-CLIPPED glyph
   (background-clip:text, transparent text-fill), which is the one pattern the
   icon standard rules out: running the gradient through a multi-path mark's
   counters turns it to mush, and fa-handshake sat right here proving it. It
   also rendered as a full-width 575px block rather than a tile, so the About
   page was the only place on the site where a card icon was not a tile.
   Final geometry is pinned in kveldo-theme-v2.css beside the other three. */
.value-card .value-icon {
    background: var(--gradient-main);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.12rem;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(47, 107, 255, .24);
}
/* A 46px tile is a fixed-width block, so text-align on the column no longer
   moves it the way a bare glyph was moved — the Legal Entity card is centered
   and its tile sat hard against the left edge. Centred by margin instead, and
   scoped to a centred container so the eight left-aligned value cards are
   untouched. Any future centred .value-card gets this for free. */
.text-center .value-card .value-icon { margin-left: auto; margin-right: auto; }

.value-card h4 { color: var(--text-dark) !important; font-size: 1rem !important; font-weight: 700 !important; margin-bottom: 8px !important; }
.value-card p { color: var(--text-mid); font-size: 0.88rem; line-height: 1.65; margin: 0; }

/* ── Timeline ─────────────────────────────────────────────────────── */
.timeline-item { display: flex; gap: 24px; margin-bottom: 36px; }
.timeline-dot {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: var(--gradient-main);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 0.85rem; margin-top: 4px;
}
.timeline-content h5 { color: var(--text-dark) !important; font-weight: 700 !important; margin-bottom: 6px !important; }
.timeline-content p { color: var(--text-mid); font-size: 0.88rem; line-height: 1.65; margin: 0; }
.timeline-year { color: var(--color-theme); font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }

/* ── Login / Early Access ─────────────────────────────────────────── */
.early-access-section { background: var(--color-light); padding: 80px 0; }
.waitlist-form-card {
    background: var(--color-light-alt);
    border: 1px solid rgba(72,127,255,0.12);
    border-radius: 20px; padding: 40px;
}
.waitlist-form-card h3 { color: var(--text-dark) !important; font-size: 1.5rem !important; font-weight: 800 !important; margin-bottom: 8px !important; }
.waitlist-form-card p { color: var(--text-mid); font-size: 0.9rem; margin-bottom: 24px; }

/* ── Legal content ────────────────────────────────────────────────── */
.terms-style-area { background: var(--color-light); }
.terms-style-area h2 { color: var(--text-dark) !important; }
.terms-style-area h4 { color: var(--color-theme) !important; }
.terms-style-area p { color: var(--text-mid); line-height: 1.9; }
.terms-style-area ul li { color: var(--text-mid); }
.terms-style-area a { color: var(--color-theme); }
.terms-style-area table td, .terms-style-area table th { color: var(--text-mid); border-color: rgba(0,0,0,0.08); }

/* ── Misc / Shapes ────────────────────────────────────────────────── */
.shape-animated-left img { opacity: 0.06; }
.large-shape img { opacity: 0.04; }
.footer-shape .item img { opacity: 0.04; }
.center-shape { opacity: 0.04; }
.overlay-screen { background: rgba(0,0,0,0.6); }
.default-padding { padding: 100px 0; }
.default-padding-top { padding-top: 100px; }
.bottom-less { padding-bottom: 0 !important; }

/* Mobile nav */
@media (max-width: 991px) {
    nav.navbar.validnavs .collapse.in,
    nav.navbar.validnavs .collapse.show {
        background: #101B33;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        margin-top: 8px;
    }
    nav.navbar.validnavs .nav > li > a { color: rgba(255,255,255,0.85) !important; }
}