/* =====================================================================
   EPOS HUB — full design system
   Sections:
     1. Design tokens (CSS vars)
     2. Reset & base
     3. Utility layout
     4. Buttons
     5. Header / nav / mega menu
     6. Hero
     7. Sections – stats, features, workflow, testimonials, logos
     8. Forms
     9. Pricing
    10. Footer
    11. Animations & reveals
    12. Responsive breakpoints
===================================================================== */

/* ------- 1. TOKENS -------------------------------------------------- */
:root{
    --bg: #ffffff;
    --bg-alt: #f4f7fb;
    --bg-dark: #0e1a2e;
    --bg-dark-2: #14243d;
    --surface: #ffffff;
    --border: #e2e8f2;
    --border-dark: #22334f;

    --text: #0e1a2e;
    --text-muted: #5a6784;
    --text-inv: #f8fafc;
    --text-inv-muted: #a7b3c9;

    /* Brand blue (from EposHub logo) */
    --brand: #3f7cbe;
    --brand-2: #2d5f99;
    --brand-3: #1e4a7d;
    --brand-soft: #e3edf7;

    /* Accent orange (from EposHub logo) */
    --accent: #f39c1f;
    --accent-2: #d67e0a;
    --accent-soft: #feebcb;

    --danger: #ef4444;
    --success: #22c55e;

    --shadow-sm: 0 2px 8px rgba(14,26,46,.06);
    --shadow: 0 12px 40px -12px rgba(14,26,46,.18);
    --shadow-lg: 0 30px 80px -20px rgba(14,26,46,.3);
    --shadow-brand: 0 20px 60px -15px rgba(63,124,190,.45);
    --shadow-accent: 0 20px 60px -15px rgba(243,156,31,.45);

    --radius-sm: 8px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --container: 1200px;
    --header-h: 74px;

    --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-display: 'Sora', 'Inter', system-ui, sans-serif;

    --t-fast: .18s cubic-bezier(.4,0,.2,1);
    --t: .28s cubic-bezier(.4,0,.2,1);
    --t-slow: .55s cubic-bezier(.16,1,.3,1);
}

/* ------- 2. RESET & BASE ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    margin:0;
    font-family:var(--font-body);
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t-fast)}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem, 5vw + .5rem, 4.2rem)}
h2{font-size:clamp(1.8rem, 3vw + .5rem, 2.75rem)}
h3{font-size:clamp(1.25rem, 1.4vw + .5rem, 1.6rem)}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--brand);color:#fff}

/* ------- 3. LAYOUT UTILITIES --------------------------------------- */
.container{width:100%;max-width:var(--container);padding:0 clamp(16px, 3vw, 32px);margin:0 auto}
.section{padding:clamp(64px, 8vw, 120px) 0;position:relative}
.section-dark{background:var(--bg-dark);color:var(--text-inv)}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-alt{background:var(--bg-alt)}
.text-center{text-align:center}
.eyebrow{
    display:inline-block;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--brand);
    padding:6px 14px;
    border-radius:99px;
    background:var(--brand-soft);
    margin-bottom:16px;
}
.section-dark .eyebrow{background:rgba(63,124,190,.15);color:#6ee7b7}
.section-head{max-width:760px;margin:0 auto 56px;text-align:center}
.section-head p{color:var(--text-muted);font-size:1.1rem}
.section-dark .section-head p{color:var(--text-inv-muted)}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ------- 4. BUTTONS ------------------------------------------------- */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;
    font-weight:600;font-size:.95rem;
    border-radius:99px;
    transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
    position:relative;overflow:hidden;
    white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff;box-shadow:0 8px 20px -6px rgba(63,124,190,.5)}
.btn-primary:hover{background:linear-gradient(135deg, var(--brand-2), var(--brand-3));box-shadow:0 12px 28px -6px rgba(63,124,190,.7)}
.btn-accent{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;box-shadow:0 8px 20px -6px rgba(243,156,31,.5)}
.btn-accent:hover{background:linear-gradient(135deg, var(--accent-2), #b06808);box-shadow:0 12px 28px -6px rgba(243,156,31,.7)}
.btn-ghost{background:transparent;color:inherit;border:1.5px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.section:not(.section-dark) .btn-ghost{color:var(--text);border-color:var(--border)}
.section:not(.section-dark) .btn-ghost:hover{background:var(--bg-alt);border-color:var(--text)}
.btn-outline{background:transparent;color:var(--brand);border:1.5px solid var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff}
.btn-sm{padding:10px 20px;font-size:.88rem}
.btn-lg{padding:16px 32px;font-size:1rem}

/* ripple */
.btn::after{
    content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 40%);
    opacity:0;transition:opacity var(--t);
}
.btn:hover::after{opacity:1}

/* ------- 5. HEADER / NAV (cmexits-style clean pill) --------------- */
.site-header{
    position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:100;
    width:min(1240px, calc(100% - 32px));
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.5);
    border-radius:99px;
    box-shadow:0 10px 40px -12px rgba(14,26,46,.15);
    transition:all var(--t);
}
.site-header.scrolled{
    background:rgba(255,255,255,.92);
    box-shadow:0 20px 50px -15px rgba(14,26,46,.25);
    border-color:rgba(226,232,242,.9);
}
/* body{padding-top:110px} */
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 8px 0 20px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;transition:opacity var(--t)}
.brand:hover{opacity:.75}
.brand-img{height:34px;width:auto;display:block}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;z-index:120;background:var(--bg-alt);border-radius:12px}
.nav-toggle span{width:22px;height:2.5px;background:var(--text);border-radius:2px;transition:transform var(--t), opacity var(--t)}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.main-nav{display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end}
.nav-list{display:flex;list-style:none;gap:2px;margin:0;padding:0;align-items:center}
.nav-list > li > a{
    padding:10px 16px;border-radius:99px;
    font-weight:500;font-size:.92rem;letter-spacing:-.005em;
    display:inline-flex;align-items:center;gap:6px;
    position:relative;color:var(--text);
    transition:color var(--t-fast), background var(--t-fast);
}
.nav-list > li > a:hover{color:var(--brand);background:rgba(63,124,190,.08)}
.nav-list > li > a.active{color:var(--brand)}
.nav-list > li > a.active::after{
    content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
    width:4px;height:4px;border-radius:50%;background:var(--brand);
}

.nav-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-login{
    font-weight:600;font-size:.9rem;padding:8px 14px;border-radius:99px;color:var(--text-muted);
    transition:color var(--t-fast), background var(--t-fast);
}
.nav-login:hover{color:var(--brand);background:var(--bg-alt)}
.nav-cta .btn{
    padding:11px 22px;font-size:.9rem;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;box-shadow:0 6px 16px -4px rgba(243,156,31,.5);
}
.nav-cta .btn:hover{
    background:linear-gradient(135deg, var(--accent-2), #b06808);
    box-shadow:0 10px 22px -4px rgba(243,156,31,.7);
    transform:translateY(-1px);
}
.nav-cta .btn svg{transition:transform var(--t)}
.nav-cta .btn:hover svg{transform:translateX(3px)}

/* Simplified dropdown (replaces mega menu) */
.has-mega{position:relative}
.nav-drop svg{transition:transform var(--t)}
.has-mega:hover .nav-drop svg{transform:rotate(180deg)}
.mega{
    position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
    background:#fff;border:1px solid var(--border);border-radius:20px;
    box-shadow:0 20px 60px -15px rgba(14,26,46,.25);
    padding:14px;width:min(360px, 92vw);
    display:flex;flex-direction:column;gap:2px;
    opacity:0;pointer-events:none;transition:opacity var(--t), transform var(--t);
    z-index:200;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* Multi-column version */
.mega.mega-cols{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1.15fr;
    gap:20px;
    padding:24px;
    width:min(920px, 92vw);
}
.mega-col{display:flex;flex-direction:column;gap:2px}
.mega-title{
    display:block;
    font-size:.7rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-muted);
    padding:0 12px 8px;
}
.mega a.mega-item{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;border-radius:12px;
    color:var(--text);
    transition:background var(--t-fast), transform var(--t-fast);
}
.mega a.mega-item:hover{background:var(--bg-alt);transform:translateX(2px)}
.mega-icon{
    width:34px;height:34px;flex-shrink:0;
    border-radius:10px;
    background:linear-gradient(140deg, var(--brand-soft), rgba(63,124,190,.15));
    display:grid;place-items:center;color:var(--brand);
}
.mega-col:nth-child(2) .mega-icon{background:linear-gradient(140deg, var(--accent-soft), rgba(243,156,31,.15));color:var(--accent-2)}
.mega-item b{display:block;font-size:.9rem;font-weight:600;line-height:1.2}
.mega-item small{display:block;color:var(--text-muted);font-size:.75rem;margin-top:2px}

/* Promo box in mega */
.mega-promo{
    background:linear-gradient(140deg, var(--bg-dark), var(--bg-dark-2));
    color:#fff;border-radius:14px;padding:20px;
    display:flex;flex-direction:column;justify-content:center;gap:8px;
    position:relative;overflow:hidden;
}
.mega-promo::before{
    content:'';position:absolute;top:-40px;right:-40px;
    width:140px;height:140px;border-radius:50%;
    background:radial-gradient(circle, rgba(243,156,31,.3), transparent 70%);
}
.mega-promo-title{font-weight:700;font-size:1rem;position:relative}
.mega-promo p{color:var(--text-inv-muted);font-size:.82rem;margin:0;position:relative}
.mega-promo .btn{margin-top:8px;align-self:flex-start;background:var(--accent);color:#fff;box-shadow:none;position:relative}
.mega-promo .btn:hover{background:var(--accent-2)}

/* ------- 6. HERO --------------------------------------------------- */
.hero{
    position:relative;overflow:hidden;
    background:radial-gradient(ellipse at top, #0f1a2e 0%, var(--bg-dark) 60%);
    color:#fff;
    padding:clamp(80px, 12vw, 140px) 0 clamp(60px, 8vw, 100px);
    isolation:isolate;
}
.hero::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(63,124,190,.28), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(243,156,31,.2), transparent 45%);
    z-index:-1;
    animation:heroFloat 18s ease-in-out infinite alternate;
}
.hero::after{
    content:'';position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:60px 60px;
    z-index:-1;
    mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
}
@keyframes heroFloat{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(-40px,-30px) scale(1.1)}
}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.hero h1{margin-bottom:24px;background:linear-gradient(180deg, #fff 60%, #94a3b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:clamp(1.05rem, 1vw + .5rem, 1.25rem);color:var(--text-inv-muted);margin-bottom:36px;max-width:600px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.hero-badges{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:center;color:var(--text-inv-muted);font-size:.9rem;font-weight:500}
.hero-badges div{display:flex;align-items:center;gap:8px}
.hero-badges svg{color:var(--brand);flex-shrink:0}
.hero-rating{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);padding:8px 16px;border-radius:99px;font-size:.85rem;margin-bottom:24px;border:1px solid rgba(255,255,255,.1)}
.hero-rating .stars{color:var(--accent);letter-spacing:2px}

/* hero visual – device mock */
.hero-visual{position:relative;perspective:1200px}
.device-stack{position:relative;height:clamp(360px, 45vw, 520px)}
.device{
    position:absolute;background:linear-gradient(150deg,#fff,#e2e8f0);
    border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
    overflow:hidden;border:8px solid #0f172a;
    animation:deviceFloat 6s ease-in-out infinite;
}
.device-1{width:70%;aspect-ratio:16/10;left:0;top:5%;transform:rotate(-4deg);z-index:2}
.device-2{width:38%;aspect-ratio:9/16;right:0;bottom:0;transform:rotate(6deg);z-index:3;animation-delay:-3s}
.device-3{width:35%;aspect-ratio:1/1;left:15%;bottom:0;transform:rotate(2deg);z-index:1;animation-delay:-1.5s}
@keyframes deviceFloat{
    0%,100%{transform:translateY(0) rotate(var(--r, -4deg))}
    50%{transform:translateY(-14px) rotate(var(--r, -4deg))}
}
.device-1{--r:-4deg}
.device-2{--r:6deg}
.device-3{--r:2deg}
.device-screen{
    position:absolute;inset:0;
    background:
        linear-gradient(135deg, #3f7cbe 0%, #2d5f99 60%, #1e4a7d 100%);
    padding:20px;color:#fff;font-size:.7rem;
    display:flex;flex-direction:column;gap:8px;
}
.device-2 .device-screen{background:linear-gradient(160deg, #0f172a, #1e293b)}
.device-3 .device-screen{background:linear-gradient(140deg, #f39c1f, #d67e0a)}
.mini-row{background:rgba(255,255,255,.15);height:10px;border-radius:4px;width:80%}
.mini-row.w-60{width:60%}
.mini-row.w-40{width:40%}
.mini-row.w-100{width:100%}
.mini-tile{background:rgba(255,255,255,.2);border-radius:6px;padding:8px;flex:1;min-height:32px}

/* ------- 7. SECTIONS ----------------------------------------------- */

/* Stats strip */
.stats-strip{background:linear-gradient(180deg, var(--bg-dark), #0e1626);color:#fff;padding:56px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;text-align:center}
.stat{padding:20px}
.stat-num{font-family:var(--font-display);font-size:clamp(2rem, 3vw, 2.75rem);font-weight:800;background:linear-gradient(180deg, #fff, var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{color:var(--text-inv-muted);font-size:.9rem;margin-top:4px}

/* Logo marquee */
.logo-marquee{padding:48px 0;background:var(--bg-alt);overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.logo-marquee p{text-align:center;color:var(--text-muted);font-weight:600;margin-bottom:24px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.marquee-track{display:flex;gap:60px;animation:marquee 30s linear infinite;width:max-content}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-track:hover{animation-play-state:paused}
.logo-chip{
    display:grid;place-items:center;height:60px;width:160px;
    background:#fff;border-radius:12px;padding:12px 20px;
    color:var(--text-muted);font-weight:700;font-size:1rem;letter-spacing:.02em;
    border:1px solid var(--border);
    transition:transform var(--t), color var(--t);flex-shrink:0;
}
.logo-chip:hover{transform:translateY(-4px);color:var(--brand)}

/* Feature cards */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:32px 28px;transition:transform var(--t), box-shadow var(--t), border-color var(--t);
    position:relative;overflow:hidden;
}
.feature-card::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(140deg, var(--brand-soft), transparent 40%);
    opacity:0;transition:opacity var(--t);pointer-events:none;
}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--brand)}
.feature-card:hover::before{opacity:.5}
.feature-icon{
    width:56px;height:56px;border-radius:14px;
    display:grid;place-items:center;font-size:1.8rem;
    background:linear-gradient(140deg, var(--brand-soft), #c8dcf0);
    margin-bottom:20px;position:relative;
    box-shadow:inset 0 0 0 1px rgba(63,124,190,.15);
}
.feature-card h3{font-size:1.2rem;margin-bottom:10px}
.feature-card p{color:var(--text-muted);font-size:.95rem}
.feature-tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:block}

/* Alternating showcase (feature + image) */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:100px}
.showcase:last-child{margin-bottom:0}
.showcase.reverse{direction:rtl}
.showcase.reverse > *{direction:ltr}
.showcase h2{margin-bottom:20px}
.showcase p{color:var(--text-muted);font-size:1.05rem;margin-bottom:24px}
.showcase-list{list-style:none;padding:0;margin:0 0 28px}
.showcase-list li{padding:8px 0 8px 30px;position:relative;font-weight:500}
.showcase-list li::before{
    content:'';position:absolute;left:0;top:12px;
    width:18px;height:18px;border-radius:50%;
    background:var(--brand-soft);
    box-shadow:inset 0 0 0 2px var(--brand);
}
.showcase-list li::after{
    content:'✓';position:absolute;left:4px;top:8px;font-size:.7rem;font-weight:900;color:var(--brand);
}
.showcase-visual{
    background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-radius:var(--radius-lg);
    padding:40px;aspect-ratio:5/4;position:relative;overflow:hidden;
    box-shadow:var(--shadow);
}
.showcase-visual.dark{background:linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));color:#fff}
.showcase-visual.brand{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff}
.showcase-visual .mock{
    background:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow);
    height:100%;display:flex;flex-direction:column;gap:10px;color:var(--text);
}
.mock-bar{height:8px;background:var(--bg-alt);border-radius:4px}
.mock-bar.filled{background:var(--brand);width:70%}
.mock-tile{background:var(--bg-alt);border-radius:8px;padding:12px;font-size:.8rem;color:var(--text-muted)}

/* Workflow diagram (numbered steps in a curve) */
.workflow{background:var(--bg-dark);color:#fff;padding:100px 0;position:relative;overflow:hidden}
.workflow::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%, rgba(63,124,190,.2), transparent 50%);
}
.workflow-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;
    position:relative;z-index:1;
}
.wf-step{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);padding:22px 18px;position:relative;
    transition:transform var(--t), border-color var(--t), background var(--t);
}
.wf-step:hover{transform:translateY(-6px);border-color:var(--brand);background:rgba(63,124,190,.08)}
.wf-num{
    width:40px;height:40px;border-radius:50%;
    background:linear-gradient(140deg, var(--brand), var(--brand-2));
    display:grid;place-items:center;font-weight:800;color:#fff;
    margin-bottom:14px;font-family:var(--font-display);font-size:1.1rem;
    box-shadow:0 6px 20px -4px rgba(63,124,190,.6);
}
.wf-step h4{color:#fff;margin-bottom:6px;font-size:1rem}
.wf-step p{color:var(--text-inv-muted);font-size:.85rem}

/* Testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{
    background:#fff;border-radius:var(--radius-lg);padding:32px;border:1px solid var(--border);
    display:flex;flex-direction:column;gap:20px;transition:transform var(--t), box-shadow var(--t);
    position:relative;
}
.testi:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.testi::before{
    content:'"';position:absolute;top:16px;right:24px;
    font-family:Georgia,serif;font-size:5rem;color:var(--brand-soft);line-height:1;
}
.testi-stars{color:var(--accent);letter-spacing:2px}
.testi-quote{flex:1;font-size:1rem;color:var(--text);line-height:1.65}
.testi-author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.testi-avatar{
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(140deg, var(--brand), var(--brand-2));
    display:grid;place-items:center;color:#fff;font-weight:700;
}
.testi-name{font-weight:700;font-size:.95rem}
.testi-role{color:var(--text-muted);font-size:.82rem}

/* Platform devices strip */
.platforms{background:var(--bg-alt);padding:60px 0}
.platforms-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:32px}
.platform{
    background:#fff;border-radius:var(--radius);padding:20px 28px;
    display:flex;align-items:center;gap:12px;border:1px solid var(--border);
    transition:transform var(--t), border-color var(--t);
}
.platform:hover{transform:translateY(-4px);border-color:var(--brand)}
.platform-icon{width:36px;height:36px;display:grid;place-items:center;font-size:1.4rem}

/* CTA band */
.cta-band{padding:100px 0}
.cta-inner{
    background:linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
    color:#fff;border-radius:var(--radius-xl);
    padding:clamp(40px, 6vw, 72px);
    display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;
    position:relative;overflow:hidden;
    box-shadow:var(--shadow-lg);
}
.cta-blob{
    position:absolute;width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle, rgba(63,124,190,.4), transparent 60%);
    top:-200px;right:-100px;filter:blur(20px);
    animation:blob 12s ease-in-out infinite alternate;
}
@keyframes blob{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(-60px, 40px) scale(1.2)}
}
.cta-text{position:relative;z-index:1}
.cta-text h2{color:#fff;margin-bottom:14px;font-size:clamp(1.6rem, 2.4vw, 2.4rem)}
.cta-text p{color:var(--text-inv-muted)}
.cta-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}

/* ------- 8. FORMS -------------------------------------------------- */
.form-card{
    background:#fff;border-radius:var(--radius-lg);padding:36px;
    box-shadow:var(--shadow);border:1px solid var(--border);
}
.form-row{display:grid;gap:16px;margin-bottom:16px}
.form-row.grid-2{grid-template-columns:1fr 1fr}
.form-group label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--text)}
.form-control{
    width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;
    font:inherit;color:var(--text);background:#fff;transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(63,124,190,.12)}
textarea.form-control{min-height:120px;resize:vertical}
.form-submit{margin-top:8px}

/* Newsletter form */
.news-form{display:flex;gap:8px;margin-top:12px;margin-bottom:20px}
.news-form input{flex:1;padding:12px 16px;border-radius:99px;border:1px solid var(--border-dark);background:rgba(255,255,255,.04);color:#fff;font:inherit}
.news-form input::placeholder{color:var(--text-inv-muted)}
.news-form input:focus{outline:none;border-color:var(--brand)}

/* ------- 9. PRICING ------------------------------------------------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.plan{
    background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);
    padding:36px 32px;display:flex;flex-direction:column;gap:20px;
    transition:transform var(--t), border-color var(--t), box-shadow var(--t);
    position:relative;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan.featured{border-color:var(--brand);box-shadow:0 20px 60px -20px rgba(63,124,190,.4);transform:scale(1.02)}
.plan.featured::before{
    content:'Most Popular';position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    background:var(--brand);color:#fff;padding:5px 16px;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.plan-name{font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.plan-price{font-family:var(--font-display);font-size:2.75rem;font-weight:800}
.plan-price small{font-size:.9rem;color:var(--text-muted);font-weight:500}
.plan-desc{color:var(--text-muted);font-size:.95rem}
.plan-list{list-style:none;padding:0;margin:0;flex:1;display:flex;flex-direction:column;gap:10px}
.plan-list li{padding-left:26px;position:relative;font-size:.92rem}
.plan-list li::before{content:'✓';position:absolute;left:0;color:var(--brand);font-weight:800}

/* ------- 10. FOOTER ------------------------------------------------- */
.site-footer{background:var(--bg-dark);color:var(--text-inv);padding:80px 0 32px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px;margin-bottom:56px}
.foot-brand .brand-name{color:#fff}
.foot-desc{color:var(--text-inv-muted);margin:20px 0;max-width:340px}
.foot-social{display:flex;gap:10px}
.foot-social a{
    width:36px;height:36px;border-radius:10px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
    display:grid;place-items:center;color:var(--text-inv-muted);
    transition:background var(--t), color var(--t), transform var(--t);
}
.foot-social a:hover{background:var(--brand);color:#fff;transform:translateY(-3px)}
.foot-col h4{color:#fff;font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{color:var(--text-inv-muted);font-size:.92rem}
.foot-col a:hover{color:var(--brand)}
.foot-contact{color:var(--text-inv-muted);font-size:.88rem;display:flex;flex-direction:column;gap:6px}
.foot-bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
    padding-top:28px;border-top:1px solid var(--border-dark);color:var(--text-inv-muted);font-size:.85rem;
}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a:hover{color:var(--brand)}

/* ------- 11. ANIMATIONS -------------------------------------------- */
.reveal-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .8s var(--t-slow), transform .8s var(--t-slow)}
.reveal-on-scroll.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s var(--t-slow), transform .6s var(--t-slow)}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.4s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.47s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.54s}
.reveal-stagger.in > *:nth-child(9){transition-delay:.61s}

@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;animation-iteration-count:1!important}
    .reveal-on-scroll,.reveal-stagger > *{opacity:1;transform:none}
}

/* Page hero (inner pages) */
.page-hero{
    background:linear-gradient(140deg, var(--bg-dark), var(--bg-dark-2));
    color:#fff;padding:120px 0 80px;text-align:center;position:relative;overflow:hidden;
}
.page-hero::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(63,124,190,.32), transparent 45%),
               radial-gradient(circle at 70% 80%, rgba(243,156,31,.2), transparent 45%);
}
.page-hero > *{position:relative;z-index:1}
.page-hero h1{margin-bottom:16px}
.page-hero p{color:var(--text-inv-muted);font-size:1.15rem;max-width:720px;margin:0 auto}
.breadcrumb{color:var(--text-inv-muted);font-size:.88rem;margin-bottom:14px}
.breadcrumb a{color:var(--brand)}

/* Blog cards */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{
    background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
    transition:transform var(--t), box-shadow var(--t);
    display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.blog-thumb{aspect-ratio:16/9;background:linear-gradient(135deg, var(--brand), var(--brand-2));position:relative;overflow:hidden}
.blog-thumb::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 50%)}
.blog-body{padding:24px;flex:1;display:flex;flex-direction:column;gap:10px}
.blog-cat{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.blog-title{font-size:1.15rem;font-weight:700;font-family:var(--font-display);line-height:1.3}
.blog-meta{color:var(--text-muted);font-size:.85rem;margin-top:auto;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:space-between}

/* Team grid */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{text-align:center}
.team-avatar{
    width:120px;height:120px;border-radius:50%;margin:0 auto 16px;
    background:linear-gradient(140deg, var(--brand), var(--brand-2));
    display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-size:2.2rem;font-weight:800;
    box-shadow:var(--shadow);
}
.team-name{font-weight:700;font-size:1.05rem}
.team-role{color:var(--text-muted);font-size:.88rem}

/* Integrations logo grid */
.int-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:16px}
.int-tile{
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    padding:24px;text-align:center;transition:all var(--t);
}
.int-tile:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:var(--shadow-sm)}
.int-name{font-weight:700;font-size:.95rem;margin-top:8px}
.int-cat{color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* FAQ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:box-shadow var(--t)}
.faq-item[open]{box-shadow:var(--shadow-sm);border-color:var(--brand)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;font-weight:600;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.6rem;font-weight:400;color:var(--brand);transition:transform var(--t)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 24px 22px;color:var(--text-muted)}

/* ------- 12. RESPONSIVE -------------------------------------------- */
@media (max-width: 1024px){
    .hero-grid,.showcase{grid-template-columns:1fr;gap:40px}
    .showcase.reverse{direction:ltr}
    .features-grid,.testi-grid,.pricing-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
    .team-grid{grid-template-columns:repeat(3,1fr)}
    .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
    .cta-inner{grid-template-columns:1fr;text-align:center}
    .cta-actions{align-items:center}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 768px){
    :root{--header-h:64px}
    body{padding-top:88px}
    .site-header{top:12px;width:calc(100% - 16px);border-radius:24px}
    .nav-wrap{padding:0 8px 0 14px;gap:8px}
    .nav-cta .btn{padding:9px 16px;font-size:.82rem}
    .nav-login{display:none}
    .nav-toggle{display:flex}
    .main-nav{
        position:fixed;inset:0;
        background:linear-gradient(160deg, #0e1a2e 0%, #14243d 100%);
        flex-direction:column;
        padding:100px 24px 40px;gap:8px;justify-content:flex-start;
        transform:translateY(-100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
        overflow-y:auto;z-index:110;
    }
    .main-nav.open{transform:translateY(0)}
    .nav-list{flex-direction:column;width:100%;gap:2px;align-items:stretch}
    .nav-list li{width:100%}
    .nav-list > li > a{
        width:100%;padding:18px 20px;font-size:1.4rem;font-weight:700;
        font-family:var(--font-display);color:#fff;
        border-radius:14px;letter-spacing:-.02em;
        border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-list > li > a:hover,.nav-list > li > a.active{color:var(--accent);background:rgba(243,156,31,.08)}
    .nav-list > li > a.active::after{display:none}
    .nav-drop svg{width:14px;height:8px}
    .nav-cta{flex-direction:column;width:100%;padding-top:32px;margin-top:16px;border-top:1px solid rgba(255,255,255,.1);align-items:stretch;gap:12px}
    .nav-cta .nav-login{display:block;text-align:center;padding:14px;color:#fff;background:rgba(255,255,255,.06);border-radius:12px;font-size:1rem}
    .nav-cta .btn{justify-content:center;padding:16px;font-size:1rem;border-radius:12px}
    .mega{
        position:static;transform:none;opacity:1;pointer-events:auto;
        box-shadow:none;padding:0 0 8px 12px;gap:0;
        background:transparent;border:0;width:100%;display:none;
    }
    .has-mega.mega-open .mega{display:flex}
    .mega a.mega-item{color:var(--text-inv-muted);padding:12px 14px}
    .mega a.mega-item:hover{background:rgba(255,255,255,.05);color:#fff}
    .mega-item b{color:#fff}

    .features-grid,.testi-grid,.pricing-grid,.blog-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    .team-grid{grid-template-columns:repeat(2,1fr)}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1fr}
    .foot-bottom{justify-content:center;text-align:center}
    .plan.featured{transform:none}
    .form-row.grid-2{grid-template-columns:1fr}
    .hero{padding-top:60px}
    .device-stack{height:340px;margin-top:20px}
}

@media (max-width: 480px){
    .hero-cta{flex-direction:column;align-items:stretch}
    .hero-cta .btn{justify-content:center}
    .btn-lg{padding:14px 22px}
    .team-grid{grid-template-columns:1fr}
}

/* =====================================================================
   NEW: Restaurant workflow v2 (numbered 9-card grid with connectors)
===================================================================== */
.workflow-v2{padding:clamp(80px, 10vw, 140px) 0;background:var(--bg-alt);position:relative;overflow:hidden}
.workflow-v2::before{
    content:'';position:absolute;inset:0;
    background:
        radial-gradient(circle at 15% 20%, rgba(63,124,190,.08), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(243,156,31,.06), transparent 40%);
    pointer-events:none;
}
.wf2-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:26px;
    position:relative;z-index:1;
    perspective:1400px;
}
.wf2-card{
    position:relative;
    border-radius:24px;
    padding:28px 26px 26px;
    color:#fff;
    min-height:180px;
    display:flex;flex-direction:column;justify-content:space-between;
    box-shadow:
        0 24px 44px -18px rgba(14,26,46,.4),
        0 2px 0 rgba(255,255,255,.08) inset,
        0 -2px 0 rgba(0,0,0,.15) inset;
    transform-style:preserve-3d;
    transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .5s;
    cursor:default;overflow:hidden;
    isolation:isolate;
}
.wf2-card::before{
    content:'';position:absolute;inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 40%),
        radial-gradient(ellipse at top left, rgba(255,255,255,.15), transparent 60%);
    pointer-events:none;
}
.wf2-card::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.35), transparent 55%);
    opacity:0;transition:opacity .35s;
    pointer-events:none;
}
.wf2-card:hover::after{opacity:1}
.wf2-card:hover{
    box-shadow:
        0 40px 80px -20px rgba(14,26,46,.55),
        0 20px 50px -15px currentColor,
        0 2px 0 rgba(255,255,255,.15) inset,
        0 -2px 0 rgba(0,0,0,.2) inset,
        0 0 0 1px rgba(255,255,255,.15) inset;
}

/* Brand palette – blue + orange + navy variations */
.wf2-1{background:linear-gradient(140deg, #0e1a2e 0%, #1a2b47 100%);color:#0e1a2e}
.wf2-2{background:linear-gradient(140deg, #f39c1f 0%, #d67e0a 100%);color:#f39c1f}
.wf2-3{background:linear-gradient(140deg, #3f7cbe 0%, #2d5f99 100%);color:#3f7cbe}
.wf2-4{background:linear-gradient(140deg, #1e4a7d 0%, #0f2a4d 100%);color:#1e4a7d}
.wf2-5{background:linear-gradient(140deg, #2d5f99 0%, #14243d 100%);color:#2d5f99}
.wf2-6{background:linear-gradient(140deg, #5a94ce 0%, #3f7cbe 100%);color:#5a94ce}
.wf2-7{background:linear-gradient(140deg, #d67e0a 0%, #b06808 100%);color:#d67e0a}
.wf2-8{background:linear-gradient(140deg, #3f7cbe 0%, #1e4a7d 100%);color:#3f7cbe}
.wf2-9{background:linear-gradient(140deg, #0a1524 0%, #050c17 100%);color:#0a1524}

/* Restore text colors that the color: was overriding */
.wf2-card .wf2-title, .wf2-card .wf2-sub, .wf2-card .wf2-tag, .wf2-card .wf2-icon, .wf2-card .wf2-num{color:#fff}
.wf2-card .wf2-sub{color:rgba(255,255,255,.82)}

.wf2-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}
.wf2-icon{
    width:44px;height:44px;border-radius:12px;
    background:rgba(255,255,255,.18);
    display:grid;place-items:center;color:#fff;
    backdrop-filter:blur(6px);
    transform:translateZ(30px);
}
.wf2-num{
    width:30px;height:30px;border-radius:50%;
    background:rgba(255,255,255,.25);
    display:grid;place-items:center;
    font-family:var(--font-display);font-weight:800;font-size:.8rem;
    color:#fff;transform:translateZ(30px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.wf2-body{margin-top:32px;transform:translateZ(20px)}
.wf2-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:4px;color:#fff;line-height:1.25}
.wf2-sub{color:rgba(255,255,255,.85);font-size:.85rem;line-height:1.4}

/* Pill tags inside a card (like the "Order Placed" one) */
.wf2-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wf2-tag{
    background:rgba(255,255,255,.22);
    padding:3px 10px;border-radius:99px;
    font-size:.7rem;font-weight:600;letter-spacing:.02em;
}

/* Connector pins between cards */
.wf2-card .wf2-pin{
    position:absolute;bottom:-6px;right:-6px;
    width:14px;height:14px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px var(--bg-alt), 0 0 0 5px rgba(243,156,31,.35);
    z-index:2;
}

.wf2-foot{
    text-align:center;margin-top:44px;
    color:var(--text-muted);font-size:1rem;
}
.wf2-foot b{color:var(--brand);border-bottom:2px solid var(--brand);font-weight:700}

/* =====================================================================
   NEW: 3D tilt hover (used on feature cards, plans, workflow v2)
===================================================================== */
.tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.tilt-inner{transform:translateZ(30px);transition:transform .35s}

/* =====================================================================
   NEW: Loading screen (POS boot-up look)
===================================================================== */
#loader{
    position:fixed;inset:0;z-index:9999;
    background:linear-gradient(140deg, #0e1a2e 0%, #14243d 100%);
    display:grid;place-items:center;
    transition:opacity .6s ease, visibility .6s ease;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-wrap{text-align:center;color:#fff;max-width:340px;padding:20px}
.loader-terminal{
    width:200px;height:140px;
    background:#1e2b45;border-radius:14px;
    margin:0 auto 60px;position:relative;
    box-shadow:0 30px 70px -15px rgba(63,124,190,.4), inset 0 0 0 2px rgba(255,255,255,.05);
    animation:loaderPulse 2s ease-in-out infinite;
}
.loader-terminal::before{
    content:'';position:absolute;top:0;left:0;right:0;height:20px;
    background:#12213b;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.loader-terminal::after{
    content:'';position:absolute;top:6px;left:10px;
    width:8px;height:8px;border-radius:50%;background:var(--accent);
    box-shadow:14px 0 0 rgba(255,255,255,.2), 28px 0 0 rgba(255,255,255,.2);
}
.loader-screen{
    position:absolute;top:28px;left:10px;right:10px;bottom:10px;
    background:linear-gradient(180deg, #3f7cbe, #2d5f99);
    border-radius:6px;
    padding:10px;
    display:flex;flex-direction:column;gap:5px;
    overflow:hidden;
}
.loader-line{
    height:6px;background:rgba(255,255,255,.35);border-radius:2px;
    animation:loaderLine 1.4s ease-in-out infinite;
    transform-origin:left;
}
.loader-line:nth-child(1){width:80%;animation-delay:0s}
.loader-line:nth-child(2){width:60%;animation-delay:.15s}
.loader-line:nth-child(3){width:70%;animation-delay:.3s}
.loader-line:nth-child(4){width:45%;animation-delay:.45s;background:var(--accent)}
.loader-line:nth-child(5){width:55%;animation-delay:.6s}
@keyframes loaderLine{
    0%{transform:scaleX(0);opacity:.3}
    50%{transform:scaleX(1);opacity:1}
    100%{transform:scaleX(0);opacity:.3;transform-origin:right}
}
.loader-receipt{
    position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
    width:60px;height:70px;
    background:#fff;border-radius:2px;
    animation:loaderReceipt 2.5s ease-in-out infinite;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.loader-receipt::before{
    content:'';position:absolute;inset:6px;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, #e2e8f0 3px 5px);
    border-radius:1px;
}
@keyframes loaderReceipt{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(-40px)}
}
@keyframes loaderPulse{
    0%,100%{box-shadow:0 30px 70px -15px rgba(63,124,190,.4), inset 0 0 0 2px rgba(255,255,255,.05)}
    50%{box-shadow:0 30px 90px -10px rgba(63,124,190,.7), inset 0 0 0 2px rgba(63,124,190,.4)}
}
.loader-logo{
    font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;
    margin-bottom:6px;
}
.loader-logo span:first-child{color:var(--brand)}
.loader-logo span:last-child{color:var(--accent)}
.loader-text{color:var(--text-inv-muted);font-size:.85rem;margin-bottom:20px}
.loader-bar{
    width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;
    margin:0 auto;
}
.loader-bar-fill{
    height:100%;
    background:linear-gradient(90deg, var(--brand), var(--accent));
    border-radius:99px;
    animation:loaderBar 1.6s ease-in-out infinite;
}
@keyframes loaderBar{
    0%{width:0;margin-left:0}
    50%{width:100%;margin-left:0}
    100%{width:0;margin-left:100%}
}

/* =====================================================================
   NEW: Header brand image + accent button link in header
===================================================================== */
.brand-img{height:38px;width:auto;display:block}

/* =====================================================================
   NEW: Extra floating shapes for hero
===================================================================== */
.hero-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.hero-shapes span{
    position:absolute;border-radius:50%;
    background:linear-gradient(140deg, rgba(63,124,190,.6), rgba(243,156,31,.4));
    filter:blur(30px);opacity:.4;
    animation:floatShape 12s ease-in-out infinite;
}
.hero-shapes span:nth-child(1){width:180px;height:180px;top:10%;left:5%;animation-delay:0s}
.hero-shapes span:nth-child(2){width:120px;height:120px;bottom:15%;right:10%;animation-delay:-4s;background:linear-gradient(140deg, rgba(243,156,31,.5), rgba(63,124,190,.3))}
.hero-shapes span:nth-child(3){width:80px;height:80px;top:50%;right:30%;animation-delay:-8s}
@keyframes floatShape{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(30px,-40px) scale(1.15)}
    66%{transform:translate(-25px,30px) scale(.9)}
}

/* =====================================================================
   NEW: Gradient text accent
===================================================================== */
.gradient-text{
    background:linear-gradient(120deg, var(--brand) 0%, var(--accent) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    display:inline-block;
}

/* =====================================================================
   NEW: Card tilt shadow enhancer
===================================================================== */
@media (prefers-reduced-motion: reduce){
    .tilt{transform:none!important}
    #loader{display:none}
}

/* Mobile tweaks for the new workflow */
@media (max-width:900px){
    .wf2-grid{grid-template-columns:repeat(2, 1fr);gap:16px}
}
@media (max-width:520px){
    .wf2-grid{grid-template-columns:1fr}
}

/* =====================================================================
   PREMIUM v3 – magnetic buttons, split text, marquee band,
   glass cards, ambient effects
===================================================================== */

/* ------- Scroll progress bar (top of viewport) --------------------- */
/* removed – default browser scroll only */

/* ------- Magnetic buttons ------------------------------------------ */
.magnetic{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.magnetic > *{pointer-events:none} /* let mouse events reach parent */

/* ------- Split text reveal (words / chars) ------------------------- */
.split-text .word{
    display:inline-block;
    opacity:0;transform:translateY(24px) rotate(3deg);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.split-text.in .word{opacity:1;transform:translateY(0) rotate(0)}
.split-text .word:nth-child(1){transition-delay:.05s}
.split-text .word:nth-child(2){transition-delay:.12s}
.split-text .word:nth-child(3){transition-delay:.19s}
.split-text .word:nth-child(4){transition-delay:.26s}
.split-text .word:nth-child(5){transition-delay:.33s}
.split-text .word:nth-child(6){transition-delay:.4s}
.split-text .word:nth-child(7){transition-delay:.47s}
.split-text .word:nth-child(8){transition-delay:.54s}
.split-text .word:nth-child(9){transition-delay:.61s}
.split-text .word:nth-child(10){transition-delay:.68s}
.split-text .word:nth-child(n+11){transition-delay:.75s}

/* ------- Marquee band (creative small twin-row style) ------------- */
.marquee-band{
    padding:32px 0;overflow:hidden;position:relative;
    background:linear-gradient(90deg, var(--bg-dark) 0%, #14243d 50%, var(--bg-dark) 100%);
    color:#fff;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);
}
.marquee-band::before, .marquee-band::after{
    content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;
}
.marquee-band::before{left:0;background:linear-gradient(90deg, var(--bg-dark), transparent)}
.marquee-band::after{right:0;background:linear-gradient(90deg, transparent, var(--bg-dark))}

.marquee-row{
    display:flex;gap:48px;
    white-space:nowrap;
    width:max-content;
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(1.1rem, 1.8vw, 1.75rem);
    letter-spacing:-.01em;
    line-height:1.2;
    text-transform:uppercase;
}
.marquee-row-1{animation:marquee-band 32s linear infinite}
.marquee-row-2{
    animation:marquee-band-reverse 38s linear infinite;
    margin-top:14px;
}
@keyframes marquee-band{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}
@keyframes marquee-band-reverse{
    0%{transform:translateX(-50%)}
    100%{transform:translateX(0)}
}

.marquee-row span{
    display:inline-flex;align-items:center;gap:48px;
    transition:transform .3s;
}
.marquee-row span::after{
    content:'✦';color:var(--accent);
    font-size:.7em;transform:translateY(-.05em);
    opacity:.7;
}
.marquee-row span:last-child::after{content:''}

/* Alternating filled + outline text for creativity */
.marquee-row-1 span:nth-child(even) em,
.marquee-row-2 span:nth-child(odd) em{
    font-style:normal;
    color:transparent;
    -webkit-text-stroke:1.2px rgba(255,255,255,.6);
}
.marquee-row-2 span:nth-child(even) em{
    color:var(--accent);
}

.marquee-band:hover .marquee-row{animation-play-state:paused}
.marquee-row span:hover em{transform:scale(1.03);color:var(--accent);-webkit-text-stroke:0}

/* ------- Glass cards ----------------------------------------------- */
.glass{
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.12);
}

/* ------- Enhanced blob morphing ------------------------------------ */
@keyframes blobMorph{
    0%,100%{border-radius:50% 40% 60% 30% / 60% 30% 70% 40%;transform:translate(0,0) rotate(0)}
    33%{border-radius:40% 60% 30% 70% / 40% 70% 30% 60%;transform:translate(30px,-20px) rotate(120deg)}
    66%{border-radius:60% 30% 70% 40% / 30% 60% 40% 70%;transform:translate(-20px,30px) rotate(240deg)}
}
.hero-shapes span{
    animation:blobMorph 15s ease-in-out infinite, floatShape 12s ease-in-out infinite;
    border-radius:50% 40% 60% 30% / 60% 30% 70% 40%;
}

/* ------- Deeper 3D on workflow cards ------------------------------- */
.wf2-card{
    transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow var(--t);
}
.wf2-card:hover{
    box-shadow:0 40px 80px -20px rgba(14,26,46,.6),
               0 0 0 1px rgba(255,255,255,.15) inset,
               0 20px 40px -20px currentColor;
}

/* ------- Feature card border-glow follow --------------------------- */
.feature-card{
    position:relative;
}
.feature-card::after{
    content:'';position:absolute;inset:-1px;border-radius:inherit;
    background:radial-gradient(400px circle at var(--fx, 50%) var(--fy, 50%),
               rgba(63,124,190,.25), transparent 40%);
    opacity:0;transition:opacity .35s;pointer-events:none;
    z-index:0;
}
.feature-card:hover::after{opacity:1}
.feature-card > *{position:relative;z-index:1}

/* ------- Section entrance scale/fade ------------------------------- */
.zoom-in{opacity:0;transform:scale(.96);transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
.zoom-in.in{opacity:1;transform:scale(1)}

/* ------- Text mask reveal (line by line) --------------------------- */
.mask-reveal{overflow:hidden;display:inline-block;line-height:1.15;padding-bottom:.05em}
.mask-reveal > span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mask-reveal.in > span{transform:translateY(0)}
.mask-reveal-2 > span{transition-delay:.15s}
.mask-reveal-3 > span{transition-delay:.3s}

/* ------- Parallax layer ------------------------------------------- */
.parallax{will-change:transform;transition:transform .1s linear}

/* ------- Marquee band responsive ----------------------------------- */
@media (max-width:640px){
    .marquee-band{padding:32px 0}
    .marquee-row{gap:24px;font-size:1.05rem}
    .marquee-row span{gap:24px}
}

/* ------- Reduced motion — kill all the fancy stuff ---------------- */
@media (prefers-reduced-motion: reduce){
    #cursor, #cursor-ring, #scroll-progress{display:none}
    html, body, a, button{cursor:auto!important}
    .marquee-row, .hero-shapes span{animation:none!important}
    .split-text .word, .mask-reveal > span{opacity:1;transform:none}
}

/* =====================================================================
   FINAL POLISH – hero refinements, workflow icons, section rhythm
===================================================================== */

/* Bigger, more premium workflow icons + numbers */
.wf2-icon{
    width:48px;height:48px;border-radius:14px;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(10px);
    display:grid;place-items:center;color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.15);
    transform:translateZ(30px);
}
.wf2-num{
    width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.15);
    display:grid;place-items:center;
    font-family:var(--font-display);font-weight:800;font-size:.85rem;
    color:#fff;transform:translateZ(30px);
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.15);
    backdrop-filter:blur(10px);
}
.wf2-title{font-size:1.12rem;letter-spacing:-.01em}

/* Hero heading — bigger + more presence */
.hero h1{
    font-size:clamp(2.6rem, 5.5vw + .5rem, 4.8rem);
    line-height:1.02;letter-spacing:-.03em;
    margin-bottom:24px;
    background:linear-gradient(180deg, #fff 30%, #94a3b8);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Bigger hero CTA */
.hero-cta .btn-lg{padding:18px 36px;font-size:1.02rem}

/* Section head spacing tighten */
.section-head h2{font-size:clamp(2rem, 3.5vw + .5rem, 3.2rem);letter-spacing:-.025em;line-height:1.05}

/* Feature cards – lift shadow tone */
.feature-card{
    padding:36px 30px;
    background:#fff;
    border:1px solid var(--border);
}
.feature-card:hover{
    box-shadow:0 30px 60px -20px rgba(63,124,190,.25),
               0 0 0 1px var(--brand) inset;
    border-color:transparent;
}
.feature-icon{
    width:60px;height:60px;border-radius:16px;
    font-size:1.9rem;
    box-shadow:0 8px 24px -8px rgba(63,124,190,.4),
               inset 0 1px 0 rgba(255,255,255,.6);
}

/* Testimonial cards — softer */
.testi{padding:36px;border-radius:24px}
.testi:hover{box-shadow:0 30px 60px -20px rgba(63,124,190,.2)}

/* Plan cards — refined 3D */
.plan{border-radius:24px;padding:40px 32px}
.plan:hover{box-shadow:0 30px 70px -20px rgba(63,124,190,.3)}
.plan.featured{
    background:linear-gradient(180deg, #fff, #f4f7fb);
    border-width:2px;
    box-shadow:0 24px 60px -20px rgba(63,124,190,.4),
               inset 0 1px 0 rgba(255,255,255,.9);
}

/* Section-alt lighter tint */
.section-alt{background:linear-gradient(180deg, #f4f7fb 0%, #ffffff 100%)}

/* CTA band – blue gradient with orange blob */
.cta-inner{
    background:
        linear-gradient(135deg, var(--brand) 0%, var(--brand-3) 60%, #0a1c33 100%);
}
.cta-blob{
    background:radial-gradient(circle, rgba(243,156,31,.45), transparent 60%);
}

/* Stats numbers pop */
.stat-num{
    font-size:clamp(2.2rem, 3.5vw, 3rem);
    background:linear-gradient(180deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Container – small extra breathing room top of every section under fixed header */
.section:first-of-type:not(.hero):not(.page-hero){padding-top:80px}

/* Buttons – slightly refined */
.btn{font-weight:600;letter-spacing:-.005em}
.btn:hover{transform:translateY(-2px)}

/* Marquee logos – cleaner chip look */
.logo-chip{
    height:64px;
    box-shadow:0 4px 12px -4px rgba(14,26,46,.06);
}
.logo-chip:hover{color:var(--brand);box-shadow:0 12px 28px -8px rgba(63,124,190,.25)}

/* Page hero — smaller top gap since header is floating */
.page-hero{padding:100px 0 90px}

/* Site footer sits directly below content — no white gap */
.site-footer{margin-top:0}

/* Smaller media tweaks */
@media (max-width:640px){
    body{padding-top:80px}
    .hero{padding-top:40px}
    .site-header{top:8px;width:calc(100% - 12px);border-radius:20px}
    .brand-img{height:30px}
    .wf2-card{min-height:160px;padding:22px 22px 20px}
    .wf2-title{font-size:1rem}
    .marquee-band{padding:24px 0}
    .marquee-row{gap:20px;font-size:.95rem}
    .cta-inner{border-radius:24px;padding:36px 24px}
}

/* =====================================================================
   MEGA-DEMO – 3-column screen preview dropdown for CTA button
===================================================================== */
.has-mega-cta{position:relative}
.has-mega-cta .btn::after{
    content:'';display:inline-block;width:0;height:0;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:4px solid #fff;margin-left:6px;opacity:.75;
    transition:transform var(--t);
}
.has-mega-cta:hover .btn::after{transform:rotate(180deg)}

.has-mega-cta .mega{
    /* right-align since button is at far right of nav */
    left:auto;right:0;transform:translateX(0) translateY(-8px);
    width:min(760px, 94vw);padding:24px;
    display:flex;flex-direction:column;gap:20px;
}
.has-mega-cta:hover .mega, .has-mega-cta:focus-within .mega{
    transform:translateX(0) translateY(0);
}

.mega-demo-head{padding:0 4px}
.mega-demo-head h4{color:var(--text)}

.mega-demo-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;
}

.mega-demo-card{
    display:flex;flex-direction:column;
    padding:0;border-radius:16px;
    background:var(--bg-alt);
    overflow:hidden;border:1px solid var(--border);
    transition:transform var(--t), box-shadow var(--t), border-color var(--t);
    color:var(--text);
}
.mega-demo-card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px -15px rgba(63,124,190,.35);
    border-color:var(--brand);
    background:#fff;
}

.mdc-screen{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    padding:10px;
    display:flex;flex-direction:column;gap:6px;
}
.mdc-screen-admin{background:linear-gradient(140deg, #0e1a2e, #14243d)}
.mdc-screen-online{background:linear-gradient(140deg, #f39c1f 0%, #d67e0a 100%);align-items:center;justify-content:flex-end;padding-bottom:0}
.mdc-screen-pos{background:linear-gradient(140deg, #3f7cbe, #2d5f99)}

/* Window titlebar (admin + pos) */
.mdc-titlebar{
    display:flex;gap:4px;padding:2px 0;
}
.mdc-titlebar span{
    width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);
}
.mdc-titlebar span:first-child{background:var(--accent)}
.mdc-titlebar span:nth-child(2){background:#22c55e}

/* Admin body */
.mdc-admin-body{display:flex;gap:6px;flex:1;min-height:0}
.mdc-sidebar{
    width:18px;display:flex;flex-direction:column;gap:3px;
}
.mdc-sb-item{
    height:6px;background:rgba(255,255,255,.15);border-radius:2px;
}
.mdc-sb-item.active{background:var(--accent)}
.mdc-main{flex:1;display:flex;flex-direction:column;gap:5px}
.mdc-stat-row{display:flex;gap:4px}
.mdc-stat{
    flex:1;height:16px;border-radius:3px;
    background:linear-gradient(140deg, rgba(63,124,190,.55), rgba(63,124,190,.25));
    border-left:2px solid var(--brand);
}
.mdc-stat.s2{background:linear-gradient(140deg, rgba(243,156,31,.5), rgba(243,156,31,.2));border-left-color:var(--accent)}
.mdc-chart{
    flex:1;display:flex;align-items:flex-end;gap:2.5px;
    background:rgba(255,255,255,.04);border-radius:3px;padding:3px;
}
.mdc-bar{
    flex:1;border-radius:2px 2px 0 0;
    background:linear-gradient(180deg, rgba(63,124,190,.85), rgba(63,124,190,.35));
}
.mdc-bar.hi{background:linear-gradient(180deg, var(--accent), var(--accent-2))}

/* Phone mock (online) */
.mdc-phone{
    width:56%;aspect-ratio:9/17;
    background:#0e1a2e;border-radius:14px 14px 0 0;
    padding:6px 4px 0;
    display:flex;flex-direction:column;
    box-shadow:0 -6px 20px rgba(0,0,0,.2);
    position:relative;
}
.mdc-phone-notch{
    width:24px;height:3px;background:#000;border-radius:2px;
    margin:0 auto 3px;
}
.mdc-phone-body{
    background:#fff;flex:1;
    border-radius:8px 8px 0 0;
    padding:5px;
    display:flex;flex-direction:column;gap:3px;
    overflow:hidden;
}
.mdc-mob-header{padding:1px 2px}
.mdc-mob-tabs{display:flex;gap:3px;padding:0 2px 2px;border-bottom:1px solid #f1f5f9}
.mdc-mob-tabs span{
    height:3px;flex:1;background:#e2e8f0;border-radius:2px;
}
.mdc-mob-tabs span.active{background:var(--accent)}
.mdc-mob-item{
    display:flex;gap:4px;padding:3px;
    background:#f8fafc;border-radius:4px;align-items:center;
}
.mdc-mob-thumb{
    width:14px;height:14px;border-radius:3px;
    background:linear-gradient(140deg, var(--accent), var(--accent-2));
    flex-shrink:0;
}
.mdc-mob-info{flex:1;display:flex;flex-direction:column;gap:2px}
.mdc-line{height:3px;background:#e2e8f0;border-radius:1.5px}
.mdc-line.s{height:2px;background:#f1f5f9}
.mdc-line.w-40{width:40%}
.mdc-line.w-60{width:60%}
.mdc-line.w-70{width:70%}
.mdc-mob-cta{
    height:9px;border-radius:5px;
    background:linear-gradient(90deg, var(--brand), var(--brand-2));
    margin-top:auto;
}

/* POS mock */
.mdc-pos-body{display:flex;gap:5px;flex:1;min-height:0}
.mdc-pos-grid{
    flex:1;display:grid;grid-template-columns:repeat(3, 1fr);gap:3px;
}
.mdc-btn{
    aspect-ratio:1/1;border-radius:4px;
    background:rgba(255,255,255,.15);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.mdc-btn.c1{background:rgba(243,156,31,.9)}
.mdc-btn.c2{background:rgba(255,255,255,.35)}
.mdc-btn.c3{background:rgba(255,255,255,.2)}
.mdc-btn.c4{background:rgba(255,255,255,.2)}
.mdc-btn.c5{background:rgba(255,255,255,.35)}
.mdc-btn.c6{background:rgba(255,255,255,.2)}
.mdc-pos-side{
    width:32%;background:rgba(0,0,0,.2);border-radius:4px;padding:4px;
    display:flex;flex-direction:column;gap:3px;
}
.mdc-pos-side .mdc-line{background:rgba(255,255,255,.35)}
.mdc-pos-side .mdc-line.s{background:rgba(255,255,255,.2)}
.mdc-pos-pay{
    margin-top:auto;
    background:var(--accent);
    color:#fff;font-weight:800;font-size:.55rem;
    text-align:center;padding:3px;border-radius:3px;
    text-transform:uppercase;letter-spacing:.05em;
    font-family:var(--font-display);
}

/* Card info block */
.mdc-info{padding:12px 14px 14px;background:#fff;flex:1}
.mdc-tag{
    display:inline-block;
    font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    padding:3px 8px;border-radius:99px;
    background:var(--brand-soft);color:var(--brand-2);
    margin-bottom:6px;
}
.mdc-tag.orange{background:var(--accent-soft);color:var(--accent-2)}
.mdc-tag.blue{background:var(--brand-soft);color:var(--brand-2)}
.mdc-info b{display:block;font-size:.9rem;font-weight:700;line-height:1.2}
.mdc-info small{display:block;color:var(--text-muted);font-size:.72rem;margin-top:3px;line-height:1.4}

/* Foot inside dropdown */
.mega-demo-foot{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    padding:14px 18px;
    background:linear-gradient(140deg, var(--bg-alt), rgba(63,124,190,.06));
    border-radius:12px;border:1px dashed rgba(63,124,190,.25);
}
.mega-demo-foot b{display:block;font-size:.9rem;font-weight:700}
.mega-demo-foot small{display:block;color:var(--text-muted);font-size:.75rem;margin-top:2px}

/* =====================================================================
   COLORFUL ACCENTS – varied icon colors, section blobs, nav underline
===================================================================== */

/* Feature card icons — rotate through 6 color themes for variety */
.features-grid .feature-card:nth-child(6n+1) .feature-icon{
    background:linear-gradient(140deg, #dbeafe, #93c5fd);color:var(--brand-2);
    box-shadow:0 8px 24px -8px rgba(63,124,190,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
.features-grid .feature-card:nth-child(6n+2) .feature-icon{
    background:linear-gradient(140deg, #fed7aa, #fdba74);color:var(--accent-2);
    box-shadow:0 8px 24px -8px rgba(243,156,31,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
.features-grid .feature-card:nth-child(6n+3) .feature-icon{
    background:linear-gradient(140deg, var(--brand), var(--brand-2));color:#fff;
    box-shadow:0 10px 26px -8px rgba(63,124,190,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.features-grid .feature-card:nth-child(6n+4) .feature-icon{
    background:linear-gradient(140deg, var(--accent), var(--accent-2));color:#fff;
    box-shadow:0 10px 26px -8px rgba(243,156,31,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.features-grid .feature-card:nth-child(6n+5) .feature-icon{
    background:linear-gradient(140deg, var(--bg-dark), var(--bg-dark-2));color:var(--accent);
    box-shadow:0 10px 26px -8px rgba(14,26,46,.55), inset 0 1px 0 rgba(255,255,255,.1);
}
.features-grid .feature-card:nth-child(6n+6) .feature-icon{
    background:linear-gradient(140deg, var(--brand), var(--accent));color:#fff;
    box-shadow:0 10px 26px -8px rgba(243,156,31,.5), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Section eyebrow colors rotate — some blue, some orange */
.section:nth-of-type(3n+1) .eyebrow{background:var(--brand-soft);color:var(--brand-2)}
.section:nth-of-type(3n+2) .eyebrow{background:var(--accent-soft);color:var(--accent-2)}
.section:nth-of-type(3n+3) .eyebrow{background:linear-gradient(90deg, var(--brand-soft), var(--accent-soft));color:var(--brand-2)}

/* Ambient colored blobs behind more sections */
.section.section-alt{position:relative;overflow:hidden}
.section.section-alt::before,
.section.section-alt::after{
    content:'';position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;opacity:.5;
}
.section.section-alt::before{
    width:400px;height:400px;top:-100px;left:-100px;
    background:radial-gradient(circle, rgba(63,124,190,.35), transparent 70%);
    animation:blobFloat 20s ease-in-out infinite alternate;
}
.section.section-alt::after{
    width:350px;height:350px;bottom:-100px;right:-100px;
    background:radial-gradient(circle, rgba(243,156,31,.3), transparent 70%);
    animation:blobFloat 24s ease-in-out infinite alternate-reverse;
}
.section.section-alt > .container{position:relative;z-index:1}
@keyframes blobFloat{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(60px,-40px) scale(1.15)}
}

/* Workflow-v2 subtle color spots at top */
.workflow-v2::after{
    content:'';position:absolute;top:20%;right:5%;
    width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle, rgba(243,156,31,.15), transparent 70%);
    filter:blur(60px);pointer-events:none;z-index:0;
    animation:blobFloat 25s ease-in-out infinite alternate;
}

/* Nav item animated underline (blue -> orange gradient) */
.nav-list > li > a::before{
    content:'';position:absolute;bottom:6px;left:16px;right:16px;height:2px;
    background:linear-gradient(90deg, var(--brand), var(--accent));
    border-radius:2px;
    transform:scaleX(0);transform-origin:left center;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-list > li > a:hover::before,
.nav-list > li > a.active::before{transform:scaleX(1)}
.nav-list > li > a.active::after{display:none} /* replace old dot */

/* Testimonial section colorful accent */
.section-alt .testi::before{color:var(--accent-soft)}
.section-alt .testi:nth-child(2)::before{color:var(--brand-soft)}

/* Plan cards colorful theme */
.pricing-grid .plan:nth-child(1){border-top:4px solid var(--brand)}
.pricing-grid .plan.featured{border-top:4px solid var(--accent)}
.pricing-grid .plan:nth-child(3){border-top:4px solid var(--bg-dark)}

/* Stats numbers - alternate blue/orange gradient */
.stat:nth-child(odd) .stat-num{
    background:linear-gradient(180deg, #fff 0%, var(--brand) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat:nth-child(even) .stat-num{
    background:linear-gradient(180deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Team card avatars — alternating brand colors */
.team-grid .team-card:nth-child(4n+1) .team-avatar{background:linear-gradient(140deg, var(--brand), var(--brand-2))}
.team-grid .team-card:nth-child(4n+2) .team-avatar{background:linear-gradient(140deg, var(--accent), var(--accent-2))}
.team-grid .team-card:nth-child(4n+3) .team-avatar{background:linear-gradient(140deg, var(--brand), var(--accent))}
.team-grid .team-card:nth-child(4n+4) .team-avatar{background:linear-gradient(140deg, var(--bg-dark), var(--brand))}

/* Blog card thumbs — more color variation */
.blog-grid .blog-card:nth-child(5n+1) .blog-thumb{background:linear-gradient(135deg, var(--brand), var(--brand-2))}
.blog-grid .blog-card:nth-child(5n+2) .blog-thumb{background:linear-gradient(135deg, var(--accent), var(--accent-2))}
.blog-grid .blog-card:nth-child(5n+3) .blog-thumb{background:linear-gradient(135deg, var(--brand), var(--accent))}
.blog-grid .blog-card:nth-child(5n+4) .blog-thumb{background:linear-gradient(135deg, var(--bg-dark), var(--brand))}
.blog-grid .blog-card:nth-child(5n+5) .blog-thumb{background:linear-gradient(135deg, var(--accent-2), var(--bg-dark))}

/* Integration tiles — colorful hover */
.int-tile{transition:all var(--t);position:relative;overflow:hidden}
.int-tile::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(140deg, var(--brand-soft), var(--accent-soft));
    opacity:0;transition:opacity var(--t);z-index:0;
}
.int-tile:hover::after{opacity:.5}
.int-tile > *{position:relative;z-index:1}
.int-tile:nth-child(3n+2)::after{background:linear-gradient(140deg, var(--accent-soft), var(--brand-soft))}
.int-tile:nth-child(3n+3)::after{background:linear-gradient(140deg, var(--brand-soft), rgba(63,124,190,.25))}

/* Mega demo dropdown responsive */
@media (max-width:900px){
    .has-mega-cta .mega{
        width:min(500px, 94vw);
    }
    .mega-demo-grid{grid-template-columns:1fr;gap:10px}
    .mega-demo-card{flex-direction:row;align-items:center}
    .mdc-screen{width:110px;flex-shrink:0;aspect-ratio:16/10;border-radius:14px 0 0 14px}
    .mdc-info{flex:1}
    .mega-demo-foot{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:768px){
    /* Hide demo mega on mobile — button just links to demo page */
    .has-mega-cta .mega{display:none!important}
    .has-mega-cta .btn::after{display:none}
}


/* ================================================================
   MOBILE / TABLET NAVIGATION — DEFINITIVE FIX
   - One and only one scroll area while mobile menu is open
   - Dark navy menu below the fixed header
   - Products and Book a Demo work as mobile accordions
   - Desktop navigation remains unchanged
================================================================ */
/* html, body{
    max-width:100%;
    overflow-x:hidden;
} */

@media (max-width:1100px){
    .site-header{
        top:12px;
        width:calc(100% - 24px);
        z-index:1000;
    }

    .nav-wrap{
        height:62px;
        padding:0 10px 0 16px;
    }

    .nav-toggle{
        display:flex;
        margin-left:auto;
        position:relative;
        z-index:1003;
    }

    /* The menu starts below the header, so the header never becomes part
       of the scrolling area. */
    .main-nav{
        position:fixed !important;
        top:86px !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:100% !important;
        height:calc(100dvh - 86px) !important;
        max-height:calc(100dvh - 86px) !important;
        box-sizing:border-box;
        display:block !important;
        padding:14px 16px 28px !important;
        margin:0 !important;
        background:linear-gradient(160deg,#0b1930 0%,#122641 55%,#17263c 100%) !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:0 20px 50px rgba(0,0,0,.25);
        overflow-y:auto !important;
        overflow-x:hidden !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-8px);
        transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
        z-index:999;
    }

    .main-nav::before{display:none !important;}

    .main-nav.open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
    }

    /* Lock the page itself. The .main-nav above is the ONLY scroll container. */
    html.nav-open,
    body.nav-open{
        overflow:hidden !important;
        height:100% !important;
        max-height:100% !important;
        overscroll-behavior:none !important;
    }

    .nav-list{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        width:100%;
        margin:0;
        padding:0;
    }

    .nav-list > li{width:100%;}

    .nav-list > li > a{
        width:100%;
        min-height:48px;
        box-sizing:border-box;
        padding:13px 14px;
        border-radius:12px;
        justify-content:space-between;
        font-size:1rem;
        color:#fff !important;
        background:transparent;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav-list > li > a:hover,
    .nav-list > li > a.active{
        color:#f39c1f !important;
        background:rgba(255,255,255,.07);
    }

    .nav-list > li > a.active::after{display:none;}
    .nav-drop svg{width:14px;height:8px;}

    .nav-cta{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        margin-top:12px;
        padding-top:14px;
        border-top:1px solid rgba(255,255,255,.12);
    }

    .nav-login{
        display:flex !important;
        align-items:center;
        justify-content:center;
        min-height:46px;
        width:100%;
        box-sizing:border-box;
        color:#fff !important;
        background:rgba(255,255,255,.06);
        border-radius:12px;
    }

    .nav-cta .has-mega-cta{width:100%;}

    .nav-cta .has-mega-cta > .btn{
        width:100%;
        justify-content:center;
        min-height:50px;
        box-sizing:border-box;
        border-radius:12px;
    }

    /* Products accordion */
    .has-mega{position:relative;}

    .has-mega > .mega{
        position:static !important;
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box;
        margin:4px 0 6px;
        padding:8px !important;
        display:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important;
        box-shadow:none !important;
        border:1px solid rgba(255,255,255,.12) !important;
        border-radius:14px !important;
        background:rgba(255,255,255,.055) !important;
        color:#fff;
    }

    .has-mega.mega-open > .mega{display:flex !important;}

    .has-mega > .mega.mega-cols{
        grid-template-columns:1fr;
        gap:4px;
        flex-direction:column;
    }

    .mega-col{width:100%;gap:2px;}
    .mega-title{padding:10px 10px 5px;color:#aebbd0;}

    .mega a.mega-item{
        padding:10px;
        min-height:54px;
        box-sizing:border-box;
        color:#fff !important;
    }

    .mega a.mega-item:hover{
        background:rgba(255,255,255,.08);
        color:#fff !important;
    }

    .mega-item b{color:#fff;}
    .mega-item small{color:#aebbd0;}

    .mega-promo{
        margin-top:6px;
        padding:16px;
    }

    /* Book a Demo accordion — it must NOT navigate on mobile. */
    .has-mega-cta > .mega{
        position:static !important;
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box;
        margin:6px 0 0;
        padding:10px !important;
        display:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important;
        box-shadow:none !important;
        border:1px solid rgba(255,255,255,.12) !important;
        border-radius:14px !important;
        background:rgba(255,255,255,.055) !important;
    }

    .has-mega-cta.mega-open > .mega{display:block !important;}

    .has-mega-cta .btn::after{display:none !important;}

    .mega-demo-head h4{color:#fff !important;}
    .mega-demo-head .mega-title{color:#f39c1f !important;}
}

@media (max-width:600px){
    .site-header{
        top:8px;
        width:calc(100% - 12px);
        border-radius:18px;
    }

    .nav-wrap{
        height:58px;
        padding-left:12px;
        padding-right:8px;
    }

    .brand-img{
        height:29px;
        max-width:170px;
        object-fit:contain;
    }

    .nav-toggle{
        padding:9px;
        min-width:44px;
        min-height:44px;
        justify-content:center;
        align-items:center;
    }

    .main-nav{
        top:74px !important;
        height:calc(100dvh - 74px) !important;
        max-height:calc(100dvh - 74px) !important;
        padding:12px 10px 24px !important;
    }

    .nav-list > li > a{
        min-height:46px;
        padding:12px;
    }

    .mega a.mega-item{align-items:flex-start;}
    .mega-icon{width:32px;height:32px;}
    .mega-item b{font-size:.86rem;}
    .mega-item small{font-size:.72rem;}
}