/* ===== Global Styles — Starlink eSIM ===== */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* Glassmorphism */
.glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.06); }
.glass-strong { background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); }

/* Topo pattern — SVG contour lines */
.topo-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 300q150-80 300-20t300 20' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3Cpath d='M0 340q150-60 300 0t300-10' fill='none' stroke='rgba(255,255,255,0.025)' stroke-width='1'/%3E%3Cpath d='M0 380q150-40 300 20t300-30' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3Cpath d='M0 260q150-100 300-40t300 50' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3Cpath d='M0 220q150-120 300-60t300 80' fill='none' stroke='rgba(255,255,255,0.025)' stroke-width='1'/%3E%3Cpath d='M0 420q150-20 300 40t300-50' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3Cpath d='M0 180q150-140 300-80t300 110' fill='none' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3Cpath d='M0 460q150 0 300 60t300-70' fill='none' stroke='rgba(255,255,255,0.015)' stroke-width='1'/%3E%3Cpath d='M0 140q150-160 300-100t300 140' fill='none' stroke='rgba(255,255,255,0.015)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 100% auto;
    background-repeat: repeat-y;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Fade up animation */
.fade-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }
.fade-up-4 { animation-delay: 0.4s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Input field */
.input-field { transition: border-color 0.2s, box-shadow 0.2s; }
.input-field:focus { border-color: #0066FF; box-shadow: 0 0 0 3px rgba(0,102,255,0.15); }

/* QR pulse */
.qr-pulse { animation: qrPulse 2s ease-in-out infinite; }
@keyframes qrPulse { 0%,100%{ opacity:1 } 50%{ opacity:.7 } }

/* Modal scrollbar */
.modal-scroll::-webkit-scrollbar { width: 4px; }
.modal-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }