/* =====================================================================
   CobraCore Software, LLC — corporate.css
   Corporate site theme. Light, spacious, navy-forward with a brand-blue
   accent. Scoped under  body.cc-corp  so it never collides with legacy
   template styles. Pairs with Bootstrap 5.3.8 + corporate-ui.js.
   ===================================================================== */

:root {
    --cc-navy:       #0c2340;
    --cc-navy-2:     #14365c;
    --cc-navy-3:     #1c4a7a;
    --cc-blue:       #3a55d9;   /* CobraCore brand blue (accent)        */
    --cc-blue-2:     #2f49c0;   /* hover                                */
    --cc-blue-soft:  #eaeefc;   /* tinted backgrounds                   */
    --cc-gold:       #f5a623;   /* corporate highlight, used sparingly  */
    --cc-ink:        #16202e;   /* primary text on light                */
    --cc-muted:      #57667a;   /* secondary text on light              */
    --cc-muted-2:    #8a98ab;
    --cc-line:       #e5ebf3;   /* hairline borders                     */
    --cc-bg:         #ffffff;
    --cc-bg-2:       #f4f8fc;   /* alternating light section            */
    --cc-on-navy:    #dbe6f3;   /* muted text on navy                   */
    --cc-shadow:     0 18px 50px -20px rgba(12, 35, 64, 0.30);
    --cc-shadow-sm:  0 8px 24px -12px rgba(12, 35, 64, 0.25);
    --cc-radius:     16px;
    --cc-radius-sm:  12px;
    --cc-maxw:       1180px;
}

/* ---------- base ---------- */
body.cc-corp {
    margin: 0;
    background: var(--cc-bg);
    color: var(--cc-ink);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
body.cc-corp { scroll-behavior: smooth; scroll-padding-top: 90px; }
.cc-corp *, .cc-corp *::before, .cc-corp *::after { box-sizing: border-box; }
.cc-corp h1, .cc-corp h2, .cc-corp h3, .cc-corp h4 {
    color: var(--cc-navy);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 .5em;
}
.cc-corp a { color: var(--cc-blue); text-decoration: none; }
.cc-corp a:hover { color: var(--cc-blue-2); }
.cc-corp img { max-width: 100%; height: auto; }
.cc-container { max-width: var(--cc-maxw); margin: 0 auto; padding: 0 24px; }
.cc-section { padding: 96px 0; }
.cc-section--tint { background: var(--cc-bg-2); }

/* ---------- shared bits ---------- */
.cc-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-blue);
    margin-bottom: 14px;
}
.cc-eyebrow--on-navy { color: #7f9cff; }
.cc-section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.cc-section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.cc-section-head p { color: var(--cc-muted); font-size: 1.08rem; margin: 0; }
.cc-lead { font-size: 1.15rem; color: var(--cc-muted); }

/* ---------- buttons ---------- */
.cc-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
    white-space: nowrap;
}
.cc-btn:hover { transform: translateY(-2px); }
.cc-btn--primary { background: var(--cc-blue); color: #fff; box-shadow: 0 12px 26px -12px rgba(58, 85, 217, .7); }
.cc-btn--primary:hover { background: var(--cc-blue-2); color: #fff; }
.cc-btn--ghost { background: transparent; color: var(--cc-navy); border-color: var(--cc-line); }
.cc-btn--ghost:hover { color: var(--cc-navy); border-color: var(--cc-blue); }
.cc-btn--on-navy { background: #fff; color: var(--cc-navy); }
.cc-btn--on-navy:hover { color: var(--cc-navy); box-shadow: var(--cc-shadow-sm); }
.cc-btn--ghost-navy { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cc-btn--ghost-navy:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.cc-btn svg { width: 18px; height: 18px; }

/* =====================================================================
   NAVBAR  (white, sticky)
   keeps .header_navbar + #ccMobileMenu hooks for corporate-ui.js
   ===================================================================== */
.cc-corp .header_navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--cc-line);
    transition: box-shadow .2s ease, background .2s ease;
}
.cc-corp .header_navbar.sticky { box-shadow: 0 8px 30px -18px rgba(12,35,64,.45); }
.cc-navbar { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.cc-navbar__brand img { height: 42px; width: auto; display: block; }
.cc-nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.cc-nav-links a.cc-nav-link {
    color: var(--cc-navy); font-weight: 600; font-size: .98rem; position: relative; padding: 4px 0;
}
.cc-nav-links a.cc-nav-link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
    background: var(--cc-blue); transition: right .25s ease;
}
.cc-nav-links a.cc-nav-link:hover::after,
.cc-nav-links li.active a.cc-nav-link::after { right: 0; }
.cc-nav-actions { display: flex; align-items: center; gap: 14px; }
.cc-burger {
    display: none; background: none; border: 0; cursor: pointer; padding: 8px;
}
.cc-burger span { display: block; width: 24px; height: 2px; background: var(--cc-navy); margin: 5px 0; border-radius: 2px; }

/* offcanvas (mobile) */
.cc-offcanvas { background: var(--cc-navy); color: #fff; }
.cc-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.12); }
.cc-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.cc-offcanvas__brand img { height: 38px; }
.cc-offcanvas .cc-nav-link { display: block; color: #fff; font-weight: 600; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.cc-offcanvas .cc-nav-link:hover { color: #7f9cff; }
.cc-offcanvas .cc-btn { width: 100%; justify-content: center; margin-top: 18px; }

/* =====================================================================
   HERO
   ===================================================================== */
.cc-hero {
    position: relative;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(58,85,217,.35), transparent 60%),
        linear-gradient(160deg, var(--cc-navy) 0%, var(--cc-navy-2) 55%, var(--cc-navy-3) 100%);
    color: #fff;
    padding: 150px 0 96px;
    overflow: hidden;
}
.cc-hero__grid {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.cc-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.5rem); }
.cc-hero h1 .cc-accent { color: #8ea7ff; }
.cc-hero p { color: var(--cc-on-navy); font-size: 1.18rem; max-width: 560px; margin: 0 0 32px; }
.cc-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.cc-hero__note { margin-top: 22px; color: var(--cc-muted-2); font-size: .92rem; }
.cc-hero__media { position: relative; }
.cc-hero__media img {
    width: 100%; border-radius: var(--cc-radius);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.12);
}
.cc-hero__badge {
    position: absolute; left: -14px; bottom: -14px;
    display: flex; align-items: center; gap: 10px;
    background: #fff; color: var(--cc-navy);
    padding: 12px 16px; border-radius: 12px; box-shadow: var(--cc-shadow);
    font-weight: 700; font-size: .9rem;
}
.cc-hero__badge img { height: 26px; width: auto; border: 0; box-shadow: none; border-radius: 0; }

/* trust / stats strip */
.cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cc-stat { text-align: center; }
.cc-stat__n { font-size: 2.2rem; font-weight: 800; color: var(--cc-navy); }
.cc-stat__l { color: var(--cc-muted); font-size: .95rem; }

/* =====================================================================
   SERVICE / FEATURE CARDS
   ===================================================================== */
.cc-grid { display: grid; gap: 24px; }
.cc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cc-card {
    background: #fff; border: 1px solid var(--cc-line); border-radius: var(--cc-radius);
    padding: 34px 30px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cc-card:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow); border-color: transparent; }
.cc-card__icon {
    width: 54px; height: 54px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cc-blue-soft); color: var(--cc-blue); margin-bottom: 20px;
}
.cc-card__icon svg { width: 28px; height: 28px; }
.cc-card h3 { font-size: 1.25rem; }
.cc-card p { color: var(--cc-muted); margin: 0; font-size: 1rem; }
.cc-card__list { list-style: none; margin: 16px 0 0; padding: 0; }
.cc-card__list li { position: relative; padding-left: 26px; margin-bottom: 8px; color: var(--cc-muted); }
.cc-card__list li::before {
    content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
    border-radius: 50%; background: var(--cc-blue); box-shadow: 0 0 0 4px var(--cc-blue-soft);
}

/* =====================================================================
   FLAGSHIP PRODUCT (CargoCore) showcase
   ===================================================================== */
.cc-product {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center;
    background: #fff; border: 1px solid var(--cc-line); border-radius: 22px;
    padding: 46px; box-shadow: var(--cc-shadow-sm);
}
.cc-product__logo { height: 46px; width: auto; margin-bottom: 20px; }
.cc-product h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.cc-product p { color: var(--cc-muted); }
.cc-product__media img { border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.cc-chip { font-size: .85rem; font-weight: 600; color: var(--cc-navy);
    background: var(--cc-bg-2); border: 1px solid var(--cc-line); padding: 6px 13px; border-radius: 999px; }
.cc-product__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* "more apps coming" tile */
.cc-soon {
    margin-top: 24px; text-align: center; border: 1.5px dashed var(--cc-line);
    border-radius: var(--cc-radius); padding: 30px; color: var(--cc-muted); background: var(--cc-bg-2);
}

/* =====================================================================
   ABOUT teaser  /  split section
   ===================================================================== */
.cc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cc-split h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.cc-split p { color: var(--cc-muted); }
.cc-tl { list-style: none; margin: 22px 0 0; padding: 0; }
.cc-tl li { position: relative; padding: 0 0 18px 30px; }
.cc-tl li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--cc-blue); }
.cc-tl li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 2px; background: var(--cc-line); }
.cc-tl b { color: var(--cc-navy); display: block; }
.cc-tl span { color: var(--cc-muted); }
.cc-media-frame img { border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); width: 100%; }

/* =====================================================================
   CTA BAND (navy)
   ===================================================================== */
.cc-cta-band {
    background: radial-gradient(800px 380px at 80% 0%, rgba(58,85,217,.4), transparent 60%),
        linear-gradient(150deg, var(--cc-navy), var(--cc-navy-2));
    color: #fff; border-radius: 24px; padding: 64px; text-align: center;
}
.cc-cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.cc-cta-band p { color: var(--cc-on-navy); max-width: 600px; margin: 0 auto 30px; font-size: 1.12rem; }
.cc-cta-band__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   PAGE HEAD (inner pages)
   ===================================================================== */
.cc-page-head {
    background: linear-gradient(160deg, var(--cc-navy), var(--cc-navy-2));
    color: #fff; padding: 150px 0 70px; text-align: center;
}
.cc-page-head h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.cc-page-head p { color: var(--cc-on-navy); max-width: 660px; margin: 0 auto; font-size: 1.12rem; }

/* =====================================================================
   CONTACT strip
   ===================================================================== */
.cc-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.cc-contact__card { background: #fff; border: 1px solid var(--cc-line); border-radius: var(--cc-radius); padding: 36px; box-shadow: var(--cc-shadow-sm); }
.cc-contact__row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cc-contact__ic { width: 44px; height: 44px; border-radius: 11px; background: var(--cc-blue-soft); color: var(--cc-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-contact__ic svg { width: 22px; height: 22px; }
.cc-contact__row b { display: block; color: var(--cc-navy); }
.cc-contact__row span { color: var(--cc-muted); }

/* =====================================================================
   FOOTER (navy)
   ===================================================================== */
.cc-footer { background: var(--cc-navy); color: var(--cc-on-navy); padding: 70px 0 28px; }
.cc-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.cc-footer__brand img { height: 40px; }
.cc-footer__brand p { margin: 18px 0 0; color: var(--cc-on-navy); font-size: .96rem; max-width: 300px; }
.cc-footer h4 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; }
.cc-footer a { display: block; color: var(--cc-on-navy); padding: 6px 0; font-size: .96rem; }
.cc-footer a:hover { color: #fff; }
.cc-footer__bottom {
    margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    color: var(--cc-muted-2); font-size: .9rem;
}
.cc-footer__bottom a { display: inline; color: var(--cc-on-navy); }

/* back to top */
.cc-corp .back-to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 1020;
    width: 46px; height: 46px; border-radius: 12px; display: none;
    align-items: center; justify-content: center;
    background: var(--cc-blue); color: #fff; box-shadow: var(--cc-shadow-sm);
}
.cc-corp .back-to-top:hover { background: var(--cc-blue-2); color: #fff; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
    .cc-nav-links, .cc-nav-actions .cc-btn { display: none; }
    .cc-burger { display: block; }
    .cc-hero__grid, .cc-product, .cc-split, .cc-contact { grid-template-columns: 1fr; }
    .cc-hero { padding-top: 130px; }
    .cc-hero__media { order: -1; }
    .cc-grid--3, .cc-grid--2 { grid-template-columns: 1fr 1fr; }
    .cc-stats { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .cc-footer__top { grid-template-columns: 1fr 1fr; }
    .cc-product { padding: 32px; }
    .cc-cta-band { padding: 44px 28px; }
}
@media (max-width: 600px) {
    .cc-section { padding: 64px 0; }
    .cc-grid--3, .cc-grid--2 { grid-template-columns: 1fr; }
    .cc-footer__top { grid-template-columns: 1fr; }
    .cc-product__cta .cc-btn, .cc-hero__cta .cc-btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   CONTACT FORM (corporate)
   ===================================================================== */
.cc-form { display: flex; flex-wrap: wrap; gap: 18px; }
.cc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; }
.cc-field { display: flex; flex-direction: column; width: 100%; }
.cc-field label { font-size: .9rem; font-weight: 600; color: var(--cc-navy); margin-bottom: 7px; }
.cc-input {
    width: 100%; font-family: inherit; font-size: 1rem; color: var(--cc-ink);
    background: #fff; border: 1.5px solid var(--cc-line); border-radius: 10px;
    padding: 13px 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-input::placeholder { color: var(--cc-muted-2); }
.cc-input:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 4px var(--cc-blue-soft); }
.cc-textarea { resize: vertical; min-height: 120px; }
.cc-form__submit {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 30px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--cc-blue); color: #fff; font-weight: 700; font-size: 1rem;
    box-shadow: 0 12px 26px -12px rgba(58,85,217,.7);
    transition: transform .15s ease, background .15s ease;
}
.cc-form__submit:hover { transform: translateY(-2px); background: var(--cc-blue-2); }
.cc-form__submit:disabled { opacity: .7; cursor: default; transform: none; }
.cc-form__fine { font-size: .85rem; color: var(--cc-muted); margin: 4px 0 0; }
.cc-form__fine a { color: var(--cc-blue); }

/* contact info card list */
.cc-info { display: flex; flex-direction: column; gap: 22px; }
.cc-info__row { display: flex; gap: 16px; align-items: flex-start; }
.cc-info__ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--cc-blue-soft); color: var(--cc-blue); display: flex; align-items: center; justify-content: center; }
.cc-info__ic svg { width: 22px; height: 22px; }
.cc-info__row b { display: block; color: var(--cc-navy); margin-bottom: 2px; }
.cc-info__row p { margin: 0; color: var(--cc-muted); font-size: .98rem; line-height: 1.6; }
.cc-info__row a { color: var(--cc-blue); }

@media (max-width: 600px) {
    .cc-form__row { grid-template-columns: 1fr; }
    .cc-form__submit { width: 100%; justify-content: center; }
}

/* =====================================================================
   Button text-color fix
   `.cc-corp a { color: var(--cc-blue) }` (an element+class selector) was
   beating the single-class `.cc-btn--*` colour rules on specificity, which
   tinted every <a> button blue — invisible on the blue primary button and
   low-contrast on the navy ghost buttons. Re-assert with higher specificity.
   ===================================================================== */
.cc-corp a.cc-btn--primary,
.cc-corp a.cc-btn--primary:hover,
.cc-corp a.cc-btn--ghost-navy,
.cc-corp a.cc-btn--ghost-navy:hover { color: #fff; }

.cc-corp a.cc-btn--ghost,
.cc-corp a.cc-btn--ghost:hover,
.cc-corp a.cc-btn--on-navy,
.cc-corp a.cc-btn--on-navy:hover { color: var(--cc-navy); }

/* =====================================================================
   "Logistics is in our core" motif
   ===================================================================== */
.cc-coretag { text-align: center; max-width: 780px; margin: 0 auto; }
.cc-coretag__modes { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.cc-coretag__modes span {
    width: 50px; height: 50px; border-radius: 13px; background: #fff;
    border: 1px solid var(--cc-line); box-shadow: var(--cc-shadow-sm);
    display: flex; align-items: center; justify-content: center; color: var(--cc-blue);
}
.cc-coretag__modes svg { width: 24px; height: 24px; }
.cc-coretag h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
.cc-coretag h2 .cc-accent { color: var(--cc-blue); }
.cc-coretag p { color: var(--cc-muted); font-size: 1.1rem; margin: 0; }

/* navy founder / credibility band */
.cc-core-band {
    background:
        radial-gradient(720px 320px at 82% 0%, rgba(58,85,217,.42), transparent 60%),
        linear-gradient(150deg, var(--cc-navy), var(--cc-navy-2));
    color: #fff; border-radius: 24px; padding: 60px; text-align: center;
}
.cc-core-band h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.3rem); max-width: 780px; margin: 0 auto .55em; }
.cc-core-band > p { color: var(--cc-on-navy); max-width: 740px; margin: 0 auto 40px; font-size: 1.12rem; }
.cc-creds { display: flex; align-items: stretch; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cc-cred {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px; padding: 24px 20px; width: 236px; text-align: center;
}
.cc-cred__ic {
    width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.1);
    color: #9fb6ff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.cc-cred__ic svg { width: 24px; height: 24px; }
.cc-cred b { display: block; color: #fff; font-size: 1.04rem; margin-bottom: 5px; }
.cc-cred span { color: var(--cc-on-navy); font-size: .93rem; line-height: 1.5; }
.cc-cred--accent { background: rgba(245,166,35,.14); border-color: rgba(245,166,35,.4); }
.cc-cred--accent .cc-cred__ic { background: rgba(245,166,35,.2); color: #f5a623; }
.cc-creds__op { display: flex; align-items: center; font-size: 1.7rem; color: #7f9cff; font-weight: 800; }
@media (max-width: 780px) {
    .cc-core-band { padding: 38px 24px; }
    .cc-creds__op { display: none; }
    .cc-cred { width: 100%; }
}

/* =====================================================================
   "100% USA" motif
   ===================================================================== */
.cc-usa-pill {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
    padding: 9px 16px; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    color: var(--cc-on-navy); font-size: .92rem; font-weight: 600;
}
.cc-usa-pill svg { width: 18px; height: 18px; color: #f5a623; flex-shrink: 0; }
.cc-usa-pill b { color: #fff; }
.cc-gold { color: var(--cc-gold); }
.cc-footer__usa { display: inline-flex; align-items: center; gap: 7px; color: var(--cc-on-navy); font-size: .9rem; }
.cc-footer__usa svg { width: 16px; height: 16px; color: #f5a623; }

/* =====================================================================
   "100% Made in USA" — bolder pill, flag, combined Why strip
   ===================================================================== */
.cc-usa-flag { display: block; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.35); flex-shrink: 0; }

.cc-usa-pill {
    display: inline-flex; align-items: center; gap: 13px; margin-top: 26px;
    padding: 12px 20px 12px 15px; border-radius: 14px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24);
    box-shadow: 0 16px 36px -18px rgba(0,0,0,.7);
}
.cc-usa-pill .cc-usa-flag { width: 38px; }
.cc-usa-pill__txt { display: flex; flex-direction: column; line-height: 1.25; }
.cc-usa-pill__txt b { color: #fff; font-size: 1.04rem; font-weight: 800; letter-spacing: .2px; }
.cc-usa-pill__txt span { color: var(--cc-on-navy); font-size: .86rem; }

/* About band: large centered flag */
.cc-usa-flag--lg { width: 76px; margin: 0 auto 18px; }

/* Combined "Why CobraCore" two-pillar strip */
.cc-why { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cc-why__card {
    background: #fff; border: 1px solid var(--cc-line); border-radius: 16px;
    padding: 32px 30px; display: flex; gap: 18px; align-items: flex-start; box-shadow: var(--cc-shadow-sm);
}
.cc-why__ic {
    width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
    background: var(--cc-blue-soft); color: var(--cc-blue);
    display: flex; align-items: center; justify-content: center;
}
.cc-why__ic svg { width: 28px; height: 28px; }
.cc-why__ic--flag { background: #fff; border: 1px solid var(--cc-line); }
.cc-why__ic--flag .cc-usa-flag { width: 40px; }
.cc-why__card h3 { font-size: 1.22rem; margin: 0 0 6px; }
.cc-why__card p { color: var(--cc-muted); margin: 0; font-size: 1rem; }

/* footer USA line */
.cc-footer__usa { display: inline-flex; align-items: center; gap: 8px; color: var(--cc-on-navy); font-size: .9rem; }
.cc-footer__usa .cc-usa-flag { width: 24px; }

@media (max-width: 780px) {
    .cc-why { grid-template-columns: 1fr; }
}

/* =====================================================================
   Contact page: darker "Send us a message" card + top-aligned columns
   ===================================================================== */
.cc-contact--top { align-items: start; }

.cc-contact__card--form {
    background:
        radial-gradient(620px 280px at 85% 0%, rgba(58,85,217,.40), transparent 60%),
        linear-gradient(160deg, var(--cc-navy), var(--cc-navy-2));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--cc-shadow);
}
.cc-contact__card--form h2 { color: #fff; }
.cc-contact__card--form .cc-field label { color: #eaf1fb; font-weight: 700; }
.cc-contact__card--form .cc-form__fine { color: #aebfd6; }
.cc-contact__card--form .cc-form__fine a { color: #8fb6ff; }
.cc-contact__card--form .cc-input { border-color: rgba(255,255,255,.16); }
.cc-contact__card--form .cc-input:focus { border-color: var(--cc-blue); box-shadow: 0 0 0 4px rgba(58,85,217,.30); }

/* =====================================================================
   Hide the reCAPTCHA v3 badge (bottom-right). Permitted because the
   required reCAPTCHA notice is shown inline in the contact form
   (.cc-form__fine). Remove this rule if you prefer to show the badge.
   ===================================================================== */
.grecaptcha-badge { visibility: hidden; }

/* =====================================================================
   Legacy track.html → CargoCore redirect page
   ===================================================================== */
.cc-redirect {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px;
    background:
        radial-gradient(900px 460px at 80% 0%, rgba(58,85,217,.40), transparent 60%),
        linear-gradient(160deg, var(--cc-navy), var(--cc-navy-2));
}
.cc-redirect__card { background: #fff; border-radius: 22px; padding: 48px 44px; max-width: 520px; width: 100%; text-align: center; box-shadow: var(--cc-shadow); }
.cc-redirect__logo { height: 40px; width: auto; margin-bottom: 26px; }
.cc-redirect__icon { width: 72px; height: 72px; border-radius: 18px; background: var(--cc-blue-soft); color: var(--cc-blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.cc-redirect__icon svg { width: 38px; height: 38px; }
.cc-redirect__card h1 { font-size: 1.7rem; margin-bottom: 12px; }
.cc-redirect__card p { color: var(--cc-muted); margin: 0 0 26px; font-size: 1.06rem; }
.cc-redirect__card #rdCount, .cc-redirect__card strong { color: var(--cc-navy); font-weight: 800; }
.cc-redirect__small { margin: 20px 0 0; font-size: .9rem; color: var(--cc-muted-2); }
.cc-redirect__small a { color: var(--cc-blue); }

/* ---- redirect page: reworked UI (smaller logo, countdown ring, chip) ---- */
[hidden] { display: none !important; }
.cc-redirect__card { padding: 44px 40px 36px; }
.cc-redirect__logo { height: 26px; margin-bottom: 6px; opacity: .95; }
.cc-redirect__kick { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--cc-blue); margin: 0 0 18px; }
.cc-redirect__media { display: flex; align-items: center; justify-content: center; margin: 4px 0 24px; min-height: 132px; }
.cc-rd-ring { position: relative; width: 132px; height: 132px; }
.cc-rd-ring svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.cc-rd-ring__track { fill: none; stroke: var(--cc-line); stroke-width: 9; }
.cc-rd-ring__bar { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 0; animation: rdDeplete 10s linear forwards; }
@keyframes rdDeplete { to { stroke-dashoffset: 327; } }
.cc-rd-ring__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.7rem; font-weight: 800; color: var(--cc-navy); letter-spacing: -.02em; }
.cc-redirect__card h1 { font-size: 1.85rem; margin-bottom: 10px; }
.cc-redirect__card > p { color: var(--cc-muted); margin: 0 0 22px; font-size: 1.08rem; }
.cc-rd-chip { display: inline-flex; align-items: center; gap: 9px; background: var(--cc-bg-2); border: 1px solid var(--cc-line); border-radius: 999px; padding: 9px 18px; margin: 0 0 26px; font-weight: 800; color: var(--cc-navy); font-size: .98rem; }
.cc-rd-chip svg { width: 17px; height: 17px; color: var(--cc-blue); }
.cc-rd-chip em { font-style: normal; font-weight: 600; color: var(--cc-muted); }
.cc-redirect__powered { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--cc-line); display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--cc-muted-2); font-size: .82rem; font-weight: 600; }
.cc-redirect__powered img { height: 40px; width: auto; }
/* Compact "Start free trial" button in the top nav (desktop) */
.cc-nav-actions .cc-btn { padding: 9px 18px; font-size: .92rem; border-radius: 9px; }

/* =====================================================================
   Form success / confirmation page (submitsuccess.html)
   ===================================================================== */
.cc-success {
    padding: 150px 0 110px;
    background:
        radial-gradient(900px 460px at 80% 0%, rgba(58,85,217,.35), transparent 60%),
        linear-gradient(160deg, var(--cc-navy), var(--cc-navy-2));
}
.cc-success__card { max-width: 600px; margin: 0 auto; text-align: center; background: #fff; border-radius: 22px; padding: 54px 44px; box-shadow: var(--cc-shadow); }
.cc-success__badge { width: 80px; height: 80px; border-radius: 50%; background: rgba(43,182,115,.12); color: #2bb673; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.cc-success__badge svg { width: 42px; height: 42px; }
.cc-success__card h1 { font-size: 1.95rem; margin-bottom: 12px; }
.cc-success__card p { color: var(--cc-muted); font-size: 1.08rem; margin: 0 0 6px; }
.cc-success__sign { color: var(--cc-muted-2); font-size: .96rem; margin-top: 20px; }
.cc-success__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 600px) { .cc-success__card { padding: 40px 26px; } .cc-success__actions .cc-btn { width: 100%; justify-content: center; } }

/* =====================================================================
   Legal document (terms-of-service.html)
   ===================================================================== */
.cc-legal { background: var(--cc-bg-2); padding: 64px 20px 96px; }
.cc-legal__inner {
    max-width: 880px; margin: 0 auto; background: #fff;
    border: 1px solid var(--cc-line); border-radius: 16px; padding: 48px 52px;
    box-shadow: var(--cc-shadow-sm); color: var(--cc-ink); line-height: 1.8; font-size: 1rem;
}
.cc-legal__inner .list-terms { margin: 0; padding: 0; }
.cc-legal__inner dt,
.cc-legal__inner .heading-5 {
    color: var(--cc-navy); font-weight: 800; font-size: 1.18rem; line-height: 1.4;
    margin: 34px 0 8px; letter-spacing: -.01em;
}
.cc-legal__inner dd { margin: 0 0 14px; color: #2f3b49; }
.cc-legal__inner a { color: var(--cc-blue); text-decoration: underline; word-break: break-word; }
.cc-legal__inner a:hover { color: var(--cc-blue-2); }
.cc-legal__inner .privacy-link { display: inline-block; margin-top: 12px; font-weight: 700; }
@media (max-width: 600px) { .cc-legal__inner { padding: 30px 22px; } }