/* ═══════════════════════════════════════════════════════════════
   GLASS EXPERIMENT — AVTLLC LIQUID GLASS DESIGN SYSTEM
   Overlays on top of existing CSS — no content changes
═══════════════════════════════════════════════════════════════ */

/* ── GLASS DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --g-bg:          rgba(255,255,255,0.055);
  --g-bg-mid:      rgba(255,255,255,0.09);
  --g-bg-strong:   rgba(255,255,255,0.13);
  --g-border:      rgba(255,255,255,0.11);
  --g-border-mid:  rgba(255,255,255,0.18);
  --g-border-hi:   rgba(255,255,255,0.28);
  --g-blur:        blur(24px) saturate(180%);
  --g-blur-strong: blur(48px) saturate(220%);
  --g-blur-hero:   blur(60px) saturate(240%);
  --g-radius:      16px;
  --g-radius-lg:   24px;
  --g-radius-pill: 999px;
  --g-shadow:      0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
  --g-shadow-lg:   0 24px 80px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
  --g-shadow-glow: 0 0 40px rgba(30,136,229,0.15), 0 8px 32px rgba(0,0,0,0.4);
  --g-highlight:   linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  --g-shimmer:     linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  --accent:        #2979FF;
  --accent-glow:   rgba(41,121,255,0.35);
}

/* ── BODY & DARK BASE ────────────────────────────────────────── */
html, body {
  background: #04070F !important;
  color: rgba(255,255,255,0.88) !important;
}

/* Force all white/off-white sections dark */
#about,
.partners-sec,
.about-text-col,
.gm-right,
.gm-input {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
}
.about-text-col h2 { color: #fff !important; }
.tl-body { color: rgba(255,255,255,0.55) !important; }
.tl-body strong { color: rgba(255,255,255,0.85) !important; }
.tl-row { border-color: rgba(255,255,255,0.06) !important; }

/* ── ANIMATED BACKGROUND ORBS (injected via glass.js) ──────── */
#glass-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.g-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation: orbFloat var(--orb-dur, 18s) var(--orb-delay, 0s) ease-in-out infinite;
}
.g-orb-1 { width:700px;height:700px;background:radial-gradient(circle,#1a3a8f,transparent 70%);top:-15%;left:-10%;--orb-dur:22s;--orb-delay:0s; }
.g-orb-2 { width:600px;height:600px;background:radial-gradient(circle,#4f1d96,transparent 70%);top:30%;right:-10%;--orb-dur:18s;--orb-delay:-6s; }
.g-orb-3 { width:500px;height:500px;background:radial-gradient(circle,#0e4d7a,transparent 70%);bottom:-10%;left:25%;--orb-dur:26s;--orb-delay:-12s; }
.g-orb-4 { width:350px;height:350px;background:radial-gradient(circle,#2979ff,transparent 70%);top:60%;left:60%;opacity:0;--orb-dur:20s;--orb-delay:-4s; }
.g-orb-5 { width:400px;height:400px;background:radial-gradient(circle,#064e3b,transparent 70%);bottom:20%;right:25%;--orb-dur:24s;--orb-delay:-9s; }
.g-orb.animate { animation-play-state: running; }

@keyframes orbFloat {
  0%   { opacity:0.28; transform:translate(0,0) scale(1); }
  25%  { opacity:0.38; transform:translate(40px,-30px) scale(1.06); }
  50%  { opacity:0.30; transform:translate(-20px,50px) scale(0.94); }
  75%  { opacity:0.35; transform:translate(30px,20px) scale(1.03); }
  100% { opacity:0.28; transform:translate(0,0) scale(1); }
}

/* Everything sits above orbs (z-index:0).
   Note: :not(#id) bumps specificity to (1,0,1) — we must explicitly
   restore nav and all fixed/floating elements above this. */
body > *:not(#glass-orbs) { position: relative; z-index: 1; }

/* ── NAVIGATION — LIQUID GLASS BAR ──────────────────────────── */
/* Use #nav[id] or add extra class to beat (1,0,1) specificity    */
#nav,
nav#nav {
  position: fixed !important;          /* keep fixed regardless    */
  z-index: 9990 !important;            /* way above section z-index:1 */
  background: rgba(4,7,15,0.55) !important;
  backdrop-filter: var(--g-blur-strong) !important;
  -webkit-backdrop-filter: var(--g-blur-strong) !important;
  border-bottom: 1px solid var(--g-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.3) !important;
  /* Ensure clicks reach nav links */
  pointer-events: auto !important;
}

/* Nav links must also receive pointer events */
#nav a, #nav button, #nav [class*="link"],
#nav .nav-dd, #nav .nav-links,
#nav .btn-nav-quote {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 9991 !important;
}

/* Nav logo — JPEG has no transparency; background is #060F1E dark navy.
   The nav glass (backdrop-filter) can appear lighter than the JPEG bg,
   making the rectangle visible.
   Fix: pad the img with its own background colour so edges merge,
   then screen-blend the whole element so dark-on-dark = invisible seam. */
.nav-logo {
  background: transparent !important;
}
.nav-logo img {
  border-radius: 10px !important;
  /* Tight border matching JPEG background → seamless with dark nav */
  box-shadow: 0 0 0 4px #060F1E !important;
  /* Screen blend: dark(#060F1E) screened against dark nav ≈ nav colour */
  mix-blend-mode: screen !important;
  filter: brightness(1.25) contrast(1.05) !important;
  background: #060F1E !important;   /* fills the 4px padding gap */
  padding: 0 !important;
  outline: none !important;
}

/* Nav dropdown — above nav bar itself */
.nav-dd-menu,
.nav-dropdown-menu {
  background: rgba(4,7,18,0.92) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border-mid) !important;
  border-radius: 12px !important;
  box-shadow: var(--g-shadow-lg) !important;
  z-index: 9995 !important;
  position: absolute !important;
}

/* ── HERO SECTION ────────────────────────────────────────────── */
#hero, .hero-section, [id*="hero"], section:first-of-type {
  background: transparent !important;
}

/* Glass widgets injected in hero by glass.js */
.g-widget {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--g-bg-mid);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border-mid);
  border-radius: var(--g-radius-pill);
  box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.g-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: var(--g-highlight);
  border-radius: inherit;
  pointer-events: none;
}
.g-widget:hover {
  background: var(--g-bg-strong);
  box-shadow: var(--g-shadow-glow);
  transform: translateY(-2px);
}
.g-widget-num {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.g-widget-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1;
}
.g-widget-icon {
  font-size: 18px;
  line-height: 1;
}

/* Widget strip */
#g-widget-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

/* ── ALL SECTION BACKGROUNDS → DARK ─────────────────────────── */
section,
.svc-section,
.dest-section,
.grades-section,
.brochure-section,
.partners-sec,
#about,
#contact,
[class*="section"],
[id*="section"] {
  background: transparent !important;
}

/* ── GRADE CARDS — LIQUID GLASS ─────────────────────────────── */
.g-card,
.grade-card,
.spec-card,
[class*="g-card"],
[class*="grade-card"] {
  background: var(--g-bg) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease !important;
}
.g-card::before,
.grade-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: var(--g-highlight);
  border-radius: var(--g-radius) var(--g-radius) 0 0;
  pointer-events: none;
  z-index: 0;
}
.g-card:hover,
.grade-card:hover {
  background: var(--g-bg-mid) !important;
  border-color: var(--g-border-mid) !important;
  box-shadow: var(--g-shadow-glow) !important;
  transform: translateY(-4px) !important;
}
.g-card > *,
.grade-card > * { position: relative; z-index: 1; }

/* Color stripe on grade cards */
.g-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--stripe-color, var(--accent)), transparent);
  z-index: 2;
  border-radius: var(--g-radius) var(--g-radius) 0 0;
}

/* ── STAT BARS ───────────────────────────────────────────────── */
.stat-bar, .stats-bar, [class*="stat-bar"], [class*="stats-bar"] {
  background: var(--g-bg) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border-top: 1px solid var(--g-border) !important;
  border-bottom: 1px solid var(--g-border) !important;
}

/* Individual stat cells */
.stat-cell, .stat-item, [class*="stat-cell"] {
  border-right: 1px solid var(--g-border) !important;
}

/* ── SERVICE STEPS — dark navy glass (keep original colours) ─── */
.svc-step,
[class*="svc-step"],
[class*="service-card"],
[class*="step-card"] {
  background: rgba(6,15,30,0.75) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Subtle specular highlight at top */
.svc-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
  z-index: 1;
}
.svc-step:hover {
  /* Subtle lift — not heavy blue (icon/step num are already blue) */
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transform: translateY(-3px) !important;
}
/* Keep the original blue accent underline on hover */
.svc-step::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, #2979FF, #64B5F6) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: 0.4s ease !important;
}
.svc-step:hover::after {
  transform: scaleX(1) !important;
}

/* ── WHY / FEATURE CARDS ─────────────────────────────────────── */
.why-card, .feature-card, .info-card,
[class*="why-card"], [class*="feat-card"] {
  background: var(--g-bg) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-shadow) !important;
}

/* ── DESTINATION / NETWORK CARDS ─────────────────────────────── */
.dest-card, .net-card, [class*="dest-card"], [class*="port-card"] {
  background: var(--g-bg) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-shadow) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.dest-card:hover, .net-card:hover {
  background: var(--g-bg-mid) !important;
  border-color: var(--g-border-mid) !important;
  box-shadow: var(--g-shadow-glow) !important;
  transform: translateY(-3px) !important;
}

/* ── ABOUT SECTION — GLASS NARRATIVE PANELS ──────────────────── */
.about-img-col {
  background: var(--g-bg-mid) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
}
.mv-cell.mission {
  background: var(--g-bg-mid) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) 0 0 var(--g-radius) !important;
}
.mv-cell.vision {
  background: rgba(41,121,255,0.15) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid rgba(41,121,255,0.3) !important;
  border-radius: 0 var(--g-radius) var(--g-radius) 0 !important;
}

/* ── BROCHURE SECTION — animated colourful glass ────────────── */
.brochure-section {
  background: linear-gradient(135deg,
    #06121F 0%,
    #0B2E6E 40%,
    #0D3B8A 65%,
    #1565C0 100%) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-top: 1px solid rgba(41,121,255,0.35) !important;
  border-bottom: 1px solid rgba(41,121,255,0.35) !important;
  box-shadow: 0 -20px 80px rgba(41,121,255,0.12), 0 20px 80px rgba(41,121,255,0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Animated shimmer sweep across brochure */
.brochure-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(100,181,246,0.07) 50%,
    rgba(41,121,255,0.04) 55%,
    transparent 70%) !important;
  animation: brochureShimmer 6s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
@keyframes brochureShimmer {
  0%   { left: -80%; }
  100% { left: 140%; }
}
/* Glowing orb top-right */
.brochure-section::after {
  content: '' !important;
  position: absolute !important;
  top: -80px !important; right: -80px !important;
  width: 320px !important; height: 320px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(41,121,255,0.18), transparent 70%) !important;
  animation: brochureGlow 4s ease-in-out infinite alternate !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
@keyframes brochureGlow {
  0%   { transform: scale(1) translate(0,0); opacity: 0.7; }
  100% { transform: scale(1.3) translate(-20px,20px); opacity: 1; }
}
/* Brochure inner above pseudo-elements */
.brochure-inner, .brochure-left, .brochure-cta-col { position: relative !important; z-index: 1 !important; }
/* Colourful brochure badge */
.brochure-badge {
  background: linear-gradient(90deg, #64B5F6, #40C4FF, #80DEEA) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 4px !important;
}
.brochure-badge::before { background: linear-gradient(90deg, #64B5F6, #40C4FF) !important; }
/* Brochure heading with gradient */
.brochure-h {
  background: linear-gradient(135deg, #fff 40%, #90CAF9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Download button — animated pulse glow */
.btn-dl {
  background: linear-gradient(135deg, #1565C0, #2979FF, #42A5F5) !important;
  background-size: 200% 200% !important;
  border: 1px solid rgba(100,181,246,0.5) !important;
  border-radius: 12px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 32px rgba(41,121,255,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  animation: dlGradient 4s ease infinite !important;
  letter-spacing: 0.5px !important;
}
@keyframes dlGradient {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 8px 32px rgba(41,121,255,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%       { background-position: 100% 50%; box-shadow: 0 12px 48px rgba(41,121,255,0.7), 0 0 0 1px rgba(100,181,246,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
}
.btn-dl:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 16px 56px rgba(41,121,255,0.7), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* ── CONTACT FORM — GLASS ────────────────────────────────────── */
.contact-form-wrap, .form-wrap,
[class*="contact-form"], [class*="form-wrap"] {
  background: var(--g-bg) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: var(--g-shadow-lg) !important;
  padding: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}
.contact-form-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  background: var(--g-highlight);
  border-radius: var(--g-radius-lg) var(--g-radius-lg) 0 0;
  pointer-events: none;
}

/* Form inputs — glass */
input, textarea, select,
.gm-input, [class*="fi"], [class*="form-input"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--g-border-mid) !important;
  border-radius: 10px !important;
  color: #fff !important;
  backdrop-filter: blur(8px) !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
input:focus, textarea:focus, select:focus,
.gm-input:focus {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(41,121,255,0.6) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(41,121,255,0.12) !important;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.3) !important; }
select option { background: #0d1117 !important; color: #fff !important; }

/* ── GRADE POPUP MODAL — GLASS ───────────────────────────────── */
#gradeModal {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background: rgba(0,0,0,0.6) !important;
}
.gm-card {
  background: rgba(8,12,24,0.92) !important;
  backdrop-filter: var(--g-blur-strong) !important;
  -webkit-backdrop-filter: var(--g-blur-strong) !important;
  border: 1px solid var(--g-border-mid) !important;
  border-radius: 20px !important;
  box-shadow: var(--g-shadow-lg) !important;
  overflow: hidden !important;
}
.gm-left {
  background: rgba(255,255,255,0.04) !important;
  border-right: 1px solid var(--g-border) !important;
  border-radius: 20px 0 0 20px !important;
}
.gm-right {
  background: rgba(255,255,255,0.03) !important;
  border-radius: 0 20px 20px 0 !important;
}
.gm-form-title { color: #fff !important; }
.gm-label { color: rgba(255,255,255,0.4) !important; }
.gm-close {
  background: var(--g-bg-mid) !important;
  border: 1px solid var(--g-border) !important;
  color: rgba(255,255,255,0.8) !important;
  border-radius: 50% !important;
}

/* ── BUTTONS — LIQUID GLASS ──────────────────────────────────── */
.btn-primary, .btn-cta, .btn-hero,
[class*="btn-primary"], [class*="btn-cta"] {
  background: linear-gradient(135deg, rgba(41,121,255,0.85), rgba(21,101,192,0.9)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(41,121,255,0.5) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(41,121,255,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-primary::before, .btn-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.btn-primary:hover, .btn-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(41,121,255,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* Outline/ghost buttons */
.btn-outline, .btn-ghost, .btn-wa,
[class*="btn-outline"], [class*="btn-ghost"] {
  background: var(--g-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--g-border-mid) !important;
  border-radius: 12px !important;
  box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transition: transform 0.25s ease, background 0.25s ease !important;
}
.btn-outline:hover, .btn-ghost:hover {
  background: var(--g-bg-mid) !important;
  border-color: var(--g-border-hi) !important;
  transform: translateY(-2px) !important;
}

/* Download button */
.btn-dl {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--g-border-hi) !important;
  border-radius: 12px !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), var(--g-shadow) !important;
}
.btn-dl:hover {
  background: rgba(255,255,255,0.18) !important;
  transform: translateY(-2px) !important;
}

/* Nav quote button */
.btn-nav-quote,
[class*="btn-nav-quote"] {
  background: linear-gradient(135deg, rgba(41,121,255,0.8), rgba(21,101,192,0.85)) !important;
  border: 1px solid rgba(41,121,255,0.5) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(41,121,255,0.25), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* ── PARTNER LOGOS — GLASS CHIPS ─────────────────────────────── */
.prt-logo {
  background: var(--g-bg) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease, border-color 0.3s ease !important;
}
.prt-logo:hover {
  opacity: 1 !important;
  border-color: var(--g-border-mid) !important;
}

/* ── SVG MAP SECTION — GLASS CONTAINER ──────────────────────── */
#svgMapNetwork,
.svgMap-wrapper, .svgMap-map-container,
[id*="map"], [class*="map-wrap"] {
  background: rgba(4,10,22,0.6) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius-lg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── MOBILE MENU — GLASS ─────────────────────────────────────── */
.mob-menu, #mob {
  background: rgba(4,7,18,0.92) !important;
  backdrop-filter: var(--g-blur-strong) !important;
  -webkit-backdrop-filter: var(--g-blur-strong) !important;
  border-top: 1px solid var(--g-border) !important;
}
.mob-menu a { border-color: rgba(255,255,255,0.06) !important; }
.mob-ctas .c1 {
  background: linear-gradient(135deg, rgba(41,121,255,0.85), rgba(21,101,192,0.9)) !important;
  border: 1px solid rgba(41,121,255,0.4) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.mob-ctas .c2 {
  background: var(--g-bg) !important;
  border: 1px solid var(--g-border-mid) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px) !important;
}

/* ── FOOTER — GLASS ──────────────────────────────────────────── */
footer {
  background: rgba(3,5,12,0.85) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border-top: 1px solid var(--g-border) !important;
}
.fsoc {
  background: var(--g-bg) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 50% !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}
.fsoc:hover {
  background: var(--g-bg-mid) !important;
  border-color: rgba(41,121,255,0.5) !important;
}

/* ── EYEBROW / TAG PILLS ─────────────────────────────────────── */
.eyebrow, .sec-tag-pill, .rank-badge,
[class*="eyebrow"], [class*="rank-badge"] {
  background: rgba(41,121,255,0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(41,121,255,0.25) !important;
  border-radius: var(--g-radius-pill) !important;
}

/* ── INFO BOXES ──────────────────────────────────────────────── */
.info-box, [class*="info-box"] {
  background: rgba(41,121,255,0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(41,121,255,0.2) !important;
  border-radius: var(--g-radius) !important;
}

/* ── ACCETRACK SECTION — GLASS PANEL ────────────────────────── */
.at-portal-preview,
[class*="at-portal"] {
  background: var(--g-bg-mid) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border-mid) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: var(--g-shadow-glow) !important;
}

/* ── LIQUID GLASS SHIMMER ANIMATION ─────────────────────────── */
@keyframes liquidShimmer {
  0%   { background-position: -200% center; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { background-position: 200% center; opacity: 0; }
}
.g-card:hover::after,
.svc-step:hover .g-shimmer,
.g-widget:hover::after {
  animation: liquidShimmer 1.5s ease forwards;
}

/* ── GLASS SECTION DIVIDERS ─────────────────────────────────── */
.g-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-border-mid), transparent);
  margin: 0;
  border: none;
}

/* ── GRADE CATEGORY HEADERS ─────────────────────────────────── */
.g-cat-header, [class*="cat-header"], [class*="category-header"] {
  background: var(--g-bg) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
}

/* ── SCROLLBAR — GLASS STYLE ────────────────────────────────── */
::-webkit-scrollbar { width: 6px; background: transparent; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(41,121,255,0.5); }

/* ── TEXT COLOR FIXES FOR DARK THEME ────────────────────────── */
.about-text-col p,
.about-text-col li,
[class*="sec-sub"],
[class*="sec-p"],
[class*="body-text"] {
  color: rgba(255,255,255,0.55) !important;
}
[class*="sec-h"],
[class*="sec-title"],
h1, h2, h3, h4 {
  color: #fff !important;
}

/* ── COLOURFUL SECTION EYEBROW HEADERS ──────────────────────── */
/* "SHIPPING PARTNERS", "WHY CHOOSE US", "OUR SERVICES" etc.     */
[class*="eyebrow"],
.story-eyebrow,
.hero-eyebrow,
.rank-badge-text,
[class*="sec-tag"],
.accent-text {
  background: linear-gradient(90deg, #2979FF 0%, #42A5F5 55%, #40C4FF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Keep the decorative line before eyebrow blue */
.story-eyebrow::before,
[class*="eyebrow"]::before {
  background: linear-gradient(90deg, #2979FF, #40C4FF) !important;
  -webkit-text-fill-color: initial !important;
}

/* ── SELECTION COLOUR ────────────────────────────────────────── */
::selection {
  background: rgba(41,121,255,0.35);
  color: #fff;
}

/* ── PRODUCT PANEL INFO — dark glass (was white background) ─── */
/* Original: .pp-info { background: var(--white) } = WHITE on glass = invisible */
.pp-info {
  background: rgba(4,10,24,0.88) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}
.pp-desc {
  color: rgba(255,255,255,0.6) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
/* Grade list inside product panel */
.grade-list {
  border-color: rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
}
.grade-row {
  border-bottom-color: rgba(255,255,255,0.04) !important;
}
.grade-row:hover {
  background: rgba(41,121,255,0.08) !important;
}
/* pp-info CTA link */
.pp-info a[href*="contact"],
.pp-info a[href*="quote"] {
  color: #2979FF !important;
}

/* ── SVC-STEP CHILDREN Z-INDEX (content above ::before/::after) ─ */
.svc-step > * { position: relative !important; z-index: 2 !important; }

/* ── GRADE PAGE SPECIFIC ─────────────────────────────────────── */
.page-hero {
  background: transparent !important;
}
.page-hero::before {
  background-image:
    linear-gradient(rgba(41,121,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,121,255,0.04) 1px, transparent 1px) !important;
}
.section-alt {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(4px) !important;
}

/* Spec table glass */
.spec-table th {
  background: rgba(41,121,255,0.15) !important;
  backdrop-filter: blur(8px) !important;
}
.spec-table td { border-color: rgba(255,255,255,0.06) !important; }
.spec-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02) !important;
}

/* Grade detail hero sidebar */
.grade-hero-card,
[class*="hero-card"],
[class*="spec-sidebar"] {
  background: var(--g-bg-mid) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border-mid) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: var(--g-shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}
.grade-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  background: var(--g-highlight);
  border-radius: var(--g-radius-lg) var(--g-radius-lg) 0 0;
  pointer-events: none;
}

/* ── CTA SECTION — GLASS ─────────────────────────────────────── */
.cta-section,
[class*="cta-section"] {
  background: linear-gradient(135deg, rgba(41,121,255,0.1), rgba(21,101,192,0.06)) !important;
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border: 1px solid rgba(41,121,255,0.2) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: 0 0 60px rgba(41,121,255,0.08) !important;
}

/* ── RELATED LINKS ───────────────────────────────────────────── */
.related-link, [class*="related-link"] {
  background: var(--g-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}
.related-link:hover {
  background: var(--g-bg-mid) !important;
  border-color: rgba(41,121,255,0.4) !important;
  transform: translateX(4px) !important;
}

/* ── STEP CIRCLES ────────────────────────────────────────────── */
.step-num {
  background: linear-gradient(135deg, rgba(41,121,255,0.8), rgba(21,101,192,0.9)) !important;
  border: 1px solid rgba(41,121,255,0.4) !important;
  box-shadow: 0 4px 16px rgba(41,121,255,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ── COMPARE CARDS — green/red system ───────────────────────── */
.compare-card, [class*="compare-card"] {
  backdrop-filter: var(--g-blur) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  border-radius: var(--g-radius) !important;
}
/* First card in each comparison = primary/recommended = green tint */
.compare-grid > div:first-child,
.compare-grid > .compare-card:first-child {
  background: rgba(0,200,83,0.07) !important;
  border-color: rgba(0,200,83,0.28) !important;
  box-shadow: 0 4px 20px rgba(0,200,83,0.08), inset 0 1px 0 rgba(0,200,83,0.12) !important;
}
.compare-grid > div:first-child h3 {
  color: #00E676 !important;
  -webkit-text-fill-color: #00E676 !important;
}
/* Second card = alternative = amber tint */
.compare-grid > div:last-child,
.compare-grid > .compare-card:last-child {
  background: rgba(255,167,38,0.07) !important;
  border-color: rgba(255,167,38,0.28) !important;
  box-shadow: 0 4px 20px rgba(255,167,38,0.08), inset 0 1px 0 rgba(255,167,38,0.12) !important;
}
.compare-grid > div:last-child h3 {
  color: #FFA726 !important;
  -webkit-text-fill-color: #FFA726 !important;
}
/* spec-table .good and .warn cells */
.spec-table .good {
  color: #00E676 !important;
  background: rgba(0,230,118,0.08) !important;
  border-radius: 4px;
  padding: 2px 6px;
}
.spec-table .warn {
  color: #FFA726 !important;
  background: rgba(255,167,38,0.08) !important;
  border-radius: 4px;
  padding: 2px 6px;
}

/* ── GUIDE BLOCK LINKS ───────────────────────────────────────── */
[href*="/what-is-occ"],
[href*="/waste-paper-import"],
[href*="/occ-vs-swl"],
[href*="/waste-paper-grades"],
[href*="/waste-paper-export"] {
  border-radius: 12px !important;
}

/* ── WASTE PAPER GUIDE BLOCK ─────────────────────────────────── */
.section-alt[style*="border-top"] {
  background: rgba(255,255,255,0.025) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── HOMEPAGE FULL SPEC TABLE (table.st) ────────────────────── */
section.spec-section,
.spec-section {
  background: rgba(4,7,15,0.6) !important;
}
.spec-wrap {
  background: rgba(4,10,24,0.8) !important;
  border-color: rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.spec-head {
  background: rgba(41,121,255,0.08) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
table.st thead th {
  background: rgba(41,121,255,0.12) !important;
  color: rgba(255,255,255,0.65) !important;
}
table.st tbody td { color: rgba(255,255,255,0.8) !important; }
table.st tbody td:first-child { color: #fff !important; font-weight: 700 !important; }
table.st tbody tr { border-bottom-color: rgba(255,255,255,0.04) !important; }
table.st tbody tr:hover { background: rgba(41,121,255,0.07) !important; }
.sok { background: rgba(76,175,80,0.15) !important; color: #69F0AE !important; border-color: rgba(76,175,80,0.25) !important; }

/* ── FAQ ITEMS ───────────────────────────────────────────────── */
.faq-item { border-color: rgba(255,255,255,0.07) !important; }
.faq-q { color: #fff !important; }
.faq-a { color: rgba(255,255,255,0.6) !important; }

/* ── FIX: RESTORE position:fixed FOR FLOATING ELEMENTS ─────── */
/* body > *:not(#glass-orbs) specificity (1,0,1) overrides            */
/* .class { position:fixed } (0,1,0). Add !important to restore.      */
.toast, #toast       { position: fixed !important; z-index: 9999 !important; }
.wa-float, #waBtn    { position: fixed !important; z-index: 9998 !important; }
.floating-brochure   { position: fixed !important; z-index: 9997 !important; }
#journey-float       { position: fixed !important; z-index: 9997 !important; }
#g-cursor-glow       { position: fixed !important; z-index: 0    !important; }

/* ── HIDE STAT-BOX ON GRADE / PRODUCT PAGES ─────────────────── */
/* These widgets repeat info already on the homepage stats bar */
.stat-box { display: none !important; }

/* ── CONTRAST FIXES: STAT BAR ────────────────────────────────── */
/* Original: .stat-n { color: var(--navy) } — dark on dark, invisible */
.stat-n,
.stat-n .cnt,
[class*="stat-n"] {
  color: #fff !important;
  text-shadow: 0 0 40px rgba(41,121,255,0.4) !important;
}
.stat-n sup { color: #2979FF !important; }
/* Original: .stat-l { color: var(--textlt) } — dark gray, invisible */
.stat-l, [class*="stat-l"] {
  color: rgba(255,255,255,0.55) !important;
}
/* Stat cell dividers on dark bg */
.stat-cell {
  border-right-color: rgba(255,255,255,0.08) !important;
}

/* ── CONTRAST FIXES: TICKER ──────────────────────────────────── */
/* Ticker has blue bg + white text — fine. Add glass depth. */
.ticker {
  background: rgba(41,121,255,0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(41,121,255,0.4) !important;
  border-bottom: 1px solid rgba(41,121,255,0.4) !important;
  box-shadow: 0 0 40px rgba(41,121,255,0.15) !important;
}
.ticker-item { color: rgba(255,255,255,0.92) !important; }

/* ── CONTRAST FIXES: PRODUCTS SECTION ───────────────────────── */
/* Original: .prod-scene-header h2 { color: var(--navy) } — covered by h2 rule */
.prod-scene-header p {
  color: rgba(255,255,255,0.6) !important;
}
/* Category tabs */
.prod-tab {
  color: rgba(255,255,255,0.45) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.prod-tab:hover { color: rgba(255,255,255,0.8) !important; }
.prod-tab.active { color: #2979FF !important; border-bottom-color: #2979FF !important; }
.prod-tabs { border-bottom-color: rgba(255,255,255,0.06) !important; }

/* Grade table: name and value columns */
.gn { color: rgba(255,255,255,0.9) !important; }
.gv { color: rgba(255,255,255,0.5) !important; }

/* Grade table: in-stock badge — needs legible green on dark */
.bok {
  background: rgba(76,175,80,0.15) !important;
  color: #69F0AE !important;
  border-color: rgba(76,175,80,0.3) !important;
}
/* Grade row headers */
.grade-row.gh {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── CONTRAST FIXES: WHY CHOOSE US ──────────────────────────── */
/* .why-sticky h2 { color: var(--navy) } — covered by h2 !important */
.why-title { color: #fff !important; }
.why-desc { color: rgba(255,255,255,0.6) !important; }
.why-item { border-bottom-color: rgba(255,255,255,0.06) !important; }
.why-num { color: #2979FF !important; }

/* ── CONTRAST FIXES: ABOUT / STORY ──────────────────────────── */
/* .tl-body strong { color: var(--navy) } — already in glass.css */
/* About section paragraph with inline color */
.about-text-col p { color: rgba(255,255,255,0.6) !important; }
.tl-yr { color: rgba(255,255,255,0.35) !important; }

/* ── CONTRAST FIXES: NETWORK / DESTINATION ───────────────────── */
.port-grp-title { color: rgba(255,255,255,0.9) !important; }

/* ── INLINE STYLE OVERRIDES ─────────────────────────────────── */
/* Catch all inline style="...color:var(--navy)..." and make white */
[style*="color:var(--navy)"] { color: #fff !important; }
/* Catch all inline style="...color:var(--textlt)..." */
[style*="color:var(--textlt)"] { color: rgba(255,255,255,0.6) !important; }
/* Catch inline style="...color:var(--gray)..." */
[style*="color:var(--gray)"] { color: rgba(255,255,255,0.4) !important; }

/* ── WHATSAPP — GREEN BRAND TREATMENT ───────────────────────── */
/* Hero WhatsApp button (btn-ghost linking to wa.me) */
a.btn-ghost[href*="wa.me"],
a[href*="wa.me"].btn-ghost,
a[href*="wa.me"][class*="btn"] {
  background: rgba(37,211,102,0.12) !important;
  border-color: rgba(37,211,102,0.35) !important;
  color: #25D366 !important;
  box-shadow: 0 4px 16px rgba(37,211,102,0.15), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
a.btn-ghost[href*="wa.me"]:hover,
a[href*="wa.me"].btn-ghost:hover {
  background: rgba(37,211,102,0.2) !important;
  border-color: rgba(37,211,102,0.55) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
/* .wa-float is already green in original CSS — enhance the glow */
.wa-float {
  box-shadow: 0 6px 28px rgba(37,211,102,0.5), 0 2px 8px rgba(0,0,0,0.3) !important;
}
.wa-float:hover {
  box-shadow: 0 12px 40px rgba(37,211,102,0.65) !important;
}

/* ── ACCETRACK — BLUE ACCENT TREATMENT ──────────────────────── */
/* AcceTrack portal badge/label */
[style*="color:#42A5F5"],
[style*="color:var(--light)"],
[style*="color:var(--sky)"] {
  color: #64B5F6 !important;
}

/* ── SECTION DIVIDER BORDERS ─────────────────────────────────── */
/* Any border using light colors becomes glass-appropriate */
[style*="border-top:1px solid var(--graylt)"],
[style*="border-bottom:1px solid var(--graylt)"],
[style*="border:1px solid var(--graylt)"] {
  border-color: rgba(255,255,255,0.07) !important;
}

/* ── GRADE PAGE SPECIFIC TEXT FIXES ─────────────────────────── */
/* Spec table rows */
.spec-table { color: rgba(255,255,255,0.85) !important; }
.spec-table td { color: rgba(255,255,255,0.7) !important; }
.spec-table td strong { color: #fff !important; }

/* Grade page CTA / info blocks */
.page-cta h2,
.page-cta p { color: #fff !important; }
.page-cta p { color: rgba(255,255,255,0.7) !important; }

/* Guide pages: table cells */
table td, table th {
  color: rgba(255,255,255,0.8) !important;
}
table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02) !important;
}
table thead th {
  color: #fff !important;
}

/* ── SVCSTEP STEP NUM & ICON ─────────────────────────────────── */
.svc-step-num {
  color: #2979FF !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
}
.svc-step-icon {
  background: rgba(41,121,255,0.1) !important;
  border-color: rgba(41,121,255,0.3) !important;
}
/* Services section header paragraph */
.svc-header p { color: rgba(255,255,255,0.5) !important; }

/* ── STORY H2 / SECTION H2 ───────────────────────────────────── */
.story-h2, [class*="story-h2"],
.sec-h2, [class*="sec-h2"],
.page-h1, .page-h2 {
  color: #fff !important;
}
/* Force all dark text elements in about section */
#about *, #why *, #services * {
  color: inherit;
}

/* ── DESTINATION PORT CARDS ──────────────────────────────────── */
.dest-card, .port-card, [class*="port-card"] {
  color: rgba(255,255,255,0.85) !important;
}

/* ── GRADE CARDS — ENTIRE CARD IS CLICKABLE ─────────────────── */
/* Stretches the inner <a.g-link> to cover the whole card via ::after */
.g-card {
  position: relative !important;
  cursor: pointer !important;
}
.g-card .g-link {
  position: static !important;
}
.g-card .g-link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
}
/* Ensure text/tags inside card still visible (not blocked) */
.g-card > *:not(.g-link) { position: relative !important; z-index: 1 !important; }

/* ── ANIMATED SHIP ON ACCETRACK TRACK BUTTON ─────────────────── */
/* Ship sweeps across the button from left → right on repeat */
[href*="track.avtllc"],
.at-track-btn,
a[class*="track"] {
  position: relative !important;
  overflow: hidden !important;
}
[href*="track.avtllc"]::before,
.at-track-btn::before {
  content: '🚢' !important;
  position: absolute !important;
  top: 50% !important;
  left: -50px !important;
  transform: translateY(-50%) !important;
  font-size: 16px !important;
  opacity: 0 !important;
  animation: shipSail 4s ease-in-out 2s infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
  line-height: 1 !important;
}
@keyframes shipSail {
  0%   { left: -50px; opacity: 0; }
  10%  { opacity: 0.6; }
  85%  { opacity: 0.6; }
  100% { left: calc(100% + 20px); opacity: 0; }
}
/* Text in button stays above ship */
[href*="track.avtllc"] > *,
[href*="track.avtllc"] span,
.at-track-btn > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ── MEDIA QUERIES ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .g-orb-1 { width: 400px; height: 400px; }
  .g-orb-2 { width: 350px; height: 350px; }
  .g-orb-3 { width: 300px; height: 300px; }
  .g-orb-4, .g-orb-5 { display: none; }
  #g-widget-strip { gap: 8px; }
  .g-widget { padding: 10px 14px; }
  .g-widget-num { font-size: 15px; }
  .g-widget-label { font-size: 10px; }
}