/* ================================================================
   GALAXYWEB AG — main_separator.css
   Section Separators & Transition Elements
   Loads AFTER main.css — uses existing vars
   All classes use gs- prefix
   ================================================================ */

/* ═══ CONTENT BRIDGES (Blue Gradient) ═══ */

/* 1: Trust Bar */
.gs-trust{background:linear-gradient(135deg,var(--blue-dd,#005aa0) 0%,var(--blue-d,#0078c8) 40%,var(--blue-brand,#3cb1f3) 100%);padding:20px 0}
.gs-trust-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.gs-trust-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);transition:background .2s,transform .2s}
.gs-trust-item:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.gs-trust-icon{width:36px;height:36px;border-radius:10px;flex-shrink:0;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.gs-trust-icon svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gs-trust-lbl{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.gs-trust-val{font-size:13.5px;font-weight:800;color:#fff;line-height:1.2}

/* 2: Stats Strip */
.gs-stats{background:linear-gradient(135deg,var(--blue-dd,#005aa0) 0%,var(--blue-brand,#3cb1f3) 100%);padding:28px 0}
.gs-stats-inner{display:flex;justify-content:center;gap:0}
.gs-stats-item{padding:0 40px;text-align:center;position:relative}
.gs-stats-item:not(:last-child)::after{content:'';position:absolute;right:0;top:15%;height:70%;width:1px;background:rgba(255,255,255,.18)}
.gs-stats-val{font-size:28px;font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1}
.gs-stats-lbl{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}

/* 3: CTA Banner */
.gs-cta{background:linear-gradient(135deg,var(--blue-dd,#005aa0) 0%,var(--blue-d,#0078c8) 40%,var(--blue-brand,#3cb1f3) 100%);padding:32px 0}
.gs-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.gs-cta-text{font-size:18px;font-weight:800;color:#fff}
.gs-cta-text span{color:rgba(255,255,255,.55);font-weight:600;font-size:14px;display:block;margin-top:4px}
.gs-cta-btn{padding:13px 28px;border-radius:var(--r);background:#fff;color:var(--blue-d,#0078c8);font-family:var(--font);font-size:14px;font-weight:700;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.gs-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* 4: Feature Pills */
.gs-pills{background:linear-gradient(135deg,var(--blue-d,#0078c8) 0%,var(--blue-brand,#3cb1f3) 100%);padding:18px 0}
.gs-pills-inner{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.gs-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700;color:#fff;transition:background .2s}
.gs-pill:hover{background:rgba(255,255,255,.22)}
.gs-pill-dot{width:6px;height:6px;border-radius:50%;background:#6ee7b7}

/* 5: Testimonial Strip */
.gs-testi{background:linear-gradient(135deg,#0a1e3d 0%,#162040 100%);padding:36px 0;border-top:1px solid rgba(0,120,200,.12);border-bottom:1px solid rgba(0,120,200,.12)}
.gs-testi-inner{text-align:center}
.gs-testi-quote{font-size:16px;font-weight:600;color:rgba(255,255,255,.55);font-style:italic;max-width:600px;line-height:1.6;margin:0 auto 12px}
.gs-testi-author{font-size:12px;font-weight:700;color:rgba(255,255,255,.25)}

/* 6: Certifications */
.gs-certs{background:linear-gradient(135deg,var(--blue-d,#0078c8) 0%,var(--blue-brand,#3cb1f3) 100%);padding:20px 0}
.gs-certs-inner{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.gs-cert{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:var(--r);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)}
.gs-cert-icon{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center}
.gs-cert-icon svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gs-cert-name{font-size:11px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.gs-cert-desc{font-size:9.5px;color:rgba(255,255,255,.45)}

/* 7: Logo Marquee */
.gs-logos{background:linear-gradient(135deg,var(--blue-dd,#005aa0) 0%,var(--blue-d,#0078c8) 100%);padding:22px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent)}
.gs-logos-track{display:flex;gap:60px;animation:gsMarquee 20s linear infinite;width:max-content}
.gs-logos-track span{font-size:15px;font-weight:800;color:rgba(255,255,255,.3);white-space:nowrap}

/* 8: Tech Marquee */
.gs-tech{background:linear-gradient(135deg,#0a1e3d 0%,#0d2240 100%);padding:14px 0;overflow:hidden;border-top:1px solid rgba(0,120,200,.1);border-bottom:1px solid rgba(0,120,200,.1);-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.gs-tech-track{display:flex;gap:24px;animation:gsMarquee 30s linear infinite;width:max-content}
.gs-tech-item{font-family:'Courier New',monospace;font-size:12px;color:rgba(0,120,200,.45);white-space:nowrap;display:flex;align-items:center;gap:8px}
.gs-tech-item::before{content:'›';color:rgba(0,120,200,.25);font-weight:900}

@keyframes gsMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


/* ═══ WAVE TRANSITIONS ═══ */
/* All waves use position:relative + overflow:hidden on parent,
   child divs are position:absolute;bottom:0 with SVG fills */

.gs-wave{position:relative;overflow:hidden;line-height:0}
.gs-wave>div{position:absolute;bottom:0;left:0;right:0;line-height:0}
.gs-wave>div svg{display:block;width:100%;height:100%}

/* 9: Triple Wave — Dark→Navy→Blue→White */
.gs-w-triple-d2l{height:90px;background:var(--dark,#060f1e)}
.gs-w-triple-d2l .w1{height:90px}.gs-w-triple-d2l .w1 svg path{fill:#0e273d}
.gs-w-triple-d2l .w2{height:65px}.gs-w-triple-d2l .w2 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-triple-d2l .w3{height:40px}.gs-w-triple-d2l .w3 svg path{fill:#fff}

/* 10: Triple Wave L→D */
.gs-w-triple-l2d{height:90px;background:#fff}
.gs-w-triple-l2d .w1{height:90px}.gs-w-triple-l2d .w1 svg path{fill:#e7f5fd}
.gs-w-triple-l2d .w2{height:65px}.gs-w-triple-l2d .w2 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-triple-l2d .w3{height:40px}.gs-w-triple-l2d .w3 svg path{fill:var(--dark,#060f1e)}

/* 11: Quad Wave D→L */
.gs-w-quad-d2l{height:110px;background:var(--dark,#060f1e)}
.gs-w-quad-d2l .w1{height:110px}.gs-w-quad-d2l .w1 svg path{fill:#0e273d}
.gs-w-quad-d2l .w2{height:85px}.gs-w-quad-d2l .w2 svg path{fill:#153c59}
.gs-w-quad-d2l .w3{height:55px}.gs-w-quad-d2l .w3 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-quad-d2l .w4{height:30px}.gs-w-quad-d2l .w4 svg path{fill:#fff}

/* 12: Quad Wave L→D */
.gs-w-quad-l2d{height:110px;background:#fff}
.gs-w-quad-l2d .w1{height:110px}.gs-w-quad-l2d .w1 svg path{fill:#e7f5fd}
.gs-w-quad-l2d .w2{height:85px}.gs-w-quad-l2d .w2 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-quad-l2d .w3{height:55px}.gs-w-quad-l2d .w3 svg path{fill:#0e273d}
.gs-w-quad-l2d .w4{height:30px}.gs-w-quad-l2d .w4 svg path{fill:var(--dark,#060f1e)}

/* 13: Big Swoop D→L */
.gs-w-swoop-d2l{height:120px;background:var(--dark,#060f1e)}
.gs-w-swoop-d2l .w1{height:120px}.gs-w-swoop-d2l .w1 svg path{fill:#0e273d}
.gs-w-swoop-d2l .w2{height:85px}.gs-w-swoop-d2l .w2 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-swoop-d2l .w3{height:50px}.gs-w-swoop-d2l .w3 svg path{fill:#fff}

/* 14: Big Swoop L→D */
.gs-w-swoop-l2d{height:120px;background:#fff}
.gs-w-swoop-l2d .w1{height:120px}.gs-w-swoop-l2d .w1 svg path{fill:#e7f5fd}
.gs-w-swoop-l2d .w2{height:85px}.gs-w-swoop-l2d .w2 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-swoop-l2d .w3{height:50px}.gs-w-swoop-l2d .w3 svg path{fill:var(--dark,#060f1e)}

/* 15: Dramatic Dip D→L */
.gs-w-dip-d2l{height:130px;background:var(--dark,#060f1e)}
.gs-w-dip-d2l .w1{height:130px}.gs-w-dip-d2l .w1 svg path{fill:#0e273d}
.gs-w-dip-d2l .w2{height:95px}.gs-w-dip-d2l .w2 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-dip-d2l .w3{height:55px}.gs-w-dip-d2l .w3 svg path{fill:#fff}

/* 16: Dramatic Dip L→D */
.gs-w-dip-l2d{height:130px;background:#fff}
.gs-w-dip-l2d .w1{height:130px}.gs-w-dip-l2d .w1 svg path{fill:#e7f5fd}
.gs-w-dip-l2d .w2{height:95px}.gs-w-dip-l2d .w2 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-dip-l2d .w3{height:55px}.gs-w-dip-l2d .w3 svg path{fill:var(--dark,#060f1e)}

/* 17: Flowing Ribbon D→L (4 layer) */
.gs-w-ribbon-d2l{height:140px;background:var(--dark,#060f1e)}
.gs-w-ribbon-d2l .w1{height:140px}.gs-w-ribbon-d2l .w1 svg path{fill:#0e273d}
.gs-w-ribbon-d2l .w2{height:105px}.gs-w-ribbon-d2l .w2 svg path{fill:#153c59}
.gs-w-ribbon-d2l .w3{height:70px}.gs-w-ribbon-d2l .w3 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-ribbon-d2l .w4{height:38px}.gs-w-ribbon-d2l .w4 svg path{fill:#fff}

/* 18: Flowing Ribbon L→D */
.gs-w-ribbon-l2d{height:140px;background:#fff}
.gs-w-ribbon-l2d .w1{height:140px}.gs-w-ribbon-l2d .w1 svg path{fill:#e7f5fd}
.gs-w-ribbon-l2d .w2{height:105px}.gs-w-ribbon-l2d .w2 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-ribbon-l2d .w3{height:70px}.gs-w-ribbon-l2d .w3 svg path{fill:#153c59}
.gs-w-ribbon-l2d .w4{height:38px}.gs-w-ribbon-l2d .w4 svg path{fill:var(--dark,#060f1e)}

/* 19: Tidal Wave D→L */
.gs-w-tidal-d2l{height:100px;background:var(--dark,#060f1e)}
.gs-w-tidal-d2l .w1{height:100px}.gs-w-tidal-d2l .w1 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-tidal-d2l .w2{height:60px}.gs-w-tidal-d2l .w2 svg path{fill:#d4edfc}
.gs-w-tidal-d2l .w3{height:30px}.gs-w-tidal-d2l .w3 svg path{fill:#fff}

/* 20: Tidal Wave L→D */
.gs-w-tidal-l2d{height:100px;background:#fff}
.gs-w-tidal-l2d .w1{height:100px}.gs-w-tidal-l2d .w1 svg path{fill:var(--blue-brand,#3cb1f3)}
.gs-w-tidal-l2d .w2{height:60px}.gs-w-tidal-l2d .w2 svg path{fill:#0e273d}
.gs-w-tidal-l2d .w3{height:30px}.gs-w-tidal-l2d .w3 svg path{fill:var(--dark,#060f1e)}

/* 21: Silk Layers D→L (5 semi-transparent) */
.gs-w-silk-d2l{height:120px;background:var(--dark,#060f1e)}
.gs-w-silk-d2l .w1{height:120px}.gs-w-silk-d2l .w1 svg path{fill:rgba(14,39,61,.75)}
.gs-w-silk-d2l .w2{height:100px}.gs-w-silk-d2l .w2 svg path{fill:rgba(60,177,243,.25)}
.gs-w-silk-d2l .w3{height:78px}.gs-w-silk-d2l .w3 svg path{fill:rgba(60,177,243,.40)}
.gs-w-silk-d2l .w4{height:55px}.gs-w-silk-d2l .w4 svg path{fill:rgba(60,177,243,.12)}
.gs-w-silk-d2l .w5{height:30px}.gs-w-silk-d2l .w5 svg path{fill:#fff}

/* 22: Silk Layers L→D */
.gs-w-silk-l2d{height:120px;background:#fff}
.gs-w-silk-l2d .w1{height:120px}.gs-w-silk-l2d .w1 svg path{fill:rgba(60,177,243,.10)}
.gs-w-silk-l2d .w2{height:100px}.gs-w-silk-l2d .w2 svg path{fill:rgba(60,177,243,.22)}
.gs-w-silk-l2d .w3{height:78px}.gs-w-silk-l2d .w3 svg path{fill:rgba(60,177,243,.40)}
.gs-w-silk-l2d .w4{height:55px}.gs-w-silk-l2d .w4 svg path{fill:rgba(10,30,61,.85)}
.gs-w-silk-l2d .w5{height:30px}.gs-w-silk-l2d .w5 svg path{fill:var(--dark,#060f1e)}

/* 23: Glow Line */
.gs-glowline{position:relative;height:3px}
.gs-glowline-d{background:var(--dark,#060f1e)}
.gs-glowline-l{background:#fff}
.gs-glowline::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 5%,var(--blue,#0098ef) 30%,var(--blue-brand,#3cb1f3) 50%,var(--blue,#0098ef) 70%,transparent 95%)}
.gs-glowline::after{content:'';position:absolute;top:-10px;left:8%;right:8%;height:24px;background:linear-gradient(90deg,transparent,rgba(0,120,200,.2) 30%,rgba(91,200,245,.25) 50%,rgba(0,120,200,.2) 70%,transparent);filter:blur(10px)}

/* 24: Stepped Bridge D→L */
.gs-bridge-d2l .gs-br1{height:20px;background:linear-gradient(180deg,var(--dark,#060f1e),#0a1e3d)}
.gs-bridge-d2l .gs-br2{height:6px;background:linear-gradient(135deg,var(--blue-dd,#005aa0),var(--blue-brand,#3cb1f3))}
.gs-bridge-d2l .gs-br3{height:20px;background:linear-gradient(180deg,var(--bg,#f5f9ff),#fff)}

/* 25: Stepped Bridge L→D */
.gs-bridge-l2d .gs-br1{height:20px;background:linear-gradient(180deg,#fff,var(--bg,#f5f9ff))}
.gs-bridge-l2d .gs-br2{height:6px;background:linear-gradient(135deg,var(--blue-brand,#3cb1f3),var(--blue-dd,#005aa0))}
.gs-bridge-l2d .gs-br3{height:20px;background:linear-gradient(180deg,#0a1e3d,var(--dark,#060f1e))}


/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .gs-trust-grid{grid-template-columns:repeat(3,1fr)}
  .gs-stats-item{padding:0 20px}
  .gs-cta-inner{justify-content:center;text-align:center;flex-direction:column}
}
@media(max-width:640px){
  .gs-trust-grid{grid-template-columns:repeat(2,1fr)}
  .gs-stats-inner{flex-wrap:wrap;gap:16px}
  .gs-stats-item::after{display:none}
  .gs-stats-item{padding:0 16px}
}