.gl-mark { border-radius: 7px; }
.gl-hero { background: radial-gradient(900px 420px at 80% 0%, rgba(59,130,224,0.38), transparent 60%), radial-gradient(600px 360px at 0% 100%, rgba(47,166,106,0.16), transparent 60%), #16202b; color: #fff; padding: 5rem 0 5.5rem; overflow: hidden; }
.gl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.gl-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 800; max-width: 13ch; }
.gl-hero h1 span { color: #f2c230; }
.gl-was { font-size: 0.92rem; color: rgba(255,255,255,0.66); margin-top: 0.9rem; }
.gl-hero .lede { color: rgba(255,255,255,0.86); }
.gl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 2rem; }
.gl-meta { font-size: 0.92rem; color: rgba(255,255,255,0.8); }
.gl-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.4rem; border-radius: 10px; background: #fff; color: #16202b; font: 600 1.05rem/1 var(--body);
  text-decoration: none; transition: transform 120ms ease; white-space: nowrap; }
.gl-btn:hover { transform: translateY(-1px); }
.gl-btn::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v12M6 11l6 6 6-6M5 21h14"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v12M6 11l6 6 6-6M5 21h14"/></svg>') center / contain no-repeat; }
.gl-btn.light { background: #2f6fc6; color: #fff; }
.gl-btn.off { opacity: 0.6; pointer-events: none; }
.gl-btn.off::before { display: none; }

.gl-art { margin: 0; display: grid; justify-items: center; gap: 0.9rem; }
.gl-lead { width: min(300px, 80%); background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.gl-screen { background: #f4f7ff; border-radius: 12px; padding: 14px 16px; color: #16202b; font-size: 0.95rem; }
.gl-screen b { font-family: var(--display); font-size: 1.1rem; }
.gl-screen ol { margin: 0.5rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.3rem; }
.gl-screen li.now { font-weight: 700; color: #2f6fc6; }
.gl-screen li.now::after { content: "  ◀ now"; font-size: 0.75rem; }
.gl-waves { display: flex; gap: 6px; }
.gl-waves i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.85); animation: pulse 1.4s ease-in-out infinite; }
.gl-waves i:nth-child(2) { animation-delay: 0.2s; } .gl-waves i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.7); } }
.gl-devices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(380px, 100%); }
.gl-devices span { aspect-ratio: 3 / 4; border-radius: 10px; background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.8);
  display: grid; place-items: end center; padding-bottom: 8px; font-size: 0.78rem; font-weight: 600; }

.gl-features { padding: 5rem 0; }
.gl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gl-tile { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.6rem; }
.gl-tile h3 { font-size: 1.5rem; font-weight: 700; }
.gl-tile p { color: var(--ink-2); margin-top: 0.5rem; }

.gl-download { padding: 0 0 5rem; }
.gl-dl-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.8rem; }
.gl-dl-box img { border-radius: 22px; }
.gl-dl-box h2 { font-size: 2rem; font-weight: 800; }
.gl-dl-box p { color: var(--ink-2); margin-top: 0.4rem; }
.faint { color: var(--ink-3) !important; font-size: 0.9rem; }

@media (max-width: 860px) {
  .gl-hero-grid, .gl-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-dl-box { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .gl-hero { padding: 3.5rem 0 4rem; }
}
@media (max-width: 560px) { .top nav a:not(:last-child) { display: none; } }
@media (prefers-reduced-motion: reduce) { .gl-waves i { animation: none; } .gl-btn { transition: none; } }