/* ================================================================
   GALAXYWEB AG — main-extensions.css
   Ergänzungen zu main.css · Neue Sektionen
   © 2025 Galaxyweb AG — verwendet bestehende Tokens aus main.css
================================================================ */

/* ─── Dark Mode: Body + Variable Overrides ─── */
body.dark {
  background: #060f1e !important;
  color: #e2ecf7;
  --text:      #e2ecf7;
  --text-2:    #94aec8;
  --muted:     #5a7290;
  --bg:        #0b1426;
  --border:    rgba(255,255,255,.1);
  --bg-card:   rgba(11,20,38,.9);
  --bg-soft:   rgba(255,255,255,.04);
  --bg-danger: rgba(127,29,29,.25);
  --danger-border: rgba(226,75,74,.3);
  --danger-dark:   #fca5a5;
  --danger-text:   #fecaca;
}
body.dark nav { background: rgba(6,15,30,.96); border-bottom-color: rgba(255,255,255,.06); box-shadow: 0 1px 12px rgba(0,0,0,.3); }
body.dark .nav-links a { color: rgba(255,255,255,.6); }
body.dark .nav-links a:hover { background: rgba(255,255,255,.08); color: #fff; }
body.dark .nav-phone { color: rgba(255,255,255,.5); }
body.dark .gw-label { color: rgba(255,255,255,.72); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); }
body.dark .gw-h2 { color: #fff; }
body.dark .gw-h2 em { color: var(--blue-brand); }
body.dark .gw-sub { color: rgba(255,255,255,.44); }
body.dark .btn-outline { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.8); }
body.dark .btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }


/* ════════════════════════════════════════════════════════════════
   STEPS
════════════════════════════════════════════════════════════════ */
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
.steps-grid::before { content:''; position: absolute; top:52px; left:12.5%; right:12.5%; height:2px; background: linear-gradient(90deg,transparent,var(--blue),transparent); opacity:.18; z-index:0; }
.steps-grid::after { content:''; position: absolute; top:50px; left:12.5%; width:60px; height:6px; border-radius:3px; background: radial-gradient(ellipse,var(--blue),transparent); opacity:.5; z-index:0; animation: beamTravel 3.5s ease-in-out infinite; }
@keyframes beamTravel { 0%{left:12.5%;opacity:0} 10%{opacity:.6} 90%{opacity:.6} 100%{left:calc(87.5% - 60px);opacity:0} }

.step-card { text-align:center; position:relative; z-index:1; padding:0 1rem; }
.step-icon-wrap { width:104px; height:104px; margin:0 auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; background:#fff; border:1.5px solid var(--border); transition: border-color .4s, box-shadow .4s; box-shadow:0 4px 20px rgba(0,30,80,.07); }
body.dark .step-icon-wrap { background:rgba(11,20,38,.8); border-color:rgba(255,255,255,.08); box-shadow:none; }

.step-icon-wrap::before { content:''; position:absolute; inset:-8px; border-radius:50%; border:1.5px dashed var(--blue); opacity:.12; animation: spinSlow 25s linear infinite; }
.step-icon-wrap::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--blue); opacity:0; transform:scale(.9); transition: opacity .4s, transform .4s; }
.step-card:hover .step-icon-wrap::after { opacity:.3; transform:scale(1); }
.step-card:hover .step-icon-wrap { border-color:rgba(0,120,200,.3); box-shadow:0 0 30px rgba(0,120,200,.18); }
.step-card:nth-child(2n) .step-icon-wrap::before { animation-direction:reverse; }
@keyframes spinSlow { to{transform:rotate(360deg)} }

.step-orbit-dot { position:absolute; width:6px; height:6px; background:var(--blue); border-radius:50%; box-shadow:0 0 8px rgba(0,120,200,.4); top:-3px; left:calc(50% - 3px); animation: orbitDot 5s linear infinite; transform-origin:3px 55px; }
.step-card:nth-child(2) .step-orbit-dot{animation-delay:-1.25s}
.step-card:nth-child(3) .step-orbit-dot{animation-delay:-2.5s}
.step-card:nth-child(4) .step-orbit-dot{animation-delay:-3.75s}
@keyframes orbitDot { to{transform:rotate(360deg)} }

.step-number { position:absolute; top:-6px; right:-6px; width:32px; height:32px; background:#fff; border:2px solid var(--blue); border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--blue); box-shadow:0 0 12px rgba(0,120,200,.2); }
body.dark .step-number { background:rgba(6,15,30,.85); box-shadow:0 0 12px rgba(0,120,200,.35); }

.step-icon { font-size:2rem; line-height:1; position:relative; z-index:1; }
.step-card h3 { font-size:15px; font-weight:800; color:var(--text); margin-bottom:6px; }
.step-card p { font-size:13px; color:var(--muted); line-height:1.6; padding:0 4px; }


/* ════════════════════════════════════════════════════════════════
   PROCESS PANEL
════════════════════════════════════════════════════════════════ */
.process-panel {
  margin-top:56px; border-radius:var(--rl);
  background:#fff;
  border:1.5px solid var(--border);
  box-shadow:0 4px 24px rgba(0,30,80,.05);
  display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:40px; position:relative; overflow:hidden;
}
.process-panel::before { content:''; position:absolute; top:0; left:0; right:0; height:40%; background:none; pointer-events:none; }
body.dark .process-panel { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:0 4px 24px rgba(0,0,0,.3); }
body.dark .process-panel::before { background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%); }
.process-panel h3 { font-size:18px; font-weight:800; color:var(--text); margin-bottom:10px; }
.process-panel>div>p { font-size:14px; color:var(--muted); margin-bottom:20px; line-height:1.7; }
.process-check { display:flex; flex-direction:column; gap:8px; }
.process-check li { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.process-check li::before { content:'✓'; width:22px; height:22px; background:#d1fae5; color:#047857; border-radius:50%; font-size:11px; font-weight:800; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
body.dark .process-check li::before { background:rgba(16,185,129,.15); color:#6ee7b7; }

.server-mock {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--r); padding:16px;
  display:flex; flex-direction:column; gap:8px; position:relative;
  box-shadow:0 4px 16px rgba(0,30,80,.07);
}
body.dark .server-mock { background:rgba(14,25,46,.8); border-color:rgba(255,255,255,.08); box-shadow:none; }
.srv-row { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#fff; border:1.5px solid var(--border); border-radius:8px; }
body.dark .srv-row { background:rgba(11,20,38,.6); border-color:rgba(255,255,255,.06); }
.srv-led { width:8px; height:8px; border-radius:50%; animation:livePulse 2s ease-in-out infinite; }
.srv-led-g { background:var(--green); box-shadow:0 0 6px rgba(16,185,129,.4); }
.srv-led-b { background:var(--blue); box-shadow:0 0 6px rgba(0,120,200,.4); }
.srv-led-a { background:var(--amber); box-shadow:0 0 6px rgba(217,119,6,.4); }
.srv-lbl { font-size:11px; color:var(--muted); font-weight:700; width:42px; flex-shrink:0; }
.srv-bar { flex:1; height:6px; background:#edf3fa; border-radius:3px; overflow:hidden; }
body.dark .srv-bar { background:rgba(255,255,255,.08); }
.srv-fill { height:100%; border-radius:3px; }
.srv-fill-b{background:var(--blue)} .srv-fill-g{background:var(--green)} .srv-fill-p{background:var(--purple)} .srv-fill-c{background:#0891b2}
.srv-val { font-size:11px; color:var(--muted); font-weight:600; margin-left:auto; min-width:50px; text-align:right; font-variant-numeric:tabular-nums; }

/* Swiss stamp — positioned on the process-panel, not inside server-mock */
.process-panel-right { position:relative; }
.swiss-stamp { position:absolute; bottom:-12px; right:-32px; width:68px; height:68px; background:#fff; border:2px solid #fca5a5; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:8.5px; font-weight:800; color:#dc2626; text-transform:uppercase; letter-spacing:.04em; line-height:1.3; box-shadow:0 4px 20px rgba(0,0,0,.08); z-index:10; }
body.dark .swiss-stamp { background:#0e192e; box-shadow:0 4px 20px rgba(0,0,0,.5); }
.swiss-stamp .flag { font-size:18px; line-height:1; margin-bottom:2px; }


/* ════════════════════════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════════════════════ */
.faq-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:start; }
.faq-sidebar { position:sticky; top:80px; }
.faq-contact {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--r); padding:16px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 14px rgba(0,30,80,.06);
}
body.dark .faq-contact { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
body.dark .faq-contact .ci-icon { background:rgba(0,120,200,.15); border-color:rgba(0,120,200,.25); }
.faq-contact .title { font-size:14px; font-weight:700; color:var(--text); }
.faq-contact .desc { font-size:12px; color:var(--muted); }

.accordion { display:flex; flex-direction:column; gap:8px; }
.accordion-item {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--r); overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
  box-shadow:0 1px 6px rgba(0,30,80,.03);
}
body.dark .accordion-item { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
.accordion-item:hover,.accordion-item.active { border-color:rgba(0,120,200,.3); }
.accordion-trigger { width:100%; padding:16px 20px; background:none; border:none; color:var(--text); font-family:var(--font); font-size:14px; font-weight:700; text-align:left; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.accordion-trigger:hover { color:var(--blue); }
.acc-icon { width:26px; height:26px; border-radius:50%; background:#fff; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .35s ease, background .25s; }
body.dark .acc-icon { background:rgba(255,255,255,.06); }
.accordion-item.active .acc-icon { transform:rotate(45deg); background:#e0f0ff; }
body.dark .accordion-item.active .acc-icon { background:rgba(0,120,200,.15); }
.acc-icon svg { width:12px; height:12px; stroke:var(--muted); stroke-width:2; fill:none; }
.accordion-content { max-height:0; overflow:hidden; transition:max-height .45s ease; }
.accordion-body { padding:0 20px 16px; font-size:13.5px; color:var(--muted); line-height:1.7; }
.accordion-item.active .accordion-content { max-height:300px; }


/* ════════════════════════════════════════════════════════════════
   FEATURE SHOWCASE
════════════════════════════════════════════════════════════════ */
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-bottom:56px; }
.feature-row:last-child { margin-bottom:0; }
.feature-row.reverse .feature-img{order:2} .feature-row.reverse .feature-text{order:1}
.feature-img {
  position:relative; border-radius:var(--rl); overflow:hidden;
  background:#fff;
  border:1.5px solid var(--border); aspect-ratio:16/10;
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
body.dark .feature-img { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
.feature-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.feature-img:hover img { transform:scale(1.03); }
.feature-ph { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:12px; }
.feature-ph-icon { width:56px; height:56px; border-radius:50%; background:#fff; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
body.dark .feature-ph-icon { background:#0e192e; }
.feature-img-badge { position:absolute; top:12px; left:12px; padding:5px 14px; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); border-radius:100px; font-size:10px; font-weight:700; color:#fff; letter-spacing:.04em; text-transform:uppercase; }
.feature-tag { display:inline-block; font-size:10.5px; font-weight:800; color:var(--blue-d); text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
body.dark .feature-tag { color:var(--blue-brand); }
.feature-text h3 { font-size: clamp(26px, 3.8vw, 44px); font-weight: 800; letter-spacing: -.028em; color: var(--text); margin-bottom: 12px; line-height: 1.13; }
.feature-text h3 em { font-style:normal; color:var(--blue); }
.feature-text p { font-size: 15.5px; color: var(--muted); line-height: 1.72; margin-bottom: 22px; max-width: 100%; }
.feat-list { display:flex; flex-direction:column; gap:6px; margin-bottom:22px; }
.feat-list li { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.feat-list li::before { content:'✓'; width:20px; height:20px; background:#d1fae5; color:#047857; border-radius:50%; font-size:10px; font-weight:800; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
body.dark .feat-list li::before { background:rgba(16,185,129,.15); color:#6ee7b7; }
/* Cross-link hint below CTA buttons in feature-rows */
.feature-hint { font-size:13px; color:var(--muted); margin-top:12px; }
.feature-hint a { color:var(--blue); text-decoration:none; }
.feature-hint a:hover { text-decoration:underline; }
/* gw-sub inside feature-text: override global max-width:560px */
.feature-text .gw-sub { max-width:100%; }


/* ════════════════════════════════════════════════════════════════
   GALLERY
════════════════════════════════════════════════════════════════ */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; gap:12px; }
.gallery-item {
  position:relative; border-radius:var(--r); overflow:hidden;
  background:#fff;
  border:1.5px solid var(--border); cursor:pointer;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  box-shadow:0 4px 16px rgba(0,30,80,.07);
}
body.dark .gallery-item { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
.gallery-item.featured { grid-row:span 2; }
.gallery-item:hover { transform:translateY(-3px); border-color:rgba(0,120,200,.3); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img { transform:scale(1.05); }
.gal-ph { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--muted); font-size:12px; }
.gal-ph-icon { font-size:1.5rem; opacity:.35; }
.gal-overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 50%); display:flex; align-items:flex-end; padding:14px; opacity:0; transition:opacity .25s; }
.gallery-item:hover .gal-overlay{opacity:1}
.gal-overlay span { color:#fff; font-size:12px; font-weight:700; }
.gallery-item::after { content:'🔍'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.5); width:40px; height:40px; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.gallery-item:hover::after { opacity:1; transform:translate(-50%,-50%) scale(1); }


/* ════════════════════════════════════════════════════════════════
   CAROUSEL
════════════════════════════════════════════════════════════════ */
.carousel-wrap { position:relative; }
.carousel-clip { overflow:hidden; border-radius:var(--rl); padding:4px 0; }
.carousel-track { display:flex; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.carousel-slide { flex:0 0 33.333%; padding:8px 10px; box-sizing:border-box; }

.carousel-inner {
  border-radius:var(--rl); overflow:hidden;
  background:#fff;
  border:1.5px solid var(--border);
  cursor:pointer; aspect-ratio:16/9; position:relative;
  transition:border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
body.dark .carousel-inner { background:rgba(11,20,38,.8); border-color:rgba(255,255,255,.08); box-shadow:0 2px 12px rgba(0,0,0,.2); }
.carousel-inner:hover { border-color:var(--blue); box-shadow:0 4px 16px rgba(0,60,140,.1); transform:translateY(-2px); }
body.dark .carousel-inner:hover { box-shadow:0 8px 24px rgba(0,120,200,.15); border-color:rgba(0,120,200,.3); }
.carousel-inner img { width:100%; height:100%; object-fit:cover; }

.car-ph {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--muted); font-size:13px; font-weight:600;
}
.car-ph-icon { font-size:2.2rem; opacity:.2; }

.car-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:16px 18px;
  background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 100%);
  color:#fff; font-size:13px; font-weight:700;
  opacity:0; transition:opacity .3s; border-radius:0 0 14px 14px;
}
.carousel-inner:hover .car-caption { opacity:1; }

/* Arrow buttons */
.car-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px;
  background:linear-gradient(135deg, var(--blue-d), var(--blue-brand));
  border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10; font-size:22px; line-height:1; color:#fff;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  box-shadow:0 6px 20px rgba(60,177,243,.30);
  font-family:var(--font);
}
.car-btn:hover { transform:translateY(-50%) scale(1.1); box-shadow:0 10px 28px rgba(60,177,243,.42); }
.car-btn.prev { left:12px; }
.car-btn.next { right:12px; }

/* Dots */
.car-dots { display:flex; justify-content:center; gap:8px; padding:20px 0 4px; }
.car-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--border); cursor:pointer; border:none;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
body.dark .car-dot { background:rgba(0,120,200,.2); }
.car-dot:hover { background:rgba(0,120,200,.5); transform:scale(1.2); }
.car-dot.active { background:var(--blue); width:32px; border-radius:5px; box-shadow:none; }
body.dark .car-dot.active { box-shadow:0 0 12px rgba(0,120,200,.4); }


/* ════════════════════════════════════════════════════════════════
   TECH STACK
════════════════════════════════════════════════════════════════ */
.tech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tech-col {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rl); padding:24px;
  transition:border-color .3s, box-shadow .3s, transform .3s; position:relative; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
.tech-col::before { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:none; pointer-events:none; }
body.dark .tech-col { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
body.dark .tech-col::before { background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%); }
.tech-col:hover { border-color:rgba(0,120,200,.25); box-shadow:0 16px 40px rgba(0,60,140,.1); transform:translateY(-3px); }
body.dark .tech-col:hover { box-shadow:0 8px 28px rgba(0,120,200,.1); }
.tech-col-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.tech-col-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.tci-blue{background:#dbeafe} .tci-red{background:#fee2e2} .tci-purple{background:#ede9fe}
body.dark .tci-blue{background:rgba(0,120,200,.15)} body.dark .tci-red{background:rgba(239,68,68,.12)} body.dark .tci-purple{background:rgba(124,58,237,.12)}
.tech-col-head h3 { font-size:14px; font-weight:800; color:var(--text); }
.tech-items { display:flex; flex-direction:column; gap:8px; }
.tech-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:10px; transition:border-color .2s, transform .2s; }
body.dark .tech-item { background:rgba(11,20,38,.5); border-color:rgba(255,255,255,.06); }
.tech-item:hover { border-color:rgba(0,120,200,.25); transform:translateX(3px); }
.tech-logo { width:30px; height:30px; border-radius:7px; background:var(--bg); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; color:var(--blue); flex-shrink:0; }
body.dark .tech-logo { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); }
.tech-info { flex:1; min-width:0; }
.tech-name { font-size:12.5px; font-weight:700; color:var(--text); }
.tech-desc { font-size:10.5px; color:var(--muted); }
.tech-badge { font-size:9px; font-weight:800; padding:2px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
.tb-active { background:#d1fae5; color:#047857; }
.tb-premium { background:#fef3c7; color:#b45309; }
body.dark .tb-active { background:rgba(16,185,129,.15); color:#6ee7b7; }
body.dark .tb-premium { background:rgba(245,158,11,.15); color:#fcd34d; }


/* ════════════════════════════════════════════════════════════════
   MIGRATION CTA
════════════════════════════════════════════════════════════════ */
.migration-card { display:grid; grid-template-columns:1fr 1fr; border-radius:var(--rxl); overflow:visible; min-height:420px; }
.migration-card.gw-glass { border-radius:var(--rxl); }
.migration-left { padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.migration-left h2 { font-size:clamp(24px,3.5vw,38px); font-weight:900; color:#fff; margin-bottom:14px; line-height:1.15; letter-spacing:-.02em; }
.migration-left h2 em { font-style:normal; color:var(--blue-brand); }
.migration-left>p { font-size:14px; color:rgba(255,255,255,.5); line-height:1.72; margin-bottom:24px; }
.mig-features { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:28px; }
.mig-feat { display:flex; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.6); }
.mig-feat::before { content:'✓'; width:20px; height:20px; background:rgba(16,185,129,.15); color:#6ee7b7; border-radius:50%; font-size:10px; font-weight:800; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.mig-btns { display:flex; gap:12px; flex-wrap:wrap; }
.migration-right { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.migration-right::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 34px,rgba(255,255,255,.03) 34px,rgba(255,255,255,.03) 35px),repeating-linear-gradient(90deg,transparent,transparent 34px,rgba(255,255,255,.03) 34px,rgba(255,255,255,.03) 35px); }
.mig-flow { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; padding:40px 20px; gap:0; }
.mig-flow::before { content:''; position:absolute; top:80px; bottom:80px; left:50%; width:2px; background:linear-gradient(180deg,#f87171,var(--blue),#10b981); opacity:.35; z-index:0; }
.mig-node { display:flex; align-items:center; gap:14px; padding:16px 24px; border-radius:var(--rl); min-width:240px; position:relative; z-index:2; transition:transform .2s, box-shadow .2s; }
.mig-node:hover { transform:scale(1.03); box-shadow:0 8px 28px rgba(0,0,0,.3); }
.mig-node-icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.mn-from { background:#1a1520; border:1.5px solid rgba(239,68,68,.35); box-shadow:inset 0 0 20px rgba(239,68,68,.08); }
.mn-from .mig-node-icon { background:rgba(239,68,68,.2); border:1px solid rgba(239,68,68,.3); }
.mn-transfer { background:#0d1a2e; border:1.5px solid rgba(0,120,200,.35); box-shadow:inset 0 0 20px rgba(0,120,200,.08); }
.mn-transfer .mig-node-icon { background:rgba(0,120,200,.2); border:1px solid rgba(0,120,200,.3); }
.mn-to { background:#0d1f1a; border:1.5px solid rgba(16,185,129,.35); box-shadow:inset 0 0 20px rgba(16,185,129,.08); }
.mn-to .mig-node-icon { background:rgba(16,185,129,.2); border:1px solid rgba(16,185,129,.3); }
.mn-label { font-size:14px; font-weight:800; color:#fff; }
.mn-sub { font-size:11px; color:rgba(255,255,255,.5); font-weight:500; }
.mig-arrow { display:flex; flex-direction:column; align-items:center; padding:12px 0; position:relative; z-index:2; }
.mig-arrow-icon { width:36px; height:36px; border-radius:50%; background:#0e192e; border:1.5px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; transition:background .2s; }
.mig-arrow-icon:hover { background:#142030; border-color:rgba(255,255,255,.25); }
.mig-arrow-icon svg { width:16px; height:16px; fill:none; stroke:rgba(255,255,255,.6); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }


/* ════════════════════════════════════════════════════════════════
   UPTIME MONITOR
════════════════════════════════════════════════════════════════ */
.uptime-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:20px; }
.uptime-card {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rl); padding:22px;
  transition:border-color .3s, box-shadow .3s; position:relative; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,30,80,.07);
  display:flex; flex-direction:column;
}
body.dark .uptime-card { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
.uptime-card:hover { border-color:rgba(0,120,200,.25); box-shadow:0 12px 32px rgba(0,30,80,.08); }
.uptime-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.uptime-svc { display:flex; align-items:flex-start; gap:8px; }
.uptime-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  animation: dotShadowGrow 2s ease infinite;
  margin-top: 7px;
}
@keyframes dotShadowGrow {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0);   }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);   }
}
@keyframes dotShadowGrowAmber {
  0%   { box-shadow: 0 0 0 0   rgba(245,158,11,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(245,158,11,0);   }
  100% { box-shadow: 0 0 0 0   rgba(245,158,11,0);   }
}
@keyframes dotShadowGrowRed {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0);   }
  100% { box-shadow: 0 0 0 0   rgba(239,68,68,0);   }
}
.uptime-svc-name { font-size:13.5px; font-weight:700; color:var(--text); }
.uptime-pct { font-size:13px; font-weight:800; color:var(--green); flex-shrink:0; }
.uptime-bars { display:flex; gap:2px; height:28px; align-items:flex-end; }
.up-bar { flex:1; border-radius:2px; min-height:4px; background:var(--green); opacity:.5; transition:opacity .2s; }
.up-bar:hover { opacity:1; }
.up-bar-label { display:flex; justify-content:space-between; margin-top:6px; font-size:10px; color:var(--muted); }
@media (max-width: 640px) {
  .uptime-grid { grid-template-columns: 1fr !important; }
}
body.dark .up-bar,
.uw-dark .up-bar { opacity:.75; }
body.dark .up-bar:hover,
.uw-dark .up-bar:hover { opacity:1; }

.uptime-status {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rl); padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  box-shadow:0 4px 16px rgba(0,30,80,.07);
}
body.dark .uptime-status { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
.status-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; background:#d1fae5; border:1px solid #a7f3d0; border-radius:100px; font-size:12px; font-weight:700; color:#047857; flex-shrink:1; min-width:0; }
@media (max-width: 640px) {
  .status-pill { white-space:normal; border-radius:20px; font-size:11px; padding:5px 12px; }
}
body.dark .status-pill { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.25); color:#6ee7b7; }
.status-pill::before {
  content: ''; width: 7px; height: 7px;
  background: var(--pill-dot-color, var(--green,#10b981));
  border-radius: 50%; flex-shrink: 0;
  animation: pillDotPulse 2s ease infinite;
}
@keyframes pillDotPulse {
  0%   { box-shadow: 0 0 0 0   var(--pill-dot-color, rgba(16,185,129,.55)); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}
.status-text { font-size:13px; color:var(--muted); }


/* ════════════════════════════════════════════════════════════════
   NEWSLETTER
════════════════════════════════════════════════════════════════ */
.newsletter-card {
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rxl); padding:48px;
  box-shadow:0 4px 20px rgba(0,30,80,.07); position:relative; overflow:hidden;
}
.newsletter-card::before { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:none; pointer-events:none; }
body.dark .newsletter-card { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
body.dark .newsletter-card::before { background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%); }
.newsletter-card h2 { font-size:clamp(22px,3vw,32px); font-weight:800; color:var(--text); margin-bottom:10px; line-height:1.2; }
.newsletter-card h2 em { font-style:normal; color:var(--blue); }
body.dark .newsletter-card h2 { color:#fff; }
body.dark .newsletter-card h2 em { color:var(--blue-brand); }
.newsletter-card>div>p { font-size:14px; color:var(--muted); line-height:1.72; margin-bottom:22px; }
body.dark .newsletter-card>div>p { color:rgba(255,255,255,.44); }
.nl-form { display:flex; gap:10px; max-width:440px; }
.nl-input { flex:1; padding:12px 16px; background:#fff; border:1.5px solid var(--border); border-radius:var(--r); font-size:13.5px; font-family:var(--font); color:var(--text); outline:none; transition:border-color .2s; }
body.dark .nl-input { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:#fff; }
.nl-input:focus { border-color:var(--blue); }
.nl-input::placeholder { color:var(--muted); }
.nl-note { margin-top:10px; font-size:11px; color:var(--muted); }
body.dark .nl-note { color:rgba(255,255,255,.3); }
.nl-visual { display:flex; align-items:center; justify-content:center; min-height:200px; position:relative; }
.orbit-wrap { position:relative; width:220px; height:220px; }
.orbit-ring { position:absolute; border:1px solid var(--border); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
body.dark .orbit-ring { border-color:rgba(255,255,255,.08); }
.or-1{width:130px;height:130px} .or-2{width:200px;height:200px;border-style:dashed;opacity:.5}
.orbit-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; background:var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 0 30px rgba(0,120,200,.25); z-index:2; }
.orbit-dot { position:absolute; width:40px; height:40px; border-radius:50%; background:#fff; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; z-index:3; animation:orbitFloat 5s ease-in-out infinite; box-shadow:0 2px 10px rgba(0,0,0,.06); }
body.dark .orbit-dot { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); box-shadow:0 2px 10px rgba(0,0,0,.3); }
.orbit-dot:nth-child(4){top:2%;left:50%;transform:translateX(-50%);animation-delay:0s}
.orbit-dot:nth-child(5){top:35%;right:0;animation-delay:-1s}
.orbit-dot:nth-child(6){bottom:2%;left:50%;transform:translateX(-50%);animation-delay:-2s}
.orbit-dot:nth-child(7){top:35%;left:0;animation-delay:-3s}
@keyframes orbitFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }


/* ════════════════════════════════════════════════════════════════
   GLASS FEATURE CARDS — 3-col aurora cards
════════════════════════════════════════════════════════════════ */
.glass-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.glass-card {
  border-radius:var(--rl); padding:32px 28px; position:relative; overflow:hidden;
  background:rgba(11,20,38,.7); border:1px solid rgba(255,255,255,.08);
  
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.glass-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.15); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.glass-card::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%); border-radius:var(--rl) var(--rl) 0 0; pointer-events:none; }
.glass-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; opacity:0; transition:opacity .28s; }
.glass-card:hover::after { opacity:1; }

/* Color variants */
.gc-blue { border-color:rgba(0,120,200,.2); }
.gc-blue::after { background:linear-gradient(90deg,transparent,var(--sky),transparent); }
.gc-blue:hover { box-shadow:0 20px 50px rgba(0,120,200,.2); border-color:rgba(0,120,200,.4); }

.gc-green { border-color:rgba(16,185,129,.2); }
.gc-green::after { background:linear-gradient(90deg,transparent,#6ee7b7,transparent); }
.gc-green:hover { box-shadow:0 20px 50px rgba(16,185,129,.18); border-color:rgba(16,185,129,.4); }

.gc-purple { border-color:rgba(139,92,246,.2); }
.gc-purple::after { background:linear-gradient(90deg,transparent,#c4b5fd,transparent); }
.gc-purple:hover { box-shadow:0 20px 50px rgba(139,92,246,.2); border-color:rgba(139,92,246,.4); }

.gc-amber { border-color:rgba(245,158,11,.2); }
.gc-amber::after { background:linear-gradient(90deg,transparent,#fcd34d,transparent); }
.gc-amber:hover { box-shadow:0 20px 50px rgba(245,158,11,.18); border-color:rgba(245,158,11,.4); }

.gc-red { border-color:rgba(244,63,94,.2); }
.gc-red::after { background:linear-gradient(90deg,transparent,#fda4af,transparent); }
.gc-red:hover { box-shadow:0 20px 50px rgba(244,63,94,.18); border-color:rgba(244,63,94,.4); }

.gc-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:20px; }
.gc-blue .gc-icon  { background:rgba(0,120,200,.15); border:1px solid rgba(0,120,200,.25); }
.gc-green .gc-icon { background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.25); }
.gc-purple .gc-icon{ background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.25); }
.gc-amber .gc-icon { background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.25); }
.gc-red .gc-icon   { background:rgba(244,63,94,.15); border:1px solid rgba(244,63,94,.25); }

.gc-title { font-size:16px; font-weight:800; color:#fff; margin-bottom:8px; }
.gc-text { font-size:13px; color:rgba(255,255,255,.45); line-height:1.65; margin-bottom:16px; }
.gc-stat { font-size:32px; font-weight:900; letter-spacing:-.02em; line-height:1; margin-bottom:4px; }
.gc-blue .gc-stat  { color:var(--sky); }
.gc-green .gc-stat { color:#6ee7b7; }
.gc-purple .gc-stat{ color:#c4b5fd; }
.gc-amber .gc-stat { color:#fcd34d; }
.gc-red .gc-stat   { color:#fda4af; }
.gc-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); }

/* Wide glass card (span 2) */
.gc-wide { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
.gc-wide .gc-content { }
.gc-wide .gc-visual { display:flex; align-items:center; justify-content:center; }


/* ════════════════════════════════════════════════════════════════
   GLASS PRICING CARDS
════════════════════════════════════════════════════════════════ */
.glass-pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gp-card {

  border-radius:var(--rl); padding:36px 28px; position:relative; overflow:hidden;
  background:rgba(11,20,38,.7); border:1px solid rgba(255,255,255,.1);
   display:flex; flex-direction:column;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.gp-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.15); box-shadow:0 20px 50px rgba(0,0,0,.4); }
.gp-card::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%); border-radius:var(--rl) var(--rl) 0 0; pointer-events:none; }
.gp-card.gp-featured { border-color:rgba(0,120,200,.35); }
.gp-card.gp-featured::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,120,200,.12) 0%,transparent 60%); pointer-events:none; }
.gp-badge { display:inline-flex; padding:3px 10px; border-radius:100px; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,120,200,.2); color:var(--sky); border:1px solid rgba(0,120,200,.3); margin-bottom:16px; align-self:flex-start; }
.gp-name { font-size:18px; font-weight:800; color:#fff; margin-bottom:6px; }
.gp-desc { font-size:12.5px; color:rgba(255,255,255,.4); margin-bottom:24px; line-height:1.6; }
.gp-price { margin-bottom:24px; }
.gp-price sup { font-size:14px; font-weight:700; color:var(--sky); vertical-align:super; }
.gp-price strong { font-size:42px; font-weight:900; color:#fff; letter-spacing:-.03em; }
.gp-price em { font-style:normal; font-size:13px; color:rgba(255,255,255,.35); }
.gp-feats { flex:1; margin-bottom:24px; }
.gp-feats li { font-size:13px; color:rgba(255,255,255,.55); padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:8px; }
.gp-feats li:last-child { border:none; }
.gp-feats li::before { content:'✓'; color:#6ee7b7; font-weight:900; font-size:11px; flex-shrink:0; }


/* ════════════════════════════════════════════════════════════════
   GLASS TIMELINE / PROCESS
════════════════════════════════════════════════════════════════ */
.glass-timeline { display:flex; flex-direction:column; gap:0; position:relative; max-width:700px; margin:0 auto; }
.glass-timeline::before { content:''; position:absolute; top:28px; bottom:28px; left:28px; width:2px; background:linear-gradient(180deg,rgba(0,120,200,.4),rgba(139,92,246,.4),rgba(16,185,129,.4)); z-index:0; }
.gt-item { display:flex; gap:24px; position:relative; z-index:1; padding:16px 0; }
.gt-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; margin-top:4px; border:3px solid; position:relative; left:22px; }
.gt-dot-blue   { background:rgba(0,120,200,.3); border-color:var(--blue); box-shadow:0 0 12px rgba(0,120,200,.4); }
.gt-dot-purple { background:rgba(139,92,246,.3); border-color:#7c3aed; box-shadow:0 0 12px rgba(139,92,246,.4); }
.gt-dot-green  { background:rgba(16,185,129,.3); border-color:#10b981; box-shadow:0 0 12px rgba(16,185,129,.4); }
.gt-dot-amber  { background:rgba(245,158,11,.3); border-color:#d97706; box-shadow:0 0 12px rgba(245,158,11,.4); }
.gt-content {
  flex:1; border:1px solid rgba(255,255,255,.1);
  border-radius:var(--rl); padding:24px; margin-left:14px;
  transition:border-color .3s, box-shadow .3s;
  border-left:3px solid transparent;
  background:rgba(255,255,255,.06);
}
.gt-content:hover { border-color:rgba(255,255,255,.16); box-shadow:0 12px 36px rgba(0,0,0,.3); }
/* Each card gets a subtle color tint matching its dot */
.gt-dot-blue + .gt-content   { border-left-color:var(--blue); }
.gt-dot-purple + .gt-content { border-left-color:#7c3aed; }
.gt-dot-amber + .gt-content  { border-left-color:#d97706; }
.gt-dot-green + .gt-content  { border-left-color:#10b981; }
.gt-dot-blue + .gt-content:hover   { border-left-color:var(--sky); box-shadow:0 12px 36px rgba(0,120,200,.15); }
.gt-dot-purple + .gt-content:hover { border-left-color:#c4b5fd; box-shadow:0 12px 36px rgba(139,92,246,.15); }
.gt-dot-amber + .gt-content:hover  { border-left-color:#fcd34d; box-shadow:0 12px 36px rgba(245,158,11,.15); }
.gt-dot-green + .gt-content:hover  { border-left-color:#6ee7b7; box-shadow:0 12px 36px rgba(16,185,129,.15); }
.gt-title { font-size:15px; font-weight:800; color:#fff; margin-bottom:6px; }
.gt-text { font-size:12.5px; color:rgba(255,255,255,.45); line-height:1.6; }
.gt-tag { display:inline-flex; padding:2px 8px; border-radius:100px; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-top:10px; }
.gt-tag-blue   { background:rgba(0,120,200,.15); color:var(--sky); border:1px solid rgba(0,120,200,.25); }
.gt-tag-purple { background:rgba(139,92,246,.15); color:#c4b5fd; border:1px solid rgba(139,92,246,.25); }
.gt-tag-green  { background:rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.25); }
.gt-tag-amber  { background:rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.25); }


/* ════════════════════════════════════════════════════════════════
   GLASS CTA BANNER
════════════════════════════════════════════════════════════════ */
.glass-cta {
  border-radius:24px; padding:56px 48px; text-align:center;
  position:relative; overflow:hidden;
  background:rgba(11,20,38,.6); border:1px solid rgba(255,255,255,.12);
  
}
.glass-cta::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,120,200,.5),transparent); }
.glass-cta::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(0,120,200,.08) 0%,transparent 60%); pointer-events:none; }
.glass-cta h2 { font-size:clamp(26px,4vw,44px); font-weight:900; color:#fff; letter-spacing:-.03em; margin-bottom:14px; position:relative; z-index:1; }
.glass-cta h2 em { font-style:normal; color:var(--blue-brand); }
.glass-cta p { font-size:15px; color:rgba(255,255,255,.45); margin-bottom:32px; position:relative; z-index:1; max-width:520px; margin-left:auto; margin-right:auto; }
.glass-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }


/* ════════════════════════════════════════════════════════════════
   PRICING 5-COL (scrollable row for 4-5 products)
════════════════════════════════════════════════════════════════ */
.pricing-scroll { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.pricing-toggle { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:32px; }
.pricing-toggle span { font-size:13px; font-weight:700; color:var(--muted); transition:color .2s; }
.pricing-toggle span.active { color:var(--text); }
body.dark .pricing-toggle span.active { color:#fff; }
.pt-switch { width:48px; height:26px; background:var(--border); border-radius:100px; position:relative; cursor:pointer; border:none; transition:background .2s; }
.pt-switch::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.pt-switch.yearly { background:var(--blue); }
.pt-switch.yearly::after { transform:translateX(22px); }
.pt-save { font-size:10px; font-weight:800; background:#d1fae5; color:#047857; padding:2px 8px; border-radius:100px; }
body.dark .pt-save { background:rgba(16,185,129,.15); color:#6ee7b7; }

/* Light/dark pricing card */
.p5-card {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rl); padding:28px 22px;
  display:flex; flex-direction:column; transition:border-color .3s, box-shadow .3s, transform .3s;
  position:relative; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
.p5-card::after { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:none; border-radius:var(--rl) var(--rl) 0 0; pointer-events:none; }
body.dark .p5-card { background:rgba(11,20,38,.85); border-color:rgba(255,255,255,.08); box-shadow:none; }
body.dark .p5-card::after { background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%); }
.p5-card:hover { border-color:rgba(0,120,200,.25); box-shadow:0 16px 40px rgba(0,30,80,.1); transform:translateY(-4px); }
body.dark .p5-card:hover { box-shadow:0 12px 36px rgba(0,120,200,.12); }
.p5-card.p5-pop { border-color:rgba(0,120,200,.3); }
.p5-card.p5-pop::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--sky)); z-index:2; }
.p5-emoji { font-size:1.6rem; margin-bottom:12px; }
.p5-name { font-size:15px; font-weight:800; color:var(--text); margin-bottom:4px; }
body.dark .p5-name { color:#fff; }
.p5-desc { font-size:11.5px; color:var(--muted); margin-bottom:18px; line-height:1.55; }
.p5-price { margin-bottom:20px; }
.p5-price sup { font-size:12px; font-weight:700; color:var(--blue); vertical-align:super; }
.p5-price strong { font-size:32px; font-weight:900; color:var(--text); letter-spacing:-.02em; }
body.dark .p5-price strong { color:#fff; }
.p5-price em { font-style:normal; font-size:12px; color:var(--muted); }
.p5-feats { flex:1; margin-bottom:18px; display:flex; flex-direction:column; gap:0; }
.p5-feats li { font-size:12px; color:var(--muted); padding:7px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:7px; }
body.dark .p5-feats li { border-color:rgba(255,255,255,.06); }
.p5-feats li:last-child { border:none; }
.p5-feats li::before { content:'✓'; color:var(--green); font-weight:900; font-size:10px; flex-shrink:0; }


/* ════════════════════════════════════════════════════════════════
   TESTIMONIALS — glass style
════════════════════════════════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.testi-card {
  border-radius:var(--rl); padding:28px 24px; position:relative; overflow:hidden;
  background:rgba(11,20,38,.7); border:1px solid rgba(255,255,255,.1);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.testi-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.15); box-shadow:0 16px 44px rgba(0,0,0,.35); }
.testi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%); border-radius:var(--rl) var(--rl) 0 0; pointer-events:none; }
.testi-stars { font-size:13px; margin-bottom:14px; letter-spacing:2px; }
.testi-quote { font-size:13.5px; color:rgba(255,255,255,.7); line-height:1.7; margin-bottom:20px; font-style:italic; position:relative; z-index:1; }
.testi-author { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.testi-avatar { width:40px; height:40px; border-radius:50%; background:rgba(0,120,200,.15); border:1.5px solid rgba(0,120,200,.3); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.testi-name { font-size:12.5px; font-weight:700; color:#fff; }
.testi-role { font-size:10.5px; color:rgba(255,255,255,.4); }

/* Light/dark testimonial variant — AERO GLASS */
.testi-card-light {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rl); padding:32px 28px;
  position:relative; overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s;
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
body.dark .testi-card-light { background:rgba(11,20,38,.85); border-color:rgba(255,255,255,.08); box-shadow:none; }
.testi-card-light:hover { box-shadow:0 16px 40px rgba(0,30,80,.1); border-color:rgba(0,120,200,.2); transform:translateY(-4px); }
body.dark .testi-card-light:hover { box-shadow:0 16px 40px rgba(0,120,200,.1); }
.testi-card-light::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:none; border-radius:var(--rl) var(--rl) 0 0; pointer-events:none; }
body.dark .testi-card-light::before { background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%); }
.testi-card-light .testi-stars { margin-bottom:18px; }
.testi-card-light .testi-quote { color:var(--text); font-size:14px; line-height:1.75; margin-bottom:24px; opacity:.7; }
body.dark .testi-card-light .testi-quote { color:rgba(255,255,255,.65); }
.testi-card-light .testi-name { color:var(--text); font-size:14px; }
body.dark .testi-card-light .testi-name { color:#fff; }
.testi-card-light .testi-role { color:var(--muted); font-size:12px; }
.testi-card-light .testi-avatar { background:rgba(0,120,200,.08); border-color:rgba(0,120,200,.15); }
body.dark .testi-card-light .testi-avatar { background:rgba(0,120,200,.12); border-color:rgba(0,120,200,.25); }


/* ════════════════════════════════════════════════════════════════
   TRUST BAR — client/partner logos
════════════════════════════════════════════════════════════════ */
.gwe-trust { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; padding:32px 40px; background:#fff; border:1.5px solid var(--border); border-radius:18px; box-shadow:0 4px 20px rgba(0,30,80,.07); }
body.dark .gwe-trust { background:rgba(11,20,38,.6) !important; border-color:rgba(255,255,255,.08); box-shadow:none; }
.gwe-trust-item { font-size:18px; font-weight:900; color:var(--text); letter-spacing:-.02em; white-space:nowrap; transition:color .2s, opacity .2s; opacity:.35; }
.gwe-trust-item:hover { opacity:.7; }
body.dark .gwe-trust-item { color:rgba(255,255,255,.4); }
body.dark .gwe-trust-item:hover { color:rgba(255,255,255,.7); opacity:1; }
.gwe-trust-label { text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:10px; }

/* Glass trust bar variant (inside aurora sections) */
.gwe-trust-glass { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--rl); padding:24px 32px; }
.gwe-trust-glass .gwe-trust-item { color:rgba(255,255,255,.3); }
.gwe-trust-glass .gwe-trust-item:hover { color:rgba(255,255,255,.6); opacity:1; }
.gwe-trust-glass .gwe-trust-label { color:rgba(255,255,255,.25); }


/* ════════════════════════════════════════════════════════════════
   COMPARISON TABLE — feature matrix
════════════════════════════════════════════════════════════════ */
.cmp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.cmp-table thead th { padding:14px 16px; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:center; border-bottom:2px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:2; }
.cmp-table thead th:first-child { text-align:left; border-radius:12px 0 0 0; position:sticky; left:0; z-index:3; }
.cmp-table thead th:last-child { border-radius:0 12px 0 0; }
.cmp-table thead th.cmp-pop { color:var(--blue); background:rgba(0,120,200,.05); }
body.dark .cmp-table thead th { background:#0b1426; border-color:rgba(255,255,255,.08); }
body.dark .cmp-table thead th.cmp-pop { background:rgba(0,120,200,.08); }
.cmp-table tbody td { padding:12px 16px; border-bottom:1px solid var(--border); text-align:center; color:var(--muted); transition:background .15s; }
body.dark .cmp-table tbody td { border-color:rgba(255,255,255,.06); }
.cmp-table tbody td:first-child { text-align:left; font-weight:600; color:var(--text); position:sticky; left:0; background:#fff; z-index:1; }
body.dark .cmp-table tbody td:first-child { color:#e2ecf7; background:rgba(11,20,38,.95); }
.cmp-table tbody td.cmp-pop { background:rgba(0,120,200,.03); }
body.dark .cmp-table tbody td.cmp-pop { background:rgba(0,120,200,.04); }
.cmp-table tbody tr:hover td { background:var(--bg); }
body.dark .cmp-table tbody tr:hover td { background:rgba(255,255,255,.03); }
.cmp-check { color:var(--green); font-weight:900; font-size:14px; }
.cmp-cross { color:var(--muted); opacity:.3; font-size:14px; }
.cmp-wrap {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rl); overflow:hidden;
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
.cmp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp-scroll::-webkit-scrollbar { height:6px; }
.cmp-scroll::-webkit-scrollbar-track { background:transparent; }
.cmp-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
body.dark .cmp-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); }
body.dark .cmp-wrap { background:rgba(11,20,38,.6); border-color:rgba(255,255,255,.08); box-shadow:none; }
.cmp-table { min-width:700px; }
.cmp-hint { display:none; text-align:center; padding:8px 0 0; font-size:11px; color:var(--muted); }
@media(max-width:900px) { .cmp-hint { display:block; } }


/* ════════════════════════════════════════════════════════════════
   STATS COUNTER — big numbers row (glass)
════════════════════════════════════════════════════════════════ */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat-card {
  text-align:center; padding:36px 20px; border-radius:var(--rl); position:relative; overflow:hidden;
  background:rgba(11,20,38,.7); border:1px solid rgba(255,255,255,.1);
  transition:transform .25s, box-shadow .25s;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.3); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:linear-gradient(180deg,rgba(255,255,255,.06),transparent); border-radius:var(--rl) var(--rl) 0 0; pointer-events:none; }
.stat-number { font-size:48px; font-weight:900; letter-spacing:-.04em; line-height:1; margin-bottom:6px; position:relative; z-index:1; }
.stat-label { font-size:12px; font-weight:700; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.08em; position:relative; z-index:1; }
.stat-desc { font-size:11.5px; color:rgba(255,255,255,.3); margin-top:8px; position:relative; z-index:1; }
.sn-blue   { color:var(--sky); } .sn-green  { color:#6ee7b7; }
.sn-purple { color:#c4b5fd; } .sn-amber  { color:#fcd34d; }

/* Light/dark stat variant — AERO GLASS */
.stat-card-light {
  background:#fff;
  border:1.5px solid var(--border); text-align:left; padding:32px 28px;
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
.stat-card-light::before { background:none; }
body.dark .stat-card-light { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
body.dark .stat-card-light::before { background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%); }
.stat-card-light:hover { box-shadow:0 16px 40px rgba(0,30,80,.1); transform:translateY(-4px); }
body.dark .stat-card-light:hover { box-shadow:0 12px 36px rgba(0,120,200,.08); }
.stat-card-light .stat-number { color:var(--blue); font-size:42px; }
body.dark .stat-card-light .stat-number { color:var(--sky); }
.stat-card-light .stat-label { color:var(--text); font-weight:800; }
body.dark .stat-card-light .stat-label { color:rgba(255,255,255,.6); }
.stat-card-light .stat-desc { color:var(--muted); opacity:1; }


/* ════════════════════════════════════════════════════════════════
   TEAM SECTION
════════════════════════════════════════════════════════════════ */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.team-card {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rl); padding:28px 20px; text-align:center;
  transition:border-color .3s, box-shadow .3s, transform .3s; overflow:hidden; position:relative;
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
.team-card::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:none; pointer-events:none; }
body.dark .team-card { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
body.dark .team-card::before { background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%); }
.team-card:hover { border-color:rgba(0,120,200,.25); box-shadow:0 16px 40px rgba(0,30,80,.1); transform:translateY(-4px); }
body.dark .team-card:hover { box-shadow:0 12px 32px rgba(0,120,200,.1); }
.team-avatar { width:72px; height:72px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,#dbeafe,#ede9fe); display:flex; align-items:center; justify-content:center; font-size:1.8rem; border:3px solid #fff; box-shadow:0 4px 16px rgba(0,30,80,.08); }
body.dark .team-avatar { background:linear-gradient(135deg,rgba(0,120,200,.15),rgba(139,92,246,.15)); border-color:rgba(255,255,255,.1); box-shadow:0 4px 16px rgba(0,0,0,.3); }
.team-name { font-size:14px; font-weight:800; color:var(--text); margin-bottom:2px; }
body.dark .team-name { color:#fff; }
.team-role { font-size:11.5px; color:var(--muted); margin-bottom:12px; }
.team-links { display:flex; justify-content:center; gap:8px; }
.team-link { width:32px; height:32px; border-radius:8px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--muted); transition:all .2s; text-decoration:none; }
body.dark .team-link { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.team-link:hover { background:var(--blue); color:#fff; border-color:var(--blue); }


/* ════════════════════════════════════════════════════════════════
   INTEGRATION GRID — glass partner logos
════════════════════════════════════════════════════════════════ */
.integ-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.integ-grid-3 { grid-template-columns:repeat(3,1fr); }
.integ-card {
  padding:20px; border-radius:var(--rl); text-align:center;
  background:rgba(11,20,38,.7); border:1px solid rgba(255,255,255,.1);
  transition:transform .25s, border-color .25s, box-shadow .25s;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.integ-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.25); box-shadow:0 12px 32px rgba(0,0,0,.3); }
.integ-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
.integ-name { font-size:11px; font-weight:700; color:rgba(255,255,255,.7); }
.integ-badge { font-size:8.5px; font-weight:800; padding:1px 6px; border-radius:100px; background:rgba(16,185,129,.12); color:#6ee7b7; border:1px solid rgba(16,185,129,.2); text-transform:uppercase; letter-spacing:.04em; }

/* Light/dark integration variant — AERO GLASS */
.integ-card-light {
  background:#fff;
  border:1.5px solid var(--border);
  flex-direction:row; text-align:left; padding:18px 20px; gap:14px;
  box-shadow:0 4px 16px rgba(0,30,80,.07);
}
body.dark .integ-card-light { background:rgba(11,20,38,.7); border-color:rgba(255,255,255,.08); box-shadow:none; }
.integ-card-light:hover { box-shadow:0 12px 32px rgba(0,30,80,.1); border-color:rgba(0,120,200,.25); transform:translateY(-3px); }
body.dark .integ-card-light:hover { box-shadow:0 8px 24px rgba(0,120,200,.1); }
.integ-card-light .integ-icon { background:var(--bg); border:1.5px solid var(--border); width:44px; height:44px; border-radius:12px; flex-shrink:0; }
body.dark .integ-card-light .integ-icon { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); }
.integ-card-light .integ-name { color:var(--text); font-size:13px; }
body.dark .integ-card-light .integ-name { color:#e2ecf7; }
.integ-card-light .integ-badge { background:rgba(16,185,129,.1); color:#047857; border-color:rgba(16,185,129,.2); }
body.dark .integ-card-light .integ-badge { background:rgba(16,185,129,.12); color:#6ee7b7; border-color:rgba(16,185,129,.2); }


/* ════════════════════════════════════════════════════════════════
   BEFORE/AFTER PROVIDER COMPARISON (glass)
════════════════════════════════════════════════════════════════ */
.ba-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; }
.ba-card {
  border-radius:var(--rl); padding:32px 28px; position:relative; overflow:hidden;
  transition:transform .25s;
}
.ba-card:hover { transform:translateY(-3px); }
.ba-old { background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.18); }
.ba-new { background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.18); }
.ba-label { display:inline-flex; padding:3px 10px; border-radius:100px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; margin-bottom:16px; }
.ba-label-old { background:rgba(239,68,68,.12); color:#fca5a5; border:1px solid rgba(239,68,68,.2); }
.ba-label-new { background:rgba(16,185,129,.12); color:#6ee7b7; border:1px solid rgba(16,185,129,.2); }
.ba-title { font-size:18px; font-weight:800; color:#fff; margin-bottom:8px; }
.ba-desc { font-size:12.5px; color:rgba(255,255,255,.45); margin-bottom:20px; line-height:1.6; }
.ba-items { display:flex; flex-direction:column; gap:8px; }
.ba-item { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:8px 12px; border-radius:10px; }
.ba-old .ba-item { color:rgba(255,255,255,.5); background:rgba(239,68,68,.06); }
.ba-old .ba-item::before { content:'✕'; color:#f87171; font-weight:900; font-size:10px; }
.ba-new .ba-item { color:rgba(255,255,255,.65); background:rgba(16,185,129,.06); }
.ba-new .ba-item::before { content:'✓'; color:#6ee7b7; font-weight:900; font-size:10px; }
.ba-vs { display:flex; align-items:center; justify-content:center; }
.ba-vs-circle { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; color:rgba(255,255,255,.5); }


/* ════════════════════════════════════════════════════════════════
   LIGHT AERO-GLASS OVERRIDES for glass components in white mode
════════════════════════════════════════════════════════════════ */

/* Glass feature cards — light */
.glass-card-light {
  background:#fff;
  border-color:var(--border) !important;
  box-shadow:0 4px 20px rgba(0,30,80,.08);
}
.glass-card-light::before { background:none !important; }
.glass-card-light::after { display:none; }
.glass-card-light:hover { box-shadow:0 16px 44px rgba(0,30,80,.12) !important; border-color:rgba(0,120,200,.25) !important; }
.glass-card-light .gc-title { color:var(--text); }
.glass-card-light .gc-text { color:var(--muted); }
.glass-card-light .gc-label { color:var(--muted); }
.glass-card-light.gc-blue .gc-stat  { color:var(--blue); }
.glass-card-light.gc-green .gc-stat { color:#059669; }
.glass-card-light.gc-purple .gc-stat{ color:#7c3aed; }
.glass-card-light .gc-icon { border-color:rgba(0,0,0,.08) !important; }

/* Glass pricing — light */
.gp-card-light {
  background:#fff;
  border-color:var(--border) !important;
  box-shadow:0 4px 20px rgba(0,30,80,.08);
}
.gp-card-light::before { background:none !important; }
.gp-card-light:hover { box-shadow:0 16px 44px rgba(0,30,80,.12) !important; border-color:rgba(0,120,200,.25) !important; }
.gp-card-light.gp-featured { border-color:rgba(0,120,200,.35) !important; }
.gp-card-light.gp-featured::after { background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,120,200,.06) 0%,transparent 60%); }
.gp-card-light .gp-name { color:var(--text); }
.gp-card-light .gp-desc { color:var(--muted); }
.gp-card-light .gp-price strong { color:var(--text); }
.gp-card-light .gp-price sup { color:var(--blue); }
.gp-card-light .gp-price em { color:var(--muted); }
.gp-card-light .gp-feats li { color:var(--muted); border-color:rgba(0,0,0,.06); }
.gp-card-light .gp-feats li::before { color:#059669; }
.gp-card-light .gp-badge { background:rgba(0,120,200,.08); color:var(--blue); border-color:rgba(0,120,200,.15); }

/* Standalone timeline light overrides */
section:not(.aurora) .gt-content {
  background:#fff !important; border:1.5px solid var(--border) !important; border-left:3px solid transparent !important;
  box-shadow:0 4px 20px rgba(0,30,80,.07);
}
section:not(.aurora) .gt-dot-blue + .gt-content   { border-left-color:var(--blue) !important; }
section:not(.aurora) .gt-dot-purple + .gt-content { border-left-color:#7c3aed !important; }
section:not(.aurora) .gt-dot-amber + .gt-content  { border-left-color:#d97706 !important; }
section:not(.aurora) .gt-dot-green + .gt-content  { border-left-color:#10b981 !important; }
section:not(.aurora) .gt-content:hover { box-shadow:0 12px 36px rgba(0,30,80,.1) !important; }
section:not(.aurora) .gt-title { color:var(--text); }
section:not(.aurora) .gt-text { color:var(--muted); }
section:not(.aurora) .glass-timeline::before { background:linear-gradient(180deg,var(--blue),var(--purple),var(--green)); opacity:.3; }

/* Glass CTA — light */
.glass-cta-light {
  background:#fff;
  border-color:var(--border) !important;
  box-shadow:0 4px 24px rgba(0,30,80,.06);
}
.glass-cta-light::before { background:linear-gradient(90deg,transparent,rgba(0,120,200,.2),transparent) !important; }
.glass-cta-light::after { background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(0,120,200,.04) 0%,transparent 60%) !important; }
.glass-cta-light h2 { color:var(--text) !important; }
.glass-cta-light h2 em { color:var(--blue) !important; }
.glass-cta-light p { color:var(--muted) !important; }

/* Migration card — light */
.migration-card-light {
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rxl); overflow:visible;
  box-shadow:0 4px 24px rgba(0,30,80,.06);
  display:grid; grid-template-columns:1fr 1fr; min-height:420px;
}
.migration-card-light .migration-left h2 { color:var(--text); }
.migration-card-light .migration-left h2 em { color:var(--blue); }
.migration-card-light .migration-left>p { color:var(--muted); }
.migration-card-light .mig-feat { color:var(--muted); }
.migration-card-light .mig-feat::before { background:rgba(16,185,129,.1); color:#059669; }
.migration-card-light .mn-label { color:var(--text); }
.migration-card-light .mn-sub { color:var(--muted); }
.migration-card-light .mn-from { background:#fef2f2; border-color:rgba(239,68,68,.2); box-shadow:none; }
.migration-card-light .mn-transfer { background:#eff6ff; border-color:rgba(0,120,200,.2); box-shadow:none; }
.migration-card-light .mn-to { background:#ecfdf5; border-color:rgba(16,185,129,.2); box-shadow:none; }
.migration-card-light .mig-arrow-icon { background:#fff; border-color:var(--border); }
.migration-card-light .mig-arrow-icon svg { stroke:var(--muted); }
.migration-card-light .migration-right::before { background:repeating-linear-gradient(0deg,transparent,transparent 34px,rgba(0,0,0,.03) 34px,rgba(0,0,0,.03) 35px),repeating-linear-gradient(90deg,transparent,transparent 34px,rgba(0,0,0,.03) 34px,rgba(0,0,0,.03) 35px) !important; }

/* Before/After — light */
section:not(.aurora) .ba-card {  }
section:not(.aurora) .ba-old { background:rgba(239,68,68,.04); border-color:rgba(239,68,68,.15); }
section:not(.aurora) .ba-new { background:rgba(16,185,129,.04); border-color:rgba(16,185,129,.15); }
section:not(.aurora) .ba-title { color:var(--text); }
section:not(.aurora) .ba-desc { color:var(--muted); }
section:not(.aurora) .ba-old .ba-item { color:var(--muted); background:rgba(239,68,68,.04); }
section:not(.aurora) .ba-old .ba-item::before { color:#dc2626; }
section:not(.aurora) .ba-new .ba-item { color:var(--text); background:rgba(16,185,129,.04); }
section:not(.aurora) .ba-new .ba-item::before { color:#059669; }
section:not(.aurora) .ba-label-old { background:rgba(239,68,68,.08); color:#dc2626; border-color:rgba(239,68,68,.15); }
section:not(.aurora) .ba-label-new { background:rgba(16,185,129,.08); color:#059669; border-color:rgba(16,185,129,.15); }
section:not(.aurora) .ba-vs-circle { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); color:var(--muted); }

/* Glass trust bar — light override */
.gwe-trust-glass-light { background:rgba(255,255,255,.5) !important; border-color:var(--border) !important; box-shadow:0 4px 20px rgba(0,30,80,.07); }
.gwe-trust-glass-light .gwe-trust-item { color:var(--text) !important; opacity:.3; }
.gwe-trust-glass-light .gwe-trust-item:hover { opacity:.6; }
.gwe-trust-glass-light .gwe-trust-label { color:var(--muted) !important; }

/* Stat card light override for sn- colors */
.stat-card-light .sn-blue   { color:var(--blue-d) !important; }
.stat-card-light .sn-green  { color:#059669 !important; }
.stat-card-light .sn-purple { color:#7c3aed !important; }
.stat-card-light .sn-amber  { color:#d97706 !important; }


/* ════════════════════════════════════════════════════════════════
   TOOL TABS
════════════════════════════════════════════════════════════════ */
.tooltabs-bar-wrap {
  display:flex; justify-content:center; margin-bottom:48px;
}
.tooltabs-bar {
  display:inline-flex; align-items:center; gap:4px;
  background:#fff;
  border:1.5px solid var(--border); border-radius:var(--rl);
  padding:6px; box-shadow:0 4px 20px rgba(0,30,80,.06);
  flex-wrap:wrap;
}
body.dark .tooltabs-bar {
  background:rgba(11,20,38,.85); border-color:rgba(255,255,255,.1);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.tooltab {
  display:flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:10px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:13.5px; font-weight:600;
  color:var(--muted); transition:background .2s, color .2s;
  white-space:nowrap;
}
.tooltab:hover { background:rgba(0,120,200,.07); color:var(--text); }
body.dark .tooltab:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.8); }
.tooltab.active { background:var(--blue); color:#fff; }
body.dark .tooltab.active { background:var(--blue); color:#fff; }
.tooltab-icon { width:24px; height:24px; object-fit:contain; border-radius:5px; flex-shrink:0; }

/* Panels */
.tooltabs-panel { display:none; animation:ttFadeIn .3s ease; }
.tooltabs-panel.active { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@keyframes ttFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.tooltab-text { }
.tooltab-text h3 { font-size:clamp(22px,3vw,38px); font-weight:800; color:var(--text); margin-bottom:12px; line-height:1.18; letter-spacing:-.025em; }
.tooltab-text h3 em { font-style:normal; color:var(--blue); }
body.dark .tooltab-text h3 { color:#fff; }
.tooltab-text > p { font-size:14.5px; color:var(--muted); line-height:1.72; margin-bottom:20px; max-width:520px; }
.tooltab-list { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.tooltab-list li { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.tooltab-list li::before { content:'✓'; width:22px; height:22px; background:#d1fae5; color:#047857; border-radius:50%; font-size:11px; font-weight:800; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
body.dark .tooltab-list li::before { background:rgba(16,185,129,.15); color:#6ee7b7; }
.tooltab-cta { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--blue); text-decoration:none; transition:gap .2s; }
.tooltab-cta:hover { gap:10px; }
body.dark .tooltab-cta { color:var(--blue-brand,#5ab0f0); }

/* Mock visual */
.tooltab-mock {
  position:relative; border-radius:var(--rl);
  background:linear-gradient(140deg,#deeef8 0%,#c8e4f5 60%,#d4ede8 100%);
  border:1.5px solid var(--border); min-height:360px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,30,80,.08);
}
body.dark .tooltab-mock {
  background:linear-gradient(140deg,rgba(0,60,120,.3) 0%,rgba(0,30,80,.4) 60%,rgba(0,60,60,.3) 100%);
  border-color:rgba(255,255,255,.1); box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.tooltab-mock::before {
  content:''; position:absolute; right:-50px; bottom:-50px;
  width:220px; height:220px; border-radius:50%;
  background:linear-gradient(135deg,rgba(0,120,200,.12),rgba(0,180,160,.1));
  pointer-events:none;
}
.tooltab-mock::after {
  content:''; position:absolute; left:-40px; top:-40px;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);
  pointer-events:none;
}

/* Inner mock window */
.tm-window {
  background:#fff; border:1.5px solid rgba(0,0,0,.08);
  border-radius:var(--r); padding:14px; width:calc(100% - 56px);
  box-shadow:0 12px 40px rgba(0,30,80,.14); position:relative; z-index:1;
}
body.dark .tm-window { background:rgba(14,25,46,.97); border-color:rgba(255,255,255,.12); box-shadow:0 12px 40px rgba(0,0,0,.55); }
.tm-titlebar { display:flex; align-items:center; gap:5px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
body.dark .tm-titlebar { border-bottom-color:rgba(255,255,255,.08); }
.tm-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.tm-dot-r{background:#ff5f57} .tm-dot-y{background:#febc2e} .tm-dot-g{background:#28c840}
.tm-urlbar { flex:1; background:#f5f9ff; border:1px solid var(--border); border-radius:6px; height:20px; margin:0 8px; }
body.dark .tm-urlbar { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.07); }
.tm-toolbar { display:flex; gap:6px; align-items:center; padding:6px 10px; background:#f8fafc; border:1px solid var(--border); border-radius:6px; margin-bottom:10px; }
body.dark .tm-toolbar { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.06); }
.tm-tool-btn { width:18px; height:18px; background:#e2e8f0; border-radius:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#64748b; }
body.dark .tm-tool-btn { background:rgba(255,255,255,.1); color:rgba(255,255,255,.5); }
.tm-body { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tm-img-ph { background:linear-gradient(135deg,#dbeafe,#ede9fe); border-radius:6px; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
body.dark .tm-img-ph { background:linear-gradient(135deg,rgba(0,120,200,.2),rgba(120,80,200,.2)); }
.tm-content { display:flex; flex-direction:column; gap:6px; justify-content:center; }
.tm-line { height:8px; background:#e2e8f0; border-radius:4px; }
body.dark .tm-line { background:rgba(255,255,255,.09); }
.tm-line-short{width:55%} .tm-line-medium{width:80%} .tm-line-full{width:100%}
.tm-title-line { height:14px; background:#cbd5e1; border-radius:4px; margin-bottom:8px; width:70%; }
body.dark .tm-title-line { background:rgba(255,255,255,.15); }
.tm-badge-row { display:flex; gap:5px; margin-top:4px; }
.tm-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:100px; background:rgba(0,120,200,.12); color:var(--blue); }
body.dark .tm-badge { background:rgba(0,120,200,.2); color:#7dc3f5; }
.tm-select-box { border:2px dashed rgba(0,120,200,.4); border-radius:6px; padding:4px; position:relative; }
.tm-select-handle { position:absolute; top:-5px; right:-5px; width:14px; height:14px; background:var(--green,#10b981); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; font-weight:900; box-shadow:0 2px 6px rgba(16,185,129,.4); }
.tm-color-row { display:flex; gap:4px; align-items:center; }
.tm-color-dot { width:14px; height:14px; border-radius:50%; cursor:pointer; }

/* Responsive */
@media(max-width:900px) {
  .tooltabs-panel.active { grid-template-columns:1fr; gap:28px; }
  .tooltab-mock { min-height:240px; }
  .tooltabs-bar { gap:2px; }
  .tooltab { padding:7px 12px; font-size:12.5px; }
}
@media(max-width:640px) {
  .tooltab { padding:6px 10px; font-size:12px; gap:5px; }
  .tooltab-icon { width:20px; height:20px; }
  .tooltabs-bar-wrap { overflow-x:auto; justify-content:flex-start; padding:0 2px; }
  .tooltabs-bar { flex-wrap:nowrap; }
}


/* ════════════════════════════════════════════════════════════════
   HERO TESTIMONIALS
════════════════════════════════════════════════════════════════ */
.hero-testi-section { padding:0; overflow:hidden; }

.hero-testi-intro {
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
  padding:72px 0 56px;
}
/* h2 uses .gw-h2 (main.css), p uses .gw-sub (main.css) */
.hero-testi-intro .gw-sub { max-width:100%; margin-top:6px; }

.hero-testi-stage {
  position:relative; border-radius:var(--rl); overflow:visible;
  margin-bottom:0;
}
.hero-testi-img {
  width:100%; aspect-ratio:16/7; object-fit:cover; object-position:center 30%;
  border-radius:var(--rl); display:block;
  /* placeholder tint when no image */
  background:linear-gradient(135deg,#1a2540 0%,#2d3a5e 100%);
}
.hero-testi-img-ph {
  width:100%; aspect-ratio:16/7; border-radius:var(--rl);
  background:linear-gradient(135deg,#0f1e3a 0%,#1e2d50 50%,#2d1e50 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:rgba(255,255,255,.2);
}

/* Floating cards row */
.hero-testi-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:-72px; position:relative; z-index:2; padding:0 32px;
}
.hero-testi-card {
  background:#fff; border-radius:var(--rl);
  padding:28px 24px;
  box-shadow:0 16px 48px rgba(0,20,60,.13);
  display:flex; flex-direction:column; gap:16px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.hero-testi-card:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,20,60,.18); }
body.dark .hero-testi-card { background:rgba(14,25,46,.97); box-shadow:0 16px 48px rgba(0,0,0,.5); }

.htc-quote-mark {
  font-size:28px; line-height:1; color:var(--blue); font-family:Georgia,serif;
  font-weight:900; margin-bottom:-8px; opacity:.8;
}
body.dark .htc-quote-mark { color:var(--blue-brand,#5ab0f0); }
.htc-text { font-size:13.5px; color:var(--muted); line-height:1.7; flex:1; }
.htc-divider { height:1px; background:var(--border); margin:0 -4px; }
body.dark .htc-divider { background:rgba(255,255,255,.08); }
.htc-author { display:flex; align-items:center; gap:10px; }
.htc-avatar {
  width:32px; height:32px; border-radius:50%; background:#f1f5f9;
  border:2px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
body.dark .htc-avatar { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.htc-name { font-size:13px; font-weight:700; color:var(--text); }
body.dark .htc-name { color:rgba(255,255,255,.85); }
.htc-source { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); margin-top:2px; }
.htc-source-icon { font-size:13px; }

/* card middle: slightly elevated */
.hero-testi-card:nth-child(2) { margin-top:-20px; }

@media(max-width:900px) {
  .hero-testi-intro { grid-template-columns:1fr; gap:20px; padding:48px 0 36px; }
  .hero-testi-cards { grid-template-columns:1fr; padding:0 16px; margin-top:-40px; gap:14px; }
  .hero-testi-card:nth-child(2) { margin-top:0; }
  .hero-testi-img,.hero-testi-img-ph { aspect-ratio:16/9; }
}
@media(max-width:640px) {
  .hero-testi-cards { padding:0 4px; }
}


/* ════════════════════════════════════════════════════════════════
   PARTNER HELP CARD
════════════════════════════════════════════════════════════════ */
.partner-card {
  border-radius:var(--rxl); overflow:hidden;
  box-shadow:0 8px 32px rgba(0,20,60,.1);
  border:1.5px solid var(--border);
}
body.dark .partner-card { border-color:rgba(255,255,255,.08); box-shadow:0 8px 32px rgba(0,0,0,.4); }

.partner-card-img {
  width:100%; aspect-ratio:16/6; object-fit:cover; object-position:center 35%;
  display:block;
  background:linear-gradient(135deg,#c8d8e8 0%,#e8e0d8 100%);
}
.partner-card-img-ph {
  width:100%; aspect-ratio:16/6;
  background:linear-gradient(135deg,#d0dde8 0%,#e8ddd0 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:rgba(0,0,0,.15);
}

.partner-card-body {
  background:#1e3354;
  padding:40px 48px;
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:center;
}
body.dark .partner-card-body { background:#0d1e35; }

/* Title uses gw-h2 override for white color on dark bg */
.partner-card-title {
  font-size:clamp(20px,2.8vw,32px); font-weight:800; color:#fff;
  line-height:1.2; letter-spacing:-.025em; padding-right:40px;
}
.partner-card-title em { font-style:normal; color:var(--blue-brand,#5ab0f0); }

.partner-card-divider {
  width:1px; height:80px; background:rgba(255,255,255,.18); flex-shrink:0; margin:0 40px;
}
.partner-card-right { display:flex; flex-direction:column; gap:12px; }
.partner-card-desc { font-size:14px; color:rgba(255,255,255,.6); line-height:1.65; margin-bottom:6px; }
/* Buttons reuse .btn .btn-primary / .btn .btn-outline from main.css */
.partner-card-btns { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* Ghost link variant — styled to match existing .tooltab-cta / text-links */
.partner-card-link {
  font-size:13.5px; font-weight:700; color:rgba(100,200,240,.9);
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
  transition:gap .2s, color .2s;
}
.partner-card-link:hover { color:#fff; gap:8px; }

@media(max-width:900px) {
  .partner-card-body { grid-template-columns:1fr; padding:32px 28px; gap:24px; }
  .partner-card-divider { display:none; }
  .partner-card-title { padding-right:0; }
}


/* ════════════════════════════════════════════════════════════════
   PARALLAX SECTION
════════════════════════════════════════════════════════════════ */
.parallax-section {
  position:relative; overflow:hidden;
  padding:100px 0 88px; min-height:520px;
}
.parallax-bg {
  position:absolute; inset:-30% 0; /* extra height gives parallax room to travel */
  background-attachment:fixed;     /* sticky / parallax effect */
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#0b1426;
  z-index:0;
}
/* Dark scrim — pure black overlay, no colour cast */
.parallax-bg::after {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.72);
}
/* iOS/Android: background-attachment:fixed breaks in mobile WebKit — fall back to scroll */
@media(max-width:900px) {
  .parallax-bg {
    background-attachment:scroll;
    inset:0;
  }
}
.parallax-content { position:relative; z-index:1; }

/* Header — mirrors section-header but left-aligned & on dark bg */
.parallax-header { margin-bottom:64px; }
/* .gw-label override for dark bg */
.parallax-header .gw-label { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.8); }
/* .gw-h2 override: force white on dark bg */
.parallax-header .gw-h2 { color:#fff !important; }
.parallax-header .gw-h2 em { color:var(--blue-brand,#5ab0f0) !important; }

/* Feature columns */
.parallax-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.parallax-col-icon {
  width:52px; height:52px; margin-bottom:18px; opacity:.9;
}
.parallax-col-icon svg { width:52px; height:52px; stroke:#fff; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.parallax-col-divider { height:1.5px; background:rgba(255,255,255,.25); margin-bottom:18px; }
.parallax-col h3 { font-size:15px; font-weight:800; color:#fff; margin-bottom:10px; }
.parallax-col p { font-size:13.5px; color:rgba(255,255,255,.6); line-height:1.72; }

@media(max-width:900px) {
  .parallax-cols { grid-template-columns:1fr; gap:36px; }
  .parallax-header { margin-bottom:40px; }
}
@media(max-width:640px) {
  .parallax-section { padding:72px 0 64px; }
}



/* ════════════════════════════════════════════════════════════════
   HISTORY TIMELINE  (v2 — blue CI, professional)
════════════════════════════════════════════════════════════════ */
.timeline-section {
  position:relative; overflow:hidden; padding:88px 0 80px;
  background:#060f1e;
}
/* Blue glow — matches brand */
.timeline-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 70% at 5%  50%, rgba(0,100,200,.18) 0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 90% 20%, rgba(0,80,180,.12) 0%, transparent 60%);
}
/* Subtle top edge line */
.timeline-section::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,120,200,.3),transparent);
}

/* ── Header ── */
.timeline-header { position:relative; z-index:1; margin-bottom:52px; }
.timeline-header .gw-label { background:rgba(0,120,200,.12); border-color:rgba(0,120,200,.25); color:rgba(160,210,255,.9); }
.timeline-header .gw-h2 { color:#fff !important; }
.timeline-header .gw-h2 em { color:var(--blue-brand,#5ab0f0) !important; }

/* ── Step bar ── */
.timeline-stepbar {
  position:relative; z-index:1;
  padding:0 0 8px;
  margin-bottom:0;
}
/* Full-width track line sits at dot-center (top: margin-top of dot = 12px + dot-half = 8px = 20px) */
.tl-track {
  position:absolute; top:20px; left:0; right:0; height:2px;
  background:rgba(255,255,255,.1); border-radius:2px;
}
.tl-track-fill {
  position:absolute; top:0; left:0; height:100%;
  background:linear-gradient(90deg, var(--blue,#0078c8), rgba(0,160,255,.8));
  border-radius:2px; box-shadow:0 0 8px rgba(0,120,200,.5);
  transition:width .55s cubic-bezier(.16,1,.3,1);
  width:0%;
}

/* Year nodes */
.tl-steps {
  display:flex; justify-content:space-between; align-items:flex-start;
  position:relative; z-index:1;
}
.tl-step {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer; flex:1; position:relative;
  transition:opacity .2s;
}
.tl-step:hover { opacity:.85; }

/* Dot on the track */
.tl-step-dot {
  width:16px; height:16px; border-radius:50%; flex-shrink:0; margin-top:12px;
  background:#0b1a30; border:2px solid rgba(255,255,255,.2);
  transition:border-color .3s, background .3s, box-shadow .3s;
  position:relative; z-index:2;
}
.tl-step-dot::after {
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:rgba(255,255,255,.2);
  transition:background .3s, transform .3s; transform:scale(0);
}
.tl-step.passed .tl-step-dot { border-color:var(--blue,#0078c8); background:var(--blue,#0078c8); }
.tl-step.passed .tl-step-dot::after { background:#fff; transform:scale(.55); }
.tl-step.active .tl-step-dot {
  width:22px; height:22px; margin-top:9px;
  border-color:rgba(0,160,255,.9); background:#0b1a30;
  box-shadow:0 0 0 5px rgba(0,120,200,.18), 0 0 20px rgba(0,120,200,.55);
}
.tl-step.active .tl-step-dot::after { inset:4px; background:var(--blue,#0078c8); transform:scale(1); }

/* Labels */
.tl-step-year {
  font-size:12px; font-weight:700; color:rgba(255,255,255,.35);
  letter-spacing:.04em; white-space:nowrap; transition:color .3s;
}
.tl-step.passed .tl-step-year { color:rgba(255,255,255,.5); }
.tl-step.active  .tl-step-year { color:#fff; font-size:13px; font-weight:800; }
.tl-step-label {
  font-size:11.5px; color:rgba(255,255,255,.28); text-align:center;
  line-height:1.4; max-width:90px; transition:color .3s;
}
.tl-step.active .tl-step-label { color:rgba(255,255,255,.6); }

@media(max-width:640px) {
  .tl-step-label { display:none; }
  .tl-step-year  { font-size:11px; }
}

/* ── No floating connector — visual link is dot highlight + card border ── */

/* ── Cards: 3 visible, scroll on active ── */
.timeline-cards-wrap { overflow:hidden; position:relative; z-index:1; margin-top:0; }
.timeline-cards {
  display:flex; gap:14px; align-items:stretch;
  transition:transform .5s cubic-bezier(.16,1,.3,1); will-change:transform;
  padding:4px 2px 8px;
}
.tl-card {
  flex-shrink:0;
  background:rgba(255,255,255,.033);
  border:1px solid rgba(255,255,255,.08);
  border-top:2px solid transparent;
  border-radius:14px; padding:26px 22px 24px;
  display:flex; flex-direction:column; gap:0;
  transition:border-color .3s, border-top-color .3s, box-shadow .3s, background .3s, transform .25s;
  min-height:260px; position:relative; overflow:hidden;
}
/* Active card gets the blue top accent + matching glow */
.tl-card.active {
  border-top-color:var(--blue,#0078c8);
  background:rgba(0,80,180,.1);
  border-color:rgba(0,120,200,.28);
  box-shadow:
    0 0 0 1px rgba(0,120,200,.12),
    0 -3px 20px rgba(0,120,200,.2),
    0 10px 32px rgba(0,0,0,.3);
}
.tl-card.active::before {
  content:''; position:absolute; top:0; left:0; right:0; height:56px;
  background:linear-gradient(180deg, rgba(0,120,200,.09) 0%, transparent 100%);
  pointer-events:none;
}
/* Inactive hover */
.tl-card:not(.active):hover {
  background:rgba(0,60,140,.07);
  border-color:rgba(0,120,200,.18);
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  transform:translateY(-3px);
  cursor:pointer;
}

.tl-card-year {
  font-size:10.5px; font-weight:800; color:rgba(0,160,255,.65);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px;
}
.tl-card.active .tl-card-year { color:rgba(0,180,255,.9); }
.tl-card-icon-wrap {
  width:44px; height:44px; border-radius:11px;
  background:rgba(0,100,200,.12); border:1px solid rgba(0,120,200,.2);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  margin-bottom:16px; flex-shrink:0; transition:background .3s;
}
.tl-card.active .tl-card-icon-wrap { background:rgba(0,120,200,.22); border-color:rgba(0,140,220,.4); }
.tl-card-icon-wrap img { width:26px; height:26px; object-fit:contain; filter:brightness(0) invert(1); }
.tl-card-title { font-size:14.5px; font-weight:800; color:#fff; margin-bottom:10px; letter-spacing:-.01em; line-height:1.25; }
.tl-card-divider { height:1px; background:rgba(255,255,255,.07); margin-bottom:12px; }
.tl-card-text  { font-size:12.5px; color:rgba(255,255,255,.45); line-height:1.72; flex:1; }
.tl-card.active .tl-card-text { color:rgba(255,255,255,.58); }

/* ── Nav ── */
.timeline-nav {
  display:flex; gap:8px; position:relative; z-index:1;
  align-items:center; margin-top:28px;
}
.timeline-nav-spacer { flex:1; }
.tl-nav-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.65); font-size:1.15rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
  font-family:var(--font); line-height:1;
}
.tl-nav-btn:hover { background:rgba(0,120,200,.2); border-color:rgba(0,120,200,.45); color:#fff; transform:scale(1.08); }
.tl-nav-btn:disabled { opacity:.25; cursor:not-allowed; transform:none; }
.tl-nav-dots { display:flex; gap:6px; align-items:center; }
.tl-nav-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.18); transition:background .25s, width .25s;
  cursor:pointer; border:none; padding:0; flex-shrink:0;
}
.tl-nav-dot.active { background:var(--blue,#0078c8); width:20px; border-radius:3px; box-shadow:0 0 8px rgba(0,120,200,.45); }

@media(max-width:900px) { .timeline-section { padding:64px 0 56px; } }
@media(max-width:900px)  { .timeline-section { padding:64px 0 56px; } }


/* ════════════════════════════════════════════════════════════════
   DARK NEWSLETTER BANNER  (v2 — blue CI)
════════════════════════════════════════════════════════════════ */
.nl-banner {
  background:#060f1e; padding:80px 0; position:relative; overflow:hidden;
}
/* Blue glow — left side only, matching screenshot */
.nl-banner::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 5% 50%, rgba(0,90,200,.25) 0%, transparent 60%);
}
/* Subtle bottom border */
.nl-banner::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,120,200,.2),transparent);
}
.nl-banner-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.nl-banner .gw-h2 { color:#fff !important; }
.nl-banner .gw-h2 em { color:var(--blue-brand,#5ab0f0) !important; }
.nl-banner-right { display:flex; flex-direction:column; gap:24px; }
.nl-banner-desc { font-size:14.5px; color:rgba(255,255,255,.5); line-height:1.75; max-width:400px; }
/* Pill button matching screenshot — outlined, rounded, with circle arrow */
.btn-nl-pill {
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 14px 12px 24px; border-radius:100px;
  border:1.5px solid rgba(255,255,255,.28); background:transparent;
  font-family:var(--font); font-size:14px; font-weight:600;
  color:#fff; cursor:pointer; text-decoration:none; align-self:flex-start;
  transition:border-color .2s, background .2s;
}
.btn-nl-pill:hover { background:rgba(0,100,200,.15); border-color:rgba(0,140,255,.55); }
.btn-nl-pill-arrow {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  transition:border-color .2s, background .2s;
}
.btn-nl-pill:hover .btn-nl-pill-arrow { border-color:rgba(0,160,255,.6); background:rgba(0,120,200,.2); }

@media(max-width:900px) {
  .nl-banner-inner { grid-template-columns:1fr; gap:32px; }
  .nl-banner { padding:56px 0; }
}


/* ════════════════════════════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════════════════════════════ */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center; z-index:9999; padding:2rem; cursor:zoom-out; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:85vh; border-radius:var(--r); box-shadow:0 20px 80px rgba(0,0,0,.5); cursor:default; }
.lb-close { position:absolute; top:20px; right:20px; width:44px; height:44px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; cursor:pointer; transition:background .2s; }
.lb-close:hover { background:rgba(255,255,255,.2); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; cursor:pointer; transition:background .2s; }
.lb-nav:hover { background:rgba(255,255,255,.2); }
.lb-nav.lb-prev{left:20px} .lb-nav.lb-next{right:20px}
.lb-counter { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.5); font-size:13px; font-weight:600; }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .steps-grid{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .steps-grid::before,.steps-grid::after{display:none}
  .feature-row,.feature-row.reverse{grid-template-columns:1fr}
  .feature-row.reverse .feature-img,.feature-row.reverse .feature-text{order:unset}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item.featured{grid-row:span 1}
  .carousel-slide{flex:0 0 50%}
  .tech-grid{grid-template-columns:1fr}
  .migration-card{grid-template-columns:1fr}
  .migration-card-light{grid-template-columns:1fr}
  .migration-right{min-height:360px}
  .newsletter-card{grid-template-columns:1fr}
  .glass-grid{grid-template-columns:1fr}
  .gc-wide{grid-column:span 1;grid-template-columns:1fr}
  .glass-pricing{grid-template-columns:1fr}
  .pricing-scroll{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .integ-grid{grid-template-columns:repeat(3,1fr)}
  .integ-grid-3{grid-template-columns:repeat(2,1fr)}
  .ba-grid{grid-template-columns:1fr;gap:14px}
  .ba-vs{padding:8px 0}
}
@media(max-width:900px) {
  .faq-layout{grid-template-columns:1fr}
  .faq-sidebar{position:static}
  .process-panel{grid-template-columns:1fr}
  .uptime-grid{grid-template-columns:1fr}
  .mig-features{grid-template-columns:1fr}
}
@media(max-width:640px) {
  .steps-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:180px}
  .carousel-slide{flex:0 0 100%}
  .nl-form{flex-direction:column}
  .migration-left{padding:32px 24px}
  .pricing-scroll{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .integ-grid{grid-template-columns:repeat(2,1fr)}
  .integ-grid-3{grid-template-columns:1fr}
}
@media(max-width:900px) {
  .faq-layout{grid-template-columns:1fr}
  .faq-sidebar{position:static}
  .process-panel{grid-template-columns:1fr}
  .uptime-grid{grid-template-columns:1fr}
  .mig-features{grid-template-columns:1fr}
}
@media(max-width:640px) {
  .steps-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:180px}
  .carousel-slide{flex:0 0 100%}
  .nl-form{flex-direction:column}
  .migration-left{padding:32px 24px}
}

/* ================================================================
   UPTIME WIDGET — Dark Mode Ergänzungen
   Gilt für body.dark (Seite) und .uw-dark (widget_dark=true)
================================================================ */

/* Basis-Variablen für .uw-dark Wrapper */
.uw-dark {
  --text:        #e2ecf7;
  --muted:       #5a7290;
  --border:      rgba(255,255,255,.1);
  --green:       #10b981;
  --amber:       #f59e0b;
  --red:         #ef4444;
  --bg-card:     rgba(11,20,38,.9);
  --bg-soft:     rgba(255,255,255,.04);
  --bg-danger:   rgba(127,29,29,.25);
  --danger-border: rgba(226,75,74,.3);
  --danger-dark:   #fca5a5;
  --danger-text:   #fecaca;
  color: #e2ecf7;
}

/* Karten */
body.dark .uptime-card,
.uw-dark .uptime-card {
  background: rgba(11,20,38,.85) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body.dark .uptime-card:hover,
.uw-dark .uptime-card:hover {
  border-color: rgba(0,120,200,.3) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
}

/* Status-Bar */
body.dark .uptime-status,
.uw-dark .uptime-status {
  background: rgba(11,20,38,.85) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

/* Text-Elemente in Karte */
body.dark .uptime-svc-name,
.uw-dark .uptime-svc-name { color: #e2ecf7 !important; }
body.dark .uptime-pct,
.uw-dark .uptime-pct { color: var(--green, #10b981) !important; }
body.dark .up-bar-label,
.uw-dark .up-bar-label { color: #5a7290 !important; }

/* Metriken-Kacheln (Inline bg:#f8fafc überschreiben) */
body.dark .uw-metric,
.uw-dark .uw-metric {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
}
body.dark .uw-metric-val,
.uw-dark .uw-metric-val { color: #e2ecf7 !important; }
body.dark .uw-metric-lbl,
.uw-dark .uw-metric-lbl { color: #5a7290 !important; }

/* Status-Zeile in Karte */
body.dark .uw-status-row,
.uw-dark .uw-status-row {
  background: rgba(255,255,255,.03) !important;
}
body.dark .uw-status-row-compact,
.uw-dark .uw-status-row-compact { background: transparent !important; }

/* Beschreibungstext */
body.dark .uw-description,
.uw-dark .uw-description {
  color: #5a7290 !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* Wartung laufend */
body.dark .uw-maint-active,
.uw-dark .uw-maint-active {
  background: rgba(11,20,38,.9) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
/* Wartung geplant */
body.dark .uw-maint-planned,
.uw-dark .uw-maint-planned {
  background: rgba(11,20,38,.9) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body.dark .uw-maint-title,
.uw-dark .uw-maint-title { color: #e2ecf7 !important; }
body.dark .uw-maint-reason,
.uw-dark .uw-maint-reason { color: #5a7290 !important; }
body.dark .uw-maint-tag,
.uw-dark .uw-maint-tag {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #94aec8 !important;
}

/* Incidents */
body.dark .uw-incidents,
.uw-dark .uw-incidents {
  background: rgba(127,29,29,.3) !important;
  border-color: rgba(252,165,165,.2) !important;
}

/* Statusbar Trennlinien */
body.dark .uw-stat-divider,
.uw-dark .uw-stat-divider { background: rgba(255,255,255,.08) !important; }
body.dark .uw-stat-val,
.uw-dark .uw-stat-val { color: #e2ecf7 !important; }
body.dark .uw-stat-lbl,
.uw-dark .uw-stat-lbl { color: #5a7290 !important; }

/* Status-Pill (Laufend-Dot) */
body.dark .status-pill,
.uw-dark .status-pill {
  background: rgba(16,185,129,.12) !important;
  border-color: rgba(16,185,129,.25) !important;
  color: #6ee7b7 !important;
}
/* Wartung läuft – Pill im Dark Mode amber */
body.dark .status-pill[style*="#FAEEDA"],
body.dark .status-pill[style*="#854F0B"],
.uw-dark .status-pill[style*="#FAEEDA"],
.uw-dark .status-pill[style*="#854F0B"] {
  background: rgba(186,119,23,.18) !important;
  border-color: rgba(186,119,23,.35) !important;
  color: #FAC775 !important;
}
/* Störung – Pill im Dark Mode rot */
body.dark .status-pill[style*="#fee2e2"],
body.dark .status-pill[style*="#991b1b"],
.uw-dark .status-pill[style*="#fee2e2"],
.uw-dark .status-pill[style*="#991b1b"] {
  background: rgba(162,45,45,.25) !important;
  border-color: rgba(226,75,74,.3) !important;
  color: #fca5a5 !important;
}

/* Wartungs-Badge im Statusbalken */
body.dark .uw-maint-badge,
.uw-dark .uw-maint-badge {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e2ecf7 !important;
}


/* ================================================================
   UPTIME WIDGET — Glass Dark Mode (passend zu .glass-card)
================================================================ */

/* Basis-Variablen für .uw-dark Wrapper */
.uw-dark {
  --text:   #e2ecf7;
  --muted:  #5a7290;
  --border: rgba(255,255,255,.1);
  --green:  #10b981;
  --amber:  #f59e0b;
  --red:    #ef4444;
  color: #e2ecf7;
}

/* Karten — Glass Style wie .glass-card */
body.dark .uptime-card,
.uw-dark .uptime-card {
  background: rgba(11,20,38,.7) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body.dark .uptime-card::before,
.uw-dark .uptime-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 100%);
  border-radius: var(--rl) var(--rl) 0 0;
  pointer-events: none;
}
body.dark .uptime-card:hover,
.uw-dark .uptime-card:hover {
  border-color: rgba(16,185,129,.3) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.4) !important;
  transform: none;
}

/* Status-Bar — Glass */
body.dark .uptime-status,
.uw-dark .uptime-status {
  background: rgba(11,20,38,.7) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

/* Text */
body.dark .uptime-svc-name, .uw-dark .uptime-svc-name { color: #e2ecf7 !important; }
body.dark .up-bar-label, .uw-dark .up-bar-label { color: #5a7290 !important; }

/* Metriken-Kacheln */
body.dark .uw-metric, .uw-dark .uw-metric {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
}
body.dark .uw-metric-val, .uw-dark .uw-metric-val { color: #e2ecf7 !important; }
body.dark .uw-metric-lbl, .uw-dark .uw-metric-lbl { color: #5a7290 !important; }

/* Status-Zeile in Karte */
body.dark .uw-status-row, .uw-dark .uw-status-row {
  background: rgba(255,255,255,.03) !important;
  border-radius: 6px;
}
body.dark .uw-status-row-compact, .uw-dark .uw-status-row-compact {
  background: transparent !important;
}

/* Beschreibung */
body.dark .uw-description, .uw-dark .uw-description {
  color: #5a7290 !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* Wartung laufend */
body.dark .uw-maint-active, .uw-dark .uw-maint-active {
  background: rgba(11,20,38,.85) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
/* Wartung geplant */
body.dark .uw-maint-planned, .uw-dark .uw-maint-planned {
  background: rgba(11,20,38,.85) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
body.dark .uw-maint-title, .uw-dark .uw-maint-title { color: #e2ecf7 !important; }
body.dark .uw-maint-reason, .uw-dark .uw-maint-reason { color: #5a7290 !important; }
body.dark .uw-maint-tag, .uw-dark .uw-maint-tag {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #94aec8 !important;
}

/* Incidents */
body.dark .uw-incidents, .uw-dark .uw-incidents {
  background: rgba(127,29,29,.3) !important;
  border-color: rgba(252,165,165,.2) !important;
}

/* Statusbar Trennlinien + Werte */
body.dark .uw-stat-divider, .uw-dark .uw-stat-divider {
  background: rgba(255,255,255,.08) !important;
}
body.dark .uw-stat-val, .uw-dark .uw-stat-val { color: #e2ecf7 !important; }
body.dark .uw-stat-lbl, .uw-dark .uw-stat-lbl { color: #5a7290 !important; }

/* Status-Pill */
body.dark .status-pill, .uw-dark .status-pill {
  background: rgba(16,185,129,.12) !important;
  border-color: rgba(16,185,129,.25) !important;
  color: #6ee7b7 !important;
}
body.dark .status-pill[style*="#FAEEDA"],
body.dark .status-pill[style*="#854F0B"],
.uw-dark .status-pill[style*="#FAEEDA"],
.uw-dark .status-pill[style*="#854F0B"] {
  background: rgba(186,119,23,.18) !important;
  border-color: rgba(186,119,23,.35) !important;
  color: #FAC775 !important;
}
body.dark .status-pill[style*="#fee2e2"],
body.dark .status-pill[style*="#991b1b"],
.uw-dark .status-pill[style*="#fee2e2"],
.uw-dark .status-pill[style*="#991b1b"] {
  background: rgba(162,45,45,.25) !important;
  border-color: rgba(226,75,74,.3) !important;
  color: #fca5a5 !important;
}

/* Wartungs-Badge */
body.dark .uw-maint-badge, .uw-dark .uw-maint-badge {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e2ecf7 !important;
}


/* ── Uptime Widget Tabs ── */
.uw-tab {
  padding: 7px 16px; border-radius: 100px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--border, #e2e8f0);
  background: transparent; color: var(--muted, #64748b);
  cursor: pointer; transition: all .2s; font-family: inherit;
}
.uw-tab:hover {
  border-color: rgba(0,120,200,.3); color: var(--text, #1e293b);
}
.uw-tab-active {
  background: var(--blue, #0078c8); border-color: var(--blue, #0078c8);
  color: #fff !important;
}
body.dark .uw-tab, .uw-dark .uw-tab {
  border-color: rgba(255,255,255,.12); color: #5a7290;
}
body.dark .uw-tab:hover, .uw-dark .uw-tab:hover {
  border-color: rgba(0,120,200,.4); color: #e2ecf7;
}
body.dark .uw-tab-active, .uw-dark .uw-tab-active {
  background: rgba(0,120,200,.8); border-color: rgba(0,120,200,.8); color: #fff !important;
}


/* ── Uptime Widget: Kategorie-Tabs ── */
.uw-tab {
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  color: var(--muted, #64748b); background: transparent; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color .2s, border-color .2s;
  font-family: inherit; border-radius: 0;
}
.uw-tab:hover { color: var(--text, #1e293b); }
.uw-tab.uw-tab-active { color: var(--text, #1e293b) !important; border-bottom-color: var(--green, #10b981) !important; font-weight: 600; background: transparent !important; }
body.dark .uw-tab { color: #5a7290; }
body.dark .uw-tab:hover { color: #94aec8; }
body.dark .uw-tab.uw-tab-active { color: #e2ecf7 !important; background: transparent !important; }
.uw-dark .uw-tab { color: #5a7290; }
.uw-dark .uw-tab:hover { color: #94aec8; }
.uw-dark .uw-tab.uw-tab-active { color: #e2ecf7 !important; background: transparent !important; }

/* ── Block-Header ── */
.uw-cat-block { margin-bottom: 16px; }
.uw-cat-block-head { }
body.dark .uw-cat-block,
.uw-dark .uw-cat-block {
  border-color: rgba(255,255,255,.08) !important;
}
body.dark .uw-cat-block-head,
.uw-dark .uw-cat-block-head {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* ── Uptime Statusbar: Mobile ── */
@media (max-width: 640px) {
  .uptime-status { padding: 12px 16px; gap: 8px; }
  .uptime-status .btn-outline { display: none; }
}

/* ── Dark Mode: neue Maintenance/Incident Inline-Styles überschreiben ── */
body.dark .uw-maint-active,
body.dark .uw-maint-planned,
body.dark .uw-incidents,
.uw-dark .uw-maint-active,
.uw-dark .uw-maint-planned,
.uw-dark .uw-incidents {
  background: rgba(11,20,38,.85) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: none !important;
}
body.dark .uw-incidents,
.uw-dark .uw-incidents {
  border-color: rgba(226,75,74,.3) !important;
}
/* Trennlinien innerhalb der Blöcke */
body.dark .uw-maint-active > div,
body.dark .uw-maint-planned > div,
body.dark .uw-incidents > div,
.uw-dark .uw-maint-active > div,
.uw-dark .uw-maint-planned > div,
.uw-dark .uw-incidents > div {
  border-color: rgba(255,255,255,.07) !important;
}
/* Badge-Hintergründe im Dark Mode */
body.dark .uw-maint-active span[style*="#FAEEDA"],
body.dark .uw-maint-planned span[style*="#E6F1FB"],
body.dark .uw-maint-planned span[style*="#EAF3DE"],
body.dark .uw-incidents span[style*="#FCEBEB"],
.uw-dark span[style*="#FAEEDA"],
.uw-dark span[style*="#E6F1FB"],
.uw-dark span[style*="#EAF3DE"],
.uw-dark span[style*="#FCEBEB"] {
  opacity: .85 !important;
}
/* Inline-Texte */
body.dark .uw-maint-active span[style*="color:var(--text"],
body.dark .uw-maint-planned span[style*="color:var(--text"],
body.dark .uw-incidents span[style*="color:var(--text"],
.uw-dark span[style*="color:var(--text"] {
  color: #c8daf0 !important;
}
/* Vergangene Wartungen Header-Zeile */
body.dark .uw-maint-planned > div[style*="bg-soft"],
.uw-dark .uw-maint-planned > div[style*="bg-soft"] {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.07) !important;
}