/* =====================================================================
   Shipdeez — Rebuilt Stylesheet (White site; ONLY 2 black sections)
   Black sections:
     1) .promo-bar
     2) .cta-faq
   Everything else is forced to white/light surfaces.
   ===================================================================== */

/* -----------------------------
   1) Design tokens
------------------------------ */
:root {
    /*    --shipdeez-orange: #FF6A38;
*/
    --shipdeez-orange: #D86A12;
    /*    #04723E;*/
    /*    --shipdeez-orange: #FD661B;*/
    --shipdeez-green: #135D50;
    /* Light theme surfaces */
    --bg-site: #ffffff;
    /* Entire page background */
    --bg-surface: #ffffff;
    /* Cards / panels */
    --bg-subtle: #f9fafb;
    /* Optional subtle surface */
    /* Text */
    --text: #111827;
    --textmenue: #42342B;
    --text-muted: #6B7280;
    /* Borders & effects */
    --border: #E5E7EB;
    --shadow: 0 10px 30px rgba(17, 24, 39, .08);
    /* Radius & layout */
    --radius: 14px;
    --radius-lg: 20px;
    --container: 1200px;
    /* Focus */
    --focus: 0 0 0 3px rgba(19, 93, 80, .18);
}

/* -----------------------------
   2) Modern reset (safe)
------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    cursor: pointer;
}

/* 
button, input, select, textarea {
    font: inherit;
} */

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

a:hover {
    text-decoration: underline;
}

/* Make sure the page is white by default */
html,
body {
    min-height: 100%;
    background: var(--bg-site);
    color: var(--text);
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------
   3) GLOBAL “white site” guardrails
   - Prevent mystery dark backgrounds from wrappers.
   - Only .promo-bar and .cta-faq are allowed to be dark.
------------------------------ */

/* Common wrappers default to transparent (body is white) */
/* :where(main, header, footer, section, .section, .hero, .site, .page, .wrapper, .container) {
    background: transparent;
} */

/* If your HTML uses dedicated wrappers, this keeps them white */
:where(body, .site, .page) {
    background: var(--bg-site);
}

/* Optional: if you ever see black “bleed” from a parent, uncomment:
:where(main,header,footer,section,.section,.hero,.site,.page,.wrapper,.container){
  background:var(--bg-site) !important;
}
*/

@keyframes mouseBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* -----------------------------
   4) Layout helpers
------------------------------ */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width:768px) {
    .container {
        padding: 0 24px;
    }
}

@media (min-width:1024px) {
    .container {
        padding: 0 32px;
    }
}

.section {
    padding: 56px 0;
}

.section.compact {
    padding: 32px 0;
}

@media (min-width:768px) {
    .section {
        padding: 80px 0;
    }

    .section.compact {
        padding: 40px 0;
    }
}

/* -----------------------------
   5) Promo bar (BLACK SECTION #1)
------------------------------ */
.promo-bar {
    background: #000;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.promo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .35px;
    position: relative;
}

.promo-row strong {
    color: #f4a261;
    font-weight: 900;
}

.icon-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 10px;
}

.promo-row .icon-btn {
    position: absolute;
    right: 16px;
    color: rgba(255, 255, 255, .8);
}

.promo-row .icon-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* -----------------------------
   6) Header
------------------------------ */
.menu-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background: black;
    margin: 5px 0;
    transition: 0.3s;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
}

.header-row {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.brand span {
    font-size: 18px;
}

.nav {
    display: none;
    align-items: center;
    gap: 24px;
    font-size: 14px;
}

.nav a {
    color: var(--text-muted);
    text-decoration: none;
}

.nav a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav a.scale {
    color: var(--shipdeez-green);
    font-weight: 900;
}

.nav a.scale:hover {
    text-decoration: underline;
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.only-desktop {
    display: none;
}

@media (min-width:768px) {
    .nav {
        display: flex;
    }

    .only-desktop {
        display: inline-flex;
    }
}

/* -----------------------------
   7) Buttons — MOVED TO buttons.css
------------------------------ */

/* ACRONS */
#acorn-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Puts it behind your text/lottie */
    pointer-events: none;
}

.acorn {
    position: absolute;
    opacity: 1;
    /* Soften them so they don't distract from text */
    will-change: transform;
    animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(10deg); }
}
/* @keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(var(--orig-rotation));
    }

    50% {
        transform: translateY(-15px) rotate(calc(var(--orig-rotation) + 5deg));
    }
} */

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* -----------------------------
   8) Cards / pills
------------------------------ */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card-body {
    padding: 24px;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.pill {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(0, 0, 0, .03);
    font-size: 14px;
    color: var(--text-muted);
}

/* -----------------------------
   9) Typography
------------------------------ */

/* Headings */
.h1 {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: 0;
}

@media (min-width: 768px) {
    .h1 { font-size: 48px; }
}

.h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
}

.h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

/* Body scale */
.body-lg {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.body-md {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
}

.body-sm,
.small {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.caption,
.tiny {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

/* Lead */
.lead {
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Colour helpers */
.muted { color: var(--text-muted); }

.helper {
    margin-top: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

/* Reusable semantic tokens */
.eyebrow {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.section-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-muted);
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.stat-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.quote-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.footer-brand {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

/* -----------------------------
   10) Grids
------------------------------ */
.hero-grid {
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width:1024px) {
    .hero-grid {
        grid-template-columns: 1.1fr .9fr;
    }
}

.grid-2 {
    display: grid;
    gap: 16px;
}

@media (min-width:1024px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.grid-3 {
    display: grid;
    gap: 16px;
}

@media (min-width:768px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (min-width:768px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:1024px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}


/* -----------------------------
   12) Rates
------------------------------ */
.rate-grid {
    display: grid;
    gap: 12px;
}

@media (min-width:768px) {
    .rate-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rate-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 16px;
}

.rate-top {
    font-size: 14px;
    font-weight: 1000;
}

.rate-mid {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-muted);
}

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

.price {
    font-size: 18px;
    font-weight: 1000;
}

/* -----------------------------
   13) Footer (WHITE)
------------------------------ */
.footer {
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, .92);
}

.footer-grid {
    display: grid;
    gap: 40px;
    padding: 48px 0;
}

@media (min-width:768px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 1000;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.footer li {
    margin: 0 0 10px;
}

.footer a {
    color: var(--text-muted);
    text-decoration: none;
}

.footer a:hover {
    color: var(--text);
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 16px 0;
    font-size: 12px;
    color: var(--text-muted);
}


/* SALES PAGE */

.sales-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: start;
}

.sales-left h1 {
    max-width: 600px;
}

.sales-checklist {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.sales-checklist li {
    margin-bottom: 14px;
    padding-left: 24px;
    position: relative;
    color: var(--text-muted);
}

.sales-checklist li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--shipdeez-green);
    font-weight: 700;
}

.sales-image img {
    max-width: 100%;
    margin-top: 30px;
}

.sales-card {
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 100px;
}

.sales-card h3 {
    margin-top: 0;
    margin-bottom: 20px;
}

.sales-form input,
.sales-form select,
.sales-form textarea {
    width: 100%;
    margin-bottom: 14px;
}

.sales-form textarea {
    resize: vertical;
    min-height: 90px;
}

.form-row {
    display: flex;
    gap: 10px;
}

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

    .sales-card {
        position: relative;
        top: 0;
    }
}



/* Pricing page */
.pricing-hero {
    display: grid;
    gap: 18px;
    align-items: start;
}

@media (min-width:1024px) {
    .pricing-hero {
        grid-template-columns: 1.15fr .85fr;
        gap: 24px;
    }
}

.pricing-tabs {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pricing-tab {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .75);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}

.pricing-tab.is-active {
    color: var(--text-dark);
    border-color: rgba(19, 93, 80, .35);
    box-shadow: 0 0 0 3px rgba(19, 93, 80, .12);
}

.pricing-panel {
    margin-top: 14px;
}

.pricing-panel.is-active {
    display: block;
}

.pricing-table-wrap {
    width: 100%;
    overflow: auto;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #fff;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.pricing-table th,
.pricing-table td {
    padding: 14px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.pricing-table thead th {
    background: #fafafa;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pricing-table tbody tr:hover td {
    background: rgba(17, 24, 39, .02);
}

.pricing-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

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

@media (min-width:768px) {
    .pricing-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

.get-started .form-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
}

.get-started input[type="email"] {
    width: min(520px, 100%);
    height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #0f172a;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    outline: none;
}

.get-started input[type="email"]::placeholder {
    color: rgba(15, 23, 42, 0.45);
}



/* Get Started page */
.getstarted-hero {
    align-items: start;
}

.benefits-list {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
    line-height: 1.65;
}

.benefits-list li {
    margin: 6px 0;
}

.testimonial {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 16px;
}

.testimonial-quote {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.testimonial-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    border: 1px solid var(--border);
    background: rgba(17, 24, 39, .03);
}

.signup-form {
    margin-top: 14px;
}

.signup-form label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    margin: 10px 0 6px;
}

.signup-form input,
.signup-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    background: #fff;
}

.form-grid {
    display: grid;
    gap: 12px;
}

@media (min-width:640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.req {
    color: #c2410c;
    font-weight: 900;
}

.check-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.check-row input {
    margin-top: 3px;
}

.btn.full {
    width: 100%;
    justify-content: center;
}

.sticky-card {
    position: sticky;
    top: 18px;
}









/* Get Started page */
.getstarted-hero {
    align-items: start;
}

.benefits-list {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
    line-height: 1.65;
}

.benefits-list li {
    margin: 6px 0;
}

.testimonial {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    padding: 16px;
}

.testimonial-quote {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.testimonial-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    border: 1px solid var(--border);
    background: rgba(17, 24, 39, .03);
}

.signup-form {
    margin-top: 14px;
}

.signup-form label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    margin: 10px 0 6px;
}

.signup-form input,
.signup-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    background: #fff;
}

.form-grid {
    display: grid;
    gap: 12px;
}

@media (min-width:640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.req {
    color: #c2410c;
    font-weight: 900;
}

.check-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.check-row input {
    margin-top: 3px;
}

.btn.full {
    width: 100%;
    justify-content: center;
}

.sticky-card {
    position: sticky;
    top: 18px;
}



/* Shipping Management page */
.shipmgmt-hero {
    gap: 18px;
}

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

@media (min-width:768px) {
    .shipmgmt-quick {
        grid-template-columns: repeat(4, 1fr);
    }
}

.icon-grid {
    display: grid;
    gap: 10px;
}

.icon-tile {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(17, 24, 39, .02);
}

.icon-dot {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    border: 1px solid var(--border);
    background: #fff;
}

.tile-title {
    font-weight: 900;
    font-size: 13px;
}

.tiny {
    font-size: 12px;
}

.shipmgmt-savings {
    display: grid;
    gap: 16px;
    align-items: center;
}

@media (min-width:900px) {
    .shipmgmt-savings {
        grid-template-columns: 1.05fr .95fr;
    }
}

.mock-graphic {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(19, 93, 80, .06), rgba(17, 24, 39, .02));
    padding: 14px;
}

.mock-graphic-inner {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}

.mock-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mock-pill {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    background: rgba(17, 24, 39, .02);
}

.mock-table {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.mock-line {
    height: 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .06);
}

.mock-note {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
}

.shipmgmt-sections {
    display: grid;
    gap: 16px;
}

.shipmgmt-section {
    display: grid;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
}

@media (min-width:980px) {
    .shipmgmt-section {
        grid-template-columns: 1fr 1fr;
        padding: 20px;
    }

    .shipmgmt-section.reverse> :first-child {
        order: 2;
    }

    .shipmgmt-section.reverse> :last-child {
        order: 1;
    }
}

.mock-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(19, 93, 80, .07), rgba(17, 24, 39, .02));
    padding: 14px;
}

.mock-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.mock-badge {
    font-size: 11px;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
}

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

.mock-lines {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.mock-lines>div {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(17, 24, 39, .06);
}

.mock-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border);
}

.mock-kpi-num {
    font-size: 20px;
    font-weight: 900;
}

.mock-kpi-text {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
}

.shipmgmt-links {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

@media (min-width:768px) {
    .shipmgmt-links {
        grid-template-columns: repeat(4, 1fr);
    }
}

.link-card {
    display: block;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(17, 24, 39, .02);
    font-weight: 900;
    color: var(--text-dark);
    text-decoration: none;
}

.link-card:hover {
    background: rgba(17, 24, 39, .03);
}



/* Try us free section (Index) */
.tryfree-bullets {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    color: var(--text-dark);
}

.tryfree-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.55;
}

.tryfree-bullets .check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    border: 1px solid rgba(19, 93, 80, .35);
    background: rgba(19, 93, 80, .10);
    color: var(--shipdeez-green);
    flex: 0 0 22px;
    margin-top: 1px;
}

.trust-badges {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

@media (min-width:768px) {
    .trust-badges {
        grid-template-columns: repeat(3, 1fr);
    }
}

.badge-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(17, 24, 39, .02);
    padding: 12px;
}

.badge-title {
    font-weight: 900;
    font-size: 13px;
}

.badge-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 800;
}

.tryfree-form {
    margin-top: 14px;
}

.tryfree-form label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    margin: 10px 0 6px;
}

.form-grid {
    display: grid;
    gap: 12px;
}

@media (min-width:640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.req {
    color: #c2410c;
    font-weight: 900;
}

.password-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.password-row input {
    flex: 1;
}

.btn.full {
    width: 100%;
    justify-content: center;
}


/*
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: radial-gradient( circle at 70% 40%, rgba(255,255,255,0.08), transparent 40% ), linear-gradient( 180deg, #1e3a8a 0%, #172554 100% );
}
*/



/* Free trial (Try us free) */
.tryfree-bullets {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    color: var(--text-dark);
}

.tryfree-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.55;
}

.tryfree-bullets .check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    border: 1px solid rgba(19, 93, 80, .35);
    background: rgba(19, 93, 80, .10);
    color: var(--shipdeez-green);
    flex: 0 0 22px;
    margin-top: 1px;
}

.trust-badges {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

@media (min-width:768px) {
    .trust-badges {
        grid-template-columns: repeat(3, 1fr);
    }
}

.badge-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(17, 24, 39, .02);
    padding: 12px;
}

.badge-title {
    font-weight: 900;
    font-size: 13px;
}

.badge-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 800;
}

.tryfree-form {
    margin-top: 14px;
}

.tryfree-form label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    margin: 10px 0 6px;
}

.tryfree-form input,
.tryfree-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    background: #fff;
}

.form-grid {
    display: grid;
    gap: 12px;
}

@media (min-width:640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.req {
    color: #c2410c;
    font-weight: 900;
}

.password-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.password-row input {
    flex: 1;
}

.btn.full {
    width: 100%;
    justify-content: center;
}

.sticky-card {
    position: sticky;
    top: 18px;
}



/* Signup / Try Free shared styles */
.tryfree-bullets {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    color: var(--text-dark);
}

.tryfree-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.55;
}

.tryfree-bullets .check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    border: 1px solid rgba(19, 93, 80, .35);
    background: rgba(19, 93, 80, .10);
    color: var(--shipdeez-green);
    flex: 0 0 22px;
    margin-top: 1px;
}

.trust-badges {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

@media (min-width:768px) {
    .trust-badges {
        grid-template-columns: repeat(3, 1fr);
    }
}

.badge-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(17, 24, 39, .02);
    padding: 12px;
}

.badge-title {
    font-weight: 900;
    font-size: 13px;
}

.badge-sub {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 800;
}

.tryfree-form {
    margin-top: 14px;
}

.tryfree-form label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    margin: 10px 0 6px;
}

.tryfree-form input,
.tryfree-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    background: #fff;
}

.form-grid {
    display: grid;
    gap: 12px;
}

@media (min-width:640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.req {
    color: #c2410c;
    font-weight: 900;
}

.password-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.password-row input {
    flex: 1;
}

.btn.full {
    width: 100%;
    justify-content: center;
}

.sticky-card {
    position: sticky;
    top: 18px;
}



/* ShipBlink-style signup screen */
.signup-blink-section {
    background: radial-gradient(circle at 20% 10%, rgba(30, 64, 175, .12), transparent 40%), radial-gradient(circle at 90% 20%, rgba(19, 93, 80, .10), transparent 45%), linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.signup-blink-grid {
    display: grid;
    gap: 20px;
    align-items: start;
}

@media (min-width:1000px) {
    .signup-blink-grid {
        grid-template-columns: 1.05fr .95fr;
        gap: 26px;
    }
}

.signup-blink-logo {
    font-size: 64px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1;
    margin: 6px 0 18px;
}

@media (max-width:600px) {
    .signup-blink-logo {
        font-size: 44px;
    }
}

.signup-blink-cards {
    display: grid;
    gap: 16px;
}

@media (min-width:720px) {
    .signup-blink-cards {
        grid-template-columns: 1fr 1fr;
    }
}

.signup-feature-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}

.signup-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    border: 1px solid var(--border);
    background: rgba(17, 24, 39, .02);
    margin-bottom: 10px;
}

.signup-feature-title {
    font-weight: 900;
    margin-bottom: 6px;
}

.signup-testimonial {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}

.signup-quote {
    margin: 0;
    line-height: 1.6;
    font-size: 14px;
    color: var(--text-dark);
}

.signup-byline {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.signup-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 50px rgba(17, 24, 39, .10);
}

.signup-card-head {
    padding: 18px;
    color: #fff;
    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
}

.signup-card-head-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.signup-promo-pill {
    margin-top: 12px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 13px;
    font-weight: 800;
}

.signup-gift {
    width: 24px;
    height: 24px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .18);
}

.signup-card-body {
    padding: 18px;
}

.signup-form-blink label {
    display: block;
    margin: 10px 0 6px;
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
}

.signup-form-blink input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    background: #fff;
}

.signup-ref-row {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.signup-ref-link {
    font-weight: 900;
    text-decoration: none;
}

.signup-foot {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.signup-foot-item {
    display: flex;
    gap: 8px;
    align-items: center;
}

.signup-mini-check {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(19, 93, 80, .35);
    background: rgba(19, 93, 80, .10);
    color: var(--shipdeez-green);
    font-size: 12px;
    font-weight: 900;
}

/* Make the signup card stay visible on desktop */
@media (min-width:1000px) {
    .signup-blink-right .signup-card {
        position: sticky;
        top: 18px;
    }
}

/* Expanded Rate Quote form (Sender / Recipient / Package) */
.rate-accordion {
    display: grid;
    gap: 12px;
}

.rate-details {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.rate-details summary {
    cursor: pointer;
    padding: 14px 14px;
    font-weight: 900;
    color: var(--text-dark);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.rate-details summary::after {
    content: "▾";
    font-weight: 900;
    color: var(--text-muted);
}

.rate-details[open] summary::after {
    content: "▴";
}

.rate-details-body {
    padding: 0 14px 14px;
}

.form-grid .span-2 {
    grid-column: 1 / -1;
}

/* Make textarea match inputs */
textarea.input {
    resize: vertical;
    min-height: 88px;
}



.hiw-hero-media {
    margin-top: 34px;
    display: flex;
    justify-content: center;
}

.hiw-hero-img {
    width: 100%;
    max-width: 980px;
    /* keep it clean on wide screens */
    height: auto;
    border-radius: 18px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Freight calculator page */
.freight-hero {
    display: grid;
    gap: 18px;
    align-items: start;
}

@media (min-width:1024px) {
    .freight-hero {
        grid-template-columns: 1.15fr .85fr;
        gap: 24px;
    }
}

.freight-layout {
    display: grid;
    gap: 16px;
    align-items: start;
}

@media (min-width:1024px) {
    .freight-layout {
        grid-template-columns: 1.2fr .8fr;
        gap: 20px;
    }
}

.freight-sticky {
    position: sticky;
    top: 18px;
}

.freight-tips {
    margin: 10px 0 0;
    padding-left: 18px;
    line-height: 1.7;
}

.freight-tips li {
    margin: 6px 0;
}

/* Inputs */
.freight-quick label,
.freight-form label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    margin: 10px 0 6px;
}

.freight-quick input,
.freight-quick select,
.freight-form input,
.freight-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    background: #fff;
}

.form-grid {
    display: grid;
    gap: 12px;
}

@media (min-width:640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.form-grid .span-2 {
    grid-column: 1 / -1;
}

textarea.input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0px;
    padding: 12px 12px;
    background: #fff;
    resize: vertical;
    min-height: 96px;
}

.acc-grid {
    margin-top: 12px;
}

.acc-checks {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

@media (min-width:700px) {
    .acc-checks {
        grid-template-columns: 1fr 1fr;
    }
}

.acc-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(17, 24, 39, .02);
    font-weight: 800;
    color: var(--text-dark);
}

.acc-item input {
    margin-top: 2px;
}

/* Submit row */
.freight-submit {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* If your buttons support this utility already, harmless to keep */
.btn.full {
    width: 100%;
    justify-content: center;
}



/* Integrations directory */
.integrations-hero {
    display: grid;
    gap: 18px;
    align-items: start;
}

@media (min-width:1024px) {
    .integrations-hero {
        grid-template-columns: 1.15fr .85fr;
        gap: 24px;
    }
}

.integrations-filters {
    display: grid;
    gap: 12px;
    align-items: end;
}

@media (min-width:900px) {
    .integrations-filters {
        grid-template-columns: 1.2fr .7fr .7fr .7fr;
    }
}

.filter label {
    display: block;
    margin-bottom: 6px;
}

.filter .input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px;
    background: #fff;
}

.filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.integrations-chips {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .75);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.chip.is-active {
    color: var(--text-dark);
    border-color: rgba(19, 93, 80, .35);
    box-shadow: 0 0 0 3px rgba(19, 93, 80, .12);
}

.integrations-meta {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

@media (min-width:768px) {
    .integrations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:1100px) {
    .integrations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.partner-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    padding: 14px;
    transition: transform .12s ease, box-shadow .12s ease;
}

.partner-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(17, 24, 39, .08);
}

.partner-top {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.partner-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    border: 1px solid var(--border);
    background: rgba(17, 24, 39, .02);
}

.partner-name {
    font-weight: 900;
    font-size: 15px;
}

.partner-tags {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    font-size: 11px;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(17, 24, 39, .02);
    color: var(--text-muted);
}

.integrations-empty {
    margin-top: 16px;
}


/* =========================
   Support page
========================= */

.support-hero {
    padding-top: 40px;
}

.support-hero-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.support-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.support-hero-badge {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .75);
    border-radius: 16px;
    padding: 12px 14px;
    min-width: 220px;
    box-shadow: 0 8px 20px rgba(17, 24, 39, .06);
}

.support-search {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 18px;
    flex-wrap: wrap;
}

.support-search .input {
    flex: 1 1 340px;
    padding: 14px 14px;
    border-radius: 16px;
}

.support-search .btn {
    padding: 14px 18px;
    border-radius: 16px;
}

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

.pill-btn {
    cursor: pointer;
    font-weight: 700;
}

.pill-btn:hover {
    background: #fff;
}

.support-results {
    margin-top: 18px;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.support-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.support-results-list {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.support-result {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    padding: 14px;
}

.support-result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.support-section-head {
    max-width: 72ch;
}

.support-grid {
    display: grid;
    gap: 16px;
}

@media (min-width:768px) {
    .support-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:1024px) {
    .support-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width:768px) {
    .support-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:1024px) {
    .support-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.support-card .btn {
    width: 100%;
    margin-top: 14px;
}

.support-icon {
    font-size: 26px;
    line-height: 1;
}

.support-icon.small {
    font-size: 20px;
}

.support-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-dark);
}

.badge.ghost {
    background: rgba(255, 255, 255, .6);
    color: var(--text-muted);
}

.badge.ok {
    border-color: rgba(19, 93, 80, .35);
    background: rgba(19, 93, 80, .08);
    color: var(--shipdeez-green);
}

.support-topic {
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.support-topic:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.support-topic .card-body {
    height: 100%;
}

.support-topic-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.topic-list {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 14px;
}

.topic-list li {
    margin: 6px 0;
}

.support-request-grid {
    display: grid;
    gap: 16px;
}

@media (min-width:1024px) {
    .support-request-grid {
        grid-template-columns: 1.25fr .75fr;
    }
}

.support-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.support-form-row {
    display: grid;
    gap: 12px;
}

@media (min-width:768px) {
    .support-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.4;
}

.support-attach {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px dashed rgba(107, 114, 128, .5);
    /* border-radius: 16px; */
    padding: 12px 14px;
    background: rgba(255, 255, 255, .55);
}

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

.support-steps {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
}

.support-steps li {
    margin: 10px 0;
}

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

/* ================================
   LETS GET STARTED SECTION
================================ */

.get-started .form-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
}

.get-started input[type="email"] {
    width: min(520px, 100%);
    height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #0f172a;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    outline: none;
}

.get-started input[type="email"]::placeholder {
    color: rgba(15, 23, 42, 0.45);
}


/* ================================
   Scrolling Logos (Carrier Marquee)
================================ */

.logo-marquee {
    padding: 72px 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.01));
}

.logo-marquee__head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 28px;
}

.logo-marquee__head h2 {
    font-size: clamp(30px, 3.2vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.logo-marquee__head p {
    margin: 0;
    color: rgba(15, 23, 42, 0.65);
}

.logo-marquee__wrap {
    position: relative;
    margin: 28px auto 0;
    width: 100%;
    overflow: hidden;
    border-radius: 22px;
    padding: 24px 0;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

/* Soft fade on edges like the example */
.logo-marquee__wrap::before,
.logo-marquee__wrap::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.logo-marquee__wrap::before {
    left: 0;
    background: linear-gradient(90deg, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0));
}

.logo-marquee__wrap::after {
    right: 0;
    background: linear-gradient(270deg, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0));
}

.logo-marquee__track {
    display: flex;
    gap: 18px;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: logo-marquee-scroll 28s linear infinite;
}

.logo-marquee__track--reverse {
    margin-top: 14px;
    animation-direction: reverse;
    opacity: 0.95;
}

.logo-marquee__group {
    display: flex;
    align-items: center;
    gap: 46px;
    padding: 0 24px;
}

.logo-marquee__group img {
    height: 34px;
    width: auto;
    max-width: 160px;
    filter: grayscale(100%);
    opacity: 0.85;
    transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}

.logo-marquee__wrap:hover .logo-marquee__track {
    animation-play-state: paused;
    /* pause on hover */
}

.logo-marquee__group img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-1px);
}

/* THEME BORDER */
.ship-card {
    box-shadow: 3px 3px 0 0 #000;
    border: 2px solid #000;
}

@keyframes logo-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

    /* because we duplicate the group */
}

@media (max-width: 640px) {
    .logo-marquee {
        padding: 56px 0;
    }

    .logo-marquee__wrap {
        border-radius: 18px;
    }

    .logo-marquee__wrap::before,
    .logo-marquee__wrap::after {
        width: 70px;
    }

    .logo-marquee__group {
        gap: 28px;
    }

    .logo-marquee__group img {
        height: 28px;
        max-width: 140px;
    }

    .logo-marquee__track {
        animation-duration: 22s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee__track {
        animation: none;
    }
}


/* ================================
   Stat Cards Carousel (Auto Scroll)
================================ */

.stat-carousel {
    padding: 72px 0;
}

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

.stat-carousel__head h2 {
    font-size: clamp(26px, 3vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.stat-carousel__head p {
    margin: 0;
    color: rgba(15, 23, 42, 0.65);
}

.stat-carousel__shell {
    position: relative;
    margin: 22px auto 0;
    max-width: 980px;
}

.stat-carousel__viewport {
    overflow: hidden;
    border-radius: 22px;
    outline: none;
}

.stat-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 18px;
    transform: translateX(0);
    transition: transform 500ms ease;
}

/* Desktop: show 3 like the screenshot */
@media (min-width: 860px) {
    .stat-carousel__track {
        grid-auto-columns: calc((100% - 36px) / 3);
    }
}

.stat-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    min-height: 220px;
    display: grid;
    grid-template-rows: 1fr auto;
}

.stat-card__top {
    display: grid;
    place-items: center;
    padding: 22px 18px;
}

.stat-card__value {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-card__num {
    font-size: clamp(44px, 4vw, 64px);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #1d4ed8;
    /* uses your theme? change to var(--brand) if you prefer */
}

.stat-card__bottom {
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    padding: 18px 18px 20px;
    display: grid;
    place-items: center;
    text-align: center;
}

.stat-card__label {
    font-size: 16px;
    color: rgba(15, 23, 42, 0.75);
    line-height: 1.25;
    max-width: 260px;
}

/* Nav arrows */
.stat-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    font-size: 26px;
    line-height: 1;
}

.stat-carousel__nav--prev {
    left: -14px;
}

.stat-carousel__nav--next {
    right: -14px;
}

@media (max-width: 640px) {
    .stat-carousel__nav--prev {
        left: 6px;
    }

    .stat-carousel__nav--next {
        right: 6px;
    }
}

/* Dots */
.stat-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.stat-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 0;
    background: rgba(15, 23, 42, 0.20);
    cursor: pointer;
}

.stat-dot[aria-selected="true"] {
    background: rgba(15, 23, 42, 0.75);
    width: 22px;
}

/* ================================
   Stat Carousel — Flip "page turn"
   (overrides sliding behavior)
================================ */

.stat-carousel__viewport {
    perspective: 1200px;
}

.stat-carousel__track {
    position: relative;
    height: 240px;
    /* controls card area height */
    display: block;
    /* override the grid */
    transform: none !important;
    transition: none !important;
}

.stat-carousel__viewport {
    perspective: 1200px;
}

.stat-carousel__track {
    position: relative;
    height: 240px;
}

.stat-card {
    position: absolute;
    inset: 0;
    width: 100%;
    transition: transform 520ms cubic-bezier(.2, .8, .2, 1), opacity 420ms ease;
    transform-origin: top center;
    will-change: transform, opacity;
}


/*.stat-card {
    position: absolute;
    inset: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 980px;*/
/* matches shell feel */
/*opacity: 0;
    pointer-events: none;
    transform-origin: top center;
    transform: translateY(10px) rotateX(-10deg);
    transition: opacity 280ms ease;
}*/

/* active card */
.stat-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* Flip animations */
.stat-card.flip-in {
    animation: statFlipIn 520ms cubic-bezier(.2, .8, .2, 1) both;
}

.stat-card.flip-out {
    animation: statFlipOut 520ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes statFlipIn {
    from {
        opacity: 0;
        transform: translateY(14px) rotateX(-18deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

@keyframes statFlipOut {
    from {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }

    to {
        opacity: 0;
        transform: translateY(-14px) rotateX(18deg);
    }
}

/* Dots stay the same; arrows stay the same */
/* ================================
   Pathways Section (Consumer/Business)
================================ */

.pathways {
    padding: 78px 0;
}

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

.pathways__head h2 {
    font-size: clamp(30px, 3.4vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.pathways__head p {
    margin: 0;
    color: rgba(15, 23, 42, 0.65);
}

.pathways__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    margin-top: 26px;
}

.path-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
    padding: 26px 24px 22px;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    position: relative;
    outline: none;
}

.path-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.14);
}

.path-card.is-selected {
    border-color: rgba(217, 119, 6, 0.35);
    box-shadow: 0 22px 60px rgba(217, 119, 6, 0.12);
}

.path-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
    margin-bottom: 10px;
}

.path-card__icon svg {
    width: 24px;
    height: 24px;
}

.path-card__title {
    margin: 2px 0 6px;
    font-size: 22px;
}

.path-card__desc {
    margin: 0 0 14px;
    color: rgba(15, 23, 42, 0.70);
    line-height: 1.45;
}

.path-card__bullets {
    margin: 0 0 16px;
    padding-left: 18px;
    color: rgba(15, 23, 42, 0.75);
}

.path-card__bullets li {
    margin: 6px 0;
}

.path-card__actions {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

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

.extra-chip {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.75);
    border-radius: 18px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.extra-chip strong {
    font-size: 14px;
}

.extra-chip .muted {
    font-size: 13px;
    color: rgba(15, 23, 42, 0.62);
}

.pathways__cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.btn-lg {
    padding: 14px 18px;
    border-radius: 16px;
}

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

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

    .pathways__cta {
        flex-direction: column;
    }
}


/* ================================
   Pathway panel buttons (modern)
================================ */

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

.panel-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: rgba(15, 23, 42, 0.92);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    transform: translateY(0);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
    overflow: hidden;
}

/* “sheen” hover pass */
.panel-btn::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events: none;
}

.panel-btn__arrow {
    display: inline-block;
    transition: transform .14s ease, opacity .14s ease;
    opacity: .9;
}

.panel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
    border-color: rgba(15, 23, 42, 0.18);
}

.panel-btn:hover::before {
    transform: translateX(120%);
}

.panel-btn:hover .panel-btn__arrow {
    transform: translateX(3px);
    opacity: 1;
}

.panel-btn:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

/* Variants */
.panel-btn--ghost {
    background: rgba(255, 255, 255, 0.72);
}

.panel-btn--primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 14px 30px rgba(217, 119, 6, 0.22);
}

.panel-btn--primary:hover {
    box-shadow: 0 20px 40px rgba(217, 119, 6, 0.30);
}

/* Focus visible for accessibility */
.panel-btn:focus {
    outline: none;
}

.panel-btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.22), 0 18px 34px rgba(15, 23, 42, 0.10);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

    .panel-btn,
    .panel-btn::before,
    .panel-btn__arrow {
        transition: none !important;
    }
}

/* ================================
   Pathway panel buttons (modern)
================================ */

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

.panel-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: rgba(15, 23, 42, 0.92);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    transform: translateY(0);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
    overflow: hidden;
}

/* “sheen” hover pass */
.panel-btn::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events: none;
}

.panel-btn__arrow {
    display: inline-block;
    transition: transform .14s ease, opacity .14s ease;
    opacity: .9;
}

.panel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
    border-color: rgba(15, 23, 42, 0.18);
}

.panel-btn:hover::before {
    transform: translateX(120%);
}

.panel-btn:hover .panel-btn__arrow {
    transform: translateX(3px);
    opacity: 1;
}

.panel-btn:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

/* Variants */
.panel-btn--ghost {
    background: rgba(255, 255, 255, 0.72);
}

.panel-btn--primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 14px 30px rgba(217, 119, 6, 0.22);
}

.panel-btn--primary:hover {
    box-shadow: 0 20px 40px rgba(217, 119, 6, 0.30);
}

/* Focus visible for accessibility */
.panel-btn:focus {
    outline: none;
}

.panel-btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.22), 0 18px 34px rgba(15, 23, 42, 0.10);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

    .panel-btn,
    .panel-btn::before,
    .panel-btn__arrow {
        transition: none !important;
    }
}


/* Light caramel hero background */
.hero--warm {
    position: relative;
    background: radial-gradient(900px 500px at 70% 30%, rgba(217, 119, 6, 0.16), rgba(217, 119, 6, 0) 60%), radial-gradient(700px 420px at 20% 40%, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0) 55%), linear-gradient(180deg, #fff7ed 0%, #ffffff 62%, #ffffff 100%);
    overflow: hidden;
}

.hero--warm::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}


/* ================================
   Hero overlay + taller height
================================ */

/*.section.hero.hero--overlay {
    position: relative;
    min-height: 620px;*/
/* ✅ increase hero height */
/*display: flex;
    align-items: center;
    overflow: hidden;
    background: #3f4b55;*/
/* your slate background */
/*}

@media (min-width: 1100px) {
    .section.hero.hero--overlay {
        min-height: 720px;
    }
}*/

/*.hero__inner {
    width: 100%;
    position: relative;
    z-index: 1;
}
*/
/* soft glow/gradient so text reads on top of background */
/*.section.hero.hero--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 520px at 20% 40%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%), radial-gradient(900px 520px at 70% 35%, rgba(217,119,6,0.18), rgba(217,119,6,0) 60%);
    pointer-events: none;
}*/

/* Left side overlay panel (NOT a white box) */
.
/*hero-panel {
    padding: 18px 0;
    max-width: 560px;
    color: #fff;*/
/* if you want white text on dark */
/*}*/

/* If you want the exact look (white text card feel, but overlay), use this instead: */
/*.hero-panel {
    padding: 28px 28px;
    border-radius: 22px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}*/

/* Make your existing typography work on dark */
.hero--overlay .h1 {
    color: #fff;
}

.hero--overlay .lead {
    color: rgba(255, 255, 255, 0.82);
}

/* Buttons inside hero */
.hero--overlay .btn.primary {
    box-shadow: 0 14px 32px rgba(217, 119, 6, 0.28);
}

.hero--overlay .btn.secondary {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Pills/tags */
.hero--overlay .pill-row .pill {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.86);
}

/* Right-side mascot */
.hero-media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-media img {
    width: min(520px, 44vw);
    height: auto;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.28));
}

/* Mobile: stack nicely */
@media (max-width: 900px) {
    .section.hero.hero--overlay {
        min-height: auto;
        padding: 72px 0 46px;
    }

    .hero-panel {
        max-width: 100%;
    }

    .hero-media img {
        width: min(420px, 82vw);
        margin-top: 18px;
    }
}


/* ================================
   HERO – Overlay Style
================================ */

.section.hero.hero--overlay {
    position: relative;
    background: #404C55;
    /* your exact color */
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* subtle depth so it’s not flat */
.section.hero.hero--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 25% 40%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%), radial-gradient(700px 400px at 75% 35%, rgba(217, 119, 6, 0.18), rgba(217, 119, 6, 0) 60%);
    pointer-events: none;
}

/*.hero__inner {
    position: relative;
    z-index: 1;
}*/

/* Glass overlay panel */
/*.hero-panel {
    max-width: 580px;
    padding: 36px;
    border-radius: 22px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.30);
}
*/
/* Text styling on dark */
.hero--overlay .h1 {
    color: #ffffff;
}

.hero--overlay .lead {
    color: rgba(255, 255, 255, 0.85);
}

/* Buttons */
.hero--overlay .btn.primary {
    box-shadow: 0 16px 40px rgba(217, 119, 6, 0.35);
}

.hero--overlay .btn.secondary {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Pills */
.hero--overlay .pill {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
}

/* Mascot */
.hero-media img {
    width: min(520px, 44vw);
    height: auto;
    filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.35));
}

/* ================================
   Base hamburger button
================================ */
.menu-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.9);
    display: none;
    /* hidden on desktop */
    place-items: center;
    gap: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.menu-btn span {
    width: 18px;
    height: 2px;
    background: rgba(17, 24, 39, 0.9);
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
}

/* Hamburger → X animation */
.menu-btn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

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

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

/* ================================
   Mobile-only rules
================================ */
@media (max-width: 767px) {

    /* Hide desktop nav */
    .nav,
    .only-desktop {
        display: none !important;
    }

}
    }

    /* ============================
       Overlay
    ============================ */
    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        display: none;
        z-index: 55;
    }

    .menu-overlay.is-open {
        display: block;
    }

    /* Keep header above overlay but below drawer */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
    }
}

/* ================================
   Prevent scroll when menu open
================================ */
html.menu-open,
html.menu-open body {
    overflow: hidden;
}


/* ================================
   Mobile Drawer — Desktop Safety
   (prevents header from duplicating)
================================ */

/* Always hide drawer + overlay by default (desktop + before JS runs) */
.mobile-nav,
.menu-overlay {
    display: none !important;
}

/* Hamburger should be hidden by default (desktop) */
.menu-btn {
    display: none;
}

/* =====================================================================
   ShipDeez Auth Pages (Login / Signup / Reset)
   - Uses your existing tokens + buttons
   - Adds the Zoho-like gray background + centered card
   ===================================================================== */
.auth-page {
    min-height: 100vh;
    background: #404C55;
    /* ✅ the grey you used */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
}

.auth-wrap {
    width: 100%;
    max-width: 980px;
    display: grid;
    gap: 18px;
    align-items: stretch;
}

@media (min-width: 980px) {
    .auth-wrap {
        grid-template-columns: 1.05fr 0.95fr;
        /* left info + right form */
        gap: 22px;
    }
}

.auth-left {
    color: #fff;
    padding: 18px 6px;
}

.auth-left .brand-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.auth-left .brand-inline img {
    width: 34px;
    height: 34px;
}

.auth-left h1 {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.auth-left p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.82);
    max-width: 52ch;
    line-height: 1.55;
}

.auth-bullets {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.auth-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
}

.auth-bullets .dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-weight: 900;
    margin-top: 1px;
}

/* Card */
.auth-card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

/* Optional subtle head area (can be removed if you want pure Zoho) */
.auth-card-head {
    padding: 18px 18px 0;
}

.auth-card-title {
    margin: 0;
    font-size: 22px;
    font-weight: 1000;
    letter-spacing: -0.02em;
    color: var(--text, #111827);
}

.auth-card-sub {
    margin: 8px 0 0;
    color: var(--text-muted, #6B7280);
    font-size: 14px;
    line-height: 1.45;
}

.auth-card-body {
    padding: 18px;
}

/* Form */
.auth-form {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.auth-form label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted, #6B7280);
}

.auth-input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--border, #E5E7EB);
    background: #fff;
    color: var(--text, #111827);
    outline: none;
    font-size: 14px;
}

.auth-input:focus {
    box-shadow: var(--focus, 0 0 0 3px rgba(19, 93, 80, .18));
    border-color: rgba(19, 93, 80, .55);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-link {
    color: rgba(19, 93, 80, 0.95);
    font-weight: 900;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-meta {
    color: var(--text-muted, #6B7280);
    font-size: 12px;
}

.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    color: var(--text-muted, #6B7280);
    font-size: 12px;
    font-weight: 800;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    background: var(--border, #E5E7EB);
}

/* Social buttons (optional) */
.auth-social {
    display: grid;
    gap: 10px;
}

.auth-social .btn {
    width: 100%;
    justify-content: center;
}

/* Fine-tune for small screens */
@media (max-width: 980px) {
    .auth-left {
        text-align: center;
        padding: 0;
    }

    .auth-left p {
        margin-left: auto;
        margin-right: auto;
    }

    .auth-bullets {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
}


/* ===============================
   Enhanced Feature Section
================================= */

.feature-enhanced {
    position: relative;
}

.feature-head {
    text-align: center;
    margin-bottom: 48px;
}

.feature-group {
    margin-bottom: 48px;
}

.feature-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--shipdeez-green);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.feature-grid {
    display: grid;
    gap: 20px;
}

@media (min-width:768px) {
    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle gradient accent line */
.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--shipdeez-orange), var(--shipdeez-green));
    opacity: 0;
    transition: opacity .3s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
    border-color: rgba(19, 93, 80, .3);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    font-size: 30px;
    margin-bottom: 14px;
    transition: transform .3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.2) rotate(6deg);
}

.feature-title {
    font-weight: 700;
    font-size: 15px;
}

/* Stagger animation on load */
.feature-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp .6s ease forwards;
}

.feature-card:nth-child(1) {
    animation-delay: .05s
}

.feature-card:nth-child(2) {
    animation-delay: .1s
}

.feature-card:nth-child(3) {
    animation-delay: .15s
}

.feature-card:nth-child(4) {
    animation-delay: .2s
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===============================
   Animated Shipping Lines (Background)
================================= */

.feature-enhanced {
    position: relative;
    overflow: hidden;
    /* keeps lines contained */
}

/* ensure content is above background */
.feature-enhanced .container {
    position: relative;
    z-index: 2;
}

.ship-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .55;
    /* overall subtlety */
}

/* Layer 1: diagonal “routes” */
.ship-lines::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: repeating-linear-gradient(135deg, rgba(17, 24, 39, .00) 0px, rgba(17, 24, 39, .00) 14px, rgba(19, 93, 80, .10) 14px, rgba(19, 93, 80, .10) 16px);
    filter: blur(.2px);
    transform: rotate(-6deg);
    animation: shipLinesDrift 18s linear infinite;
}

/* Layer 2: dotted “motion” trails */
.ship-lines::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(209, 129, 48, .16) 1.5px, transparent 2px) 0 0 / 22px 22px;
    transform: rotate(10deg);
    animation: shipDotsDrift 28s linear infinite;
    opacity: .7;
}

@keyframes shipLinesDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 420px 420px;
    }
}

@keyframes shipDotsDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -520px 520px;
    }
}

/* Optional: soft vignette to keep center readable */
.feature-enhanced::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(70% 60% at 50% 35%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .ship-lines::before,
    .ship-lines::after {
        animation: none !important;
    }
}

/* ===============================
   Pre-FAQ Conversion Section
================================= */

.pre-faq-close {
    position: relative;
    overflow: hidden;
}

.pre-faq-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("../brand/shipdeez-acorn-background.svg");
    background-size: 600px;
    background-repeat: repeat;
    background-position: center;
    opacity: .18;
    /* adjust to taste */
}

.pre-faq-close .pre-faq-bg {
    background-image: url("../brand/shipdeez-acorn-background.svg") !important;
}




@keyframes preDrift {
    from {
        background-position: 0 0, 0 0, 0 0;
    }

    to {
        background-position: 260px 260px, -300px 300px, 520px 520px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pre-faq-bg {
        animation: none !important;
    }
}

.pre-faq-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 28px;
    display: grid;
    gap: 28px;
    box-shadow: var(--shadow);
}

@media (min-width:1024px) {
    .pre-faq-card {
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
    }
}

.pre-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--shipdeez-green);
    margin-bottom: 10px;
}

.pre-sub {
    margin-top: 10px;
    max-width: 48ch;
}

.pre-actions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pre-trust {
    margin-top: 18px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

/* Right mock rate card */
.pre-mock {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.pre-mock:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(17, 24, 39, .12);
}

.mock-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    margin-bottom: 8px;
}

.mock-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

.save {
    color: var(--shipdeez-green);
    font-weight: 800;
}


/* Bottom Options accordions */
.opt-stack {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.opt {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.opt-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 14px;
    background: rgba(239, 233, 229, .35);
    border: 0;
    cursor: pointer;
}

.opt-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.opt-ic {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--border);
    flex: 0 0 34px;
}

.opt-title {
    font-weight: 900;
}

.opt-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.opt-caret {
    font-size: 16px;
    color: var(--text-muted);
    transition: transform .15s ease;
}

.opt-body {
    padding: 14px;
    border-top: 1px solid var(--border);
}

.opt-head[aria-expanded="true"] .opt-caret {
    transform: rotate(180deg);
}


/* App Subnav (dashboard feel) */
.app-subnav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header+.app-subnav {
    top: 64px;
    /* adjust if your header height differs */
}

.app-subnav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    flex-wrap: wrap;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
}

.crumb {
    color: var(--text-muted);
    text-decoration: none;
}

.crumb:hover {
    color: var(--text-dark);
}

.crumb-sep {
    color: var(--text-muted);
    opacity: .6;
}

.crumb-current {
    color: var(--text-dark);
}

.app-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.app-tab {
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
}

.app-tab:hover {
    color: var(--text-dark);
    background: #fafafa;
}

.app-tab.is-active {
    color: var(--text-dark);
    border-color: rgba(19, 93, 80, .35);
    box-shadow: 0 0 0 3px rgba(19, 93, 80, .12);
}


/* Make Create Shipment feel like an app page */
.app-page {
    padding-top: 18px;
}

.app-page .lead {
    margin-bottom: 0;
}

/* ============================
   ShipDeez Mega Footer (Grey)
============================ */

.sd-footer {
    background: #eef1f4;
    color: var(--text);
    border-top: 1px solid var(--border);
    padding: 56px 0 34px;
}

.sd-footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 22px;
}

.sd-footer__top-left h2 {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: -0.02em;
}

.sd-footer__top-left p {
    margin: 10px 0 0;
    color: var(--text-muted);
    max-width: 56ch;
}

.sd-footer__top-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sd-footer__rule {
    height: 1px;
    background: rgba(17, 24, 39, .14);
    margin: 22px 0;
}

.sd-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 26px;
    padding: 6px 0 14px;
}

.sd-footer__brand {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 900;
    color: var(--text);
    text-decoration: none;
}

.sd-footer__brand img {
    border-radius: 10px;
}

.sd-footer__tagline {
    margin: 10px 0 0;
    color: rgba(17, 24, 39, .65);
    font-weight: 700;
}

.sd-footer__col h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
}

.sd-footer__col a {
    display: block;
    padding: 7px 0;
    text-decoration: none;
    color: rgba(17, 24, 39, .72);
    font-weight: 700;
    font-size: 13px;
}

.sd-footer__col a:hover {
    color: var(--shipdeez-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sd-footer__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-top: 6px;
}

.sd-footer__fineprint {
    color: rgba(17, 24, 39, .65);
    font-weight: 800;
    font-size: 12.5px;
}

.sd-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

.sd-footer__legal a {
    color: rgba(17, 24, 39, .65);
    text-decoration: none;
    font-weight: 800;
    font-size: 12.5px;
}

.sd-footer__legal a:hover {
    color: var(--shipdeez-orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Responsive */
@media (max-width: 980px) {
    .sd-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .sd-footer__top-right {
        justify-content: flex-start;
    }

    .sd-footer__grid {
        grid-template-columns: 1fr;
    }

    .sd-footer__bottom {
        flex-direction: column;
    }

    .sd-footer__legal {
        justify-content: flex-start;
    }
}

/* =========================================================
   Compatibility block — MOVED TO buttons.css
========================================================= */

/* =========================================================
   Pathways CTA row (where your “plain text buttons” showed up)
========================================================= */
.pathways__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 18px;
}

/* =========================================================
   PATCH: Stop section collisions + fix footer grid
   Paste at BOTTOM of styles.css so it overrides earlier rules
========================================================= */

/* ---- 1) Contain backgrounds so they don't leak ---- */
.feature-enhanced,
.ship-smarter,
.pre-faq-close {
    position: relative;
    overflow: hidden;
    /* keeps background graphics contained */
}

/* Ensure content stays above any background layers */
.feature-enhanced .container,
.ship-smarter .container,
.pre-faq-close .container {
    position: relative;
    z-index: 2;
}

/* ---- 2) Scope ship-lines so it ONLY affects ship-smarter ---- */
/* If you currently have global .ship-lines styles, this will override them */
.ship-smarter .ship-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .55;
}

/* If you use pseudo layers on ship-lines, keep them scoped */
.ship-smarter .ship-lines::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: repeating-linear-gradient(135deg, rgba(17, 24, 39, .00) 0px, rgba(17, 24, 39, .00) 14px, rgba(19, 93, 80, .10) 14px, rgba(19, 93, 80, .10) 16px);
    transform: rotate(-6deg);
    animation: shipLinesDrift 18s linear infinite;
}

.ship-smarter .ship-lines::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(209, 129, 48, .16) 1.5px, transparent 2px) 0 0 / 22px 22px;
    transform: rotate(10deg);
    animation: shipDotsDrift 28s linear infinite;
    opacity: .7;
}

/* Kill any accidental ship-lines outside ship-smarter */
.feature-enhanced .ship-lines,
.pre-faq-close .ship-lines {
    display: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .ship-smarter .ship-lines::before,
    .ship-smarter .ship-lines::after {
        animation: none !important;
    }
}

/* ---- 3) Pre-FAQ background image layer (SVG pattern) ---- */
.pre-faq-close .pre-faq-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("../brand/shipdeez-acorn-background.svg");
    background-repeat: repeat;
    background-position: center;
    background-size: 520px;
    opacity: .14;
    /* adjust stronger/weaker here */
    filter: grayscale(100%) contrast(92%) brightness(112%);
}

/* Ensure the card is ALWAYS above pattern */
.pre-faq-close .pre-faq-card {
    position: relative;
    z-index: 2;
}

/* ---- 4) Fix the black FAQ section from “jumping up” ---- */
/* This prevents the FAQ from overlapping the section above */
.cta-faq {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    padding-top: 56px;
    /* gives breathing room */
    padding-bottom: 56px;
}

/* If your FAQ uses .wrap, keep it centered and not full-bleed */
.cta-faq .wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---- 5) Footer grid fix (supports 4–5 columns cleanly) ---- */
.footer .footer-grid {
    display: grid;
    gap: 24px;
    align-items: start;
}

/* Desktop: auto-fit columns so adding “Demos” doesn't break layout */
@media (min-width: 900px) {
    .footer .footer-grid {
        grid-template-columns: 1.3fr repeat(4, minmax(140px, 1fr));
    }
}

/* Smaller screens */
@media (max-width: 899px) {
    .footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* Footer bottom stays inside container and doesn't drift */
.footer .footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}


/* =========================================================
   ShipDeez — Enhanced Footer (matches locked light theme)
   ========================================================= */
.footer--enhanced {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(10px);
}

/* Top grid */
.footer-top {
    display: grid;
    gap: 36px;
    padding: 56px 0 32px;
}

@media (min-width: 860px) {
    .footer-top {
        grid-template-columns: 1.2fr repeat(4, 1fr);
        align-items: start;
    }
}

.footer-brand .footer-logo {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--text-dark);
}

.footer-tagline {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .75);
    font-size: 12px;
    color: var(--text-muted);
}

/* Columns */
.footer-col h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.footer-col li {
    margin: 0 0 10px;
}

.footer--enhanced a {
    color: var(--text-muted);
    text-decoration: none;
}

.footer--enhanced a:hover {
    color: var(--text-dark);
    text-decoration: none;
}

/* Sub row (Customer Portal Demos) */
.footer-sub {
    border-top: 1px solid var(--border);
    padding: 26px 0;
}

.footer-sub-inner h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
}

.footer-sub-links {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 10px;
}

@media (min-width: 560px) {
    .footer-sub-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .footer-sub-links {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Bottom bar */
.footer--enhanced .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding: 16px 0;
    font-size: 12px;
    color: var(--text-muted);
}

.footer-bottom-links {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 520px) {
    .footer-bottom-links {
        width: 100%;
        justify-content: flex-start;
    }
}

/* =========================================================
   ShipDeez — Dark Slate Footer Variant
   ========================================================= */

.footer--enhanced {
    background: #404C55;
    color: #E8EDF1;
    backdrop-filter: none;
}

/* Headings */
.footer--enhanced h4,
.footer--enhanced .footer-logo {
    color: #FFFFFF;
}

/* Tagline */
.footer--enhanced .footer-tagline {
    color: rgba(255, 255, 255, 0.75);
}

/* Links */
.footer--enhanced a {
    color: rgba(255, 255, 255, 0.75);
}

.footer--enhanced a:hover {
    color: #FFFFFF;
}

/* Badges */
.footer--enhanced .footer-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

/* Dividers */
.footer--enhanced .footer-sub,
.footer--enhanced .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Bottom strip text */
.footer--enhanced .footer-bottom {
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================
   Footer Logo Styling
   ========================================= */

.footer-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.footer-logo-img {
    height: 36px;
    /* Controlled size */
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.footer-wordmark {
    font-weight: 900;
    font-size: 16px;
    letter-spacing: .02em;
    color: #ffffff;
}

/* Slightly smaller on mobile */
@media (max-width:600px) {
    .footer-logo-img {
        height: 30px;
    }

    .footer-wordmark {
        font-size: 14px;
    }
}

.footer--enhanced a {
    position: relative;
    text-decoration: none;
}

.footer--enhanced a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--shipdeez-orange);
    transition: width .22s ease;
}

.footer--enhanced a:hover::after {
    width: 100%;
}

/* =========================================
   Footer Column Header Animation
   ========================================= */

.footer--enhanced h4 {
    position: relative;
    display: inline-block;
    transition: transform .18s ease, color .18s ease, letter-spacing .18s ease;
}

.footer--enhanced h4:hover {
    transform: translateY(-2px);
    letter-spacing: .4px;
    color: #ffffff;
}

/* =========================================
   Footer Link Glow Hover
   ========================================= */

.footer--enhanced a {
    position: relative;
    transition: color .18s ease;
}

.footer--enhanced a::before {
    content: "";
    position: absolute;
    inset: -4px -6px;
    background: radial-gradient(circle at center, rgba(253, 102, 27, .10) 0%, rgba(253, 102, 27, .10) 40%, transparent 70%);
    opacity: 0;
    border-radius: 8px;
    transition: opacity .22s ease, transform .22s ease;
    transform: scale(.95);
    pointer-events: none;
}

.footer--enhanced a:hover::before {
    opacity: 1;
    transform: scale(1);
}

.footer--enhanced a:hover {
    color: var(--shipdeez-orange);
}

/* =========================================================
   ShipDeez — Premium Footer Effects Pack (No Drift)
   - Stagger reveal on load
   - Divider glow line
   ========================================================= */

/* Base footer background */
.footer--enhanced {
    background: #404C55;
    /* slate */
}

/* 1) Premium divider glow line */
.footer--enhanced .footer-sub,
.footer--enhanced .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    position: relative;
}

.footer--enhanced .footer-sub::before,
.footer--enhanced .footer-bottom::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(253, 102, 27, .25) 20%, rgba(19, 93, 80, .22) 50%, rgba(253, 102, 27, .25) 80%, transparent 100%);
    filter: blur(1px);
    opacity: .55;
    pointer-events: none;
}

/* =========================================================
   ShipDeez — Footer Reveal on Scroll
   ========================================================= */

/* Base state (hidden) */
.footer--enhanced .footer-brand,
.footer--enhanced .footer-col,
.footer--enhanced .footer-sub-inner,
.footer--enhanced .footer-bottom {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.16, .8, .2, 1), transform .6s cubic-bezier(.16, .8, .2, 1);
}

/* Active state (revealed) */
.footer--enhanced.is-visible .footer-brand,
.footer--enhanced.is-visible .footer-col,
.footer--enhanced.is-visible .footer-sub-inner,
.footer--enhanced.is-visible .footer-bottom {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger timing */
.footer--enhanced.is-visible .footer-brand {
    transition-delay: .05s;
}

.footer--enhanced.is-visible .footer-col:nth-of-type(1) {
    transition-delay: .12s;
}

.footer--enhanced.is-visible .footer-col:nth-of-type(2) {
    transition-delay: .18s;
}

.footer--enhanced.is-visible .footer-col:nth-of-type(3) {
    transition-delay: .24s;
}

.footer--enhanced.is-visible .footer-col:nth-of-type(4) {
    transition-delay: .30s;
}

.footer--enhanced.is-visible .footer-sub-inner {
    transition-delay: .36s;
}

.footer--enhanced.is-visible .footer-bottom {
    transition-delay: .42s;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .footer--enhanced .footer-brand,
    .footer--enhanced .footer-col,
    .footer--enhanced .footer-sub-inner,
    .footer--enhanced .footer-bottom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ShipDeez — Premium Footer Effects (Light / White Footer)
   - White footer base
   - Orange/Green ambient drift (subtle)
   - Divider glow line
   - Stagger reveal (on load or when visible)
   ========================================================= */

.footer--enhanced.footer--lightfx {
    position: relative;
    overflow: hidden;
    background: #ffffff !important;
    color: #0b1220 !important;
    border-top: 1px solid rgba(17, 24, 39, .10);
}

/* Animated ambient glow layer (orange + green), tuned for WHITE footer */
.footer--enhanced.footer--lightfx::before {
    content: "";
    position: absolute;
    inset: -40% -30%;
    background: radial-gradient(circle at 18% 25%, rgba(19, 93, 80, .14), transparent 55%), radial-gradient(circle at 82% 52%, rgba(253, 102, 27, .18), transparent 58%), radial-gradient(circle at 55% 10%, rgba(253, 102, 27, .08), transparent 60%);
    filter: blur(18px);
    opacity: .9;
    transform: translate3d(0, 0, 0);
    animation: footerAmbientDrift 16s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Soft secondary sheen */
.footer--enhanced.footer--lightfx::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

/* Ambient drift animation */
@keyframes footerAmbientDrift {
    0% {
        transform: translate3d(-1.5%, -1.0%, 0) scale(1.02);
    }

    100% {
        transform: translate3d(1.5%, 1.0%, 0) scale(1.05);
    }
}

/* Keep footer content above effects */
.footer--enhanced.footer--lightfx .container,
.footer--enhanced.footer--lightfx .footer-top,
.footer--enhanced.footer--lightfx .footer-sub,
.footer--enhanced.footer--lightfx .footer-bottom {
    position: relative;
    z-index: 1;
}

/* Light footer link colors */
.footer--enhanced.footer--lightfx a {
    color: rgba(17, 24, 39, .80) !important;
}

.footer--enhanced.footer--lightfx a:hover {
    color: #0b1220 !important;
}

/* Badges look good on white */
.footer--enhanced.footer--lightfx .footer-badge {
    background: rgba(239, 233, 229, .75) !important;
    border-color: rgba(17, 24, 39, .10) !important;
    color: rgba(17, 24, 39, .78) !important;
}

/* Divider glow line (orange) between sections */
.footer--enhanced.footer--lightfx .footer-top {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.footer--enhanced.footer--lightfx .footer-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(253, 102, 27, .35) 25%, rgba(253, 102, 27, .18) 50%, rgba(19, 93, 80, .25) 75%, transparent 100%);
    box-shadow: 0 0 22px rgba(253, 102, 27, .22);
}

/* Footer bottom divider (subtle) */
.footer--enhanced.footer--lightfx .footer-bottom {
    border-top: 1px solid rgba(17, 24, 39, .10) !important;
}

/* =========================================================
   Stagger reveal (footer-only)
   Add class "footer-reveal" to items you want staggered.
   ========================================================= */
.footer--enhanced .footer-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

.footer--enhanced.is-in .footer-reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays (adjust as needed) */
.footer--enhanced.is-in .footer-reveal:nth-child(1) {
    transition-delay: .05s;
}

.footer--enhanced.is-in .footer-reveal:nth-child(2) {
    transition-delay: .12s;
}

.footer--enhanced.is-in .footer-reveal:nth-child(3) {
    transition-delay: .19s;
}

.footer--enhanced.is-in .footer-reveal:nth-child(4) {
    transition-delay: .26s;
}

.footer--enhanced.is-in .footer-reveal:nth-child(5) {
    transition-delay: .33s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .footer--enhanced.footer--lightfx::before {
        animation: none;
    }

    .footer--enhanced .footer-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}











/* ===== Dark gradient hero (Gray + ShipDeez Green) ===== */
/*.hero-bg {
    position: relative;
    overflow: hidden;
    color: #fff;*/
/* Base + glows */
/*background: radial-gradient(1200px 650px at 14% 0%, rgba(19, 93, 80, 0.65) 0%, rgba(19, 93, 80, 0.00) 62%), radial-gradient(900px 520px at 85% 12%, rgba(156, 163, 175, 0.22) 0%, rgba(156, 163, 175, 0.00) 55%), linear-gradient(180deg, #070A0F 0%, #0B1018 55%, #070A0F 100%);
}*/

/* keep the content above the decorative layers */
.hero-bg .container {
    position: relative;
    z-index: 1;
}

/* subtle vignette for depth */
.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(1200px 600px at 50% -10%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 70%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}

/* make existing text styles readable on dark bg */
.hero-bg .lead {
    color: rgba(255, 255, 255, 0.78);
}

.hero-bg .muted {
    color: rgba(255, 255, 255, 0.72);
}

/* pills + buttons should look good on dark bg */
.hero-bg .pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
}

.hero-bg .btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.hero-bg .btn.secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}

.hero-bg .btn.ghost {
    color: #fff;
}

.hero-bg .btn.ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

.hero-bg::before {
    content: "";
    position: absolute;
    inset: -80px -160px -160px -80px;
    pointer-events: none;
    /* Put your “UI collage” image here */
    background: url("brand/hero-ui.png") no-repeat;
    background-position: 110% 20%;
    background-size: clamp(520px, 55vw, 980px);
    opacity: 0.20;
    filter: grayscale(1) contrast(1.05);
    transform: rotate(-10deg);
}

/* Darken header when it's over a dark hero page */
body.has-dark-hero .site-header {
    background: rgba(10, 12, 16, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.has-dark-hero .nav a {
    color: rgba(255, 255, 255, 0.78);
}

body.has-dark-hero .nav a:hover {
    color: #fff;
}


/* Optional: slightly tighter hero spacing so it feels right under sticky header */
.section.hero-bg {
    padding-top: 44px;
}

@media (min-width: 768px) {
    .section.hero-bg {
        padding-top: 64px;
    }
}



/* =========================================================
   Footer Social Icons — locked modern sizing (fix huge SVGs)
   ========================================================= */

.footer--enhanced .footer-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.footer--enhanced .footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .80);
    flex: 0 0 auto;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.footer--enhanced .footer-social a:hover {
    background: var(--shipdeez-orange);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(253, 102, 27, .28);
}

/* HARD clamp SVG size (overrides any global svg rules) */
.footer--enhanced .footer-social svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: block;
    fill: currentColor;
    flex: 0 0 18px;
}




/* =========================================================
   Re-lock header/menu colors (prevents footer/link overrides)
   ========================================================= */

.site-header .nav a {
    color: var(--text-muted) !important;
}

.site-header .nav a:hover {
    color: var(--text-dark) !important;
    text-decoration: none !important;
}

.site-header .nav a.scale {
    color: var(--shipdeez-green) !important;
    font-weight: 700;
}