/* ===== v2: merged navbar + new home layout (loaded after style.css) ===== */
.header{position:fixed;top:0;left:0;right:0;width:100%;background:transparent;backdrop-filter:none;box-shadow:none;padding:18px 5%;transition:background .3s,padding .3s,box-shadow .3s}
.header .logo{color:#fff}
.header .logo i,.header .logo-icon{color:var(--gold)}
.logo-img{height:40px;width:auto}
.desktop-nav a{color:#fff}
.desktop-nav a i{color:var(--sky)}
.desktop-nav a:hover,.desktop-nav a.active{background:rgba(255,255,255,.16);color:#fff}
.desktop-nav a.quote-btn{background:linear-gradient(135deg,var(--red),var(--red-dark))}
.mobile-toggle{color:#fff}
.header.solid{background:rgba(10,31,68,.96);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.25);padding:10px 5%}
.mobile-nav .logo{color:var(--navy)}.mobile-nav .logo i{color:var(--red)}
.page-hero{padding:170px 0 90px;background:linear-gradient(115deg,rgba(10,31,68,.96),rgba(18,44,92,.88),rgba(29,78,216,.7)),var(--bg) center/cover}

.hero2{position:relative;min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:140px 5% 120px;color:#fff;background:linear-gradient(100deg,rgba(10,31,68,.97) 0%,rgba(10,31,68,.85) 45%,rgba(10,31,68,.35) 100%),url('../img/a4.jpg') right center/cover}
.hero2-inner{max-width:640px}
.hero2 h1{color:#fff;font-size:clamp(2.2rem,5vw,3.9rem);margin-bottom:20px}
.hero2 h1 em{font-style:normal;color:var(--gold)}
.hero2 p{font-size:1.15rem;color:#d6e3ff;margin-bottom:30px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:7px 16px;border-radius:40px;font-size:.85rem;font-weight:600;margin-bottom:22px}
.hero-badge i{color:var(--gold)}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}
.hero-points{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font-size:.92rem;color:#cfe0ff}
.hero-points i{color:var(--sky);margin-right:6px}
.hero2-card{justify-self:center;width:100%;max-width:340px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);border-radius:24px;padding:14px;box-shadow:var(--shadow-lg);animation:float 5s ease-in-out infinite}
.hero2-card img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;width:100%}
@keyframes float{50%{transform:translateY(-10px)}}
.live{font-size:.78rem;font-weight:700;letter-spacing:.06em;margin:2px 4px 10px;display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:#ef4444;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.live-row{display:flex;align-items:center;gap:10px;margin:12px 4px 2px;font-size:.9rem;font-weight:600}
.live-row i{color:#4ade80}.live-row span{margin-left:auto;color:#cfe0ff;font-weight:400;font-size:.8rem}

.ribbon{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);margin-top:-64px;position:relative;z-index:2}
.ribbon div{text-align:center;padding:26px 10px;border-right:1px solid var(--line)}.ribbon div:last-child{border:0}
.ribbon b{display:block;font-family:'Montserrat';font-size:2rem;color:var(--blue)}.ribbon small{color:var(--muted)}

.eyebrow{display:inline-block;color:var(--red);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;margin-bottom:10px}
.eyebrow.center{display:block;text-align:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-media{position:relative}
.split-media img{border-radius:24px;box-shadow:var(--shadow-lg);width:100%}
.split-media .tag{position:absolute;left:18px;bottom:18px;right:18px;background:rgba(10,31,68,.88);color:#fff;border-radius:14px;padding:12px 16px;font-size:.88rem;font-weight:600}
.split-media .tag i{color:var(--gold);margin-right:8px}
.split-copy h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:16px}
.hl{color:var(--red)}
.split-copy>p{color:var(--muted);margin-bottom:18px}
.check{margin-bottom:26px}.check li{display:flex;gap:12px;margin-bottom:10px}
.check i{color:#fff;background:var(--green);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:.65rem;flex-shrink:0;margin-top:3px}

.layers{background:#fff}
.zig{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:56px}
.zig img{border-radius:24px;box-shadow:var(--shadow);width:100%;height:320px;object-fit:cover}
.zig.rev img{order:2}
.zig .num{font-family:'Montserrat';font-weight:800;font-size:3.4rem;color:#dbe6ff;line-height:1}
.zig h3{font-size:1.7rem;margin:4px 0 10px}.zig p{color:var(--muted)}

.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:20px}
.bt{border-radius:var(--radius);background-size:cover;background-position:center;color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;transition:var(--ease);box-shadow:var(--shadow)}
.bt:hover{transform:translateY(-6px)}
.bt h3{color:#fff;font-size:1.2rem}.bt p{color:#d6e3ff;font-size:.9rem}
.bt.big{grid-row:span 2}.bt.wide{grid-column:span 2}

.flow{background:linear-gradient(120deg,var(--navy),var(--navy-2))}
.flow .section-title{color:#fff}
.flow-row{display:flex;align-items:stretch;justify-content:center;gap:16px;margin-top:44px}
.flow-step{flex:1;text-align:center;padding:30px 20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius)}
.flow-step i{font-size:2rem;color:var(--gold);margin-bottom:12px}.flow-step h3{color:#fff;font-size:1.1rem}.flow-step p{color:#c4d5f5;font-size:.92rem}
.flow-arrow{display:grid;place-items:center;color:var(--sky)}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);border:1px solid var(--line)}
.stars{color:var(--gold);letter-spacing:3px;margin-bottom:10px}
.rev p{color:var(--muted);margin-bottom:14px}.rev small{display:block;color:var(--muted)}
.works{background:linear-gradient(180deg,#eaf1ff,var(--bg));padding:76px 0 70px}
.chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.chips span{background:var(--bg);border:1px solid var(--line);padding:12px 22px;border-radius:40px;font-weight:600}
.chips i{color:var(--blue);margin-right:8px}

@media(max-width:820px){
  .hero2{grid-template-columns:1fr;padding-top:120px;min-height:auto}.hero2-card{display:none}
  .ribbon{grid-template-columns:1fr 1fr}.ribbon div:nth-child(2){border-right:0}.ribbon div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split,.zig{grid-template-columns:1fr;gap:28px}.zig.rev img{order:0}
  .bento{grid-template-columns:1fr 1fr}.bt.wide{grid-column:span 2}.bt.big{grid-row:span 1}
  .flow-row{flex-direction:column}.flow-arrow{transform:rotate(90deg)}
  .rev-grid{grid-template-columns:1fr}
  .page-hero{padding-top:130px}
}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bt.wide{grid-column:auto}}

/* page heroes: let the background photo show through */
.page-hero{background:linear-gradient(115deg,rgba(10,31,68,.88),rgba(18,44,92,.72),rgba(29,78,216,.45)),var(--bg) center/cover}
.page-hero h1,.page-hero p{text-shadow:0 2px 14px rgba(0,0,0,.35)}

.header .logo-img{height:46px}.header.solid .logo-img{height:40px}.footer-logo .logo-img{height:50px}.mobile-nav .logo-img{height:42px}
.logo-img[hidden],.logo-icon[hidden],.brand-name[hidden]{display:none}

/* ===== richer visuals: dancing duo, call band, photo strip ===== */
.desktop-nav a.call-btn{border:1.5px solid rgba(255,255,255,.55);font-weight:700;margin-left:4px}
.desktop-nav a.call-btn i{color:var(--gold)}
.desktop-nav a.call-btn:hover{background:#fff;color:var(--navy)}
.mobile-nav li a.call-btn{margin-top:10px;border:2px solid var(--navy);border-radius:40px;text-align:center;font-weight:700}

.duo-sec{position:relative;overflow:hidden}
.duo-sec::before,.duo-sec::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(70px);opacity:.35;z-index:0}
.duo-sec::before{background:#93c5fd;left:-120px;top:20%}.duo-sec::after{background:#fda4af;right:-120px;bottom:5%}
.duo-sec .container{position:relative;z-index:1}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:24px 10px 10px}
.dn{position:relative;margin:0;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);border:8px solid #fff;aspect-ratio:4/3;background:#fff}
.dn img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.dn:hover img{transform:scale(1.08)}
.dn figcaption{position:absolute;left:14px;bottom:14px;background:rgba(10,31,68,.88);color:#fff;padding:9px 16px;border-radius:30px;font-size:.85rem;font-weight:600;backdrop-filter:blur(6px)}
.dn figcaption i{color:var(--gold);margin-right:8px}
.dn.a{transform:rotate(-5deg);animation:dnA 6s ease-in-out infinite}
.dn.b{transform:rotate(5deg);animation:dnB 6s ease-in-out infinite}
@keyframes dnA{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-16px)}}
@keyframes dnB{0%,100%{transform:rotate(5deg) translateY(-16px)}50%{transform:rotate(2deg) translateY(0)}}

.callband{background-size:cover;background-position:center;padding:76px 0;color:#fff}
.callband-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.callband h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:8px}
.callband p{color:#d6e3ff}
.bigcall{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,var(--red),var(--red-dark));padding:18px 34px;border-radius:60px;box-shadow:0 14px 34px rgba(225,29,72,.5);font-family:'Montserrat';font-weight:800;font-size:1.7rem;color:#fff;transition:var(--ease)}
.bigcall:hover{transform:translateY(-4px) scale(1.02)}
.bigcall i{font-size:1.6rem;animation:ring 1.6s infinite}
.bigcall small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#ffe4ea}
@keyframes ring{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(-16deg)}20%,40%{transform:rotate(16deg)}}

.strip{overflow:hidden;padding:34px 0;background:linear-gradient(180deg,#eaf1ff,var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.track{display:flex;gap:18px;width:max-content;animation:slide 40s linear infinite}
.strip:hover .track{animation-play-state:paused}
.track img{width:260px;height:170px;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}
.track img:nth-child(even){margin-top:18px}
@keyframes slide{to{transform:translateX(calc(-50% - 9px))}}

@media(max-width:820px){.duo{grid-template-columns:1fr;gap:34px}.bigcall{font-size:1.3rem;width:100%;justify-content:center}.callband-in{text-align:center;justify-content:center}.track img{width:200px;height:140px}}
@media(prefers-reduced-motion:reduce){.dn.a,.dn.b,.track,.bigcall i{animation:none}}
@media(max-width:1100px){.desktop-nav li:has(.call-btn){display:none}}

/* strip: labelled "build your system" gallery */
.strip{padding:64px 0 50px}
.strip-link{color:var(--red);font-weight:700;white-space:nowrap}.strip-link:hover{text-decoration:underline}
.track figure{position:relative;margin:0;flex:0 0 auto}
.track figure:nth-child(even){margin-top:18px}
.track figure img{margin:0 !important;display:block}
.track figcaption{position:absolute;left:10px;bottom:10px;background:rgba(10,31,68,.88);color:#fff;font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:20px}