/* ==========================================================================
   SKAI Technology — core
   Tokens, reset, tipografia, botons, utilitats.

   DOS TEMES. Els colors de marca de SKAI no passen contrast en tots dos:
     · #004DFF  clar 5.74 ✓   fosc 3.27 ✗
     · #B34CF0  clar 3.86 ✗   fosc 4.86 ✓
     · #00D4FF  clar 1.70 ✗   fosc 11.06 ✓
   Per això cada mode té la seva variant. La marca es reconeix igual,
   però el text es llegeix als dos.
   ========================================================================== */

/* ---------- MODE CLAR (per defecte) ---------- */
:root {
  --paper:      #FBFAF8;
  --paper-2:    #F1F0ED;
  --paper-3:    #E6E4DF;
  --card:       #FFFFFF;

  --ink:        #14141C;   /* 16.07:1 sobre paper-2 */
  --ink-2:      #45454F;   /*  8.31:1 */
  --ink-3:      #63636E;   /*  5.20:1 */

  --blau:       #0040D9;   /*  6.74:1 — variant de text del blau SKAI */
  --blau-viu:   #004DFF;   /* el blau de marca, per a fons i traços */
  --btn-fg:     #FFFFFF;   /*  5.99:1 sobre --blau-viu */
  --blau-tou:   #E8EEFE;
  --blau-vora:  #C5D6FB;

  --lila:       #7B2CBF;   /*  6.24:1 — variant de text del lila SKAI */
  --lila-viu:   #B34CF0;
  --lila-tou:   #F3EAFC;
  --lila-vora:  #DFC7F5;

  --cian:       #0E7490;   /* el #00D4FF no es veu sobre blanc */

  --line:       rgba(20, 20, 28, 0.10);
  --line-forta: rgba(20, 20, 28, 0.20);

  --ombra-1: 0 1px 2px rgba(20, 20, 28, 0.05), 0 2px 8px rgba(20, 20, 28, 0.04);
  --ombra-2: 0 2px 4px rgba(20, 20, 28, 0.05), 0 8px 24px rgba(20, 20, 28, 0.08);
  --ombra-3: 0 4px 10px rgba(20, 20, 28, 0.06), 0 20px 48px rgba(20, 20, 28, 0.12);

  --halo-1: rgba(0, 77, 255, 0.06);
  --halo-2: rgba(179, 76, 240, 0.05);

  --gra: 0.03;
  --gra-mescla: multiply;

  /* ---- El degradat de marca -----------------------------------------
     Blau -> lila, del sistema "Luminous Tech". Es el que mes identifica
     el disseny, i per aixo va NOMES on ha de manar: la segona linia del
     titular i el boto principal. Repartit per tot arreu deixaria de
     voler dir res i la pagina semblaria un fons de pantalla.

     CONTRAST, que aqui es mira sempre:
       blanc sobre el degradat  6.28:1 (blau) i 4.56:1 (lila)  -> AA
       el degradat COM A TEXT   6.02:1 (blau) i 4.37:1 (lila)
     El 4.37 es per sota del 4.5 de text normal, pero aquest degradat
     nomes es fa servir en titulars de 40px+ en negreta, i alli el
     llindar de l'AA es 3:1. Si algun dia es posa en text petit, no
     valdra: llavors cal enfosquir el lila fins a 4.5. */
  --grad-a:     #0047FF;
  --grad-b:     #BD00FF;
  --grad:       linear-gradient(100deg, var(--grad-a), var(--grad-b));

  /* ---- Vidre ---------------------------------------------------------
     Fons translucid amb desenfoc. El fa servir la capcalera i les
     targetes que han de flotar per sobre d'alguna cosa. */
  --vidre:      rgba(255, 255, 255, 0.70);
  --vidre-vora: rgba(255, 255, 255, 0.40);
  --vidre-buf:  32px;

  /* ---- Formes i ritme ------------------------------------------------
     El disseny demana botons de pindola i mes aire entre seccions
     (160px a l'escriptori, 80px al mobil). */
  --r-pill:     9999px;
  --r-lg:       16px;
  --r-xl:       24px;

  color-scheme: light;
}

/* ---------- MODE FOSC ---------- */
:root[data-theme="dark"] {
  --paper:      #0B0B14;
  --paper-2:    #13131F;
  --paper-3:    #20202E;
  --card:       #14141F;

  --ink:        #F2F2F7;   /* 16.50:1 sobre paper-2 */
  --ink-2:      #B4B4C4;   /*  9.00:1 */
  --ink-3:      #8E8EA0;   /*  5.72:1 */

  --blau:       #5B8CFF;   /*  5.82:1 */
  --blau-viu:   #5B8CFF;   /* el boto s'aclareix i el text es fa fosc:
                              blanc sobre blau clar nomes feia 3.72:1 */
  --btn-fg:     #0B0B14;   /*  6.19:1 sobre --blau-viu */
  --blau-tou:   rgba(91, 140, 255, 0.12);
  --blau-vora:  rgba(91, 140, 255, 0.30);

  --lila:       #C48BF5;   /*  7.33:1 */
  --lila-viu:   #B34CF0;
  --lila-tou:   rgba(196, 139, 245, 0.12);
  --lila-vora:  rgba(196, 139, 245, 0.30);

  --cian:       #00D4FF;   /* aquí sí que brilla: 11.06:1 */

  --line:       rgba(255, 255, 255, 0.10);
  --line-forta: rgba(255, 255, 255, 0.20);

  --ombra-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --ombra-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  --ombra-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.55);

  --halo-1: rgba(0, 77, 255, 0.16);
  --halo-2: rgba(179, 76, 240, 0.13);

  --gra: 0.05;
  --gra-mescla: overlay;

  /* El degradat, aclarit per al fons fosc. Els extrems clars donen
     6.19:1 (blau) i 7.28:1 (lila) sobre el paper fosc; els originals
     hi quedaven apagats i el titular perdia tota la forca.
     Al boto, el text segueix sent --btn-fg (tinta): 5.8:1. */
  --grad-a:     #5B8CFF;
  --grad-b:     #C77DFF;

  --vidre:      rgba(16, 16, 26, 0.66);
  --vidre-vora: rgba(255, 255, 255, 0.10);

  color-scheme: dark;
}

/* Qui no ha triat res: el que digui el sistema operatiu */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0B0B14;
    --paper-2:    #13131F;
    --paper-3:    #20202E;
    --card:       #14141F;

    --ink:        #F2F2F7;
    --ink-2:      #B4B4C4;
    --ink-3:      #8E8EA0;

    --blau:       #5B8CFF;
    --blau-viu:   #5B8CFF;
    --btn-fg:     #0B0B14;
    --blau-tou:   rgba(91, 140, 255, 0.12);
    --blau-vora:  rgba(91, 140, 255, 0.30);

    --lila:       #C48BF5;
    --lila-viu:   #B34CF0;
    --lila-tou:   rgba(196, 139, 245, 0.12);
    --lila-vora:  rgba(196, 139, 245, 0.30);

    --cian:       #00D4FF;

    --line:       rgba(255, 255, 255, 0.10);
    --line-forta: rgba(255, 255, 255, 0.20);

    --ombra-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --ombra-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    --ombra-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.55);

    --halo-1: rgba(0, 77, 255, 0.16);
    --halo-2: rgba(179, 76, 240, 0.13);

    --gra: 0.05;
    --gra-mescla: overlay;

    /* El degradat, aclarit per al fons fosc. Els extrems clars donen
       6.19:1 (blau) i 7.28:1 (lila) sobre el paper fosc; els originals
       hi quedaven apagats i el titular perdia tota la forca.
       Al boto, el text segueix sent --btn-fg (tinta): 5.8:1. */
    --grad-a:     #5B8CFF;
    --grad-b:     #C77DFF;

    --vidre:      rgba(16, 16, 26, 0.66);
    --vidre-vora: rgba(255, 255, 255, 0.10);

    color-scheme: dark;
  }
}

/* ---------- Constants ---------- */
:root {
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, Monaco, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tou: cubic-bezier(0.4, 0, 0.2, 1);

  --maxw: 1120px;
  --gutter: 24px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s var(--ease-tou), color 0.3s var(--ease-tou);
}

img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
a { color: inherit; }

/* Llum d'ambient: als dos modes, però amb intensitat diferent */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 75vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 60% at 50% -10%, var(--halo-1), transparent 70%),
    radial-gradient(ellipse 55% 50% at 88% 0%, var(--halo-2), transparent 70%);
  transition: background 0.3s var(--ease-tou);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: var(--gra);
  mix-blend-mode: var(--gra-mescla);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

/* ---------- Focus ---------- */
:focus { outline: none; }

:focus-visible {
  outline: 2.5px solid var(--blau);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 2000;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus { top: 0; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}

.display {
  font-size: clamp(40px, 6.4vw, 78px);
  /* 700 i no 600: el sistema en diu "arquitectonic", i la diferencia entre
     un titular que pesa i un que no es aquest pas de pes. */
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

/* El degradat com a TEXT, nomes a titulars grans (mira la nota del token:
   en text petit el lila no arriba a 4.5:1).
   El color pla va primer i el degradat nomes dins de @supports: si el
   navegador no sap retallar el fons al text, es queda amb el blau i es
   llegeix igual en comptes de desapareixer. */
.accent { color: var(--blau); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 .accent,
  h2 .accent,
  .display .accent {
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.accent-lila { color: var(--lila); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blau);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: '';
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blau-viu), var(--lila-viu));
  flex-shrink: 0;
}

.section-title {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin-bottom: 18px;
}

.section-lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-2);
  max-width: 56ch;
  line-height: 1.6;
}

.section-head { margin-bottom: clamp(44px, 5.5vw, 72px); }

.section-head.center {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}

.section-head.center .eyebrow { justify-content: center; }
.section-head.center .section-title,
.section-head.center .section-lead { margin-inline: auto; }

/* ---------- Estructura ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  position: relative;
  z-index: 1;
  /* El sistema demana 160px entre seccions a l'escriptori i 80px al mobil.
     Amb clamp() surt sol i no calen dos jocs de regles. L'aire es la meitat
     d'aquest disseny: si s'apreta, deixa de semblar el que es. */
  padding-block: clamp(80px, 10vw, 152px);
}

.band-2 {
  background: var(--paper-2);
  transition: background 0.3s var(--ease-tou);
}

/* ---------- Botons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.25s var(--ease-tou), border-color 0.25s var(--ease-tou),
              color 0.25s var(--ease-tou), filter 0.25s var(--ease-tou);
}

.btn svg { flex-shrink: 0; width: 17px; height: 17px; transition: transform 0.3s var(--ease); }
.btn:hover svg.arrow { transform: translateX(4px); }

/* El color del text del boto canvia amb el tema, no es sempre blanc:
   clar  -> blanc sobre el degradat = 6.28:1 (blau) i 4.56:1 (lila)
   fosc  -> tinta sobre el degradat clar = 5.8:1  */
.btn-primary {
  background: var(--grad);
  color: var(--btn-fg);
  box-shadow: var(--ombra-1);
}

/* El disseny demana creixer un 2%, no aixecar-se. Es una diferencia petita
   pero es la que fa que sembli vidre i no un boto de formulari. */
.btn-primary:hover {
  filter: brightness(1.08);
  transform: scale(1.02);
  box-shadow: var(--ombra-2);
}

.btn-primary:active { transform: scale(1); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-forta);
}

.btn-ghost:hover {
  border-color: var(--ink);
  background: var(--paper-2);
  transform: translateY(-2px);
}

.btn-sm { padding: 11px 20px; font-size: 15px; border-radius: 10px; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blau);
  text-decoration: none;
  position: relative;
  transition: gap 0.3s var(--ease);
}

.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 20px;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.link-arrow:hover { gap: 10px; }
.link-arrow:hover::after { transform: scaleX(1); }

/* ---------- Etiquetes ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--blau-vora);
  background: var(--blau-tou);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blau);
}

.chip.lila { border-color: var(--lila-vora); background: var(--lila-tou); color: var(--lila); }

.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blau-viu);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------- Aparició en scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Utilitats ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row.center { justify-content: center; }

/* ---------- Moviment reduït ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
}