/* Nordic Streamline — shared styles: keyframes, pseudo-states, page-level rules.
   All static layout/spacing values live inline in the markup (1:1 with design). */

html, body { margin: 0; padding: 0; background: #04060d; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

@keyframes ns-grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes ns-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes ns-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ns-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ns-ring { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(2); opacity: 0; } }
@keyframes ns-liquid { 0% { background-position: 0% 0%, 100% 20%, 60% 100%, 20% 80%; } 33% { background-position: 70% 45%, 30% 65%, 15% 25%, 85% 15%; } 66% { background-position: 25% 95%, 75% 5%, 95% 70%, 45% 55%; } 100% { background-position: 0% 0%, 100% 20%, 60% 100%, 20% 80%; } }
@keyframes ns-gloss { 0%, 58% { transform: translateX(-170%) skewX(-14deg); opacity: 0; } 62% { opacity: 1; } 80%, 100% { transform: translateX(320%) skewX(-14deg); opacity: 0; } }
@keyframes ns-chart-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ns-chart-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes ns-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes ns-shine { 0% { transform: translateX(-180%) skewX(-14deg); opacity: 0; } 8% { opacity: 1; } 32% { transform: translateX(420%) skewX(-14deg); opacity: 0; } 100% { transform: translateX(420%) skewX(-14deg); opacity: 0; } }

/* Buttons */
.ns-btn { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s, box-shadow 0.25s, border-color 0.25s, color 0.2s, filter 0.25s; }
.ns-btn:active { transform: scale(0.98); }

.ns-btn-primary { background: #f2f4f8; color: #0b1020; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.ns-btn-primary:hover { background: #ffffff; transform: scale(1.04); box-shadow: 0 10px 28px rgba(20,50,180,0.35); }
.ns-btn-primary:active { box-shadow: 0 3px 10px rgba(20,50,180,0.3); }

.ns-btn-glass { background: rgba(255,255,255,0.08); color: #e3e8f4; border: 1px solid rgba(255,255,255,0.12); text-decoration: none; font-family: 'DM Sans', sans-serif; }
.ns-btn-glass:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.24); transform: scale(1.04); }

.ns-btn-nav { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.14); text-decoration: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ns-btn-nav:hover { background: rgba(255,255,255,0.16); color: #ffffff; transform: scale(1.04); }

.ns-btn-nav-current { background: rgba(255,255,255,0.14); color: #ffffff; border: 1px solid rgba(255,255,255,0.22); text-decoration: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.ns-btn-blue { background: linear-gradient(135deg, #4f88ff, #2b5ae0); color: #ffffff; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 26px rgba(43,90,224,0.5); }
.ns-btn-blue:hover { transform: scale(1.03); filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 32px rgba(43,90,224,0.6); }

.ns-btn-mail { background: rgba(10,16,38,0.55); color: #e3e8f4; border: 1px solid rgba(255,255,255,0.18); text-decoration: none; }
.ns-btn-mail:hover { background: rgba(32,45,88,0.75); border-color: rgba(255,255,255,0.3); transform: scale(1.04); }

/* Nav links (gradient text container sets background-clip) */
.ns-nav-link { color: transparent; text-decoration: none; }
.ns-nav-link:hover { color: #ffffff; }
.ns-footer-link { color: rgba(255,255,255,0.7); text-decoration: none; }
.ns-footer-link:hover { color: #ffffff; }
.ns-link-blue { color: #7ea6ff; text-decoration: none; }
.ns-link-blue:hover { color: #a8c4ff; }

/* Cards */
.ns-step-card { border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.25s; }
.ns-step-card:hover { border-color: rgba(255,255,255,0.22); }

/* Inputs */
.ns-input { background: rgba(6,10,24,0.65); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 11px 13px; color: #ffffff; font-size: 14px; font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.2s; }
.ns-input:focus { border-color: rgba(110,150,255,0.55); }

.ns-otp { width: 54px; height: 66px; text-align: center; font-size: 25px; font-weight: 500; text-transform: uppercase; background: rgba(6,10,24,0.65); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; color: #ffffff; font-family: 'DM Sans', sans-serif; outline: none; caret-color: #7ea6ff; transition: border-color 0.2s, box-shadow 0.2s; }
.ns-otp:focus { border-color: rgba(110,150,255,0.65); box-shadow: 0 0 0 3px rgba(79,136,255,0.18), 0 0 18px rgba(43,90,224,0.35); }

/* Modal close button */
.ns-modal-close { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background 0.2s, color 0.2s; }
.ns-modal-close:hover { background: rgba(255,255,255,0.12); color: #ffffff; }

/* Segmented channel buttons */
.ns-channel { flex: 1; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 13.5px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); color: #98a2b8; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ns-channel.on { background: linear-gradient(135deg, rgba(79,136,255,0.30), rgba(43,90,224,0.22)); border-color: rgba(110,150,255,0.6); color: #ffffff; }

/* Chart animation trigger */
.chart-on .ns-chart-fill-path { animation: ns-chart-fill 1.8s ease 1.2s forwards; }
.chart-on .ns-chart-line-path { animation: ns-chart-line 3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Liquid CTA fill layers (inside primary buttons) */
.ns-cta-liquid { position: absolute; inset: 0; border-radius: 10px; background-image: radial-gradient(120% 100% at 25% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 55%), radial-gradient(110% 110% at 75% 20%, rgba(163,176,199,0.90) 0%, rgba(163,176,199,0) 60%), radial-gradient(130% 110% at 60% 85%, rgba(222,227,238,0.95) 0%, rgba(222,227,238,0) 55%), radial-gradient(100% 95% at 20% 80%, rgba(140,154,180,0.70) 0%, rgba(140,154,180,0) 60%); background-size: 220% 220%, 200% 200%, 240% 240%, 190% 190%; background-repeat: no-repeat; animation: ns-liquid 9s ease-in-out infinite; pointer-events: none; }
.ns-cta-gloss { position: absolute; top: -30%; bottom: -30%; left: 0; width: 55%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%); filter: blur(5px); transform: translateX(-170%) skewX(-14deg); animation: ns-gloss 7s ease-in-out infinite; pointer-events: none; }

/* Checkout shine sweep */
.ns-shine { position: absolute; top: -30%; bottom: -30%; left: 0; width: 45%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); filter: blur(6px); transform: translateX(-180%) skewX(-14deg); animation: ns-shine 4.5s ease-in-out infinite; pointer-events: none; }

.hidden { display: none !important; }

/* Skeleton loaders: elements tagged data-sk render as pulsing placeholders
   until the page root's data-loading flips to "false" (window load, 1.5s cap). */
@keyframes ns-sk { from { opacity: 1; } to { opacity: 0.5; } }
[data-loading="true"] [data-sk] { color: transparent !important; -webkit-text-fill-color: transparent !important; background: rgba(255,255,255,0.07) !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; animation: ns-sk 1.1s ease-in-out infinite alternate !important; border-radius: 10px !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none !important; }
[data-loading="true"] [data-sk] * { opacity: 0 !important; visibility: hidden !important; }
[data-loading="true"] [data-sk-hide] { opacity: 0 !important; }

/* Legal document viewers */
.ns-legal-wrap { position: relative; max-width: 840px; margin: 0 auto; padding: 64px 48px 96px; }
.ns-legal-wrap h1 { margin: 0 0 6px; font-size: 38px; line-height: 1.15; font-weight: 400; letter-spacing: -0.015em; color: #ffffff; }
.ns-legal-sub { margin: 0 0 28px; font-size: 15px; color: #98a2b8; }
.ns-legal-wrap h2 { margin: 36px 0 12px; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; color: #ffffff; }
.ns-legal-wrap p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: #b6bfd2; }
.ns-legal-wrap ul { margin: 0 0 14px; padding-left: 22px; }
.ns-legal-wrap li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.7; color: #b6bfd2; }
.ns-legal-tblwrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(255,255,255,0.025); }
.ns-legal-wrap table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ns-legal-wrap td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); color: #b6bfd2; line-height: 1.55; vertical-align: top; min-width: 120px; }
.ns-legal-wrap tr:first-child td { color: #ffffff; font-weight: 500; }
.ns-legal-wrap tr:last-child td { border-bottom: none; }
@media (max-width: 767px) {
  .ns-legal-wrap { padding: 40px 20px 72px; }
  .ns-legal-wrap h1 { font-size: 28px; }
  .ns-legal-wrap h2 { font-size: 18px; }
}