/* ============================================
   Synergific — Next-Gen Enterprise Theme v4
   Animations · 3D · Particles · Glassmorphism
   ============================================ */
:root {
    --primary:#0B2447;--primary-mid:#19376D;--primary-light:#2B5EA7;--primary-pale:#E8F0FE;
    --accent:#F26B2B;--accent-hover:#D85A1F;--accent-light:#FFF1EB;
    --success:#0CAF60;--star:#F4A825;
    --bg:#fff;--bg-alt:#F6F8FB;--bg-dark:#0B2447;
    --text:#1D2939;--text-sub:#475467;--text-muted:#98A2B3;
    --border:#E4E7EC;--border-light:#F2F4F7;
    --shadow-sm:0 1px 3px rgba(16,24,40,.06);--shadow-md:0 4px 16px rgba(16,24,40,.08);--shadow-lg:0 12px 40px rgba(16,24,40,.1);
    --radius:12px;--radius-sm:8px;--radius-lg:16px;--radius-xl:24px;
}
*,*::before,*::after{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{font-family:'Geist',system-ui,sans-serif;color:var(--text);line-height:1.65;background:var(--bg);margin:0;padding:0;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--primary-light);text-decoration:none;transition:color .2s}a:hover{color:var(--accent)}
h1,h2,h3,h4,h5,p{margin:0}
ul{list-style:none;padding:0;margin:0}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ============ SECTION HEADERS ============ */
.sh{margin-bottom:48px}
.sh .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:999px;background:var(--accent-light);color:var(--accent);font-size:13px;font-weight:600;margin-bottom:14px}
.sh .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:dotPulse 2s infinite}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.4}}
.sh h2{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
.sh p{color:var(--text-sub);font-size:1.05rem;line-height:1.65;max-width:560px;margin-top:12px}
.sh.center{text-align:center}.sh.center p{margin-left:auto;margin-right:auto}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;border:none;cursor:pointer;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;border-radius:var(--radius-sm);position:relative;overflow:hidden;white-space:nowrap}
.btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;transform:translate(-50%,-50%);transition:width .5s,height .5s}
.btn:active::after{width:300px;height:300px}
.btn-accent{padding:13px 30px;background:var(--accent);color:#fff!important}
.btn-accent:hover{background:var(--accent-hover);color:#fff!important;transform:translateY(-3px);box-shadow:0 12px 28px rgba(242,107,43,.3)}
.btn-accent-lg{padding:16px 36px;font-size:16px;border-radius:var(--radius)}
.btn-white{padding:13px 30px;background:#fff;color:var(--text)!important;border:1px solid var(--border)}
.btn-white:hover{border-color:var(--primary);color:var(--primary)!important;transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-outline{padding:13px 30px;background:transparent;color:var(--primary)!important;border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff!important;transform:translateY(-3px)}
.btn-ghost{padding:13px 30px;background:rgba(255,255,255,.12);color:#fff!important;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff!important;transform:translateY(-3px)}
.btn-link{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:14px;color:var(--accent)!important;transition:gap .25s,color .2s}
.btn-link:hover{gap:10px;color:var(--accent-hover)!important}

/* ============ 3D CARDS ============ */
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;transform-style:preserve-3d}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px);border-color:var(--border-light)}
.card-3d{perspective:800px}
.card-3d .card{transition:all .5s cubic-bezier(.4,0,.2,1)}
.card-3d:hover .card{transform:translateY(-8px) rotateX(2deg) rotateY(-2deg);box-shadow:0 20px 50px rgba(16,24,40,.12)}

/* Glow card variant */
.card-glow{position:relative}
.card-glow::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,var(--accent),var(--primary-light),var(--accent));opacity:0;transition:opacity .4s;z-index:-1}
.card-glow:hover::before{opacity:1}
.card-glow:hover{border-color:transparent}

/* Glass card */
.card-glass{background:rgba(255,255,255,.7);backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255,255,255,.4)}

/* ============ BADGES ============ */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600}
.badge-muted{background:var(--bg-alt);color:var(--text-sub)}
.badge-accent{background:var(--accent-light);color:var(--accent)}
.badge-primary{background:var(--primary-pale);color:var(--primary)}
.badge-success{background:#E7F8F0;color:var(--success)}

/* ============ FORMS ============ */
.form-input{width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;transition:all .3s}
.form-input:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 4px var(--primary-pale);transform:translateY(-1px)}
.form-input::placeholder{color:var(--text-muted)}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

/* ============ TOP BAR ============ */
.top-bar{background:var(--bg-dark);color:rgba(255,255,255,.85);font-size:13px;padding:8px 0}
.top-bar a{color:rgba(255,255,255,.85)!important}.top-bar a:hover{color:#fff!important}
.top-bar .divider{width:1px;height:14px;background:rgba(255,255,255,.2)}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg);transition:box-shadow .3s;border-bottom:1px solid var(--border-light)}
.site-header.scrolled{box-shadow:0 1px 12px rgba(0,0,0,.07)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.header-logo img{height:38px;width:auto}
.header-nav{display:flex;align-items:center}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;position:relative}
.nav-item:has(>.mega-dropdown){position:static!important}
.nav-item>a{display:flex;align-items:center;gap:4px;padding:10px 12px;font-size:14px;font-weight:500;color:var(--text)!important;border-radius:var(--radius-sm);transition:all .2s;cursor:pointer;text-decoration:none;white-space:nowrap}
.nav-item>a:hover,.nav-item.active>a{color:var(--accent)!important;background:var(--accent-light)}
.nav-item>a .chevron{width:14px;height:14px;transition:transform .3s}
.nav-item.open>a .chevron{transform:rotate(180deg)}
.mega-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:28px 32px;min-width:780px;z-index:200;animation:ddF .25s cubic-bezier(.4,0,.2,1)}
.nav-item.open .mega-dropdown{display:block}
@keyframes ddF{from{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.98)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mega-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border-light)}
.mega-col ul li a{display:block;padding:5px 0;font-size:13.5px;color:var(--text-sub)!important;transition:all .2s}
.mega-col ul li a:hover{color:var(--accent)!important;padding-left:6px}
.simple-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;min-width:220px;z-index:200;animation:ddF .25s cubic-bezier(.4,0,.2,1)}
.nav-item.open .simple-dropdown{display:block}
.simple-dropdown a{display:block;padding:9px 14px;font-size:13.5px;color:var(--text-sub)!important;border-radius:var(--radius-sm);transition:all .2s}
.simple-dropdown a:hover{background:var(--accent-light);color:var(--accent)!important}
.header-actions{display:flex;align-items:center;gap:12px}
.header-phone{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text)!important;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);transition:all .2s;white-space:nowrap}
.header-phone:hover{border-color:var(--accent);color:var(--accent)!important}
.header-phone svg{width:15px;height:15px;stroke:var(--accent)}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.mobile-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-top:1px solid var(--border);box-shadow:var(--shadow-lg);padding:16px 20px;z-index:99}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:12px 0;color:var(--text)!important;border-bottom:1px solid var(--border-light);font-size:15px;font-weight:500}
.mobile-menu a:hover{color:var(--accent)!important}
@media(max-width:1024px){.header-nav,.header-phone,.header-actions,body.cv .header-actions,body.merged-hero .header-actions{display:none!important}.mobile-toggle{display:flex!important;margin-left:auto;color:#0A0E14;position:relative;z-index:9999;width:44px;height:44px;justify-content:center;align-items:center;flex-shrink:0}.mobile-toggle span{background:#0A0E14!important}body.cv .mobile-toggle,body.merged-hero .mobile-toggle{display:flex!important}}
html,body{overflow-x:hidden;max-width:100vw}

/* ============ HERO — Animated 3D ============ */
.hero{position:relative;background:linear-gradient(135deg,var(--bg-dark) 0%,var(--primary-mid) 60%,#1B4F8A 100%);color:#fff;padding:80px 0 60px;overflow:hidden}
.hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(242,107,43,.15),transparent 70%);pointer-events:none;animation:heroOrb1 12s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;bottom:-300px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(43,94,167,.2),transparent 70%);pointer-events:none;animation:heroOrb2 15s ease-in-out infinite alternate}
@keyframes heroOrb1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-60px,40px) scale(1.2)}}
@keyframes heroOrb2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(50px,-30px) scale(1.15)}}

/* Animated grid background */
.hero-grid{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;animation:gridMove 20s linear infinite;pointer-events:none}
@keyframes gridMove{0%{background-position:0 0}100%{background-position:60px 60px}}

/* Floating particles */
.hero-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-particles span{position:absolute;width:4px;height:4px;background:rgba(255,255,255,.15);border-radius:50%;animation:particleFloat linear infinite}
@keyframes particleFloat{0%{transform:translateY(100vh) translateX(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100px) translateX(80px) rotate(360deg);opacity:0}}

.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.9)!important;font-size:13px;font-weight:500;margin-bottom:24px;backdrop-filter:blur(4px);animation:fadeSlideDown .8s ease}
.hero-tag .pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pd 2s infinite}
@keyframes pd{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:800;line-height:1.15;letter-spacing:-.025em;margin-bottom:20px;color:#fff!important;animation:fadeSlideUp .8s ease .1s both}
.hero h1 .hl{color:var(--accent)!important;position:relative}
.hero h1 .hl::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:3px;background:var(--accent);border-radius:2px;animation:underlineGrow .8s ease .6s both}
@keyframes underlineGrow{from{width:0}to{width:100%}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.hero-sub{color:rgba(255,255,255,.75)!important;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.7;margin-bottom:32px;max-width:520px;animation:fadeSlideUp .8s ease .2s both}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px;animation:fadeSlideUp .8s ease .3s both}
.hero-trust{display:flex;align-items:center;gap:16px;font-size:13px;color:rgba(255,255,255,.5)!important;flex-wrap:wrap;animation:fadeSlideUp .8s ease .4s both}
.hero-trust img{height:28px;opacity:.6;filter:brightness(0) invert(1);transition:all .4s cubic-bezier(.4,0,.2,1)}
.hero-trust img:hover{opacity:1;transform:scale(1.1)}

/* Hero stats card — glass morphism */
.hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);backdrop-filter:blur(20px) saturate(150%);padding:36px;position:relative;animation:fadeSlideUp .8s ease .3s both}
.hero-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#FFCC02,var(--accent));border-radius:var(--radius-xl) var(--radius-xl) 0 0;background-size:200% 100%;animation:gradientSlide 3s linear infinite}
@keyframes gradientSlide{0%{background-position:0% 0}100%{background-position:200% 0}}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hero-stat{text-align:center;padding:20px 12px;background:rgba(255,255,255,.05);border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);transition:all .3s}
.hero-stat:hover{background:rgba(255,255,255,.1);transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.hero-stat .num{display:block;font-size:2rem;font-weight:800;color:#fff!important;line-height:1.2}
.hero-stat .lbl{display:block;font-size:12.5px;color:rgba(255,255,255,.6)!important;margin-top:4px;font-weight:500}
@media(max-width:768px){.hero{padding:56px 0 40px}.hero-inner{grid-template-columns:1fr;gap:32px}}

/* ============ TYPEWRITER ============ */
.typewriter{overflow:hidden;border-right:3px solid var(--accent);white-space:nowrap;animation:typewrite 3s steps(30) 1s both,blink .75s step-end infinite}
@keyframes typewrite{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}

/* ============ LOGOS ============ */
.logos-strip{padding:40px 0;border-bottom:1px solid var(--border-light)}
.logos-strip .label{text-align:center;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:20px;font-weight:500}
.logo-item{display:flex;align-items:center;justify-content:center;height:52px;padding:8px 12px}
.logo-item img{max-height:30px;width:auto;object-fit:contain;filter:grayscale(100%);opacity:.45;transition:all .4s cubic-bezier(.4,0,.2,1)}
.logo-item:hover img{filter:grayscale(0);opacity:1;transform:scale(1.1)}

/* ============ SERVICE CHIPS ============ */
.service-chip{display:flex;align-items:center;gap:10px;padding:14px 22px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--text)!important;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;text-decoration:none;position:relative;overflow:hidden}
.service-chip::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(242,107,43,.05),transparent);transition:left .5s}
.service-chip:hover::before{left:100%}
.service-chip .ic{width:40px;height:40px;border-radius:10px;background:var(--primary-pale);display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
.service-chip .ic svg{width:20px;height:20px;stroke:var(--primary);transition:stroke .3s}
.service-chip:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-md);color:var(--accent)!important}
.service-chip:hover .ic{background:var(--accent-light);transform:rotate(5deg) scale(1.05)}.service-chip:hover .ic svg{stroke:var(--accent)}

/* ============ CATEGORIES ============ */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.category-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);transition:all .35s cubic-bezier(.4,0,.2,1);text-decoration:none;color:var(--text)!important;position:relative}
.category-card::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--accent);transition:all .3s;transform:translateX(-50%);border-radius:2px}
.category-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-6px);color:var(--accent)!important}
.category-card:hover::after{width:60%}
.category-icon{width:52px;height:52px;border-radius:12px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:all .35s}
.category-card:hover .category-icon{background:var(--accent-light);transform:scale(1.1) rotate(5deg)}
.category-icon img,.category-icon svg{width:28px;height:28px;object-fit:contain}
.category-card h3{font-size:14px;font-weight:700;margin:0 0 2px;color:inherit}
.category-card .ct{font-size:12px;color:var(--text-muted)}

/* ============ COURSE CARDS ============ */
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.course-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}
.course-card:hover{box-shadow:0 16px 48px rgba(16,24,40,.12);transform:translateY(-8px)}
.course-thumb{position:relative;height:180px;overflow:hidden;background:var(--bg-alt)}
.course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.course-card:hover .course-thumb img{transform:scale(1.08)}
.diff-badge{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.diff-badge.beginner{background:#E7F8F0;color:var(--success)}.diff-badge.advanced{background:var(--accent-light);color:var(--accent)}.diff-badge.expert{background:var(--primary-pale);color:var(--primary)}
.course-body{padding:20px}
.course-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.course-cat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--primary-light)}
.course-rating{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:700;color:var(--star)}
.course-rating svg{width:14px;height:14px;fill:var(--star)}
.course-title{font-size:15.5px;font-weight:700;margin:0 0 8px;line-height:1.4;color:var(--text)}
.course-desc{font-size:13.5px;color:var(--text-sub);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.course-footer{padding:16px 20px;border-top:1px solid var(--border-light)}

/* ============ VALUE CARDS ============ */
.value-card{padding:32px;text-align:center;position:relative}
.value-card .iw{width:56px;height:56px;border-radius:14px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;background:var(--primary-pale);transition:all .4s}
.value-card .iw svg{width:26px;height:26px;stroke:var(--primary);transition:stroke .3s}
.value-card:hover .iw{background:var(--accent-light);transform:rotate(10deg) scale(1.1)}
.value-card:hover .iw svg{stroke:var(--accent)}
.value-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--text)}
.value-card p{font-size:.9rem;color:var(--text-sub);line-height:1.6}

/* ============ PROCESS STEPS — Animated ============ */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.process-step{text-align:center;position:relative;counter-increment:step}
.process-step::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;font-weight:800;font-size:1.2rem;margin:0 auto 16px;box-shadow:0 8px 20px rgba(242,107,43,.25);transition:transform .4s}
.process-step:hover::before{transform:scale(1.15) rotate(10deg)}
.process-step h4{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:6px}
.process-step p{font-size:.85rem;color:var(--text-sub);line-height:1.55}
@media(max-width:768px){.process-grid{grid-template-columns:1fr 1fr;gap:20px}}

/* ============ DELIVERY CARDS ============ */
.delivery-card{padding:28px;text-align:center;border:2px solid transparent;transition:all .35s}
.delivery-card .icon{width:52px;height:52px;border-radius:14px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;transition:all .35s}
.delivery-card .icon svg{width:24px;height:24px;stroke:var(--accent)}
.delivery-card h3{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:6px}
.delivery-card p{font-size:.85rem;color:var(--text-sub);line-height:1.55}
.delivery-card:hover{border-color:var(--accent)}
.delivery-card:hover .icon{transform:scale(1.1) rotate(5deg)}

/* ============ CTA BANNER — Animated ============ */
.cta-banner{background:linear-gradient(135deg,var(--bg-dark) 0%,var(--primary-mid) 100%);color:#fff;padding:56px 0;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(242,107,43,.12),transparent 70%);pointer-events:none;animation:heroOrb1 10s ease-in-out infinite alternate}
.cta-banner::after{content:'';position:absolute;bottom:-150px;left:-50px;width:300px;height:300px;background:radial-gradient(circle,rgba(43,94,167,.15),transparent 70%);pointer-events:none;animation:heroOrb2 12s ease-in-out infinite alternate}
.cta-banner h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;margin-bottom:14px;color:#fff!important;position:relative;z-index:1}
.cta-banner p{color:rgba(255,255,255,.7)!important;font-size:1.05rem;margin-bottom:28px;max-width:500px;margin-left:auto;margin-right:auto;position:relative;z-index:1}

/* ============ STATS BAR ============ */
.stats-bar{display:flex;align-items:center;justify-content:center}
.stat-block{flex:1;text-align:center;padding:28px 20px}
.stat-block .num{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:var(--primary);line-height:1}
.stat-block .lbl{font-size:.85rem;color:var(--text-sub);margin-top:6px}
.stat-div{width:1px;height:56px;background:var(--border);flex-shrink:0}
@media(max-width:768px){.stats-bar{flex-wrap:wrap}.stat-div{display:none}.stat-block{flex:0 0 50%;padding:20px 12px}}

/* ============ TESTIMONIALS ============ */
.test-card{padding:28px;position:relative}
.test-card::before{content:'\201C';position:absolute;top:16px;right:24px;font-size:4rem;line-height:1;color:var(--accent-light);font-family:Georgia,serif;pointer-events:none}
.test-card .stars{color:var(--star);font-size:15px;letter-spacing:2px;margin-bottom:14px}
.test-card blockquote{font-size:.95rem;color:var(--text-sub);line-height:1.7;margin:0 0 18px;font-style:italic}
.test-card .aname{font-weight:700;font-size:.9rem;color:var(--text)}
.test-card .arole{font-size:.8rem;color:var(--text-muted)}

/* ============ ENTERPRISE WALL ============ */
.ent-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:center;justify-items:center}
.ent-wall .logo-item{height:48px}
@media(max-width:768px){.ent-wall{grid-template-columns:repeat(3,1fr)}}

/* ============ FAQ — Animated ============ */
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:all .3s}
.faq-item.active{border-color:var(--accent);box-shadow:0 4px 16px rgba(242,107,43,.08)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;cursor:pointer;font-weight:600;font-size:15px;color:var(--text);background:var(--bg);transition:background .2s}
.faq-q:hover{background:var(--bg-alt)}
.faq-q svg{width:20px;height:20px;stroke:var(--text-muted);transition:all .35s;flex-shrink:0}
.faq-item.active .faq-q svg{transform:rotate(180deg);stroke:var(--accent)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .3s}
.faq-item.active .faq-a{max-height:300px;padding:0 24px 18px}
.faq-a p{font-size:14px;color:var(--text-sub);line-height:1.7}

/* ============ CONTACT ============ */
.contact-link{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text)!important;font-weight:500;transition:all .3s;text-decoration:none}
.contact-link:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);color:var(--accent)!important;transform:translateX(6px)}
.contact-link svg{stroke:var(--accent);flex-shrink:0}

/* ============ MODAL ============ */
.modal{display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);position:fixed;inset:0;z-index:1000}
.modal.open{display:flex}
.modal .card{max-width:480px;width:100%;padding:32px;animation:modalIn .4s cubic-bezier(.4,0,.2,1)}
@keyframes modalIn{from{opacity:0;transform:scale(.9) translateY(-20px) rotateX(5deg)}to{opacity:1;transform:scale(1) translateY(0) rotateX(0)}}
.modal-close{background:none;border:none;cursor:pointer;padding:4px;color:var(--text-muted);transition:all .2s}
.modal-close:hover{color:var(--text);transform:rotate(90deg)}

/* ============ FOOTER ============ */
.footer{background:var(--bg-dark);color:rgba(255,255,255,.8)}
.footer a{color:rgba(255,255,255,.65)!important;transition:color .2s}.footer a:hover{color:#fff!important}
.footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;align-items:start}
.footer .col-title{font-weight:700;color:#fff;font-size:.95rem;margin-bottom:16px}
.footer ul li{margin-bottom:10px}.footer ul li a{font-size:14px}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);transition:all .3s}
.social-link:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.social-link svg{fill:#fff;width:15px;height:15px}
.copy{background:rgba(0,0,0,.2);color:rgba(255,255,255,.5);padding:16px 0;font-size:12px}
.copy a{color:rgba(255,255,255,.5)!important;font-size:12px}.copy a:hover{color:#fff!important}
@media(max-width:1024px){.footer .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer .fgrid{grid-template-columns:1fr}}

/* ============ FLOATING ELEMENTS ============ */
.whatsapp-float{position:fixed;bottom:24px;right:24px;z-index:50;width:54px;height:54px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(37,211,102,.4);transition:all .3s;text-decoration:none;animation:whatsappPulse 2s infinite}
@keyframes whatsappPulse{0%,100%{box-shadow:0 4px 14px rgba(37,211,102,.4)}50%{box-shadow:0 4px 14px rgba(37,211,102,.4),0 0 0 12px rgba(37,211,102,.1)}}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float svg{width:26px;height:26px;fill:#fff}
.back-to-top{position:fixed;bottom:88px;right:28px;z-index:40;width:40px;height:40px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:all .3s;text-decoration:none}
.back-to-top.active{opacity:1;pointer-events:auto}
.back-to-top:hover{background:var(--primary-mid);color:#fff;transform:translateY(-3px)}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(32px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.reveal.show{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* Slide from left/right */
.reveal-left{opacity:0;transform:translateX(-40px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.reveal-left.show{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.reveal-right.show{opacity:1;transform:translateX(0)}

/* Scale up */
.reveal-scale{opacity:0;transform:scale(.9);transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.reveal-scale.show{opacity:1;transform:scale(1)}

/* ============ SWIPER OVERRIDES ============ */
.swiper-button-next,.swiper-button-prev{width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:all .25s}
.swiper-button-next:hover,.swiper-button-prev:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.swiper-button-next:after,.swiper-button-prev:after{font-size:13px;font-weight:bold;color:var(--text)}
.swiper-button-next:hover:after,.swiper-button-prev:hover:after{color:#fff}
.swiper-pagination-bullet{background:var(--primary);width:8px;height:8px;transition:all .3s}
.swiper-pagination-bullet-active{background:var(--accent);width:24px;border-radius:4px}

/* ============ WAVE DIVIDER ============ */
.wave-divider{position:relative;height:60px;overflow:hidden}
.wave-divider svg{position:absolute;bottom:0;width:100%;height:60px}
.wave-divider.flip svg{transform:scaleY(-1);top:0;bottom:auto}

/* ============ MARQUEE ============ */
.marquee{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-inner{display:flex;gap:24px;animation:marqueeScroll 25s linear infinite}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{flex-shrink:0;padding:8px 16px;border-radius:var(--radius-sm);background:var(--bg-alt);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text-sub);white-space:nowrap}

/* ============ UTILITIES ============ */
.text-center{text-align:center}
.bg-alt{background:var(--bg-alt)}
.hover-lift{transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s}
.hover-lift:hover{transform:translateY(-6px)}

/* ============ ANIMATED GRADIENT TEXT ============ */
.gradient-text{background:linear-gradient(135deg,var(--primary),var(--primary-light),var(--accent));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradText 4s ease infinite}
@keyframes gradText{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ============ NUMBER COUNTER ANIMATION ============ */
.counter{font-variant-numeric:tabular-nums}

/* ============ STAGGER CHILDREN ============ */
.stagger>*{opacity:0;transform:translateY(20px);transition:all .5s cubic-bezier(.25,.46,.45,.94)}
.stagger.show>*{opacity:1;transform:translateY(0)}
.stagger.show>*:nth-child(1){transition-delay:.05s}
.stagger.show>*:nth-child(2){transition-delay:.1s}
.stagger.show>*:nth-child(3){transition-delay:.15s}
.stagger.show>*:nth-child(4){transition-delay:.2s}
.stagger.show>*:nth-child(5){transition-delay:.25s}
.stagger.show>*:nth-child(6){transition-delay:.3s}
.stagger.show>*:nth-child(7){transition-delay:.35s}
.stagger.show>*:nth-child(8){transition-delay:.4s}
.stagger.show>*:nth-child(9){transition-delay:.45s}
.stagger.show>*:nth-child(10){transition-delay:.5s}

/* === Edge-to-edge header & footer (wider than .container default) === */
.site-header > .container,
.footer > .container{max-width:1440px!important;padding-left:32px!important;padding-right:32px!important}
@media(max-width:768px){
  .site-header > .container,
  .footer > .container{padding-left:20px!important;padding-right:20px!important}
}


/* ===================================================================
   PREMIUM-KIT — sitewide opt-in patterns for premium hero / CTA
   ─ Applies to any <body class="merged-hero"> for transparent header
   ─ Modernizes .cta-banner sitewide
   =================================================================== */

/* ----- Merged transparent header on hero ----- */
/* body.merged-hero bg removed — sections own their bg */
body.merged-hero #announcementBar,body.merged-hero .top-bar{display:none!important}
body.merged-hero .site-header{position:fixed!important;top:0;left:0;right:0;z-index:100;background:transparent!important;border-bottom:none!important;box-shadow:none!important;transition:background .25s,backdrop-filter .25s,border-color .25s}
body.merged-hero .site-header.scrolled{background:rgba(7,11,16,.85)!important;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.06)!important}
body.merged-hero .header-inner{display:flex;align-items:center;gap:24px}
body.merged-hero .header-logo{flex:0 0 auto;margin-right:auto}
body.merged-hero .header-nav{flex:1 1 auto;display:flex;justify-content:center}
body.merged-hero .header-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
body.merged-hero .header-logo img{content:url('/images/logo.png')!important;filter:none!important}
body.merged-hero .nav-item>a{color:rgba(255,255,255,.88)!important}
body.merged-hero .nav-item>a:hover{color:#F26B2B!important}
body.merged-hero .header-phone{color:rgba(255,255,255,.72)!important}
body.merged-hero .mega-dropdown,body.merged-hero .simple-dropdown{background:rgba(11,18,32,.96)!important;border:1px solid rgba(255,255,255,.08)!important;color:#fff!important}
body.merged-hero .mega-dropdown a,body.merged-hero .simple-dropdown a{color:rgba(255,255,255,.85)!important}
body.merged-hero .mega-dropdown a:hover,body.merged-hero .simple-dropdown a:hover{color:#F26B2B!important;background:rgba(255,255,255,.04)!important}
body.merged-hero .header-actions .hm-ghost{display:inline-flex!important;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.78);text-decoration:none;transition:background .2s,color .2s}
body.merged-hero .header-actions .hm-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
body.merged-hero .header-actions .hm-ghost svg{width:14px;height:14px}
body.merged-hero .header-actions .hm-ghost--store{color:#FFCC02!important}
body.merged-hero .header-actions .hm-ghost--store:hover{color:#fff!important;background:rgba(255,204,2,.12)}
body.merged-hero .header-actions .hm-divider{display:inline-block!important;width:1px;height:18px;background:rgba(255,255,255,.16);margin:0 4px}
@media(max-width:1100px){body.merged-hero .header-actions .hm-ghost,body.merged-hero .header-actions .hm-divider{display:none!important}}
body.merged-hero .site-header .btn.btn-accent,body.merged-hero .site-header a.btn-accent{display:none!important}
/* hero-premium variants get top padding so the fixed header doesn't overlap */
body.merged-hero .hv2{padding-top:120px!important}
@media(max-width:1023px){
  body.merged-hero .hv2{padding-top:96px!important}
  body.merged-hero .header-nav{display:none!important}
  body.merged-hero .header-actions{display:none!important}
  body.merged-hero .mobile-toggle{display:flex!important}
  body.merged-hero .mobile-toggle span{background:#fff}
}

/* ----- Modernized .cta-banner sitewide ----- */
.cta-banner{position:relative;padding:80px 0 100px!important;background:#fff!important;color:inherit!important;clip-path:none!important;overflow:visible!important}
.cta-banner::before,.cta-banner::after{display:none!important}
.cta-banner > .container{position:relative;max-width:1200px;margin:0 auto;padding:0 20px}
.cta-banner > .container > *{position:relative;z-index:1}
/* Inner gradient panel that wraps the actual content */
.cta-banner > .container::before{
  content:'';position:absolute;inset:0;
  border-radius:28px;
  background:linear-gradient(135deg,#070B10 0%,#0B2447 50%,#19376D 100%);
  z-index:0;pointer-events:none;
  box-shadow:0 30px 70px -28px rgba(11,36,71,.4);
}
.cta-banner > .container::after{
  content:'';position:absolute;top:-40px;right:-40px;width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,107,43,.22),transparent 60%);
  pointer-events:none;z-index:0;
  filter:blur(8px);
}
.cta-banner > .container{padding:64px 32px!important;border-radius:28px}
.cta-banner h2{color:#fff!important;font-family:'Geist',system-ui,sans-serif!important;font-weight:800!important;font-size:clamp(1.7rem,3.5vw,2.4rem)!important;line-height:1.1!important;letter-spacing:-0.028em!important;margin:0 0 14px!important;text-align:center}
.cta-banner h2 .hl,.cta-banner h2 em{font-style:normal;background:linear-gradient(90deg,#F26B2B 0%,#FFCC02 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cta-banner p{color:rgba(255,255,255,.72)!important;font:400 15px/1.65 'Geist',system-ui,sans-serif!important;margin:0 auto 28px!important;max-width:560px!important;text-align:center}
.cta-banner > .container > div:has(> a),
.cta-banner > .container > div:has(> .btn){display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Buttons inside CTA banner — solid orange primary, subtle ghost secondary */
.cta-banner .btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border-radius:12px;font:700 14.5px/1 'Geist',system-ui,sans-serif!important;font-family:inherit;text-decoration:none!important;transition:all .2s;letter-spacing:-0.005em;cursor:pointer;border:none!important}
.cta-banner .btn-accent,
.cta-banner .btn-accent-lg,
.cta-banner .btn.btn-accent.btn-accent-lg{background:#F26B2B!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 4px 14px -4px rgba(242,107,43,.5)!important}
.cta-banner .btn-accent:hover,
.cta-banner .btn-accent-lg:hover{background:#E85A1A!important;transform:translateY(-2px);box-shadow:0 8px 24px -6px rgba(242,107,43,.7)!important}
.cta-banner .btn-ghost{background:rgba(255,255,255,.04)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.cta-banner .btn-ghost:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.32)!important}
.cta-banner .btn-outline{background:rgba(255,255,255,.04)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.cta-banner .btn-outline:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.32)!important}
@media(max-width:768px){
  .cta-banner > .container{padding:48px 22px!important;border-radius:20px}
  .cta-banner{padding:56px 0 80px!important}
}


/* ===================================================================
   MOBILE RESPONSIVE KIT — sitewide defensive fixes
   =================================================================== */

/* Prevent any rogue element from causing horizontal scroll */
html,body{overflow-x:hidden;max-width:100vw}

/* Common containers should not exceed viewport width */
img,video,iframe,svg,canvas{max-width:100%}
table{max-width:100%}

/* Comparison tables — horizontal scroll wrapper on mobile */
@media(max-width:760px){
  .cl-table-wrap,.ls-table,.cl-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cl-table-head,.cl-row,.ls-table-head,.ls-row{min-width:640px}
}

/* Hero stat grids: never more than 2 cols on small screens */
@media(max-width:640px){
  .h4-stats,.cl-hero-stats,.fs-grid,.stats-bar{grid-template-columns:repeat(2,1fr)!important}
  .cl-stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:24px 0!important}
  .cl-stat{border-right:none!important;padding:0 12px!important}
}

/* Card grids: collapse to single column at narrow widths */
@media(max-width:560px){
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4{grid-template-columns:1fr!important}
  .stats-grid-5,.values-grid,.diff-grid,.fs-grid{grid-template-columns:1fr!important}
}

/* Marquee tracks should fade-mask both edges and never cause overflow */
.h4-trust-marquee,.cl-templates-track-wrap{max-width:100vw;overflow:hidden}
@media(max-width:560px){
  .h4-trust-track,.cl-templates-track{animation-duration:42s!important}
}

/* Hero typography sane on mobile */
@media(max-width:560px){
  .h4-title,.cl-hero-title,.hv2 h1{font-size:clamp(1.85rem,7.5vw,2.4rem)!important;line-height:1.08!important}
  .h4-sub,.cl-hero-sub,.hv2-sub{font-size:14.5px!important}
}

/* CTA banner button stacking on narrow screens */
@media(max-width:480px){
  .cta-banner > .container{padding:36px 18px!important}
  .cta-banner .btn{width:100%;justify-content:center}
}

/* Hide decorative floating chips on mobile to prevent overflow */
@media(max-width:768px){
  .cl-hero-chip,.hv2-oem,.hv2-sat{display:none!important}
}

/* Industries bento — already handled via section CSS but enforce */
@media(max-width:560px){
  #industries .iv-tile.bfsi,
  #industries .iv-tile.iv-iso-tile,
  #industries .iv-tile{grid-column:span 1!important;grid-row:auto!important}
}

/* Bento bn-grid — keep hero card visible on mobile */
@media(max-width:560px){
  #fintechStats .bn-hero,
  #fintechStats .bn-iso-tile{grid-column:span 1!important}
  #fintechStats .bn-hero-num{font-size:2.4rem!important}
}

/* Stagger testimonials — already responsive via own CSS */
@media(max-width:480px){
  .stt-stage{height:520px!important}
  .stt-card{padding:22px!important}
}

/* Course-page features strip on mobile */
@media(max-width:760px){
  .cp-features-grid{flex-wrap:wrap;justify-content:center}
  .cp-features-grid .cp-feature{flex:1 1 33%;min-width:0;padding:14px 8px!important}
  .cp-hero-inner{flex-direction:column!important;text-align:center;gap:24px!important}
  .cp-hero-text{text-align:center;max-width:100%!important}
  .cp-hero-badges{justify-content:center}
  .cp-hero-oem img{max-width:120px!important;padding:14px!important}
}

/* Footer columns collapse cleanly */
@media(max-width:640px){
  .footer .fgrid{grid-template-columns:1fr!important;gap:32px!important}
}

/* Tables-in-content should always be scrollable on narrow */
@media(max-width:640px){
  .table-responsive,.cp-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Body scroll lock when modal/menu is open should never break layout */
body.menu-open,body.modal-open{overflow:hidden}

/* Make sure the two-pages-on-mobile hero/sticky toolbar do not stack vertically and overlap */
@media(max-width:768px){
  .tc-toolbar-wrap,.cl-toolbar-wrap{position:relative!important;top:auto!important}
}

/* Ensure interactive elements have a comfortable tap target on mobile */
@media(max-width:640px){
  a,button,.btn{min-height:36px}
}

/* ========== Mega-menu: 55-bucket support ==========
   The new Courses dropdown has 5 columns × 11 rows. Needs more horizontal
   width and tighter row spacing than the old 3-col version. */
.mega-dropdown{min-width:1080px!important;max-width:96vw}
.mega-grid{gap:18px 24px!important}
.mega-col ul li a{padding:4px 0!important;font-size:13px!important;display:flex;align-items:center;justify-content:space-between;gap:6px}
.mega-col ul li a .mm-cnt{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.32)!important;letter-spacing:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:1px 7px;line-height:1.3}
body:not(.merged-hero) .mega-col ul li a .mm-cnt{color:#7C8794!important;background:rgba(20,26,22,.04);border-color:rgba(20,26,22,.08)}
.mega-col ul li a:hover .mm-cnt{color:#F26B2B!important;background:rgba(242,107,43,.08)!important;border-color:rgba(242,107,43,.32)!important}
.mega-col--cta{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:16px;margin-top:8px;text-align:center}
body:not(.merged-hero) .mega-col--cta{border-top-color:rgba(20,26,22,.1)}
.mm-browse-all{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:linear-gradient(135deg,#F26B2B,#E85A1A);color:#fff!important;border-radius:10px;font:700 13px 'Geist',system-ui,sans-serif;letter-spacing:-0.005em;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 6px 18px -6px rgba(242,107,43,.55)}
.mm-browse-all:hover{transform:translateY(-1px);box-shadow:0 12px 28px -6px rgba(242,107,43,.85);color:#fff!important;padding-left:22px!important}
@media(max-width:1280px){.mega-dropdown{min-width:920px!important}.mega-grid{grid-template-columns:repeat(4,1fr)!important}}
@media(max-width:1024px){.mega-dropdown{display:none!important}}

/* Mobile menu count badge */
.mobile-menu .mm-mob-cnt{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:1px 7px;margin-left:6px}

/* ============= Mobile drawer (header1.php) — was unstyled, sitewide fix ============= */
.mobile-menu:not(.open){display:none!important}
.mobile-menu.open{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000;overflow-y:auto;padding:0;border-top:none;box-shadow:none}
.mobile-menu .mm-close{position:absolute;top:14px;right:14px;width:40px;height:40px;background:#fff;border:1px solid #e6ebf2;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#0A0E14;z-index:2;padding:0;font-size:0;line-height:0}
.mobile-menu .mm-close::before{content:"\00D7";font-family:system-ui,sans-serif;font-weight:300;font-size:24px;line-height:1;color:#0A0E14}
.mobile-menu .mm-close svg{display:none}
.mobile-menu .mm-group,.mobile-menu .mm-direct,.mobile-menu .mm-ctas{display:block;margin:0;padding:0;border:none}
.mobile-menu .mm-group{border-bottom:1px solid #f0f2f6}
.mobile-menu .mm-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:16px 22px;font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:15.5px;color:#0A0E14;cursor:pointer;background:#fff;border:none;letter-spacing:-.005em;-webkit-tap-highlight-color:transparent}
.mobile-menu .mm-group>summary::-webkit-details-marker{display:none}
.mobile-menu .mm-group>summary::marker{display:none;content:""}
.mobile-menu .mm-group[open]>summary{background:#fafbfd;color:#f47b20}
.mobile-menu .mm-chev{width:16px!important;height:16px!important;flex-shrink:0;transition:transform .2s;color:#5b6b80;stroke:currentColor}
.mobile-menu .mm-group[open]>summary .mm-chev{transform:rotate(180deg);color:#f47b20}
.mobile-menu .mm-links{padding:6px 22px 18px;background:#fafbfd;display:flex;flex-direction:column;gap:0}
.mobile-menu .mm-links a{display:flex;align-items:center;justify-content:space-between;padding:11px 0;color:#1b2434!important;font-family:'Geist',system-ui,sans-serif;font-weight:500;font-size:14px;text-decoration:none;border-bottom:1px solid #ecedf1;letter-spacing:-.003em;transition:color .15s}
.mobile-menu .mm-links a:last-child{border-bottom:none}
.mobile-menu .mm-links a:hover,.mobile-menu .mm-links a:active{color:#f47b20!important}
.mobile-menu .mm-mob-cnt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:600;color:#8593a7;background:#eef0f4;border:1px solid #e0e3e9;border-radius:999px;padding:2px 8px;margin-left:8px;letter-spacing:.2px}
.mobile-menu .mm-direct{padding:16px 22px;font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:15.5px;color:#0A0E14!important;text-decoration:none;border-bottom:1px solid #f0f2f6;letter-spacing:-.005em;display:block;background:#fff;transition:background .15s,color .15s}
.mobile-menu .mm-direct:hover,.mobile-menu .mm-direct:active{background:#fafbfd;color:#f47b20!important}
.mobile-menu .mm-ctas{display:flex;flex-direction:column;gap:10px;padding:22px;border-top:1px solid #f0f2f6;background:#fafbfd;margin-top:8px}
.mobile-menu .mm-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:10px;font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:14.5px;text-decoration:none;border:1px solid transparent;transition:background .15s,transform .15s,box-shadow .15s;letter-spacing:.1px;line-height:1}
.mobile-menu .mm-cta--store{background:#fff;color:#0A0E14!important;border-color:#e6ebf2}
.mobile-menu .mm-cta--store:hover,.mobile-menu .mm-cta--store:active{background:#0A0E14;color:#fff!important;border-color:#0A0E14}
.mobile-menu .mm-cta--demo{background:#f47b20;color:#fff!important;border-color:#f47b20;box-shadow:0 12px 24px -10px rgba(244,123,32,.5)}
.mobile-menu .mm-cta--demo:hover,.mobile-menu .mm-cta--demo:active{background:#ff924a;border-color:#ff924a;transform:translateY(-1px)}
.mobile-menu .mm-cta svg{width:14px!important;height:14px!important;flex-shrink:0;stroke:currentColor}
@media(min-width:1025px){.mobile-menu{display:none!important}}
/* Belt-and-suspenders: cap any other unsized inline SVG in the chrome */
.site-header svg:not([width]),.site-header svg:not([height]){max-width:24px;max-height:24px}
.mobile-menu svg:not([width]),.mobile-menu svg:not([height]){max-width:24px;max-height:24px}

/* ============= Dropdown positioning rescue (2026-06-09) ============= */
/* Mega-dropdown was centered within .nav-list (narrow + left-anchored), pushing it off-screen.
   Anchor to viewport instead so centering happens against the full window. */
@media(min-width:1025px){
  .mega-dropdown{position:fixed!important;top:68px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;max-width:96vw}
  body.merged-hero .mega-dropdown{top:68px!important}
  /* Simple-dropdown should anchor under its parent nav-item, not nav-list */
  .nav-item:has(>.simple-dropdown){position:relative!important}
  .nav-item:not(:has(>.mega-dropdown))>.simple-dropdown{left:0!important;right:auto!important;transform:none!important}
}

/* ============= Sitewide animation polish (2026-06-10) ============= */

/* Subtle 3D tilt on hover — applies to known card class prefixes.
   No-op if the page doesn't use these classes. */
.fb-tier,.fb-lab,.fb-usp,
.csb-card,.csb-tier,.csb-vs-card,.csb-pain-card,.csb-prev-card,
.lms-card,.lms-tier,.lms-pain-card,
.hol-card,.hol-tier,.hol-prev-card,.hol-pain-card,
.ship-card,.trainer-card,.trainer,.cv-card{
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s,background .25s
}
.fb-tier:hover,.fb-lab:hover,
.csb-card:hover,.csb-tier:hover,.csb-vs-card:hover,
.lms-card:hover,.lms-tier:hover,
.hol-card:hover,.hol-tier:hover,
.ship-card:hover,.trainer-card:hover,.trainer:hover,.cv-card:hover{
  transform:translateY(-4px) perspective(900px) rotateX(1.4deg) rotateY(-1.6deg)
}

/* Primary CTA shimmer — applies to known primary-button class prefixes */
.fb-btn-primary,.cv-btn-accent,.csb-btn-primary,.lms-btn-primary,.hol-btn-primary,
.fb-form .fb-submit,.cv-btn.cv-btn-accent{
  position:relative;overflow:hidden;isolation:isolate
}
.fb-btn-primary::after,.cv-btn-accent::after,.csb-btn-primary::after,.lms-btn-primary::after,.hol-btn-primary::after,
.fb-form .fb-submit::after{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:skewX(-22deg);pointer-events:none;z-index:0
}
.fb-btn-primary>*,.cv-btn-accent>*,.csb-btn-primary>*,.lms-btn-primary>*,.hol-btn-primary>*{position:relative;z-index:1}
.fb-btn-primary:hover::after,.cv-btn-accent:hover::after,.csb-btn-primary:hover::after,.lms-btn-primary:hover::after,
.hol-btn-primary:hover::after,.fb-form .fb-submit:hover::after{
  animation:sw-shimmer 1.1s ease-out
}
@keyframes sw-shimmer{from{left:-100%}to{left:160%}}

/* Status-dot pulse — universal */
.ship-tag .dot,.csb-tag .dot,.lms-tag .dot,.hol-tag .dot,.fb-pulse-dot{
  animation:sw-dotpulse 1.6s ease-in-out infinite
}
@keyframes sw-dotpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.78)}}

/* Client-logo marquee — JS in footer1.php builds the track if .clients-row exists.
   These styles activate only after the track is present. */
.clients-row.is-marquee{display:block!important;flex-wrap:nowrap!important;overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  padding:8px 0}
.clients-row.is-marquee .clients-track{display:flex;align-items:center;gap:64px;width:max-content;
  animation:sw-march 42s linear infinite;will-change:transform}
.clients-row.is-marquee:hover .clients-track{animation-play-state:paused}
.clients-row.is-marquee .clients-track img{flex-shrink:0;transition:transform .25s}
.clients-row.is-marquee .clients-track img:hover{transform:scale(1.08)}
@keyframes sw-march{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Subtle gradient drift on dark sections that have radial orbs */
.csb-hero::before,.lms-hero::before,.hol-hero::before,.fb-cta::before,.fb-preview::before{
  animation:sw-orbdrift 14s ease-in-out infinite alternate
}
@keyframes sw-orbdrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-30px,20px) scale(1.08)}}

/* Reveal-on-scroll for any .rv element that's already on the site */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.is-visible{opacity:1;transform:translateY(0)}

/* ============= Sitewide uniformity layer — match homepage feel (2026-06-10) ============= */
/* Applies to every body.cv page (which is most of the site). Nudges typography, eyebrows,
   section rhythm, and CTA visual language toward the homepage. Scoped enough to not
   break pages with bespoke per-page CSS — only fills in defaults where pages don't override. */

body.cv{font-family:'Geist',system-ui,sans-serif;background:var(--paper,#FAF7F2);color:var(--ink,#0A0E14);line-height:1.55;-webkit-font-smoothing:antialiased}

/* Canonical heading scale — every cv page picks this up unless scoped CSS sets its own */
body.cv h1:not([class*="-h"]):not(.h-display):not(.cv-hero h1){
  font-family:'Geist',system-ui,sans-serif;font-weight:700;letter-spacing:-.028em;line-height:1.05;color:var(--ink,#0A0E14);
  font-size:clamp(2.1rem,4.6vw,3.4rem);margin:0 0 18px
}
body.cv h2:not([class*="-h"]):not(.h-display){
  font-family:'Geist',system-ui,sans-serif;font-weight:700;letter-spacing:-.024em;line-height:1.1;color:var(--ink,#0A0E14);
  font-size:clamp(1.5rem,2.7vw,2.1rem);margin:0 0 14px
}
body.cv h3:not([class*="-h"]){
  font-family:'Geist',system-ui,sans-serif;font-weight:700;letter-spacing:-.018em;line-height:1.2;color:var(--ink,#0A0E14);
  font-size:clamp(1.15rem,1.8vw,1.4rem);margin:0 0 10px
}
body.cv em,body.cv .em-accent{font-style:normal;color:var(--accent,#f47b20);font-weight:600}

/* Canonical eyebrow — mono caps with leading dash */
body.cv .h-eyebrow,body.cv .eyebrow,body.cv .kicker:not(.kicker--inline){
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;color:var(--accent,#f47b20);
  margin-bottom:16px
}
body.cv .h-eyebrow::before,body.cv .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent,#f47b20)}

/* Canonical lede paragraph (under H1/H2) */
body.cv .lede,body.cv .lead,body.cv .intro{
  font-size:17px;color:var(--ink-soft,#5b6b80);line-height:1.65;max-width:720px;margin:0 0 24px
}
body.cv .lede strong,body.cv .lead strong{color:var(--ink,#0A0E14);font-weight:600}

/* Canonical section rhythm — generous breathing room between page sections */
body.cv main > section:not([class*="-hero"]):not(.cv-hero):not(.fb-hero):not(.fb-stats):not(.fb-proof):not(.fb-cta){
  padding-top:96px;padding-bottom:96px
}
@media(max-width:768px){
  body.cv main > section:not([class*="-hero"]):not(.cv-hero):not(.fb-hero):not(.fb-stats):not(.fb-proof):not(.fb-cta){
    padding-top:64px;padding-bottom:64px
  }
}

/* Container width default */
body.cv .container,body.cv .wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* Generic card baseline (unless page overrides with own card class) */
body.cv .info-card,body.cv .feature-card,body.cv .pricing-card,
body.cv .product-card,body.cv .stat-card{
  background:#fff;border:1px solid var(--rule,#e6ebf2);border-radius:14px;padding:22px 24px;
  transition:transform .2s,border-color .2s,box-shadow .2s
}
body.cv .info-card:hover,body.cv .feature-card:hover,body.cv .pricing-card:hover,
body.cv .product-card:hover,body.cv .stat-card:hover{
  transform:translateY(-3px);border-color:#f0d2b2;box-shadow:0 18px 36px -20px rgba(15,35,75,.2)
}

/* Canonical primary button — every page with .btn-primary or .btn-accent inherits the homepage's orange CTA */
body.cv .btn-primary,body.cv a.btn-accent,body.cv .btn.btn-accent{
  display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;
  font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:14.5px;padding:13px 24px;
  background:var(--accent,#f47b20);color:#fff!important;text-decoration:none;line-height:1;
  box-shadow:0 12px 24px -10px rgba(244,123,32,.5);
  transition:transform .15s,background .15s,box-shadow .15s
}
body.cv .btn-primary:hover,body.cv a.btn-accent:hover,body.cv .btn.btn-accent:hover{
  background:var(--accent-2,#ff924a);transform:translateY(-1px);
  box-shadow:0 16px 30px -10px rgba(244,123,32,.6)
}

/* Canonical ghost button */
body.cv .btn-ghost,body.cv .btn-outline{
  display:inline-flex;align-items:center;gap:8px;border:1px solid #1b2434;border-radius:10px;
  font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:14.5px;padding:13px 24px;
  background:transparent;color:var(--ink,#0A0E14)!important;text-decoration:none;line-height:1;
  transition:background .15s,color .15s
}
body.cv .btn-ghost:hover,body.cv .btn-outline:hover{background:var(--ink,#0A0E14);color:#fff!important}

/* Status / verification badge — universal */
body.cv .badge,body.cv .verified-badge,body.cv .pill{
  display:inline-flex;align-items:center;gap:6px;font-family:'Geist',system-ui,sans-serif;
  font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;
  background:#dcfce7;color:#15803d;border:1px solid #bbf7d0;letter-spacing:.2px
}

/* Dark "CTA strip" sections inherit consistent treatment */
body.cv section[class*="-cta"]:not(.cv-hero),body.cv section.cta-strip{
  background:linear-gradient(180deg,#0A0E14,#111a2e);color:#fff;padding:96px 0;position:relative;overflow:hidden
}
body.cv section[class*="-cta"] h2,body.cv section.cta-strip h2{color:#fff}
body.cv section[class*="-cta"] em,body.cv section.cta-strip em{color:#fbbf24}
body.cv section[class*="-cta"] .h-eyebrow,body.cv section.cta-strip .h-eyebrow{color:#fbbf24}
body.cv section[class*="-cta"] .h-eyebrow::before,body.cv section.cta-strip .h-eyebrow::before{background:#fbbf24}

/* Standard footer-spacing — no surprise empty space before footer */
body.cv main + footer,body.cv main + .footer-wrap,body.cv > main:last-child{margin-bottom:0}

/* Honor the homepage's "dot accent" treatment universally */
body.cv .dot:not(.fb-pdot){display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent,#f47b20);box-shadow:0 0 0 4px rgba(244,123,32,.18)}

/* ============= merged-hero header — cream-mode text colors (2026-06-10) ============= */
/* hero-premium pages used to have dark navy hero, so header text was white.
   Now hero is cream → header text must be dark for visibility. Homepage is unaffected
   because it uses body.home-merged (not body.merged-hero). */

body.merged-hero .site-header .nav-item>a,
body.merged-hero .site-header .header-phone,
body.merged-hero .site-header .header-actions a,
body.merged-hero .site-header .header-actions button{
  color:var(--ink,#0A0E14)!important
}
body.merged-hero .site-header.scrolled{background:rgba(250,247,242,.92)!important;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(15,35,75,.06)!important}
body.merged-hero .site-header svg{color:var(--ink,#0A0E14)!important;stroke:currentColor}
body.merged-hero .header-logo svg path,body.merged-hero .header-logo svg circle{fill:currentColor}
body.merged-hero .site-header .nav-item>a:hover,body.merged-hero .site-header .header-actions a:hover{color:var(--accent,#f47b20)!important}
/* Hide top contact bar on these pages too (matches homepage / cloudlabs) */
body.merged-hero .top-bar,body.merged-hero #announcementBar{display:none!important}