html, body { margin: 0; padding: 0; }

/* ============================================================
   Responsive guards — bulletproof against horizontal overflow
   on every page/section. overflow-x:clip (not hidden) so the
   sticky navbar still pins to the viewport.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: clip; }
img { max-width: 100%; height: auto; }
/* Long unbroken strings (rates, code, addresses) never push layout wider */
input, select, textarea, button { max-width: 100%; }

:root {
  --font-sans: 'Hanken Grotesk', sans-serif;
  --font-display: 'Schibsted Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
html, body, * { font-family: var(--font-sans); }
h1, h2, h3, .font-display { font-family: var(--font-display); }
.font-mono, code, kbd, samp { font-family: var(--font-mono); }
body { background: #F2F1ED; -webkit-font-smoothing: antialiased; }

/* Detail polish — smooth anchor scroll, branded selection + focus */
html { scroll-behavior: smooth; }
::selection { background: var(--c5-c3, #93B4FF); color: #1F1B2E; }
:focus-visible { outline: 2px solid var(--c5-c3, #93B4FF); outline-offset: 3px; border-radius: 5px; }

/* Fine film grain — tactile premium texture over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain, 0.035);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Animated CTA gradient (@property-driven blobs)
   ============================================================ */
@property --c5-x1 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --c5-y1 { syntax: '<percentage>'; inherits: false; initial-value: 28%; }
@property --c5-s1 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --c5-x2 { syntax: '<percentage>'; inherits: false; initial-value: 82%; }
@property --c5-y2 { syntax: '<percentage>'; inherits: false; initial-value: 22%; }
@property --c5-s2 { syntax: '<percentage>'; inherits: false; initial-value: 46%; }
@property --c5-x3 { syntax: '<percentage>'; inherits: false; initial-value: 72%; }
@property --c5-y3 { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@property --c5-s3 { syntax: '<percentage>'; inherits: false; initial-value: 54%; }
@property --c5-x4 { syntax: '<percentage>'; inherits: false; initial-value: 28%; }
@property --c5-y4 { syntax: '<percentage>'; inherits: false; initial-value: 74%; }
@property --c5-s4 { syntax: '<percentage>'; inherits: false; initial-value: 42%; }
@property --c5-x5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --c5-y5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --c5-s5 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }

.c5-animated-gradient {
  background-color: #1F1B2E;
  background-image:
    radial-gradient(circle at var(--c5-x1) var(--c5-y1), var(--c5-c1, #A4F4FD) 0%, transparent var(--c5-s1)),
    radial-gradient(circle at var(--c5-x2) var(--c5-y2), var(--c5-c2, #7ad3c2) 0%, transparent var(--c5-s2)),
    radial-gradient(circle at var(--c5-x3) var(--c5-y3), var(--c5-c3, #84a9fa) 0%, transparent var(--c5-s3)),
    radial-gradient(circle at var(--c5-x4) var(--c5-y4), var(--c5-c4, #ffd000) 0%, transparent var(--c5-s4)),
    radial-gradient(circle at var(--c5-x5) var(--c5-y5), var(--c5-c5, #c7a3ff) 0%, transparent var(--c5-s5));
  animation:
    c5-move1 4.0s ease-in-out infinite,
    c5-move2 5.2s ease-in-out infinite,
    c5-move3 6.5s ease-in-out infinite,
    c5-move4 5.7s ease-in-out infinite,
    c5-move5 4.8s ease-in-out infinite,
    c5-size1 3.0s ease-in-out infinite,
    c5-size2 3.8s ease-in-out infinite,
    c5-size3 4.6s ease-in-out infinite,
    c5-size4 3.4s ease-in-out infinite,
    c5-size5 4.2s ease-in-out infinite;
}

@keyframes c5-move1 { 0%,100% { --c5-x1: 18%; --c5-y1: 28%; } 50% { --c5-x1: 34%; --c5-y1: 52%; } }
@keyframes c5-move2 { 0%,100% { --c5-x2: 82%; --c5-y2: 22%; } 50% { --c5-x2: 64%; --c5-y2: 38%; } }
@keyframes c5-move3 { 0%,100% { --c5-x3: 72%; --c5-y3: 78%; } 50% { --c5-x3: 88%; --c5-y3: 60%; } }
@keyframes c5-move4 { 0%,100% { --c5-x4: 28%; --c5-y4: 74%; } 50% { --c5-x4: 14%; --c5-y4: 58%; } }
@keyframes c5-move5 { 0%,100% { --c5-x5: 50%; --c5-y5: 50%; } 50% { --c5-x5: 56%; --c5-y5: 40%; } }

@keyframes c5-size1 { 0%,100% { --c5-s1: 50%; } 50% { --c5-s1: 66%; } }
@keyframes c5-size2 { 0%,100% { --c5-s2: 46%; } 50% { --c5-s2: 60%; } }
@keyframes c5-size3 { 0%,100% { --c5-s3: 54%; } 50% { --c5-s3: 40%; } }
@keyframes c5-size4 { 0%,100% { --c5-s4: 42%; } 50% { --c5-s4: 58%; } }
@keyframes c5-size5 { 0%,100% { --c5-s5: 50%; } 50% { --c5-s5: 64%; } }

/* ============================================================
   Hero fallback (light mesh) — shown when no MP4 is loaded
   ============================================================ */
.hero-gradient-fallback {
  background-color: #e7eaec;
  background-image:
    radial-gradient(circle at var(--c5-x1) var(--c5-y1), #cfeffc 0%, transparent var(--c5-s1)),
    radial-gradient(circle at var(--c5-x2) var(--c5-y2), #e6d7f7 0%, transparent var(--c5-s2)),
    radial-gradient(circle at var(--c5-x3) var(--c5-y3), #d6e2ff 0%, transparent var(--c5-s3)),
    radial-gradient(circle at var(--c5-x4) var(--c5-y4), #fff0c2 0%, transparent var(--c5-s4)),
    radial-gradient(circle at var(--c5-x5) var(--c5-y5), #d3f3ec 0%, transparent var(--c5-s5));
  animation:
    c5-move1 9.0s ease-in-out infinite,
    c5-move2 11.0s ease-in-out infinite,
    c5-move3 13.0s ease-in-out infinite,
    c5-move4 12.0s ease-in-out infinite,
    c5-move5 10.0s ease-in-out infinite,
    c5-size1 8.0s ease-in-out infinite,
    c5-size2 9.5s ease-in-out infinite,
    c5-size3 11.0s ease-in-out infinite,
    c5-size4 8.5s ease-in-out infinite,
    c5-size5 10.5s ease-in-out infinite;
}

/* ============================================================
   Scroll-reveal — subtle fade + rise as sections enter view
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.gradients-paused .c5-animated-gradient,
.gradients-paused .hero-gradient-fallback { animation: none; }

/* ============================================================
   Premium motion — load entrance, line reveal, logo, hover
   ============================================================ */
@keyframes loadRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes loadFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineUp   { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes logoIn   { from { opacity: 0; transform: rotate(-90deg) scale(0.55); } to { opacity: 1; transform: none; } }

.load-rise { opacity: 0; animation: loadRise 0.9s cubic-bezier(0.22,1,0.36,1) both; animation-delay: var(--load-delay, 0ms); }
.load-fade { opacity: 0; animation: loadFade 1s ease both; animation-delay: var(--load-delay, 0ms); }

.line-mask  { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line-inner { display: block; transform: translateY(115%); animation: lineUp 1s cubic-bezier(0.22,1,0.36,1) both; animation-delay: var(--load-delay, 0ms); }

.logo-mark { animation: logoIn 0.85s cubic-bezier(0.22,1,0.36,1) both; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); transform-origin: 50% 50%; }
.logo-link:hover .logo-mark { transform: rotate(90deg); }

/* Animated nav-link underline */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* Card / element lift */
.lift { transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1); }
.lift:hover { transform: translateY(-6px); }

/* Icon button */
.icon-btn { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background-color 0.3s, color 0.3s, border-color 0.3s; }
.icon-btn:hover { transform: translateY(-3px); }

/* CTA card — periodic light sweep + pulsing live dot */
@keyframes ctaShine { 0% { transform: translateX(-130%) skewX(-14deg); } 55%, 100% { transform: translateX(240%) skewX(-14deg); } }
.cta-shine::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,0.22) 50%, transparent 62%);
  transform: translateX(-130%) skewX(-14deg);
  animation: ctaShine 7s ease-in-out 1.2s infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.6); } }
.cta-dot { animation: dotPulse 1.8s ease-in-out infinite; }

@keyframes routeFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.route-fade { display: inline-block; animation: routeFade 0.5s cubic-bezier(0.22,1,0.36,1); }

/* How-it-works connector — accent line grows in on scroll */
.grow-line { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(0.22,1,0.36,1); }
.grow-line.is-visible { transform: scaleX(1); }

/* Rewards calculator range slider */
.calc-range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; outline: none; cursor: pointer; }
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.35); cursor: pointer;
  transition: transform 0.15s ease;
}
.calc-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc-range::-moz-range-thumb {
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.35); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .c5-animated-gradient, .hero-gradient-fallback { animation: none; }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .load-rise, .load-fade, .line-inner, .logo-mark {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .cta-shine::before, .cta-dot, .route-fade { animation: none !important; }
  .grow-line { transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}