:root{
   
    --primary:             #004532;
    --primary-container:   #065f46;
    --primary-light:       #0d9488; /* Shifted to an energetic teal-green accent for vibrant action cues */
    --on-primary:          #ffffff;
    --primary-fixed:       #ccfbf1; /* Brightened for pristine tag backgrounds */

    --secondary:           #9d4300;
    --secondary-container: #ff6b00; /* Amplified intensity for high-priority payment action alerts */
    --on-secondary:        #ffffff;

    --tertiary:            #0f172a; /* Deep slate for high-contrast headers */

    --error:               #ef4444;
    --error-container:     #fee2e2;

    /* ---- surfaces (Calibrated to match smartorder's crisp, light aesthetic) ---- */
    --background:          #ffffff; /* Strict crisp white background base */
    --surface:             #ffffff;
    --surface-dim:         #f8fafc; /* Ultra-soft off-white for structural panels */
    --surface-container-lowest: #ffffff;
    --surface-container-low:    #f1f5f9;
    --surface-container:        #e2e8f0;
    --surface-container-high:   #cbd5e1;
    --surface-container-highest:#94a3b8;

    /* ---- text (Maximized line readability & contrast hierarchy) ---- */
    --on-surface:          #0f172a; /* High-contrast crisp body color */
    --slate-900:           #0f172a;
    --slate-600:           #475569;
    --slate-400:           #64748b; /* Bumped up slightly for fully accessible subtext labels */
    --outline:             #e2e8f0; /* Softened borders to mimic seamless SaaS panels */
    --outline-variant:     #f1f5f9;

    /* ---- shape (Softened geometric radius transitions) ---- */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 32px;

    /* ---- elevation (Soft, wide ambient shadows instead of harsh outlines) ---- */
    --shadow-1: 0 1px 3px rgba(15,23,42,.03), 0 1px 2px rgba(15,23,42,.02);
    --shadow-2: 0 4px 20px rgba(15,23,42,.04);
    --shadow-3: 0 20px 40px rgba(15,23,42,.06);

    /* ---- rhythm: the whitespace scale sections key off ---- */
    --space-section:      7rem;
    --space-section-sm:   4rem;
}

html{
    scroll-behavior: smooth;
    font-size: 16px;
}
body{
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: var(--on-surface);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
    line-height: 1.6;
}
::selection{ background: var(--primary-fixed); color: var(--primary); }

/* Typography Scaler to achieve that wide open, clean SaaS portal rhythm */
h1, .h1 { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--slate-900); }
h2, .h2 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--slate-900); }
h3, .h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; color: var(--slate-900); }
p { margin-bottom: 1.25rem; color: var(--slate-600); }

.eyebrow{ font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }

.font-tnum{ font-variant-numeric: tabular-nums; }

/* -------- reduced motion -------- */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* -------- focus visibility -------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* =========================================================
   BUTTONS (Padded, high-click target SaaS profiles)
   ========================================================= */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-weight:600; font-size:.9375rem; line-height:1.2;
    padding:.85rem 1.75rem; border-radius: 9999px;
    transition: all .2s cubic-bezier(.16,1,.3,1);
    white-space: nowrap; cursor:pointer; border:1px solid transparent;
}
.btn:active{ transform: scale(.98); }
.btn-primary{ background: var(--primary); color:#fff; box-shadow: var(--shadow-1); }
.btn-primary:hover{ background: var(--primary-container); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-secondary{ background:#fff; color: var(--slate-900); border-color: var(--outline); }
.btn-secondary:hover{ border-color: var(--slate-900); background: var(--surface-dim); transform: translateY(-1px); }
.btn-action{ background: var(--secondary-container); color:#fff; box-shadow: var(--shadow-1); }
.btn-action:hover{ background: var(--secondary); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-ghost{ color: var(--primary); background: transparent; }
.btn-ghost:hover{ background: var(--surface-dim); }
.btn-lg{ padding: 1.1rem 2.5rem; font-size: 1rem; }
.btn-sm{ padding: .55rem 1.25rem; font-size: .8125rem; }

/* =========================================================
   CARDS (Clean, flat layout structure using soft ambient borders)
   ========================================================= */
.card{
    background: var(--surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: all .3s cubic-bezier(.16,1,.3,1);
}
.card-hover:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--outline-variant); }
.card-elevated{ box-shadow: var(--shadow-3); border: none; }
.card-flush{ background: var(--surface-dim); border: 1px solid var(--outline-variant); box-shadow: none; }

/* =========================================================
   INPUTS (Clean border fields)
   ========================================================= */
.field-label{ display:block; font-size:.875rem; font-weight:600; color: var(--slate-900); margin-bottom:.5rem; }
.field-input{
    width:100%; padding:.85rem 1.1rem; border-radius: var(--radius);
    border:1px solid var(--outline); background: var(--surface); font-size:.9375rem; color: var(--on-surface);
    transition: all .15s ease;
}
.field-input::placeholder{ color: var(--slate-400); }
.field-input:focus{
    outline:none; border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0,69,50,.06);
}
.field-input.field-error{ border-color: var(--error); background-color: #fff8f8; }
.field-input.field-error:focus{ box-shadow: 0 0 0 4px rgba(239,68,68,.08); }
.field-hint{ font-size:.8125rem; color: var(--slate-400); margin-top:.4rem; }
.field-error-text{ font-size:.8125rem; color: var(--error); margin-top:.4rem; font-weight:500; }

/* =========================================================
   STATUS CHIPS
   ========================================================= */
.chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:700; padding:.35rem .8rem; border-radius: 9999px; letter-spacing:.02em; text-transform: uppercase; }
.chip-paid{ background: var(--primary-fixed); color: var(--primary); }
.chip-pending{ background:#ffecca; color: #b45309; }
.chip-overdue{ background: var(--error-container); color: var(--error); }
.chip-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* =========================================================
   PROGRESS
   ========================================================= */
.progress-track{ height:6px; background: var(--surface-dim); border-radius: 999px; overflow:hidden; }
.progress-fill{ height:100%; background: var(--primary); border-radius:999px; width:0%; transition: width 1.4s cubic-bezier(.16,1,.3,1); }

/* =========================================================
   NAV
   ========================================================= */
.site-header{ background: rgba(255,255,255,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom:1px solid transparent; transition: all .3s ease; }
.site-header.is-scrolled{ border-color: var(--outline); box-shadow: var(--shadow-1); background: rgba(255,255,255,.95); }
.nav-link{ position:relative; color: var(--slate-600); font-weight:600; font-size:.9375rem; transition: color .2s ease; }
.nav-link::after{ display:none; }
.nav-link:hover, .nav-link.is-active{ color: var(--primary); }

/* dropdown (Features / Solutions / Resources — smartorder-style nav) */
.nav-dropdown{ position:relative; }
.nav-dropdown-panel{
    position:absolute; top:calc(100% + 12px); left:50%; transform: translateX(-50%) translateY(6px);
    background:#fff; border:1px solid var(--outline); border-radius: var(--radius-md); box-shadow: var(--shadow-3);
    padding:.5rem; min-width:220px; opacity:0; pointer-events:none; transition: all .18s ease;
}
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel{
    opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-panel a{ display:block; padding:.6rem .75rem; border-radius: var(--radius-sm); font-size:.875rem; font-weight:600; color: var(--slate-600); }
.nav-dropdown-panel a:hover{ background: var(--surface-dim); color: var(--primary); }

/* mobile menu */
.mobile-menu{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.mobile-menu.is-open{ max-height:640px; }
.hamburger span{ display:block; width:22px; height:2px; background: var(--slate-900); border-radius:2px; transition: transform .3s ease, opacity .3s ease; }
.hamburger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   FEATURE TABS (mirrors smartorder's "Simple software. Powerful features." block)
   ========================================================= */
.feature-tab-btn{
    display:flex; align-items:center; gap:.75rem; width:100%; text-align:left;
    padding:1rem 1.25rem; border-radius: var(--radius-md); border:1px solid transparent;
    font-weight:700; font-size:.9375rem; color: var(--slate-600); background:transparent; cursor:pointer;
    transition: all .2s ease;
}
.feature-tab-btn:hover{ background: var(--surface-dim); }
.feature-tab-btn.is-active{ background: var(--primary-fixed); color: var(--primary); border-color: var(--primary-fixed); }
.feature-tab-panel{ display:none; }
.feature-tab-panel.is-active{ display:block; }

/* =========================================================
   DECORATIVE MOTION (blobs, floating chips, tilt, badge wiggle)
   ========================================================= */
.blob{ border-radius: 50%; filter: blur(60px); animation: blobDrift 10s ease-in-out infinite; }
@keyframes blobDrift{
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(12px,-16px) scale(1.06); }
}
.float-anim{ animation: floatUp 4s ease-in-out infinite; }
.float-anim-slow{ animation: floatUp 6s ease-in-out infinite; animation-delay: -2s; }
@keyframes floatUp{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.tilt-card{
    --rx: 0deg; --ry: 0deg;
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .25s ease;
}
.badge-wiggle{ animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle{
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    50% { transform: translateX(-50%) rotate(-2deg); }
}
.check-pop{ display:inline-block; }
.link-underline{ background-image: linear-gradient(currentColor,currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size .25s ease; padding-bottom: 2px; }
.link-underline:hover{ background-size: 100% 1px; }

/* =========================================================
   TESTIMONIAL CAROUSEL — track must be flex + transition for the
   JS-driven translateX to slide horizontally instead of stacking
   ========================================================= */
.carousel-track{
    display: flex;
    transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.carousel-dot{
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--outline); border: none; cursor: pointer;
    transition: all .25s ease;
}
.carousel-dot.is-active{ width: 22px; background: var(--primary); }

/* =========================================================
   AUTH ICON INPUTS — pill-shaped fields with a leading icon,
   matching the smartorder.ai login/signup reference
   ========================================================= */
.field-input-icon-wrap{ position:relative; }
.field-input-icon-wrap > i{
    position:absolute; left:1.15rem; top:50%; transform:translateY(-50%);
    color: var(--slate-400); font-size:1rem; pointer-events:none;
}
.field-input-pill{
    width:100%; padding:.95rem 1.25rem .95rem 2.85rem; border-radius:9999px;
    border:1px solid var(--outline); background: var(--surface); font-size:.9375rem; color: var(--on-surface);
    transition: all .15s ease;
}
.field-input-pill::placeholder{ color: var(--slate-400); }
.field-input-pill:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,69,50,.06); }
.field-input-pill.field-error{ border-color: var(--error); background-color:#fff8f8; }

.auth-divider{ display:flex; align-items:center; gap:.85rem; color: var(--slate-400); font-size:.8125rem; font-weight:600; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background: var(--outline); }

.btn-google{
    display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
    width:100%; padding:.85rem 1.5rem; border-radius:9999px;
    border:1px solid var(--outline); background:#fff; color: var(--slate-900);
    font-weight:600; font-size:.9375rem; cursor:not-allowed; opacity:.6;
}

/* =========================================================
   DASHBOARD SHELL LOGO (admin top-nav) — sized here since
   admin.css wasn't part of the files shared with me
   ========================================================= */
.top-nav-logo-img{ height: 26px; width: auto; transition: opacity .2s ease; }
.top-nav-logo.collapsed .top-nav-logo-img{ opacity: 0; width: 0; }

/* =========================================================
   SCROLL REVEAL & UTILITIES
   ========================================================= */
[data-reveal]{ opacity:0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform: translateX(-20px); }
[data-reveal="left"].is-visible{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(20px); }
[data-reveal="right"].is-visible{ transform: translateX(0); }
[data-reveal="scale"]{ transform: scale(.96); }
[data-reveal="scale"].is-visible{ transform: scale(1); }

/* Structural section dividers matching modern SaaS structures */
.section-padding { padding: var(--space-section) 0; }
.section-padding-sm { padding: var(--space-section-sm) 0; }
@media (max-width: 768px) {
    .section-padding { padding: 4rem 0; }
    .section-padding-sm { padding: 2.5rem 0; }
}