@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   WebSoQuick Landing v2 — Design Tokens & Foundation Styles
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
  /* Backgrounds */
  --wsq-bg:            #FFFFFF;
  --wsq-surface:       #F5F7FB;
  --wsq-surface-2:     #EEF1F7;

  /* Ink */
  --wsq-ink:           #0F1B33;
  --wsq-ink-2:         #1F2A40;
  --wsq-muted:         #5B6880;
  --wsq-muted-2:       #8A94A6;

  /* Primary (blue) */
  --wsq-primary:       #2F54EB;
  --wsq-primary-dark:  #1D39C4;
  --wsq-primary-tint:  #EEF1FF;

  /* Accent (violet) */
  --wsq-accent:        #6E59F5;
  --wsq-accent-tint:   #F3EEFF;

  /* Borders */
  --wsq-border:        #E3E8F0;
  --wsq-border-2:      #EAEEF5;

  /* Semantic states */
  --wsq-success:       #0E8A56;
  --wsq-success-2:     #12A150;
  --wsq-success-tint:  #E7FBF1;
  --wsq-warning:       #C77700;
  --wsq-warning-tint:  #FFF3E6;
  --wsq-danger:        #D64545;

  /* Dark surfaces */
  --wsq-navy:          #0F1B33;
  --wsq-footer:        #0B1426;

  /* Gradient */
  --wsq-gradient:      linear-gradient(135deg, #2F54EB, #6E59F5);

  /* Shadows */
  --wsq-shadow-card:   0 22px 44px -24px rgba(15, 27, 51, .28);
  --wsq-shadow-float:  0 30px 70px -34px rgba(15, 27, 51, .34);
}

/* ---- Base Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: #0F1B33;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'Schibsted Grotesk', 'Hanken Grotesk', sans-serif;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; white-space: nowrap; }

:focus-visible {
  outline: 2px solid #2F54EB;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Accessibility: skip link ---- */
.skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 10000;
  transform: translateY(-150%);
  background: var(--wsq-primary);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: .9rem;
  transition: transform .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(1rem);
}

::selection {
  background: #D9E1FF;
  color: #0F1B33;
}

input, textarea, select { font-family: inherit; }

/* ---- Keyframe Animations ---- */
@keyframes wsqFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes wsqRise {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}

@keyframes wsqBlink {
  0%, 100% { opacity: .25; }
  50%       { opacity: 1; }
}

@keyframes wsqMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes wsqDash {
  to { stroke-dashoffset: -18; }
}

@keyframes wsqFloatX {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}

@keyframes wsqPageIn {
  from { opacity: .4; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wsqGlow {
  0%, 100% { box-shadow: 0 24px 50px -28px rgba(47, 84, 235, .45); }
  50%       { box-shadow: 0 28px 62px -24px rgba(47, 84, 235, .72); }
}

@keyframes wsqStepIn {
  from { opacity: .25; transform: translateX(12px); }
  to   { opacity: 1;   transform: translateX(0); }
}

@keyframes wsqFadeIn {
  from { opacity: .25; }
  to   { opacity: 1; }
}

@keyframes wsqCheck {
  from { stroke-dashoffset: 42; }
  to   { stroke-dashoffset: 0; }
}

/* ---- Utility Classes ---- */
.wsq-rise {
  animation: wsqRise .5s ease both;
}

.wsq-link-u {
  position: relative;
}
.wsq-link-u::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: #2F54EB;
  transition: right .25s ease;
}
.wsq-link-u:hover::after {
  right: 0;
}

.wsq-flow path {
  animation: wsqDash 1.2s linear infinite;
}

.wsq-flow-x {
  animation: wsqDash 1.2s linear infinite;
}

.wsq-pill-f > div {
  animation: wsqFloatX 6s ease-in-out infinite;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.wsq-pill-f > div:hover {
  border-color: #2F54EB !important;
  box-shadow: 0 16px 34px -14px rgba(47, 84, 235, .5) !important;
}

.wsq-pill-f[data-d="1"] > div { animation-delay: .4s; }
.wsq-pill-f[data-d="2"] > div { animation-delay: .8s; }
.wsq-pill-f[data-d="3"] > div { animation-delay: 1.2s; }
.wsq-pill-f[data-d="4"] > div { animation-delay: 1.6s; }
.wsq-pill-f[data-d="5"] > div { animation-delay: 2s; }
.wsq-pill-f[data-d="6"] > div { animation-delay: 2.4s; }
.wsq-pill-f[data-d="7"] > div { animation-delay: 2.8s; }

.wsq-reco {
  animation: wsqGlow 3.4s ease-in-out infinite;
}

.wsq-stepin {
  animation: wsqStepIn .32s ease both;
}

.wsq-fade {
  animation: wsqFadeIn .4s ease both;
}

.wsq-check path {
  stroke-dasharray: 42;
  animation: wsqCheck .65s cubic-bezier(.6, .1, .3, 1) .15s both;
}

.wsq-cta-arrow {
  display: inline-block;
  transition: transform .2s ease;
}

[data-magnetic]:hover .wsq-cta-arrow {
  transform: translateX(4px);
}

main {
  animation: wsqPageIn .4s ease both;
}

/* ---- Responsive Grid Utilities ---- */
/* Prevent CSS Grid track blowout: a fixed-width item (e.g. the hero
   illustration) forces its grid track to its own min-content size unless
   min-width is reset. Applies at all widths — harmless once tracks already
   have enough room (desktop), required once they collapse to 1fr (mobile). */
.wsq-hero-grid > div { min-width: 0; }

@media (max-width: 980px) {
  .wsq-hero-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .wsq-hero-visual { max-width: 500px; }
  .wsq-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .wsq-grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
}

@media (max-width: 860px) {
  .wsq-desktop-nav  { display: none !important; }
  .wsq-signin       { display: none !important; }
  .wsq-get-started  { display: none !important; }
  .wsq-burger       { display: flex !important; }
  .wsq-grid-3      { grid-template-columns: 1fr 1fr !important; }
  .wsq-grid-4      { grid-template-columns: 1fr 1fr !important; }
  .wsq-footer-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 560px) {
  .wsq-grid-3,
  .wsq-grid-4,
  .wsq-grid-5      { grid-template-columns: 1fr !important; }
  .wsq-footer-grid { grid-template-columns: 1fr !important; }
  .wsq-hide-sm     { display: none !important; }
  .wsq-region      { display: none !important; }
}

@media (max-width: 760px) {
  .wsq-bpe-stage { transform: scale(.84); }
  .wsq-bpe-wrap  { height: 470px !important; }
}

@media (max-width: 560px) {
  .wsq-bpe-stage { transform: scale(.6); }
  .wsq-bpe-wrap  { height: 340px !important; }
}

/* Phones at 320-430px need a smaller scale than the 560px tablet tier above,
   or the illustration's right-hand pills get clipped by .wsq-bpe-wrap's
   overflow:hidden (see wsq-flow-edges.css). flex-shrink:0 is scoped to only
   this breakpoint — applying it at all widths breaks the 980-1150px range,
   where the grid's column share is narrower than the illustration's 500px
   and it needs to flex-shrink to fit rather than clip. */
@media (max-width: 480px) {
  .wsq-bpe-stage { transform: scale(.5); flex-shrink: 0; }
  .wsq-bpe-wrap  { height: 272px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}