:root{
    --blue:#1e66ff;
    --blue-700:#144fe0;
    --blue-50:#eef4ff;
    --text:#0b1220;
    --muted:#5b6475;
    --border:#e6eaf2;
    --bg:#ffffff;
    --shadow:0 16px 40px rgba(11,18,32,.12);
    --radius:18px;
    --radius-sm:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:var(--bg);
}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,calc(100% - 40px));margin:0 auto}

/* Topbar */
.topbar{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
}
.topbar__inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0;gap:18px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{height:42px;width:auto;display:block}
@media (max-width:768px){.brand__logo{height:36px}}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-weight:800;letter-spacing:-.02em}
.brand__tag{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex;align-items:center;gap:18px}
.navToggle{
    display:none;
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:10px;
    cursor:pointer;
}
.navToggle span{
    display:block;width:20px;height:2px;
    background:var(--text);
    margin:4px 0;border-radius:2px;
}

/* Mobile nav */
.mobileNav{
    display:none;
    flex-direction:column;
    background:#fff;
    border-top:1px solid var(--border);
    padding:12px 20px 18px;
    gap:10px;
}
.mobileNav.open{display:flex}
.mobileNav a{
    font-weight:700;
    padding:14px 20px;
    border-bottom:1px solid var(--border);
    border-radius:12px;
}
.nav a.nav-active,
.mobileNav a.nav-active{
    background:var(--blue);
    color:#fff;
    padding:8px 14px;
    border-radius:12px;
}
.nav .btn.nav-active{background:var(--blue);color:#fff}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:12px 16px;border-radius:14px;
    font-weight:800;
    border:1px solid transparent;
    background:var(--blue);color:#fff;
    cursor:pointer;
    transition:.15s ease;
    box-shadow:0 10px 22px rgba(30,102,255,.20);
}
.btn:hover{background:var(--blue-700)}
.btn:active{transform:translateY(1px)}
.btn--ghost{
    background:#fff;
    border:1px solid var(--border);
    color:var(--text);
    box-shadow:none;
}
.btn--ghost:hover{background:var(--blue-50)}
.btn--small{padding:10px 12px;border-radius:12px;font-size:14px}
.btn--full{width:100%}

/* Hero */
.hero{
    padding:56px 0 30px;
    background:
            radial-gradient(900px 400px at 15% 5%, rgba(30,102,255,.12), transparent 55%),
            radial-gradient(800px 420px at 85% 15%, rgba(30,102,255,.10), transparent 60%),
            linear-gradient(#fff,#fff);
}
.hero__grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:34px;
    align-items:center;
}
.badge{
    display:inline-flex;align-items:center;
    padding:8px 12px;border-radius:999px;
    background:var(--blue-50);
    color:var(--blue);
    font-weight:800;letter-spacing:.01em;
    border:1px solid rgba(30,102,255,.18);
}
h1{
    margin:14px 0 10px;
    font-size:clamp(34px,4vw,52px);
    line-height:1.05;
    letter-spacing:-.03em;
}
.lead{
    margin:0;
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
    max-width:60ch;
}
.hero__cta{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap}
.trustRow{display:flex;flex-wrap:wrap;gap:10px}
.trustPill{
    border:1px solid var(--border);
    background:#fff;
    border-radius:999px;
    padding:8px 12px;
    font-weight:700;
    color:var(--muted);
}

/* Panel */
.hero__panel .panelCard{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.panelTop{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(#fff,#fafbff);
}
.dots span{
    width:10px;height:10px;border-radius:50%;
    display:inline-block;margin-right:6px;
    background:#d7dbe6;
}
.panelUrl{font-weight:700;color:var(--muted);font-size:13px}
.panelBody{padding:22px 18px 18px}
.shield{
    width:56px;height:56px;border-radius:18px;
    background:var(--blue-50);
    border:1px solid rgba(30,102,255,.18);
    display:grid;place-items:center;
}
.shield__inner{
    width:34px;height:34px;border-radius:12px;
    display:grid;place-items:center;
    background:var(--blue);
    color:#fff;
    font-weight:900;
}
.panelTitle{margin:14px 0 4px;font-weight:900;font-size:18px}
.panelSub{margin:0 0 14px;color:var(--muted);font-weight:600}
.panelList{display:grid;gap:10px;margin:12px 0}
.panelItem{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}
.panelItem span{color:var(--muted);font-weight:700}
.status{font-weight:900}
.status--valid{color:#0a7a2f}
.panelNote{
    margin-top:12px;
    padding:12px;
    border-radius:14px;
    background:var(--blue-50);
    border:1px solid rgba(30,102,255,.18);
    color:var(--muted);
    font-weight:700;
}

/* Sections */
.section{padding:56px 0}
.section--alt{background:linear-gradient(#fff,#f7f9ff)}
h2{
    margin:0 0 10px;
    font-size:clamp(24px,3vw,34px);
    letter-spacing:-.02em;
}
.sectionLead{
    margin:0 0 22px;
    color:var(--muted);
    line-height:1.6;
    max-width:75ch;
}

/* Feature grid */
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.card{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    padding:18px;
    box-shadow:0 8px 22px rgba(11,18,32,.06);
}
.card h3{margin:0 0 8px;font-size:16px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);line-height:1.6}

/* ===== PRICING (UPDATED) ===== */
.pricingHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.pricingNote{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.pricingNote__pill{
    border:1px solid var(--border);
    background:#fff;
    border-radius:999px;
    padding:8px 12px;
    font-weight:800;
    font-size:13px;
    color:var(--muted);
}

.pricingGrid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    margin-top:24px;
}

.pricingCard{
    position:relative;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    padding:18px 16px 16px;
    text-align:left;
    box-shadow:0 10px 26px rgba(11,18,32,.08);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    overflow:hidden;
}
.pricingCard:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(11,18,32,.12);
}

.planTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.planTop h3{
    margin:0;
    font-size:18px;
    font-weight:900;
    letter-spacing:-.01em;
}
.planTag{
    font-size:12px;
    font-weight:900;
    padding:6px 10px;
    border-radius:999px;
    background:var(--blue-50);
    border:1px solid rgba(30,102,255,.18);
    color:var(--blue);
    white-space:nowrap;
}

.planPrice{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:6px 0 10px;
}
.planAmount{
    font-size:34px;
    font-weight:900;
    letter-spacing:-.02em;
}
.planPeriod{
    color:var(--muted);
    font-weight:800;
    font-size:13px;
}

.planDesc{
    margin:0 0 14px;
    color:var(--muted);
    line-height:1.55;
    font-weight:600;
    min-height:48px;
}

.planList{
    list-style:none;
    padding:0;
    margin:0 0 14px;
    display:grid;
    gap:10px;
}
.planList li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--muted);
    font-weight:700;
    font-size:14px;
    line-height:1.35;
}
.tick{
    display:inline-grid;
    place-items:center;
    width:22px;height:22px;
    border-radius:8px;
    background:var(--blue-50);
    border:1px solid rgba(30,102,255,.18);
    color:var(--blue);
    font-weight:900;
    flex:0 0 22px;
    margin-top:1px;
}

.pricingCard .btn{margin-top:2px}

.pricingCard.featured{
    border:2px solid rgba(30,102,255,.55);
    box-shadow:0 22px 55px rgba(30,102,255,.18);
    transform:translateY(-6px);
    background:
            radial-gradient(900px 260px at 10% 0%, rgba(30,102,255,.10), transparent 55%),
            #fff;
}
.pricingCard.featured:hover{transform:translateY(-8px)}

.featuredBadge{
    position:absolute;
    top:12px;right:12px;
    background:var(--blue);
    color:#fff;
    font-weight:900;
    font-size:12px;
    padding:8px 10px;
    border-radius:999px;
    box-shadow:0 10px 22px rgba(30,102,255,.25);
}

.planFine{
    margin:10px 0 0;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-align:center;
}

.pricingFoot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-top:18px;
}
.pricingFoot__card{
    flex:1 1 520px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    padding:14px;
    box-shadow:0 10px 26px rgba(11,18,32,.06);
    display:flex;
    flex-direction:column;
    gap:6px;
}
.pricingFoot__card span{
    color:var(--muted);
    font-weight:700;
    line-height:1.5;
}

/* Split */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.bullets{margin:14px 0 0;padding-left:18px;color:var(--muted);line-height:1.8}
.bullets li{margin:6px 0}

/* Forms */
.formCard{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    padding:18px;
    box-shadow:0 10px 26px rgba(11,18,32,.08);
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.field span{font-weight:800;font-size:13px;color:var(--text)}
input,textarea{
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    font-size:14px;
    outline:none;
    font-family:inherit;
    background:#fff;
}
input:focus,textarea:focus{
    border-color:rgba(30,102,255,.55);
    box-shadow:0 0 0 4px rgba(30,102,255,.12);
}
.formNote{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.formMsg{margin-top:12px;font-weight:800;font-size:14px}
.formMsg.ok{color:#0a7a2f}
.formMsg.err{color:#b00020}
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Contact */
.contactGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:start}
.contactCard{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
    padding:18px;
    box-shadow:0 10px 26px rgba(11,18,32,.08);
}
.muted{color:var(--muted);line-height:1.6}
.contactMeta{display:grid;gap:10px;margin-top:14px}
.metaLabel{display:block;color:var(--muted);font-weight:800;font-size:12px;margin-bottom:2px}
.miniNote{
    margin-top:14px;
    padding:12px;
    border-radius:14px;
    background:var(--blue-50);
    border:1px solid rgba(30,102,255,.18);
    color:var(--muted);
    font-weight:700;
}

/* Footer */
.footer{border-top:1px solid var(--border);padding:20px 0;background:#fff}
.footer__inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.footer p{margin:0;color:var(--muted);font-weight:700}
.footerLinks{display:flex;gap:14px}
.footerLinks a{color:var(--muted);font-weight:800;font-size:14px}
.footerLinks a:hover{color:var(--text)}

/* FAQ */
.faq{max-width:800px;margin-top:20px}
.faq details{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:10px;
}
.faq summary{font-weight:800;cursor:pointer}
.faq p{margin-top:10px;color:var(--muted);line-height:1.6}

/* Responsive */
@media (max-width:1140px){
    .pricingGrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:940px){
    .hero__grid,.split,.contactGrid{grid-template-columns:1fr}
    .grid{grid-template-columns:repeat(2,1fr)}
    .pricingGrid{grid-template-columns:repeat(2,1fr)}
    .nav{display:none}
    .navToggle{display:inline-block}
}
@media (max-width:560px){
    .grid{grid-template-columns:1fr}
    .pricingGrid{grid-template-columns:1fr}
    .twoCol{grid-template-columns:1fr}
    .container{width:min(1120px,calc(100% - 28px))}
    .planDesc{min-height:auto}
}

/* Pricing grid layout fix: 3 on desktop, 2 on tablet, 1 on mobile */
.pricingGrid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-top:24px;
}

/* Optional: make the featured card wider on large screens */
@media (min-width: 1024px){
    .pricingCard.featured{
        grid-column: span 2;
    }
}

/* Tablet */
@media (max-width: 940px){
    .pricingGrid{
        grid-template-columns:repeat(2, 1fr);
    }
    .pricingCard.featured{
        grid-column:auto; /* stops spanning on tablet */
    }
}

/* Mobile */
@media (max-width: 560px){
    .pricingGrid{
        grid-template-columns:1fr;
    }
}

/* Verify page two-column layout */
.verifyGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items:start;
}

/* Keep blocks tidy */
.verifyBlock .formCard{
    max-width: 520px;
}

/* Result actions */
.verifyActions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}

/* New status colours for public panel */
.status--revoked{color:#b00020}
.status--expired{color:#9a6b00}

/* Slight variations for “warning/error” icon blocks */
.shield--bad{
    background: rgba(176,0,32,.08);
    border:1px solid rgba(176,0,32,.18);
}
.shield__inner--bad{
    background:#b00020;
}
.shield--warn{
    background: rgba(154,107,0,.10);
    border:1px solid rgba(154,107,0,.18);
}

.panelNote--bad{
    background: rgba(176,0,32,.08);
    border: 1px solid rgba(176,0,32,.18);
    color: #7a0016;
}

/* Stack into 1 column on mobile */
@media (max-width: 940px){
    .verifyGrid{
        grid-template-columns: 1fr;
    }
    .verifyBlock .formCard{
        max-width: 100%;
    }
}
/* =========================
   Public Certificate Page
========================= */

.certWrap{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:16px;
    align-items:start;
}

.certBox{
    background:#fff;
    border:2px solid rgba(30,102,255,.25); /* blue border */
    border-radius: var(--radius);
    padding:18px;
    box-shadow: 0 10px 26px rgba(11,18,32,.06);
}

.certBoxHead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
}

.certTiny{
    font-size:12px;
    font-weight:900;
    color:var(--muted);
}

.certId{
    font-weight:900;
    font-size:18px;
    letter-spacing:.02em;
    margin-top:4px;
}

.certGridInfo{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px 14px;
    margin-top:14px;
}

.certInfoRow{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}

.certInfoRow span{
    font-size:12px;
    font-weight:900;
    color:var(--muted);
}

.certInfoRow strong{
    font-weight:900;
    color:var(--text);
}

.certPill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
    border:1px solid var(--border);
    white-space:nowrap;
}

.pill--valid{
    color:#0a7a2f;
    border-color: rgba(10,122,47,.35);
    background: rgba(10,122,47,.08);
}

.pill--revoked{
    color:#b00020;
    border-color: rgba(176,0,32,.35);
    background: rgba(176,0,32,.08);
}

.pill--expired{
    color:#9a6b00;
    border-color: rgba(154,107,0,.35);
    background: rgba(154,107,0,.10);
}

.pill--neutral{
    color:var(--muted);
    background:#fff;
}

.certAlert{
    margin-top:14px;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--border);
    font-weight:800;
    line-height:1.5;
}

.certAlert--bad{
    background: rgba(176,0,32,.06);
    border-color: rgba(176,0,32,.18);
    color:#7a0016;
}

.certActions{
    margin-top:14px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.certFootNote{
    margin-top:14px;
    padding:12px;
    border-radius:14px;
    background: var(--blue-50);
    border:1px solid rgba(30,102,255,.18);
    color: var(--muted);
    font-weight:800;
}

/* Help box */
.certHelp{
    background:#fff;
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:18px;
    box-shadow: 0 10px 26px rgba(11,18,32,.06);
}

.certHelpActions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 940px){
    .certWrap{ grid-template-columns:1fr; }
    .certGridInfo{ grid-template-columns:1fr; }
}

/* =========================
   Public Verification Page
========================= */

.verifyBlock{
    background:#fff;
    border:2px solid rgba(30,102,255,.25);
    border-radius:16px;
    padding:28px 24px;
    text-align:center;
    box-shadow:0 20px 50px rgba(11,18,32,.06);
}

.verifyStatusTitle{
    font-size:14px;
    font-weight:900;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:10px;
}

.certPill{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    font-weight:900;
    font-size:14px;
    margin-bottom:14px;
}

.pill--valid{
    background:rgba(10,122,47,.1);
    color:#0a7a2f;
    border:1px solid rgba(10,122,47,.3);
}

.pill--revoked{
    background:rgba(176,0,32,.1);
    color:#b00020;
    border:1px solid rgba(176,0,32,.3);
}

.pill--expired{
    background:rgba(154,107,0,.12);
    color:#9a6b00;
    border:1px solid rgba(154,107,0,.3);
}

.verifyIssuer{
    font-weight:800;
    margin-bottom:22px;
}

.certDetailsBox{
    margin-top:10px;
    border-top:1px solid var(--border);
    padding-top:20px;
    display:grid;
    gap:12px;
    text-align:left;
}

.certRow{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border:1px solid var(--border);
    padding:12px 14px;
    border-radius:14px;
}

.certRow span{
    font-size:12px;
    font-weight:900;
    color:var(--muted);
}

.certRow strong{
    font-weight:900;
}

.verifyContactBlock{
    margin-top:24px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    text-align:center;
}

.certAlert{
    margin-top:16px;
    padding:12px;
    border-radius:12px;
    font-weight:800;
}

.certAlert--bad{
    background:rgba(176,0,32,.08);
    border:1px solid rgba(176,0,32,.3);
    color:#7a0016;
}


/* =========================================================
   CertiChecker Homepage Styles
   Scoped to .homePage to avoid clashes with other pages
   ========================================================= */

.homePage{
    --home-primary:#2563eb;
    --home-primary-dark:#1d4ed8;
    --home-primary-soft:#eff6ff;
    --home-primary-soft-2:#dbeafe;
    --home-text:#0f172a;
    --home-text-soft:#475569;
    --home-white:#ffffff;
    --home-bg:#f8fbff;
    --home-bg-alt:#eff6ff;
    --home-border:#dbeafe;
    --home-shadow:0 20px 50px rgba(37,99,235,.10);
    --home-shadow-soft:0 12px 30px rgba(15,23,42,.06);
    --home-radius:24px;
    --home-radius-sm:18px;
    --home-max:1240px;

    color:var(--home-text);
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 26%),
        radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 22%),
        linear-gradient(180deg, var(--home-white) 0%, var(--home-bg) 100%);
}

html[data-theme="dark"] .homePage{
    --home-primary:#60a5fa;
    --home-primary-dark:#3b82f6;
    --home-primary-soft:#0f274a;
    --home-primary-soft-2:#123767;
    --home-text:#e5edf8;
    --home-text-soft:#aab8cc;
    --home-white:#0f1d33;
    --home-bg:#07111f;
    --home-bg-alt:#0b1729;
    --home-border:#1f3658;
    --home-shadow:0 20px 50px rgba(0,0,0,.32);
    --home-shadow-soft:0 12px 30px rgba(0,0,0,.24);
}

.homePage svg path,
.homePage svg rect{
    stroke-linecap:round;
    stroke-linejoin:round;
}

.homePage .container{
    width:min(var(--home-max), calc(100% - 32px));
    margin:0 auto;
}

.homePage .section{
    padding:78px 0;
    position:relative;
}

.homePage .section--soft{
    background:linear-gradient(180deg, var(--home-bg) 0%, var(--home-bg-alt) 100%);
}

.homePage .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid #bfdbfe;
    background:var(--home-primary-soft);
    color:var(--home-primary-dark);
    font-size:14px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(37,99,235,.08);
}

.homePage .eyebrow::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--home-primary);
    box-shadow:0 0 0 5px rgba(37,99,235,.12);
}

/* Global fixed header helper
   This keeps the header visible for the full page instead of stopping part-way down. */
body{
    padding-top:72px;
}

.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:9999;
}

.mobileNav{
    max-height:calc(100vh - 72px);
    overflow-y:auto;
}

@media (max-width:768px){
    body{
        padding-top:66px;
    }

    .mobileNav{
        max-height:calc(100vh - 66px);
    }
}

.homePage .heroTopBar{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

/* Global floating light/dark theme button */
.siteThemeToggle{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:10000;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:11px 16px;
    border-radius:999px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.92);
    color:var(--text);
    font-weight:900;
    cursor:pointer;
    box-shadow:0 16px 40px rgba(11,18,32,.18);
    backdrop-filter:blur(10px);
    transition:.25s ease;
}

.siteThemeToggle:hover{
    transform:translateY(-2px);
    background:var(--blue-50);
}

.siteThemeToggleIcon{
    width:26px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--blue-50);
    color:var(--blue);
}

html[data-theme="dark"] .siteThemeToggle{
    background:rgba(15,29,51,.92);
    color:#e5edf8;
    border-color:#1f3658;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
}

html[data-theme="dark"] .siteThemeToggle:hover{
    background:#10213b;
}

html[data-theme="dark"] .siteThemeToggleIcon{
    background:#0f274a;
    color:#60a5fa;
}

.homePage .sectionHead{
    max-width:820px;
    margin:0 auto 34px;
    text-align:center;
}

.homePage .sectionHead h2{
    margin:0 0 12px;
    font-size:clamp(30px,4vw,46px);
    line-height:1.1;
    letter-spacing:-.03em;
    color:#0b1f4d;
}

.homePage .sectionHead p{
    margin:0;
    font-size:17px;
    line-height:1.8;
    color:var(--home-text-soft);
}

.homePage .btnRow,
.homePage .heroActions,
.homePage .ctaRow{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.homePage .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:14px 22px;
    border-radius:14px;
    background:linear-gradient(180deg, var(--home-primary) 0%, var(--home-primary-dark) 100%);
    color:#fff;
    font-weight:700;
    border:1px solid transparent;
    transition:.25s ease;
    box-shadow:0 14px 28px rgba(37,99,235,.18);
}

.homePage .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(37,99,235,.22);
}

.homePage .btn--ghost{
    background:var(--home-white);
    color:var(--home-primary-dark);
    border:1px solid #bfdbfe;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.homePage .btn--ghost:hover{
    background:var(--home-bg);
    border-color:#93c5fd;
}

.homePage .btn--full{
    width:100%;
}

.homePage .hero{
    padding:56px 0 38px;
    overflow:hidden;
    background:transparent;
}

.homePage .heroLayout{
    display:grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(340px, .9fr);
    gap:28px;
    align-items:stretch;
}

.homePage .heroCopy{
    padding:10px 0;
}

.homePage .heroCopy h1{
    margin:18px 0 16px;
    font-size:clamp(38px, 5.2vw, 66px);
    line-height:1.02;
    letter-spacing:-.04em;
    color:#0a1a44;
    max-width:780px;
}

.homePage .heroCopy p{
    margin:0;
    font-size:18px;
    line-height:1.85;
    color:var(--home-text-soft);
    max-width:760px;
}

.homePage .heroActions{
    margin-top:24px;
}

.homePage .heroStatGrid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
    margin-top:28px;
}

.homePage .heroStat{
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:20px;
    padding:18px;
    box-shadow:var(--home-shadow-soft);
    position:relative;
    overflow:hidden;
}

.homePage .heroStat::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, var(--home-primary) 0%, #60a5fa 100%);
}

.homePage .heroStatIcon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--home-primary-soft) 0%, var(--home-primary-soft-2) 100%);
    border:1px solid #bfdbfe;
    margin-bottom:12px;
}

.homePage .heroStatIcon svg{
    width:22px;
    height:22px;
    stroke:var(--home-primary-dark);
    fill:none;
    stroke-width:2;
}

.homePage .heroStat strong{
    display:block;
    font-size:17px;
    color:#0f2658;
    margin-bottom:8px;
}

.homePage .heroStat span{
    display:block;
    color:var(--home-text-soft);
    line-height:1.7;
    font-size:15px;
}

.homePage .heroVisual{
    position:relative;
    display:flex;
    align-items:stretch;
}

.homePage .heroVisualCard{
    width:100%;
    min-height:100%;
    background:linear-gradient(180deg, var(--home-white) 0%, #f4f9ff 100%);
    border:1px solid var(--home-border);
    border-radius:30px;
    box-shadow:0 28px 60px rgba(37,99,235,.14);
    overflow:hidden;
    position:relative;
}

.homePage .heroVisualCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 100% 0%, rgba(37,99,235,.13), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(37,99,235,.10), transparent 32%);
    pointer-events:none;
}

.homePage .heroVisualTop{
    padding:18px 22px;
    border-bottom:1px solid var(--home-border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--home-white);
    position:relative;
    z-index:2;
}

.homePage .heroVisualTop span{
    font-size:14px;
    font-weight:700;
    color:var(--home-primary-dark);
}

.homePage .heroVisualDots{
    display:flex;
    gap:8px;
}

.homePage .heroVisualDots i{
    width:10px;
    height:10px;
    border-radius:50%;
    display:block;
    background:#bfdbfe;
}

.homePage .heroVisualBody{
    padding:28px 24px 24px;
    position:relative;
    z-index:2;
}

.homePage .verifyCard{
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:24px;
    padding:22px;
    box-shadow:var(--home-shadow-soft);
}

.homePage .verifyShield{
    width:90px;
    height:90px;
    border-radius:24px;
    background:linear-gradient(180deg, var(--home-primary) 0%, var(--home-primary-dark) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
    font-weight:800;
    margin-bottom:18px;
    box-shadow:0 20px 36px rgba(37,99,235,.20);
}

.homePage .verifyCard h3{
    margin:0 0 8px;
    font-size:28px;
    color:#0c2557;
}

.homePage .verifyStatus{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    background:#ecfdf3;
    color:#15803d;
    border:1px solid #bbf7d0;
    font-size:14px;
    font-weight:800;
    margin-bottom:16px;
}

.homePage .verifyStatus::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
}

.homePage .verifyCard p{
    margin:0;
    color:var(--home-text-soft);
    line-height:1.75;
}

.homePage .verifyMiniGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:16px;
}

.homePage .verifyMini{
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:18px;
    padding:16px;
}

.homePage .verifyMini b{
    display:block;
    color:#12306d;
    margin-bottom:6px;
    font-size:15px;
}

.homePage .verifyMini span{
    color:var(--home-text-soft);
    line-height:1.6;
    font-size:14px;
}

.homePage .featureStrip{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px;
}

.homePage .featureStripCard{
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:22px;
    padding:22px;
    box-shadow:var(--home-shadow-soft);
    transition:.25s ease;
}

.homePage .featureStripCard:hover{
    transform:translateY(-4px);
    box-shadow:var(--home-shadow);
}

.homePage .featureStripIcon{
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--home-primary-soft) 0%, var(--home-primary-soft-2) 100%);
    border:1px solid #bfdbfe;
    margin-bottom:14px;
}

.homePage .featureStripIcon svg{
    width:24px;
    height:24px;
    stroke:var(--home-primary-dark);
    fill:none;
    stroke-width:2;
}

.homePage .featureStripCard h3{
    margin:0 0 10px;
    font-size:20px;
    color:#11285e;
}

.homePage .featureStripCard p{
    margin:0;
    color:var(--home-text-soft);
    line-height:1.75;
}

.homePage .splitShowcase{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:24px;
}

.homePage .showcaseCard{
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:28px;
    box-shadow:var(--home-shadow-soft);
    padding:28px;
    position:relative;
    overflow:hidden;
}

.homePage .showcaseCard::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg, var(--home-primary) 0%, #60a5fa 100%);
}

.homePage .showcaseLabel{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border-radius:999px;
    background:var(--home-primary-soft);
    border:1px solid #bfdbfe;
    color:var(--home-primary-dark);
    font-weight:700;
    font-size:13px;
    margin-bottom:18px;
}

.homePage .showcaseLabel i{
    width:10px;
    height:10px;
    border-radius:50%;
    display:block;
    background:var(--home-primary);
}

.homePage .showcaseTop{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:16px;
}

.homePage .showcaseIcon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--home-primary-soft) 0%, var(--home-primary-soft-2) 100%);
    border:1px solid #bfdbfe;
    flex:0 0 58px;
}

.homePage .showcaseIcon svg{
    width:28px;
    height:28px;
    stroke:var(--home-primary-dark);
    fill:none;
    stroke-width:2;
}

.homePage .showcaseCard h3{
    margin:0 0 10px;
    font-size:28px;
    line-height:1.2;
    color:#0e2558;
}

.homePage .showcaseCard p{
    margin:0 0 18px;
    color:var(--home-text-soft);
    line-height:1.8;
    font-size:16px;
}

.homePage .bulletList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:12px;
}

.homePage .bulletList li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#1e293b;
    font-weight:600;
    line-height:1.7;
}

.homePage .bulletList li i{
    width:24px;
    height:24px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.10);
    color:var(--home-primary-dark);
    font-style:normal;
    font-weight:900;
    flex:0 0 24px;
    margin-top:2px;
}

.homePage .showcaseActions{
    margin-top:22px;
}

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

.homePage .processCard{
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:24px;
    padding:24px;
    box-shadow:var(--home-shadow-soft);
    position:relative;
}

.homePage .processNo{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--home-primary) 0%, var(--home-primary-dark) 100%);
    color:#fff;
    font-weight:800;
    font-size:18px;
    margin-bottom:16px;
    box-shadow:0 14px 28px rgba(37,99,235,.18);
}

.homePage .processCard h3{
    margin:0 0 10px;
    font-size:22px;
    color:#10275e;
}

.homePage .processCard p{
    margin:0;
    color:var(--home-text-soft);
    line-height:1.8;
}

.homePage .pricingWrap{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:24px;
    align-items:stretch;
}

.homePage .pricingCard{
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:28px;
    padding:28px;
    box-shadow:var(--home-shadow-soft);
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:100%;
    text-align:left;
}

.homePage .pricingCard::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg, var(--home-primary) 0%, #60a5fa 100%);
}

.homePage .pricingCard::after{
    content:"";
    position:absolute;
    top:-90px;
    right:-90px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 70%);
    pointer-events:none;
}

.homePage .pricingCard--featured{
    background:linear-gradient(180deg, var(--home-white) 0%, #f5f9ff 100%);
    border-color:#93c5fd;
    box-shadow:0 22px 50px rgba(37,99,235,.14);
}

.homePage .pricingBadge{
    position:absolute;
    top:18px;
    right:18px;
    padding:9px 14px;
    border-radius:999px;
    background:linear-gradient(180deg, var(--home-primary) 0%, var(--home-primary-dark) 100%);
    color:#fff;
    font-size:13px;
    font-weight:800;
    box-shadow:0 10px 20px rgba(37,99,235,.16);
    z-index:2;
}

.homePage .pricingTop{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
    padding-right:126px;
}

.homePage .pricingIcon{
    width:56px;
    height:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--home-primary-soft) 0%, var(--home-primary-soft-2) 100%);
    border:1px solid #bfdbfe;
    flex:0 0 56px;
}

.homePage .pricingIcon svg{
    width:28px;
    height:28px;
    stroke:var(--home-primary-dark);
    fill:none;
    stroke-width:2;
}

.homePage .pricingTitleWrap{
    min-width:0;
}

.homePage .pricingTitleWrap h3{
    margin:0 0 8px;
    font-size:30px;
    color:#0f255a;
}

.homePage .pricingTag{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    background:var(--home-primary-soft);
    border:1px solid #bfdbfe;
    color:var(--home-primary-dark);
    font-size:13px;
    font-weight:700;
}

.homePage .pricingPrice{
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin:8px 0 14px;
}

.homePage .pricingAmount{
    font-size:48px;
    line-height:1;
    letter-spacing:-.04em;
    font-weight:800;
    color:#0b1f4d;
}

.homePage .pricingPeriod{
    font-size:17px;
    color:var(--home-text-soft);
    font-weight:700;
    margin-bottom:5px;
}

.homePage .pricingDesc{
    margin:0 0 18px;
    color:var(--home-text-soft);
    line-height:1.8;
    min-height:58px;
}

.homePage .pricingList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:12px;
    flex:1;
}

.homePage .pricingList li{
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:#1e293b;
    font-weight:600;
    line-height:1.7;
}

.homePage .pricingList li i{
    width:24px;
    height:24px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.10);
    color:var(--home-primary-dark);
    font-style:normal;
    font-weight:900;
    flex:0 0 24px;
    margin-top:2px;
}

.homePage .pricingUpgrade{
    margin-top:20px;
    padding:16px;
    border-radius:18px;
    background:var(--home-primary-soft);
    border:1px solid #bfdbfe;
}

.homePage .pricingUpgradePrice{
    display:block;
    font-size:22px;
    font-weight:800;
    color:#0b1f4d;
    margin-bottom:6px;
}

.homePage .pricingUpgradeText{
    display:block;
    color:var(--home-text-soft);
    line-height:1.6;
    font-size:15px;
}

.homePage .pricingAction{
    margin-top:24px;
}

.homePage .pricingFoot{
    margin-top:22px;
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:24px;
    padding:22px;
    box-shadow:var(--home-shadow-soft);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

.homePage .pricingFoot b{
    display:block;
    color:#0f255a;
    margin-bottom:6px;
    font-size:18px;
}

.homePage .pricingFoot span{
    color:var(--home-text-soft);
    line-height:1.7;
}

.homePage .faqGrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
}

.homePage .faqItem{
    background:var(--home-white);
    border:1px solid var(--home-border);
    border-radius:22px;
    padding:22px;
    box-shadow:var(--home-shadow-soft);
}

.homePage .faqItem h3{
    margin:0 0 10px;
    font-size:20px;
    color:#10275e;
}

.homePage .faqItem p{
    margin:0;
    color:var(--home-text-soft);
    line-height:1.8;
}

.homePage .finalCta{
    background:linear-gradient(180deg, var(--home-white) 0%, #f4f9ff 100%);
    border:1px solid var(--home-border);
    border-radius:30px;
    padding:34px;
    box-shadow:var(--home-shadow-soft);
    text-align:center;
}

.homePage .finalCta h2{
    margin:0 0 12px;
    font-size:clamp(30px,4vw,42px);
    color:#0b1f4d;
}

.homePage .finalCta p{
    margin:0 auto;
    max-width:760px;
    color:var(--home-text-soft);
    line-height:1.8;
    font-size:17px;
}

.homePage .finalCta .ctaRow{
    justify-content:center;
    margin-top:24px;
}

html[data-theme="dark"] .homePage .sectionHead h2,
html[data-theme="dark"] .homePage .heroCopy h1,
html[data-theme="dark"] .homePage .heroStat strong,
html[data-theme="dark"] .homePage .verifyCard h3,
html[data-theme="dark"] .homePage .verifyMini b,
html[data-theme="dark"] .homePage .featureStripCard h3,
html[data-theme="dark"] .homePage .showcaseCard h3,
html[data-theme="dark"] .homePage .processCard h3,
html[data-theme="dark"] .homePage .pricingTitleWrap h3,
html[data-theme="dark"] .homePage .pricingAmount,
html[data-theme="dark"] .homePage .pricingUpgradePrice,
html[data-theme="dark"] .homePage .pricingFoot b,
html[data-theme="dark"] .homePage .faqItem h3,
html[data-theme="dark"] .homePage .finalCta h2{
    color:#f8fbff;
}

html[data-theme="dark"] .homePage .heroVisualCard,
html[data-theme="dark"] .homePage .pricingCard--featured,
html[data-theme="dark"] .homePage .finalCta{
    background:linear-gradient(180deg, var(--home-white) 0%, #10213b 100%);
}

html[data-theme="dark"] .homePage .bulletList li,
html[data-theme="dark"] .homePage .pricingList li{
    color:#e5edf8;
}

@media (max-width:1100px){
    .homePage .heroLayout,
    .homePage .splitShowcase,
    .homePage .pricingWrap,
    .homePage .featureStrip,
    .homePage .processGrid,
    .homePage .faqGrid{
        grid-template-columns:1fr;
    }

    .homePage .heroStatGrid{
        grid-template-columns:1fr;
    }

    .homePage .pricingTop{
        padding-right:0;
    }

    .homePage .pricingBadge{
        position:static;
        display:inline-flex;
        margin-bottom:14px;
        align-self:flex-start;
    }
}

@media (max-width:900px){
    .homePage .section{
        padding:60px 0;
    }

    .homePage .verifyMiniGrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    .homePage .container{
        width:min(var(--home-max), calc(100% - 22px));
    }

    .homePage .hero{
        padding:30px 0 20px;
    }

    .homePage .heroCopy h1{
        font-size:36px;
    }

    .homePage .heroCopy p,
    .homePage .sectionHead p,
    .homePage .finalCta p{
        font-size:16px;
    }

    .homePage .btn,
    .homePage .btn--ghost{
        width:100%;
    }

    .siteThemeToggle{
        right:14px;
        bottom:14px;
        min-height:46px;
        padding:10px 13px;
    }

    .homePage .btnRow,
    .homePage .heroActions,
    .homePage .ctaRow{
        flex-direction:column;
    }

    .homePage .heroTopBar{
        align-items:flex-start;
        flex-direction:column;
    }

    .homePage .showcaseCard,
    .homePage .pricingCard,
    .homePage .featureStripCard,
    .homePage .processCard,
    .homePage .faqItem,
    .homePage .finalCta,
    .homePage .pricingFoot,
    .homePage .heroStat,
    .homePage .verifyCard{
        padding:20px;
        border-radius:22px;
    }

    .homePage .pricingAmount{
        font-size:40px;
    }

    .homePage .pricingTitleWrap h3{
        font-size:26px;
    }

    .homePage .showcaseCard h3{
        font-size:24px;
    }
}

/* =========================================================
   CertiChecker How It Works Page Styles
   Scoped to .howPage to avoid clashes with other pages
   ========================================================= */

.howPage{
    --how-primary:#2563eb;
    --how-primary-dark:#1d4ed8;
    --how-primary-soft:#eff6ff;
    --how-primary-soft-2:#dbeafe;
    --how-text:#0f172a;
    --how-text-soft:#475569;
    --how-white:#ffffff;
    --how-bg:#f8fbff;
    --how-bg-alt:#eff6ff;
    --how-border:#dbeafe;
    --how-shadow:0 20px 50px rgba(37,99,235,.10);
    --how-shadow-soft:0 12px 30px rgba(15,23,42,.06);
    --how-radius:24px;
    --how-radius-sm:18px;
    --how-max:1240px;
    color:var(--how-text);
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 26%),
        radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 22%),
        linear-gradient(180deg, var(--how-white) 0%, var(--how-bg) 100%);
}

html[data-theme="dark"] .howPage{
    --how-primary:#60a5fa;
    --how-primary-dark:#3b82f6;
    --how-primary-soft:#0f274a;
    --how-primary-soft-2:#123767;
    --how-text:#e5edf8;
    --how-text-soft:#aab8cc;
    --how-white:#0f1d33;
    --how-bg:#07111f;
    --how-bg-alt:#0b1729;
    --how-border:#1f3658;
    --how-shadow:0 20px 50px rgba(0,0,0,.32);
    --how-shadow-soft:0 12px 30px rgba(0,0,0,.24);
}

.howPage svg path,
.howPage svg rect{
    stroke-linecap:round;
    stroke-linejoin:round;
}

.howPage .container{
    width:min(var(--how-max), calc(100% - 32px));
    margin:0 auto;
}

.howHero{
    padding:56px 0 38px;
    overflow:hidden;
    background:transparent;
}

.howHeroLayout{
    display:grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(340px, .92fr);
    gap:28px;
    align-items:stretch;
}

.howHeroCopy{
    padding:10px 0;
}

.howEyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid #bfdbfe;
    background:var(--how-primary-soft);
    color:var(--how-primary-dark);
    font-size:14px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(37,99,235,.08);
}

.howEyebrow::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--how-primary);
    box-shadow:0 0 0 5px rgba(37,99,235,.12);
}

.howHeroCopy h1{
    margin:18px 0 16px;
    font-size:clamp(38px, 5.2vw, 66px);
    line-height:1.02;
    letter-spacing:-.04em;
    color:#0a1a44;
    max-width:820px;
}

.howHeroCopy p{
    margin:0;
    font-size:18px;
    line-height:1.85;
    color:var(--how-text-soft);
    max-width:760px;
}

.howHeroActions,
.howCtaRow{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

.howHeroStatGrid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
    margin-top:28px;
}

.howHeroStat,
.howFeatureCard,
.howShowcaseCard,
.howProcessCard,
.howStatusCard,
.howTipCard,
.howFaqItem,
.howFinalCta{
    background:var(--how-white);
    border:1px solid var(--how-border);
    box-shadow:var(--how-shadow-soft);
}

.howHeroStat{
    border-radius:20px;
    padding:18px;
    position:relative;
    overflow:hidden;
}

.howHeroStat::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg, var(--how-primary) 0%, #60a5fa 100%);
}

.howHeroStat strong{
    display:block;
    font-size:17px;
    color:#0f2658;
    margin-bottom:8px;
}

.howHeroStat span{
    display:block;
    color:var(--how-text-soft);
    line-height:1.7;
    font-size:15px;
}

.howIconBox{
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--how-primary-soft) 0%, var(--how-primary-soft-2) 100%);
    border:1px solid #bfdbfe;
    margin-bottom:14px;
}

.howIconBox--large{
    width:58px;
    height:58px;
    border-radius:18px;
    flex:0 0 58px;
}

.howIconBox svg{
    width:24px;
    height:24px;
    stroke:var(--how-primary-dark);
    fill:none;
    stroke-width:2;
}

.howIconBox--large svg{
    width:28px;
    height:28px;
}

.howHeroVisual{
    position:relative;
    display:flex;
    align-items:stretch;
}

.howPreviewCard{
    width:100%;
    min-height:100%;
    background:linear-gradient(180deg, var(--how-white) 0%, #f4f9ff 100%);
    border:1px solid var(--how-border);
    border-radius:30px;
    box-shadow:0 28px 60px rgba(37,99,235,.14);
    overflow:hidden;
    position:relative;
}

.howPreviewCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 100% 0%, rgba(37,99,235,.13), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(37,99,235,.10), transparent 32%);
    pointer-events:none;
}

.howPreviewTop{
    padding:18px 22px;
    border-bottom:1px solid var(--how-border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--how-white);
    position:relative;
    z-index:2;
}

.howPreviewTop span{
    font-size:14px;
    font-weight:700;
    color:var(--how-primary-dark);
}

.howPreviewDots{
    display:flex;
    gap:8px;
}

.howPreviewDots i{
    width:10px;
    height:10px;
    border-radius:50%;
    display:block;
    background:#bfdbfe;
}

.howPreviewBody{
    padding:28px 24px 24px;
    position:relative;
    z-index:2;
}

.howVerifyCard{
    background:var(--how-white);
    border:1px solid var(--how-border);
    border-radius:24px;
    padding:22px;
    box-shadow:var(--how-shadow-soft);
}

.howVerifyShield{
    width:90px;
    height:90px;
    border-radius:24px;
    background:linear-gradient(180deg, var(--how-primary) 0%, var(--how-primary-dark) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
    font-weight:800;
    margin-bottom:18px;
    box-shadow:0 20px 36px rgba(37,99,235,.20);
}

.howVerifyCard h2{
    margin:0 0 8px;
    font-size:28px;
    color:#0c2557;
}

.howVerifyStatus{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    background:#ecfdf3;
    color:#15803d;
    border:1px solid #bbf7d0;
    font-size:14px;
    font-weight:800;
    margin-bottom:16px;
}

.howVerifyStatus::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
}

.howVerifyCard p,
.howMiniCard span,
.howFeatureCard p,
.howShowcaseCard p,
.howExtras p,
.howExtraTile span,
.howProcessCard p,
.howStatusCard p,
.howTipCard p,
.howFaqItem p,
.howFinalCta p{
    color:var(--how-text-soft);
    line-height:1.75;
}

.howVerifyCard p{
    margin:0;
}

.howMiniGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:16px;
}

.howMiniCard{
    background:var(--how-white);
    border:1px solid var(--how-border);
    border-radius:18px;
    padding:16px;
}

.howMiniCard b{
    display:block;
    color:#12306d;
    margin-bottom:6px;
    font-size:15px;
}

.howMiniCard span{
    font-size:14px;
}

.howMiniNavWrap{
    position:sticky;
    top:72px;
    z-index:80;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(219,234,254,.8);
    border-bottom:1px solid rgba(219,234,254,.8);
}

.howMiniNav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:14px 0;
    justify-content:center;
}

.howMiniNav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border-radius:999px;
    background:var(--how-white);
    border:1px solid var(--how-border);
    color:#12306d;
    font-weight:700;
    font-size:14px;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
    transition:.25s ease;
}

.howMiniNav a:hover{
    background:var(--how-primary-soft);
    border-color:#93c5fd;
    color:var(--how-primary-dark);
}

.howSection{
    padding:78px 0;
    position:relative;
}

.howSection--soft{
    background:linear-gradient(180deg, var(--how-bg) 0%, var(--how-bg-alt) 100%);
}

.howSectionHead{
    max-width:860px;
    margin:0 auto 34px;
    text-align:center;
}

.howSectionHead h2,
.howFinalCta h2{
    margin:0 0 12px;
    font-size:clamp(30px,4vw,46px);
    line-height:1.1;
    letter-spacing:-.03em;
    color:#0b1f4d;
}

.howSectionHead p,
.howFinalCta p{
    margin:0;
    font-size:17px;
    line-height:1.8;
    color:var(--how-text-soft);
}

.howFeatureGrid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px;
}

.howFeatureCard{
    border-radius:22px;
    padding:22px;
    transition:.25s ease;
}

.howFeatureCard:hover{
    transform:translateY(-4px);
    box-shadow:var(--how-shadow);
}

.howFeatureCard h3,
.howProcessCard h3,
.howStatusCard h3,
.howFaqItem h3{
    margin:0 0 10px;
    font-size:20px;
    color:#11285e;
}

.howFeatureCard p,
.howProcessCard p,
.howStatusCard p,
.howFaqItem p{
    margin:0;
}

.howSplitGrid,
.howTipsGrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:24px;
}

.howShowcaseCard,
.howTipCard{
    border-radius:28px;
    padding:28px;
    position:relative;
    overflow:hidden;
}

.howShowcaseCard::before,
.howTipCard::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg, var(--how-primary) 0%, #60a5fa 100%);
}

.howShowcaseLabel{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border-radius:999px;
    background:var(--how-primary-soft);
    border:1px solid #bfdbfe;
    color:var(--how-primary-dark);
    font-weight:700;
    font-size:13px;
    margin-bottom:18px;
}

.howShowcaseLabel i{
    width:10px;
    height:10px;
    border-radius:50%;
    display:block;
    background:var(--how-primary);
}

.howShowcaseTop{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:16px;
}

.howShowcaseCard h3,
.howTipCard h3{
    margin:0 0 10px;
    font-size:28px;
    line-height:1.2;
    color:#0e2558;
}

.howShowcaseCard p,
.howTipCard p{
    margin:0 0 18px;
    font-size:16px;
}

.howBulletList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:12px;
}

.howBulletList li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#1e293b;
    font-weight:600;
    line-height:1.7;
}

.howBulletList li i{
    width:24px;
    height:24px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.10);
    color:var(--how-primary-dark);
    font-style:normal;
    font-weight:900;
    flex:0 0 24px;
    margin-top:2px;
}

.howCardActions{
    margin-top:22px;
}

.howExtras{
    margin-top:18px;
    padding:18px;
    border-radius:20px;
    border:1px solid rgba(37,99,235,.22);
    background:linear-gradient(180deg, rgba(37,99,235,.08), var(--how-white));
}

.howExtras h4{
    margin:0 0 8px;
    font-size:18px;
    color:#0f255a;
}

.howExtras p{
    margin:0 0 12px;
    font-size:15px;
}

.howExtrasGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.howExtraTile{
    background:var(--how-white);
    border:1px solid var(--how-border);
    border-radius:16px;
    padding:14px;
    box-shadow:var(--how-shadow-soft);
}

.howExtraTile strong{
    display:block;
    color:#10275e;
    margin-bottom:6px;
    font-size:14px;
}

.howExtraTile span{
    display:block;
    font-size:13px;
    font-weight:700;
}

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

.howProcessCard{
    border-radius:24px;
    padding:24px;
}

.howProcessNo{
    width:48px;
    height:48px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, var(--how-primary) 0%, var(--how-primary-dark) 100%);
    color:#fff;
    font-weight:800;
    font-size:18px;
    margin-bottom:16px;
    box-shadow:0 14px 28px rgba(37,99,235,.18);
}

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

.howStatusCard{
    border-radius:24px;
    padding:24px;
}

.howStatusPill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    margin-bottom:16px;
}

.howStatusPill--valid{
    background:#ecfdf3;
    color:#15803d;
    border:1px solid #bbf7d0;
}

.howStatusPill--expired{
    background:#fff7ed;
    color:#c2410c;
    border:1px solid #fed7aa;
}

.howStatusPill--revoked{
    background:#fef2f2;
    color:#b91c1c;
    border:1px solid #fecaca;
}

.howFaqGrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
}

.howFaqItem{
    border-radius:22px;
    padding:22px;
}

.howFinalCta{
    border-radius:30px;
    padding:34px;
    text-align:center;
    background:linear-gradient(180deg, var(--how-white) 0%, #f4f9ff 100%);
}

.howFinalCta p{
    max-width:760px;
    margin:0 auto;
}

.howFinalCta .howCtaRow{
    justify-content:center;
}

html[data-theme="dark"] .howPage .howHeroCopy h1,
html[data-theme="dark"] .howPage .howHeroStat strong,
html[data-theme="dark"] .howPage .howVerifyCard h2,
html[data-theme="dark"] .howPage .howMiniCard b,
html[data-theme="dark"] .howPage .howSectionHead h2,
html[data-theme="dark"] .howPage .howFeatureCard h3,
html[data-theme="dark"] .howPage .howShowcaseCard h3,
html[data-theme="dark"] .howPage .howExtras h4,
html[data-theme="dark"] .howPage .howExtraTile strong,
html[data-theme="dark"] .howPage .howProcessCard h3,
html[data-theme="dark"] .howPage .howStatusCard h3,
html[data-theme="dark"] .howPage .howTipCard h3,
html[data-theme="dark"] .howPage .howFaqItem h3,
html[data-theme="dark"] .howPage .howFinalCta h2{
    color:#f8fbff;
}

html[data-theme="dark"] .howPage .howPreviewCard,
html[data-theme="dark"] .howPage .howFinalCta,
html[data-theme="dark"] .howPage .howExtras{
    background:linear-gradient(180deg, var(--how-white) 0%, #10213b 100%);
}

html[data-theme="dark"] .howPage .howBulletList li{
    color:#e5edf8;
}

html[data-theme="dark"] .howPage .howMiniNavWrap{
    background:rgba(7,17,31,.88);
    border-color:#1f3658;
}

@media (max-width:1100px){
    .howHeroLayout,
    .howFeatureGrid,
    .howSplitGrid,
    .howProcessGrid,
    .howStatusGrid,
    .howTipsGrid,
    .howFaqGrid{
        grid-template-columns:1fr;
    }

    .howHeroStatGrid{
        grid-template-columns:1fr 1fr;
    }

    .howExtrasGrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:900px){
    .howSection{
        padding:60px 0;
    }

    .howMiniGrid,
    .howHeroStatGrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:768px){
    .howMiniNavWrap{
        top:66px;
    }
}

@media (max-width:640px){
    .howPage .container{
        width:min(var(--how-max), calc(100% - 22px));
    }

    .howHero{
        padding:30px 0 20px;
    }

    .howHeroCopy h1{
        font-size:36px;
    }

    .howHeroCopy p,
    .howSectionHead p,
    .howFinalCta p{
        font-size:16px;
    }

    .howPage .btn,
    .howPage .btn--ghost{
        width:100%;
    }

    .howHeroActions,
    .howCtaRow{
        flex-direction:column;
    }

    .howShowcaseCard,
    .howFeatureCard,
    .howProcessCard,
    .howStatusCard,
    .howFaqItem,
    .howTipCard,
    .howFinalCta,
    .howHeroStat,
    .howVerifyCard{
        padding:20px;
        border-radius:22px;
    }

    .howShowcaseCard h3,
    .howTipCard h3{
        font-size:24px;
    }

    .howMiniNav{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:12px;
    }

    .howMiniNav a{
        white-space:nowrap;
    }
}


/* =========================================================
   CertiChecker Pricing Page Styles
   Scoped to .pricingPage to avoid clashes with other pages
   ========================================================= */

.pricingPage{
    --pricing-blue:#2563eb;
    --pricing-blue-2:#1d4ed8;
    --pricing-blue-soft:#eff6ff;
    --pricing-blue-soft-2:#dbeafe;
    --pricing-ink:#0f172a;
    --pricing-text:#1e293b;
    --pricing-muted:#475569;
    --pricing-border:#dbeafe;
    --pricing-card:#ffffff;
    --pricing-bg:#f8fbff;
    --pricing-shadow:0 20px 50px rgba(37,99,235,.10);
    --pricing-shadow-soft:0 12px 28px rgba(15,23,42,.06);
    --pricing-radius:28px;
    --pricing-green:#16a34a;
    --pricing-max:1280px;
    color:var(--pricing-text);
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 24%),
        radial-gradient(circle at top right, rgba(37,99,235,.06), transparent 20%),
        linear-gradient(180deg,var(--pricing-card) 0%,var(--pricing-bg) 100%);
}

html[data-theme="dark"] .pricingPage{
    --pricing-blue:#60a5fa;
    --pricing-blue-2:#3b82f6;
    --pricing-blue-soft:#0f274a;
    --pricing-blue-soft-2:#123767;
    --pricing-ink:#f8fbff;
    --pricing-text:#e5edf8;
    --pricing-muted:#aab8cc;
    --pricing-border:#1f3658;
    --pricing-card:#0f1d33;
    --pricing-bg:#07111f;
    --pricing-shadow:0 20px 50px rgba(0,0,0,.32);
    --pricing-shadow-soft:0 12px 30px rgba(0,0,0,.24);
}

.pricingPage .container{
    width:min(var(--pricing-max), calc(100% - 30px));
    margin:0 auto;
}

.pricingHero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(37,99,235,.14), transparent 18%),
        radial-gradient(circle at 84% 14%, rgba(29,78,216,.10), transparent 18%),
        linear-gradient(180deg,var(--pricing-bg) 0%,var(--pricing-card) 100%);
    padding:54px 0 34px;
}

.pricingBadge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    background:var(--pricing-blue-soft);
    color:var(--pricing-blue-2);
    border:1px solid rgba(37,99,235,.16);
    box-shadow:0 10px 22px rgba(37,99,235,.08);
    font-weight:800;
}

.pricingBadge::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--pricing-blue);
    box-shadow:0 0 0 5px rgba(37,99,235,.12);
}

.pricingHero h1{
    color:var(--pricing-ink);
    font-size:clamp(2.5rem, 5vw, 4.2rem);
    line-height:1.02;
    letter-spacing:-.04em;
    margin:18px 0 16px;
    max-width:920px;
}

.pricingLead{
    color:var(--pricing-muted);
    max-width:900px;
    line-height:1.8;
    font-size:18px;
    margin:0;
}

.pricingTrustRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.pricingTrustPill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(37,99,235,.14);
    background:var(--pricing-card);
    box-shadow:0 8px 18px rgba(2,6,23,.04);
    color:var(--pricing-ink);
    font-weight:800;
    font-size:14px;
}

.pricingHeroStats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
    margin-top:24px;
}

.pricingHeroStat,
.pricingInfoCard,
.pricingPlansHeader,
.pricingPriceCard,
.pricingNoteCard,
.pricingFaqItem,
.pricingCtaPanel{
    background:var(--pricing-card);
    border:1px solid var(--pricing-border);
    box-shadow:var(--pricing-shadow-soft);
}

.pricingHeroStat{
    border-radius:20px;
    padding:18px;
}

.pricingHeroStat strong{
    display:block;
    font-size:24px;
    color:var(--pricing-ink);
    margin-bottom:6px;
}

.pricingHeroStat span{
    display:block;
    color:var(--pricing-muted);
    font-weight:700;
    line-height:1.55;
    font-size:14px;
}

.pricingSection{
    padding:78px 0;
}

.pricingSection--soft{
    background:linear-gradient(180deg,var(--pricing-bg) 0%,var(--pricing-blue-soft) 100%);
}

.pricingInfoSplit{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:18px;
    align-items:stretch;
}

.pricingInfoCard{
    border-radius:24px;
    padding:24px;
}

.pricingInfoCard h2,
.pricingInfoCard h3{
    margin:0 0 10px;
    color:var(--pricing-ink);
}

.pricingInfoCard p{
    margin:0;
    color:var(--pricing-muted);
    line-height:1.8;
}

.pricingSpacerText{
    margin-top:12px!important;
}

.pricingInfoAction{
    margin-top:16px;
}

.pricingMiniList{
    display:grid;
    gap:12px;
    margin-top:18px;
}

.pricingMiniListItem{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color:var(--pricing-muted);
    font-weight:700;
    line-height:1.6;
}

.pricingMiniTick,
.pricingTick{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.10);
    color:var(--pricing-blue);
    font-weight:900;
    flex:0 0 auto;
}

.pricingMiniTick{
    width:22px;
    height:22px;
    border-radius:8px;
    border:1px solid rgba(37,99,235,.18);
    margin-top:1px;
}

.pricingSectionHead{
    max-width:900px;
    margin:0 auto 30px;
    text-align:center;
}

.pricingSectionHead h2,
.pricingCtaPanel h2{
    margin:0 0 12px;
    font-size:clamp(30px,4vw,46px);
    line-height:1.1;
    letter-spacing:-.03em;
    color:#0b1f4d;
}

.pricingSectionHead p,
.pricingCtaPanel p{
    margin:0;
    font-size:17px;
    line-height:1.8;
    color:var(--pricing-muted);
}

.pricingSwitcherWrap{
    display:flex;
    justify-content:center;
    margin-bottom:26px;
}

.pricingSwitcher{
    display:inline-grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    background:var(--pricing-card);
    border:1px solid var(--pricing-border);
    border-radius:999px;
    padding:8px;
    box-shadow:var(--pricing-shadow-soft);
}

.pricingSwitchBtn{
    appearance:none;
    border:none;
    background:transparent;
    color:var(--pricing-muted);
    font-family:inherit;
    font-size:15px;
    font-weight:800;
    padding:14px 22px;
    border-radius:999px;
    cursor:pointer;
    transition:all .18s ease;
    min-width:160px;
}

.pricingSwitchBtn.is-active{
    background:linear-gradient(180deg,var(--pricing-blue),var(--pricing-blue-2));
    color:#fff;
    box-shadow:0 12px 28px rgba(37,99,235,.18);
}

.pricingPlansPanel{
    display:none;
}

.pricingPlansPanel.is-active{
    display:block;
}

.pricingPlansHeader{
    border-radius:24px;
    padding:22px;
    margin-bottom:20px;
}

.pricingPlansHeader h3{
    margin:0 0 8px;
    font-size:30px;
    color:var(--pricing-ink);
}

.pricingPlansHeader p{
    margin:0;
    color:var(--pricing-muted);
    line-height:1.75;
    font-weight:700;
}

.pricingPlansGrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
}

.pricingPriceCard{
    min-width:0;
    display:flex;
    flex-direction:column;
    border-radius:30px;
    padding:24px;
    position:relative;
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pricingPriceCard:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 44px rgba(2,6,23,.10);
}

.pricingPriceCard--featured{
    border-color:#9fc0ff;
    box-shadow:0 24px 50px rgba(37,99,235,.16);
    background:linear-gradient(180deg,var(--pricing-card) 0%,var(--pricing-bg) 100%);
}

.pricingPlanBadgeRow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
    min-height:40px;
    align-items:flex-start;
}

.pricingPlanBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 14px;
    border-radius:999px;
    background:var(--pricing-blue-soft);
    color:var(--pricing-blue-2);
    border:1px solid #c8dbff;
    font-weight:800;
    font-size:13px;
    line-height:1;
}

.pricingPlanBadge--solid{
    background:linear-gradient(90deg,var(--pricing-blue),var(--pricing-blue-2));
    color:#fff;
    border:none;
}

.pricingPlanTitle{
    margin:0 0 10px;
    font-size:32px;
    line-height:1.05;
    letter-spacing:-.03em;
    color:#0b1f4d;
}

.pricingPlanPrice{
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin:6px 0 16px;
}

.pricingPlanAmount{
    font-size:60px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.05em;
    color:#071b4d;
}

.pricingPlanPeriod{
    font-size:18px;
    line-height:1.3;
    color:var(--pricing-muted);
    font-weight:700;
    padding-bottom:8px;
}

.pricingPlanDesc{
    margin:0 0 18px;
    color:var(--pricing-muted);
    line-height:1.7;
    font-weight:700;
    font-size:16px;
    min-height:82px;
}

.pricingPlanList{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:12px;
    flex:1;
}

.pricingPlanList li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    border:1px solid #e5eefc;
    background:var(--pricing-card);
    border-radius:18px;
    color:#334155;
    line-height:1.6;
    font-weight:700;
    min-width:0;
    word-break:break-word;
}

.pricingTick{
    width:24px;
    height:24px;
    border-radius:50%;
    margin-top:1px;
}

.pricingPlanAction{
    margin-top:18px;
}

.pricingPlanFine{
    margin:12px 0 0;
    color:var(--pricing-muted);
    font-weight:700;
    line-height:1.6;
    text-align:center;
    font-size:14px;
}

.pricingComparisonWrap{
    margin-top:22px;
    border:1px solid var(--pricing-border);
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--pricing-shadow-soft);
    background:var(--pricing-card);
}

.pricingComparisonHead,
.pricingComparisonRow{
    display:grid;
    grid-template-columns:1.6fr repeat(7,1fr);
}

.pricingComparisonHead{
    background:linear-gradient(180deg,var(--pricing-bg),var(--pricing-card));
    border-bottom:1px solid var(--pricing-border);
}

.pricingComparisonHead div,
.pricingComparisonRow div{
    padding:16px 14px;
    font-size:14px;
}

.pricingComparisonHead div{
    font-weight:900;
    color:var(--pricing-ink);
}

.pricingComparisonRow{
    border-bottom:1px solid rgba(2,6,23,.06);
}

.pricingComparisonRow:last-child{
    border-bottom:none;
}

.pricingComparisonLabel{
    font-weight:800;
    color:var(--pricing-ink);
    background:var(--pricing-bg);
}

.pricingComparisonCell{
    color:var(--pricing-muted);
    font-weight:700;
    text-align:center;
}

.pricingComparisonCell.pricingYes{
    color:var(--pricing-green);
    font-weight:900;
}

.pricingComparisonCell.pricingHighlight{
    background:rgba(37,99,235,.06);
}

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

.pricingNoteCard,
.pricingFaqItem{
    border-radius:22px;
    padding:22px;
}

.pricingNoteCard h3,
.pricingFaqItem h3{
    margin:0 0 8px;
    color:var(--pricing-ink);
    font-size:20px;
}

.pricingNoteCard p,
.pricingFaqItem p{
    margin:0;
    color:var(--pricing-muted);
    line-height:1.75;
}

.pricingFaqGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.pricingCtaPanel{
    text-align:center;
    border-radius:30px;
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 24%),
        linear-gradient(180deg,var(--pricing-card),var(--pricing-bg));
    box-shadow:var(--pricing-shadow);
    padding:36px 24px;
}

.pricingCtaPanel p{
    max-width:760px;
    margin:0 auto;
}

.pricingCtaActions{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:18px;
}

html[data-theme="dark"] .pricingPage .pricingSectionHead h2,
html[data-theme="dark"] .pricingPage .pricingCtaPanel h2,
html[data-theme="dark"] .pricingPage .pricingPlanTitle,
html[data-theme="dark"] .pricingPage .pricingPlanAmount{
    color:#f8fbff;
}

html[data-theme="dark"] .pricingPage .pricingPlanList li{
    color:#e5edf8;
    border-color:#1f3658;
}

@media (max-width:1200px){
    .pricingComparisonWrap{
        overflow-x:auto;
    }

    .pricingComparisonHead,
    .pricingComparisonRow{
        min-width:1180px;
    }
}

@media (max-width:1100px){
    .pricingHeroStats,
    .pricingInfoSplit,
    .pricingNoteGrid,
    .pricingFaqGrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:820px){
    .pricingPlansGrid{
        grid-template-columns:1fr;
    }

    .pricingPlanDesc,
    .pricingPlanBadgeRow{
        min-height:auto;
    }
}

@media (max-width:520px){
    .pricingPage .container{
        width:min(var(--pricing-max), calc(100% - 22px));
    }

    .pricingHero{
        padding:34px 0 22px;
    }

    .pricingLead{
        font-size:16px;
    }

    .pricingCtaActions a,
    .pricingPage .btn{
        width:100%;
    }

    .pricingPlanAmount{
        font-size:48px;
    }

    .pricingPlanTitle{
        font-size:28px;
    }

    .pricingPriceCard,
    .pricingInfoCard,
    .pricingPlansHeader,
    .pricingNoteCard,
    .pricingFaqItem,
    .pricingCtaPanel{
        padding:20px;
        border-radius:22px;
    }

    .pricingSwitchBtn{
        min-width:132px;
        padding:13px 18px;
    }
}




/* =========================================================
   CertiChecker Verify Page Styles
   Scoped to .verifyPage to avoid clashes with other pages
   ========================================================= */

.verifyPage{
    --verify-blue:#2563eb;
    --verify-blue-2:#1d4ed8;
    --verify-blue-soft:#eff6ff;
    --verify-blue-soft-2:#dbeafe;
    --verify-ink:#0f172a;
    --verify-text:#1e293b;
    --verify-muted:#475569;
    --verify-border:#dbeafe;
    --verify-card:#ffffff;
    --verify-soft:#f8fbff;
    --verify-shadow:0 18px 44px rgba(2,6,23,.08);
    --verify-shadow-soft:0 12px 30px rgba(15,23,42,.06);
    --verify-green:#16a34a;
    --verify-amber:#d97706;
    --verify-red:#dc2626;
    --verify-max:1280px;
    color:var(--verify-text);
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 22%),
        radial-gradient(circle at top right, rgba(37,99,235,.06), transparent 20%),
        linear-gradient(180deg,var(--verify-card) 0%,var(--verify-soft) 100%);
}

html[data-theme="dark"] .verifyPage{
    --verify-blue:#60a5fa;
    --verify-blue-2:#3b82f6;
    --verify-blue-soft:#0f274a;
    --verify-blue-soft-2:#123767;
    --verify-ink:#f8fbff;
    --verify-text:#e5edf8;
    --verify-muted:#aab8cc;
    --verify-border:#1f3658;
    --verify-card:#0f1d33;
    --verify-soft:#07111f;
    --verify-shadow:0 18px 44px rgba(0,0,0,.32);
    --verify-shadow-soft:0 12px 30px rgba(0,0,0,.24);
}

.verifyPage .container{
    width:min(var(--verify-max), calc(100% - 28px));
    margin:0 auto;
}

.verifyHero{
    padding:42px 0 30px;
    overflow:hidden;
}

.verifyIntro{
    text-align:center;
    max-width:900px;
    margin:0 auto 26px;
}

.verifyBadge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(37,99,235,.10);
    border:1px solid rgba(37,99,235,.18);
    color:var(--verify-blue);
    font-weight:900;
    font-size:12px;
    letter-spacing:.2px;
    text-transform:uppercase;
    box-shadow:0 8px 18px rgba(37,99,235,.08);
}

.verifyDot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--verify-blue);
    display:inline-block;
}

.verifyIntro h1{
    margin:16px 0 12px;
    font-size:clamp(2.4rem, 5vw, 4.1rem);
    line-height:1.02;
    letter-spacing:-.04em;
    color:var(--verify-ink);
}

.verifyIntro p{
    margin:0 auto;
    max-width:800px;
    color:var(--verify-muted);
    line-height:1.85;
    font-size:18px;
    font-weight:600;
}

.verifyTopPills{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.verifyTopPills span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(37,99,235,.14);
    background:var(--verify-card);
    box-shadow:0 8px 18px rgba(2,6,23,.04);
    color:var(--verify-ink);
    font-weight:800;
    font-size:14px;
}

.verifyWrap{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:20px;
    align-items:start;
}

.verifyCardPanel{
    position:relative;
    overflow:hidden;
    background:var(--verify-card);
    border:1px solid var(--verify-border);
    border-radius:30px;
    padding:24px;
    box-shadow:var(--verify-shadow);
}

.verifyCardGlow{
    position:absolute;
    top:-56px;
    right:-56px;
    width:170px;
    height:170px;
    background:radial-gradient(circle, rgba(37,99,235,.12), rgba(37,99,235,0) 72%);
    pointer-events:none;
}

.verifyKicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:var(--verify-blue-soft);
    border:1px solid #cfe0ff;
    color:var(--verify-blue);
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.2px;
}

.verifyCardPanel h2{
    margin:14px 0 8px;
    font-size:30px;
    line-height:1.08;
    letter-spacing:-.03em;
    color:var(--verify-ink);
}

.verifyCardLead,
.verifyTipText{
    margin:0;
    color:var(--verify-muted);
    font-weight:700;
    line-height:1.75;
}

.verifyForm{
    margin-top:14px;
}

.verifyField{
    display:block;
    margin-top:16px;
}

.verifyField span{
    display:block;
    font-weight:900;
    margin-bottom:8px;
    color:var(--verify-ink);
    font-size:14px;
}

.verifyInput{
    width:100%;
    padding:16px 16px;
    border-radius:16px;
    border:1px solid var(--verify-border);
    outline:none;
    background:var(--verify-card);
    color:var(--verify-ink);
    font-weight:700;
    font-size:15px;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.verifyInput::placeholder{
    color:rgba(71,85,105,.78);
    font-weight:700;
}

.verifyInput:focus{
    border-color:rgba(37,99,235,.55);
    box-shadow:0 0 0 4px rgba(37,99,235,.14);
}

.verifyBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 16px;
    border-radius:16px;
    font-weight:900;
    text-decoration:none;
    border:1px solid rgba(37,99,235,.35);
    cursor:pointer;
    transition:transform .06s ease, background .2s ease, border-color .2s ease, filter .2s ease, box-shadow .2s ease;
    font-family:inherit;
    font-size:14px;
}

.verifyBtn:active{
    transform:translateY(1px);
}

.verifyBtn--primary{
    background:var(--verify-blue);
    color:#fff;
    border-color:var(--verify-blue);
    box-shadow:0 12px 28px rgba(37,99,235,.20);
}

.verifyBtn--primary:hover{
    background:var(--verify-blue-2);
    border-color:var(--verify-blue-2);
}

.verifyBtn--ghost{
    background:var(--verify-card);
    color:var(--verify-blue);
}

.verifyBtn--ghost:hover{
    background:rgba(37,99,235,.06);
    border-color:rgba(37,99,235,.55);
}

.verifyBtn--full{
    width:100%;
    margin-top:14px;
}

.verifyHelperStrip{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.verifyHelperStrip span{
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding:9px 13px;
    border-radius:999px;
    background:var(--verify-card);
    border:1px solid #e3eefc;
    font-weight:900;
    font-size:13px;
    color:var(--verify-ink);
    box-shadow:0 8px 18px rgba(2,6,23,.03);
}

.verifyHelperStrip i{
    width:22px;
    height:22px;
    border-radius:10px;
    background:rgba(37,99,235,.10);
    border:1px solid rgba(37,99,235,.18);
    color:var(--verify-blue);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-style:normal;
    font-weight:900;
}

.verifyTipText{
    margin-top:12px;
}

.verifyQuickHelp,
.verifyTrustBar,
.verifyInfoGrid,
.verifyStepsGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:18px;
}

.verifyQuickHelp div,
.verifyTrustBar div,
.verifyInfoGrid div,
.verifyStepsGrid div{
    border:1px solid rgba(2,6,23,.08);
    border-radius:18px;
    background:var(--verify-soft);
    padding:16px;
}

.verifyQuickHelp strong,
.verifyTrustBar strong,
.verifyInfoGrid h3,
.verifyStepsGrid h3{
    display:block;
    color:var(--verify-ink);
    margin:0 0 6px;
    font-size:14px;
}

.verifyQuickHelp span,
.verifyTrustBar span,
.verifyInfoGrid p,
.verifyStepsGrid p{
    display:block;
    color:var(--verify-muted);
    font-size:13px;
    line-height:1.6;
    font-weight:700;
    margin:0;
}

.verifyIssuerBand{
    margin-top:18px;
    padding:18px;
    border-radius:22px;
    border:1px solid rgba(37,99,235,.22);
    background:linear-gradient(180deg, rgba(37,99,235,.08), var(--verify-card));
}

.verifyIssuerBand h3{
    margin:0 0 8px;
    color:var(--verify-ink);
    font-size:24px;
    line-height:1.2;
}

.verifyIssuerBand p{
    margin:0;
    color:var(--verify-muted);
    font-weight:700;
    line-height:1.7;
}

.verifyIssuerGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:14px;
}

.verifyIssuerGrid div{
    border:1px solid rgba(2,6,23,.10);
    border-radius:18px;
    background:var(--verify-card);
    padding:16px;
}

.verifyIssuerGrid b{
    display:block;
    margin-bottom:6px;
    color:var(--verify-ink);
    font-size:15px;
}

.verifyIssuerGrid span{
    font-weight:800;
    color:var(--verify-muted);
    font-size:13px;
    line-height:1.6;
}

.verifyActionsRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.verifyActionsRow a{
    flex:1 1 210px;
}

.verifyActionsRow--center{
    justify-content:center;
}

.verifyResultTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    flex-wrap:wrap;
}

.verifyResultTitle{
    font-weight:900;
    color:var(--verify-ink);
    font-size:22px;
    margin:0;
}

.verifyResultSub{
    margin-top:6px;
    color:var(--verify-muted);
    font-weight:700;
    line-height:1.55;
}

.verifyStatusPill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 14px;
    border-radius:999px;
    font-weight:900;
    font-size:13px;
    border:1px solid rgba(2,6,23,.10);
    white-space:nowrap;
}

.verifyStatusPill::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
    background:currentColor;
    opacity:.9;
}

.verifyPage .status--valid{
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.24);
    color:#166534;
}

.verifyPage .status--expired{
    background:rgba(245,158,11,.14);
    border-color:rgba(245,158,11,.26);
    color:#7c4a00;
}

.verifyPage .status--revoked{
    background:rgba(239,68,68,.14);
    border-color:rgba(239,68,68,.26);
    color:#7f1d1d;
}

.verifyPage .status--neutral{
    background:rgba(37,99,235,.10);
    border-color:rgba(37,99,235,.20);
    color:var(--verify-blue);
}

.verifyStateBox{
    margin-top:12px;
    padding:16px;
    border-radius:18px;
    border:1px solid #e3eefc;
    background:linear-gradient(180deg,var(--verify-card),var(--verify-soft));
    color:var(--verify-muted);
    font-weight:700;
    line-height:1.7;
}

.verifyResultList{
    display:grid;
    gap:12px;
    margin-top:14px;
}

.verifyResultList div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:15px 16px;
    border-radius:18px;
    background:var(--verify-soft);
    border:1px solid #e5eefc;
    align-items:flex-start;
}

.verifyResultList span{
    color:var(--verify-muted);
    font-weight:800;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.verifyResultList strong{
    color:var(--verify-ink);
    font-weight:900;
    text-align:right;
    max-width:62%;
    line-height:1.45;
}

.verifyNote{
    margin-top:12px;
    padding:14px 14px;
    border-radius:16px;
    border:1px solid rgba(2,6,23,.10);
    background:var(--verify-card);
    font-weight:800;
    color:var(--verify-muted);
    line-height:1.65;
}

.verifyNote a{
    font-weight:1000;
    color:var(--verify-blue);
    text-decoration:none;
}

.verifyNote--bad{
    border-color:rgba(239,68,68,.30);
    background:rgba(239,68,68,.06);
    color:#7f1d1d;
}

.verifyNote--warn{
    border-color:rgba(245,158,11,.35);
    background:rgba(245,158,11,.07);
    color:#7c4a00;
}

.verifySubSection{
    padding:16px 0 30px;
}

.verifySubSection h2{
    margin:0 0 8px;
    font-size:clamp(28px,4vw,40px);
    line-height:1.1;
    color:#0b1f4d;
}

.verifySectionLead{
    margin:0;
    color:var(--verify-muted);
    font-weight:700;
    line-height:1.75;
    max-width:820px;
}

.verifyInfoGrid{
    gap:16px;
    margin-top:20px;
}

.verifyInfoGrid div,
.verifyStepsGrid div{
    background:var(--verify-card);
    border:1px solid var(--verify-border);
    border-radius:22px;
    padding:20px;
    box-shadow:var(--verify-shadow-soft);
}

.verifyInfoGrid h3,
.verifyStepsGrid h3{
    font-size:20px;
    margin:0 0 8px;
}

.verifyInfoGrid p,
.verifyStepsGrid p{
    font-size:15px;
    line-height:1.7;
}

.verifyStepsGrid{
    gap:16px;
    margin-top:20px;
}

.verifyStepsGrid div{
    position:relative;
    overflow:hidden;
}

.verifyStepsGrid div::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,var(--verify-blue),#60a5fa);
}

.verifyStepsGrid span{
    width:42px;
    height:42px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,var(--verify-blue),var(--verify-blue-2));
    color:#fff;
    font-weight:900;
    font-size:16px;
    box-shadow:0 12px 26px rgba(37,99,235,.16);
    margin-bottom:14px;
}

.verifyBottomCta{
    margin-top:26px;
    background:linear-gradient(180deg,var(--verify-card),var(--verify-soft));
    border:1px solid var(--verify-border);
    border-radius:28px;
    padding:28px;
    box-shadow:var(--verify-shadow-soft);
    text-align:center;
}

.verifyBottomCta h2{
    margin:0 0 10px;
    color:#0b1f4d;
    font-size:clamp(28px,4vw,38px);
}

.verifyBottomCta p{
    margin:0 auto;
    max-width:760px;
    color:var(--verify-muted);
    line-height:1.8;
    font-weight:700;
}

html[data-theme="dark"] .verifyPage .verifyIntro h1,
html[data-theme="dark"] .verifyPage .verifyCardPanel h2,
html[data-theme="dark"] .verifyPage .verifyResultTitle,
html[data-theme="dark"] .verifyPage .verifyIssuerBand h3,
html[data-theme="dark"] .verifyPage .verifySubSection h2,
html[data-theme="dark"] .verifyPage .verifyBottomCta h2{
    color:#f8fbff;
}

html[data-theme="dark"] .verifyPage .verifyIssuerBand,
html[data-theme="dark"] .verifyPage .verifyBottomCta{
    background:linear-gradient(180deg,var(--verify-card),#10213b);
}

html[data-theme="dark"] .verifyPage .verifyResultList div,
html[data-theme="dark"] .verifyPage .verifyQuickHelp div,
html[data-theme="dark"] .verifyPage .verifyTrustBar div,
html[data-theme="dark"] .verifyPage .verifyInfoGrid div,
html[data-theme="dark"] .verifyPage .verifyStepsGrid div,
html[data-theme="dark"] .verifyPage .verifyIssuerGrid div{
    border-color:#1f3658;
}

@media (max-width:1100px){
    .verifyWrap,
    .verifyQuickHelp,
    .verifyTrustBar,
    .verifyInfoGrid,
    .verifyStepsGrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:820px){
    .verifyIssuerGrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    .verifyResultList div{
        flex-direction:column;
    }

    .verifyResultList strong{
        text-align:left;
        max-width:100%;
    }

    .verifyActionsRow a{
        flex:1 1 100%;
    }

    .verifyCardPanel{
        padding:20px;
        border-radius:24px;
    }

    .verifyIntro h1{
        font-size:36px;
    }

    .verifyIntro p{
        font-size:16px;
    }
}



/* =========================================================
   CertiChecker Login Page Styles
   Scoped to .loginPage to avoid clashes with other pages
   ========================================================= */

.loginPage{
    --login-blue:#2563eb;
    --login-blue-2:#1d4ed8;
    --login-blue-soft:#eff6ff;
    --login-ink:#0f172a;
    --login-muted:#475569;
    --login-border:rgba(2,6,23,.10);
    --login-card:#ffffff;
    --login-soft:rgba(2,6,23,.04);
    --login-bg:#ffffff;
    --login-shadow:0 18px 46px rgba(2,6,23,.10);
    --login-shadow-soft:0 12px 30px rgba(15,23,42,.06);
    --login-max:1120px;
    color:var(--login-ink);
    background:
        radial-gradient(900px 380px at 10% 0%, rgba(37,99,235,.10), transparent 55%),
        radial-gradient(900px 380px at 90% 10%, rgba(59,130,246,.08), transparent 60%),
        var(--login-bg);
}

html[data-theme="dark"] .loginPage{
    --login-blue:#60a5fa;
    --login-blue-2:#3b82f6;
    --login-blue-soft:#0f274a;
    --login-ink:#f8fbff;
    --login-muted:#aab8cc;
    --login-border:#1f3658;
    --login-card:#0f1d33;
    --login-soft:#07111f;
    --login-bg:#07111f;
    --login-shadow:0 18px 46px rgba(0,0,0,.35);
    --login-shadow-soft:0 12px 30px rgba(0,0,0,.24);
}

.loginPage .container{
    width:min(var(--login-max), calc(100% - 40px));
    margin:0 auto;
}

.loginHero{
    padding:56px 0 10px;
}

.loginBadge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(37,99,235,.10);
    border:1px solid rgba(37,99,235,.18);
    color:var(--login-blue);
    font-weight:900;
}

.loginBadge::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--login-blue);
    box-shadow:0 0 0 5px rgba(37,99,235,.12);
}

.loginHero h1{
    margin:14px 0 10px;
    font-size:clamp(34px,4vw,52px);
    line-height:1.05;
    letter-spacing:-.03em;
    color:var(--login-ink);
}

.loginLead{
    margin:0;
    color:var(--login-muted);
    font-size:16px;
    line-height:1.6;
    max-width:60ch;
    font-weight:700;
}

.loginTrustRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.loginTrustRow span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--login-border);
    background:var(--login-card);
    font-weight:900;
    font-size:13px;
    color:var(--login-ink);
}

.loginTrustRow i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--login-blue);
    display:inline-block;
}

.loginSection{
    padding:18px 0 56px;
}

.loginWrap{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:18px;
    align-items:stretch;
}

.loginCard{
    background:var(--login-card);
    border:1px solid var(--login-border);
    border-radius:22px;
    padding:18px;
    box-shadow:var(--login-shadow);
}

.loginCard h2{
    margin:0 0 6px;
    color:var(--login-ink);
}

.loginMuted{
    color:var(--login-muted);
    font-weight:700;
    margin:0;
    line-height:1.6;
}

.loginStrong{
    font-weight:800;
}

.loginMsg{
    margin-top:12px;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--login-border);
    background:var(--login-card);
    font-weight:800;
    color:var(--login-muted);
    line-height:1.6;
}

.loginMsg b{
    color:var(--login-ink);
}

.loginMsg--error{
    border-color:rgba(239,68,68,.26);
    background:rgba(239,68,68,.07);
    color:#7f1d1d;
}

.loginMsg--success{
    border-color:rgba(16,185,129,.26);
    background:rgba(16,185,129,.08);
    color:#065f46;
}

.loginMsgAction{
    margin-top:8px;
}

.loginForm{
    margin-top:10px;
}

.loginField{
    display:block;
    margin-top:12px;
}

.loginField span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-weight:1000;
    color:var(--login-ink);
    margin-bottom:7px;
}

.loginInput{
    width:100%;
    padding:14px 14px;
    border-radius:14px;
    border:1px solid var(--login-border);
    outline:none;
    background:var(--login-card);
    color:var(--login-ink);
    font-weight:700;
}

.loginInput:focus{
    border-color:rgba(37,99,235,.55);
    box-shadow:0 0 0 4px rgba(37,99,235,.14);
}

.loginInput::placeholder{
    color:rgba(71,85,105,.75);
    font-weight:700;
}

.loginLink{
    color:var(--login-blue);
    font-weight:1000;
    text-decoration:none;
}

.loginLink:hover{
    text-decoration:underline;
}

.loginCheckRow{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    font-weight:800;
    color:var(--login-muted);
}

.loginCheckRow input{
    width:18px;
    height:18px;
    accent-color:var(--login-blue);
}

.loginBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 16px;
    border-radius:16px;
    font-weight:1000;
    text-decoration:none;
    border:1px solid rgba(37,99,235,.35);
    cursor:pointer;
    transition:transform .05s ease, background .2s ease, border-color .2s ease;
    font-family:inherit;
}

.loginBtn:active{
    transform:translateY(1px);
}

.loginBtn--primary{
    background:var(--login-blue);
    color:#fff;
    border-color:var(--login-blue);
}

.loginBtn--primary:hover{
    background:var(--login-blue-2);
    border-color:var(--login-blue-2);
}

.loginBtn--ghost{
    background:var(--login-card);
    color:var(--login-blue);
}

.loginBtn--ghost:hover{
    background:rgba(37,99,235,.06);
    border-color:rgba(37,99,235,.55);
}

.loginBtn--full{
    width:100%;
    margin-top:14px;
}

.loginRowBetween{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:12px;
    flex-wrap:wrap;
}

.loginSecurityNote{
    margin-top:12px;
    color:var(--login-muted);
    font-weight:700;
    font-size:13px;
    line-height:1.6;
}

.loginMiniSteps{
    margin-top:14px;
    display:grid;
    gap:10px;
}

.loginMiniSteps > div{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:12px;
    border-radius:16px;
    background:var(--login-soft);
    border:1px solid rgba(2,6,23,.06);
}

.loginMiniSteps span{
    width:28px;
    height:28px;
    border-radius:12px;
    background:rgba(37,99,235,.10);
    border:1px solid rgba(37,99,235,.18);
    color:var(--login-blue);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:1000;
    flex:0 0 28px;
}

.loginMiniSteps b{
    display:block;
    color:var(--login-ink);
}

.loginMiniSteps div div{
    color:var(--login-muted);
    font-weight:700;
    line-height:1.6;
}

.loginActionGrid{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}

.loginActionGrid a{
    flex:1 1 220px;
}

.loginModalOverlay{
    position:fixed;
    inset:0;
    background:rgba(11,18,32,.55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:10001;
}

.loginModal{
    width:min(520px, 100%);
    background:var(--login-card);
    border-radius:20px;
    border:1px solid var(--login-border);
    box-shadow:0 18px 45px rgba(11,18,32,.10);
    overflow:hidden;
}

.loginModalHeader{
    padding:16px 18px;
    border-bottom:1px solid var(--login-border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.loginModalHeader strong{
    font-size:16px;
    letter-spacing:-.01em;
    color:var(--login-ink);
}

.loginModalClose{
    appearance:none;
    border:1px solid var(--login-border);
    background:var(--login-card);
    color:var(--login-ink);
    border-radius:12px;
    padding:8px 10px;
    cursor:pointer;
    font-weight:900;
}

.loginModalBody{
    padding:16px 18px 18px;
    color:var(--login-muted);
    line-height:1.65;
    font-weight:700;
}

.loginModalActions{
    padding:0 18px 18px;
}

.loginModalOk{
    width:100%;
    border-radius:16px;
    padding:12px 14px;
    background:linear-gradient(180deg, var(--login-blue), var(--login-blue-2));
    color:#fff;
    border:1px solid rgba(29,78,216,.55);
    font-weight:900;
    cursor:pointer;
}

html[data-theme="dark"] .loginPage .loginMsg--error{
    color:#fecaca;
}

html[data-theme="dark"] .loginPage .loginMsg--success{
    color:#bbf7d0;
}

@media (max-width:980px){
    .loginWrap{
        grid-template-columns:1fr;
    }
}

@media (max-width:640px){
    .loginPage .container{
        width:min(var(--login-max), calc(100% - 28px));
    }

    .loginHero{
        padding:34px 0 10px;
    }

    .loginRowBetween,
    .loginActionGrid{
        flex-direction:column;
        align-items:stretch;
    }

    .loginBtn,
    .loginActionGrid a{
        width:100%;
    }

    .loginCard{
        padding:20px;
        border-radius:22px;
    }
}


/* =========================================================
   CertiChecker Contact Page Styles
   Scoped to .contactPage to avoid clashes with other pages
   ========================================================= */

.contactPage{
    --contact-blue:#2563eb;
    --contact-blue-2:#1d4ed8;
    --contact-blue-soft:#eff6ff;
    --contact-ink:#0f172a;
    --contact-muted:#475569;
    --contact-border:rgba(2,6,23,.10);
    --contact-card:#ffffff;
    --contact-soft:#f8fbff;
    --contact-soft-2:rgba(37,99,235,.08);
    --contact-shadow:0 18px 45px rgba(11,18,32,.10);
    --contact-shadow-soft:0 10px 25px rgba(11,18,32,.08);
    --contact-radius:18px;
    --contact-max:1100px;
    color:var(--contact-ink);
    background:
        radial-gradient(900px 380px at 10% 0%, rgba(37,99,235,.10), transparent 55%),
        radial-gradient(900px 380px at 90% 10%, rgba(59,130,246,.08), transparent 60%),
        var(--contact-card);
}

html[data-theme="dark"] .contactPage{
    --contact-blue:#60a5fa;
    --contact-blue-2:#3b82f6;
    --contact-blue-soft:#0f274a;
    --contact-ink:#f8fbff;
    --contact-muted:#aab8cc;
    --contact-border:#1f3658;
    --contact-card:#0f1d33;
    --contact-soft:#07111f;
    --contact-soft-2:#10213b;
    --contact-shadow:0 18px 45px rgba(0,0,0,.35);
    --contact-shadow-soft:0 10px 25px rgba(0,0,0,.24);
}

.contactPage .container{
    width:min(var(--contact-max), calc(100% - 40px));
    margin:0 auto;
}

.contactHero{
    position:relative;
    overflow:hidden;
    padding:56px 0 34px;
}

.contactHero::before{
    content:"";
    position:absolute;
    inset:-140px -140px auto -140px;
    height:360px;
    background:
        radial-gradient(closest-side, rgba(29,78,216,.22), transparent 70%),
        radial-gradient(closest-side, rgba(29,78,216,.12), transparent 75%);
    pointer-events:none;
    filter:blur(2px);
}

.contactHero .container{
    position:relative;
}

.contactBadge,
.contactMiniBadge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:var(--contact-blue-soft);
    border:1px solid rgba(37,99,235,.18);
    color:var(--contact-blue);
    font-weight:900;
}

.contactBadge::before,
.contactMiniBadge::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--contact-blue);
}

.contactMiniBadge{
    padding:6px 10px;
    font-size:12px;
}

.contactHero h1{
    margin:14px 0 10px;
    font-size:clamp(34px,4vw,52px);
    line-height:1.05;
    letter-spacing:-.03em;
    color:var(--contact-ink);
}

.contactLead{
    margin:0;
    color:var(--contact-muted);
    font-size:16px;
    line-height:1.7;
    max-width:62ch;
    font-weight:700;
}

.contactHelpChips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.contactHelpChips span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border-radius:999px;
    border:1px solid var(--contact-border);
    background:var(--contact-card);
    font-weight:800;
    font-size:13px;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.contactHelpChips span:hover{
    transform:translateY(-1px);
    box-shadow:var(--contact-shadow-soft);
    border-color:rgba(37,99,235,.25);
}

.contactHelpChips a{
    color:inherit;
    text-decoration:none;
}

.contactSection{
    padding:56px 0;
}

.contactSection--tight{
    padding-top:34px;
    padding-bottom:34px;
}

.contactSection--soft{
    background:linear-gradient(180deg,var(--contact-card),var(--contact-soft));
}

.contactSection h2{
    margin:0 0 18px;
    color:var(--contact-ink);
    font-size:clamp(26px,3vw,36px);
    letter-spacing:-.02em;
}

.contactQuickGrid{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:18px;
}

.contactQuickCard,
.contactInfoCard,
.contactFormCard{
    background:var(--contact-card);
    border:1px solid var(--contact-border);
    border-radius:var(--contact-radius);
    padding:18px;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.contactQuickCard{
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.contactQuickCard:hover{
    transform:translateY(-2px);
    box-shadow:var(--contact-shadow-soft);
    border-color:rgba(37,99,235,.25);
}

.contactQuickCard h3,
.contactInfoCard h3,
.contactFormCard h3{
    margin:0 0 6px;
    color:var(--contact-ink);
}

.contactQuickCard p,
.contactInfoCard p{
    margin:0;
    color:var(--contact-muted);
    font-size:14px;
    line-height:1.55;
    font-weight:700;
}

.contactQuickCard .contactBtn{
    margin-top:14px;
}

.contactFaq{
    max-width:800px;
}

.contactFaq details{
    background:var(--contact-card);
    border:1px solid var(--contact-border);
    border-radius:16px;
    padding:14px;
    margin-bottom:10px;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.contactFaq summary{
    cursor:pointer;
    font-weight:900;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color:var(--contact-ink);
}

.contactFaq summary::-webkit-details-marker{
    display:none;
}

.contactFaq summary::after{
    content:"+";
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:10px;
    border:1px solid var(--contact-border);
    background:var(--contact-card);
    color:var(--contact-blue);
    font-weight:900;
    flex:0 0 auto;
}

.contactFaq details[open] summary::after{
    content:"–";
}

.contactFaq p{
    margin:10px 0 0;
    color:var(--contact-muted);
    line-height:1.65;
    font-weight:700;
}

.contactGrid{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:18px;
    align-items:start;
    margin-top:10px;
}

.contactInfoCard,
.contactFormCard{
    border-radius:22px;
    padding:20px;
    box-shadow:var(--contact-shadow-soft);
}

.contactMeta{
    display:grid;
    gap:12px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--contact-border);
}

.contactMeta span,
.contactAssistRow > span{
    display:block;
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--contact-muted);
    margin-bottom:4px;
}

.contactMeta strong{
    color:var(--contact-ink);
}

.contactMeta small{
    display:block;
    color:var(--contact-muted);
    margin-top:6px;
    line-height:1.5;
    font-weight:700;
}

.contactLegalNote{
    margin-top:12px!important;
    color:var(--contact-muted);
    font-size:13px;
    line-height:1.65;
    font-weight:700;
}

.contactFormTitleRow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}

.contactFormTitleRow div{
    font-size:12px;
    color:var(--contact-muted);
    line-height:1.4;
    max-width:32ch;
    text-align:right;
    font-weight:700;
}

.contactFormTitleRow span,
.contactField i{
    color:var(--contact-blue);
    font-style:normal;
    font-weight:900;
}

.contactFormRow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.contactField{
    display:block;
}

.contactField--compact{
    margin:0;
}

.contactField > span{
    display:block;
    margin:0 0 8px;
    font-weight:900;
    font-size:13px;
    color:var(--contact-ink);
}

.contactField input,
.contactField select,
.contactField textarea{
    width:100%;
    box-sizing:border-box;
    border-radius:14px;
    border:1px solid var(--contact-border);
    background:var(--contact-card);
    color:var(--contact-ink);
    padding:12px 12px;
    font-size:15px;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
    font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.contactField textarea{
    resize:vertical;
    min-height:130px;
}

.contactField input:focus,
.contactField select:focus,
.contactField textarea:focus{
    border-color:rgba(37,99,235,.70);
    box-shadow:0 0 0 4px rgba(37,99,235,.16);
}

.contactAssistRow{
    margin-top:12px;
    border-top:1px dashed var(--contact-border);
    padding-top:12px;
}

.contactFormNote{
    margin:10px 0 0;
    color:var(--contact-muted);
    font-size:13px;
    line-height:1.55;
    font-weight:700;
}

.contactHpField{
    position:absolute!important;
    left:-9999px!important;
    width:1px;
    height:1px;
    overflow:hidden;
}

.contactBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    font-weight:900;
    letter-spacing:.01em;
    padding:12px 16px;
    text-decoration:none;
    border:1px solid rgba(37,99,235,.28);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;
    cursor:pointer;
    font-family:inherit;
}

.contactBtn--full{
    width:100%;
    margin-top:14px;
    padding:13px 14px;
    background:linear-gradient(180deg, var(--contact-blue), var(--contact-blue-2));
    color:#fff;
    border:1px solid rgba(37,99,235,.55);
    box-shadow:0 14px 28px rgba(37,99,235,.20);
}

.contactBtn--full:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 40px rgba(37,99,235,.26);
    filter:saturate(1.02);
}

.contactBtn--ghost{
    background:var(--contact-card);
    color:var(--contact-blue);
}

.contactBtn--ghost:hover{
    border-color:rgba(37,99,235,.45);
    box-shadow:0 10px 22px rgba(11,18,32,.10);
    transform:translateY(-1px);
}

.contactModalOverlay{
    position:fixed;
    inset:0;
    background:rgba(11,18,32,.55);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:10001;
}

.contactModal{
    width:min(520px, 100%);
    background:var(--contact-card, #fff);
    border-radius:20px;
    border:1px solid var(--contact-border, rgba(11,18,32,.14));
    box-shadow:var(--contact-shadow, 0 18px 45px rgba(11,18,32,.10));
    overflow:hidden;
}

.contactModalHeader{
    padding:16px 18px;
    border-bottom:1px solid var(--contact-border, rgba(11,18,32,.10));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.contactModalHeader strong{
    font-size:16px;
    letter-spacing:-.01em;
    color:var(--contact-ink, #0f172a);
}

.contactModalClose{
    appearance:none;
    border:1px solid var(--contact-border, rgba(11,18,32,.14));
    background:var(--contact-card, #fff);
    color:var(--contact-ink, #0f172a);
    border-radius:12px;
    padding:8px 10px;
    cursor:pointer;
    font-weight:900;
}

.contactModalBody{
    padding:16px 18px 18px;
    color:var(--contact-muted, #475569);
    line-height:1.65;
    font-weight:700;
}

.contactModalActions{
    padding:0 18px 18px;
}

.contactModalOk{
    width:100%;
    border-radius:16px;
    padding:12px 14px;
    background:linear-gradient(180deg, var(--contact-blue, #2563eb), var(--contact-blue-2, #1d4ed8));
    color:#fff;
    border:1px solid rgba(37,99,235,.55);
    font-weight:900;
    cursor:pointer;
}

.contactStatusPill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    border:1px solid var(--contact-border, rgba(11,18,32,.10));
    background:rgba(11,18,32,.03);
    color:var(--contact-muted, #475569);
}

.contactStatusPill--success{
    background:rgba(37,99,235,.08);
    border-color:rgba(37,99,235,.22);
    color:var(--contact-blue, #2563eb);
}

.contactStatusPill--error{
    background:rgba(220,38,38,.08);
    border-color:rgba(220,38,38,.22);
    color:#dc2626;
}

@media (max-width:900px){
    .contactQuickGrid,
    .contactGrid,
    .contactFormRow{
        grid-template-columns:1fr;
    }

    .contactFormTitleRow{
        flex-direction:column;
    }

    .contactFormTitleRow div{
        text-align:left;
        max-width:unset;
    }

    .contactInfoCard,
    .contactFormCard{
        padding:16px;
    }
}

@media (max-width:640px){
    .contactPage .container{
        width:min(var(--contact-max), calc(100% - 28px));
    }

    .contactHero{
        padding:34px 0 24px;
    }

    .contactBtn{
        width:100%;
    }
}


/* =========================================================
   CertiChecker Footer
   ========================================================= */

.siteFooter{
    position:relative;
    background:
        linear-gradient(180deg,#0f172a 0%,#081120 100%);
    color:#dbe7ff;
    padding:54px 0 22px;
    margin-top:60px;
    overflow:hidden;
}

.siteFooter::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 28%),
        radial-gradient(circle at top right, rgba(96,165,250,.10), transparent 24%);
    pointer-events:none;
}

.siteFooterContainer{
    position:relative;
    z-index:2;
}

.siteFooterTop{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:70px;
    align-items:start;
}

.siteFooterBrand{
    max-width:320px;
}

.siteFooterLogoWrap{
    display:inline-flex;
    margin-bottom:18px;
}

.siteFooterLogo{
    width:130px;
    height:auto;
    display:block;
}

.siteFooterText{
    margin:0;
    color:rgba(219,231,255,.74);
    line-height:1.75;
    font-size:14px;
    font-weight:600;
}

.siteFooterSocials{
    display:flex;
    gap:12px;
    margin-top:22px;
}

.siteFooterSocials a{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    text-decoration:none;
    transition:all .2s ease;
}

.siteFooterSocials a:hover{
    background:#2563eb;
    border-color:#2563eb;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(37,99,235,.30);
}

.siteFooterLinksWrap{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:40px;
}

.siteFooterColumn h3{
    margin:0 0 16px;
    color:#fff;
    font-size:15px;
    font-weight:900;
}

.siteFooterColumn ul{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:12px;
}

.siteFooterColumn li{
    margin:0;
}

.siteFooterColumn a{
    color:rgba(219,231,255,.72);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:color .2s ease;
}

.siteFooterColumn a:hover{
    color:#60a5fa;
}

.footerContactItem{
    display:grid;
    gap:4px;
    margin-bottom:16px;
}

.footerContactItem span{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:900;
    color:rgba(219,231,255,.45);
}

.footerContactItem strong{
    color:rgba(219,231,255,.72);
    font-size:14px;
}

.siteFooterBottom{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:16px;
    align-items:center;
    margin-top:42px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
}

.siteFooterBottom p{
    margin:0;
    color:rgba(219,231,255,.58);
    font-size:12px;
    font-weight:700;
}

.siteFooterTagline{
    text-align:center;
}

.siteFooterCredit{
    text-align:right;
}

.siteFooterCredit a{
    color:#60a5fa;
    text-decoration:none;
    font-weight:900;
}

.siteFooterCredit a:hover{
    color:#93c5fd;
}

@media (max-width:980px){

    .siteFooterTop{
        grid-template-columns:1fr;
        gap:40px;
    }

    .siteFooterBrand{
        max-width:100%;
    }

    .siteFooterLinksWrap{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:28px;
    }
}

@media (max-width:760px){

    .siteFooter{
        padding:44px 0 20px;
    }

    .siteFooterLinksWrap{
        grid-template-columns:1fr;
        gap:28px;
    }

    .siteFooterBottom{
        grid-template-columns:1fr;
        text-align:center;
        gap:10px;
    }

    .siteFooterCredit,
    .siteFooterTagline{
        text-align:center;
    }

    .siteFooterSocials{
        justify-content:flex-start;
    }
}



/* =========================================================
   CertiChecker Header - Final Edition
   ========================================================= */

html,
body{
    margin:0;
    padding:0;
}

body{
    overflow-x:hidden;
}

.siteHeader,
.siteHeader *,
.siteHeader *::before,
.siteHeader *::after{
    box-sizing:border-box;
}

.siteHeader{
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:9999;
    width:100%;
    margin:0;
    padding:0;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid rgba(226,232,240,.95);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 8px 24px rgba(15,23,42,.05);
}

html[data-theme="dark"] .siteHeader{
    background:rgba(7,17,31,.94);
    border-bottom-color:rgba(148,163,184,.18);
    box-shadow:0 8px 24px rgba(0,0,0,.24);
}

.siteHeaderContainer{
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.siteHeaderBrand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#0f172a;
    text-decoration:none;
    min-width:0;
    flex:0 0 auto;
}

.siteHeaderBrand:hover{
    text-decoration:none;
}

html[data-theme="dark"] .siteHeaderBrand{
    color:#f8fafc;
}

.siteHeaderLogo{
    width:auto;
    height:38px;
    display:block;
    flex:0 0 auto;
}

.siteHeaderBrandText{
    display:flex;
    flex-direction:column;
    line-height:1.08;
    min-width:0;
}

.siteHeaderBrandName{
    font-size:15px;
    font-weight:900;
    letter-spacing:-.03em;
    color:#0f172a;
}

.siteHeaderBrandTag{
    margin-top:3px;
    font-size:11px;
    color:#64748b;
    font-weight:750;
}

html[data-theme="dark"] .siteHeaderBrandName{
    color:#f8fafc;
}

html[data-theme="dark"] .siteHeaderBrandTag{
    color:#94a3b8;
}

.siteHeaderNav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    flex:1 1 auto;
}

.siteHeaderNav a,
.siteHeaderLogin{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:8px 12px;
    border-radius:999px;
    color:#334155;
    font-size:13px;
    font-weight:850;
    text-decoration:none;
    transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    white-space:nowrap;
}

.siteHeaderNav a:hover,
.siteHeaderLogin:hover,
.siteHeaderNav a.is-active,
.siteHeaderLogin.is-active{
    background:#eff6ff;
    color:#1d4ed8;
    text-decoration:none;
}

html[data-theme="dark"] .siteHeaderNav a,
html[data-theme="dark"] .siteHeaderLogin{
    color:#dbe7ff;
}

html[data-theme="dark"] .siteHeaderNav a:hover,
html[data-theme="dark"] .siteHeaderLogin:hover,
html[data-theme="dark"] .siteHeaderNav a.is-active,
html[data-theme="dark"] .siteHeaderLogin.is-active{
    background:rgba(96,165,250,.15);
    color:#bfdbfe;
}

.siteHeaderActions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.siteHeaderCta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:9px 15px;
    border-radius:13px;
    background:linear-gradient(180deg,#2563eb,#1d4ed8);
    color:#fff!important;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 10px 20px rgba(37,99,235,.22);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    white-space:nowrap;
}

.siteHeaderCta:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(37,99,235,.30);
    filter:saturate(1.05);
    text-decoration:none;
}

.siteHeaderToggle{
    display:none;
    width:44px;
    height:44px;
    border:1px solid rgba(226,232,240,.95);
    background:#fff;
    border-radius:14px;
    padding:0;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
    position:relative;
    z-index:10001;
    -webkit-tap-highlight-color:transparent;
}

.siteHeaderToggle:hover{
    background:#eff6ff;
    border-color:#bfdbfe;
    box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.siteHeaderToggle span{
    width:21px;
    height:2px;
    border-radius:999px;
    background:#0f172a;
    transition:transform .22s ease, opacity .18s ease;
}

html[data-theme="dark"] .siteHeaderToggle{
    background:#0f1d33;
    border-color:rgba(148,163,184,.22);
}

html[data-theme="dark"] .siteHeaderToggle:hover{
    background:#13243e;
    border-color:rgba(96,165,250,.30);
}

html[data-theme="dark"] .siteHeaderToggle span{
    background:#f8fafc;
}

.siteHeaderToggle.is-open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.siteHeaderToggle.is-open span:nth-child(2){
    opacity:0;
}

.siteHeaderToggle.is-open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.siteMobileNav{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:rgba(255,255,255,.98);
    border-top:1px solid rgba(226,232,240,.95);
    border-bottom:1px solid rgba(226,232,240,.95);
    box-shadow:0 18px 40px rgba(15,23,42,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}

html[data-theme="dark"] .siteMobileNav{
    background:rgba(7,17,31,.98);
    border-top-color:rgba(148,163,184,.18);
    border-bottom-color:rgba(148,163,184,.18);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.siteMobileNav.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}

.siteMobileNavInner{
    padding:14px 0 18px;
    display:grid;
    gap:12px;
}

.siteMobileNavLinks{
    display:grid;
    gap:8px;
}

.siteMobileNav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:13px 15px;
    border-radius:15px;
    color:#0f172a!important;
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    font-size:15px;
    font-weight:900;
    line-height:1.2;
    text-decoration:none;
    box-shadow:0 6px 14px rgba(15,23,42,.04);
    transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.siteMobileNav a::after{
    content:"›";
    color:#64748b;
    font-size:22px;
    line-height:1;
    font-weight:800;
}

.siteMobileNav a:hover,
.siteMobileNav a.is-active{
    color:#1d4ed8!important;
    background:#eff6ff;
    border-color:#bfdbfe;
    text-decoration:none;
    transform:translateY(-1px);
}

html[data-theme="dark"] .siteMobileNav a{
    color:#f8fafc!important;
    background:#0f1d33;
    border-color:rgba(148,163,184,.20);
    box-shadow:0 6px 14px rgba(0,0,0,.16);
}

html[data-theme="dark"] .siteMobileNav a::after{
    color:#94a3b8;
}

html[data-theme="dark"] .siteMobileNav a:hover,
html[data-theme="dark"] .siteMobileNav a.is-active{
    color:#bfdbfe!important;
    background:rgba(96,165,250,.15);
    border-color:rgba(96,165,250,.30);
}

.siteMobileActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding-top:2px;
}

.siteMobileNav .siteMobilePrimary,
.siteMobileNav .siteMobileSecondary{
    justify-content:center;
    text-align:center;
    min-height:50px;
    font-size:14px;
    font-weight:950;
}

.siteMobileNav .siteMobilePrimary::after,
.siteMobileNav .siteMobileSecondary::after{
    content:"";
}

.siteMobileNav .siteMobilePrimary{
    background:linear-gradient(180deg,#2563eb,#1d4ed8)!important;
    color:#ffffff!important;
    border-color:#2563eb!important;
    box-shadow:0 12px 24px rgba(37,99,235,.25);
}

.siteMobileNav .siteMobilePrimary:hover{
    color:#ffffff!important;
    background:linear-gradient(180deg,#3b82f6,#1d4ed8)!important;
}

.siteMobileNav .siteMobileSecondary{
    color:#1d4ed8!important;
    background:#eff6ff!important;
    border-color:#bfdbfe!important;
}

.siteMobileNav .siteMobileSecondary:hover{
    color:#1e40af!important;
    background:#dbeafe!important;
}

html[data-theme="dark"] .siteMobileNav .siteMobilePrimary{
    color:#ffffff!important;
    background:linear-gradient(180deg,#3b82f6,#1d4ed8)!important;
    border-color:#3b82f6!important;
}

html[data-theme="dark"] .siteMobileNav .siteMobileSecondary{
    color:#dbeafe!important;
    background:rgba(96,165,250,.18)!important;
    border-color:rgba(96,165,250,.36)!important;
}

html[data-theme="dark"] .siteMobileNav .siteMobileSecondary:hover{
    color:#ffffff!important;
    background:rgba(96,165,250,.26)!important;
}

body.menu-open{
    overflow:hidden;
}

body.menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.18);
    z-index:9998;
    pointer-events:none;
}

html[data-theme="dark"] body.menu-open::before{
    background:rgba(0,0,0,.28);
}

@media (max-width:1120px){
    .siteHeaderNav a,
    .siteHeaderLogin{
        padding:8px 9px;
        font-size:12px;
    }
}

@media (max-width:960px){
    .siteHeaderContainer{
        min-height:64px;
    }

    .siteHeaderLogo{
        height:36px;
    }

    .siteHeaderNav,
    .siteHeaderActions{
        display:none;
    }

    .siteHeaderToggle{
        display:flex;
    }
}

@media (min-width:961px){
    .siteMobileNav{
        display:none!important;
    }
}

@media (max-width:520px){
    .siteHeaderContainer{
        min-height:62px;
        gap:12px;
    }

    .siteHeaderBrandTag{
        display:none;
    }

    .siteHeaderBrandName{
        font-size:15px;
    }

    .siteHeaderLogo{
        height:34px;
    }

    .siteMobileActions{
        grid-template-columns:1fr;
    }

    .siteMobileNav a{
        font-size:15px;
    }
}