/* AIMORE — public site design system v3 "quiet premium" (2026-06-10)
   Princip (Jesper + Maya, ref lovable.dev + apple.com): more is less.
   EN färg-wow (hero) → därefter lugn, nästan monokrom yta med stora rubriker,
   hårfina linjer och mycket luft → EN mörk kontrastsektion (loopen) →
   EN avslutande färgton (skymnings-CTA). Färg används avsiktligt, aldrig som wash.
   Brand: airy blue/aqua, soft rose/coral, pale gold, serif-rubriker. Aldrig svart intro.
   No external font/CDN requests (privacy-friendly, fast). System fonts only.
   Föregående version sparad i web/_reference_v2/. */

:root {
  /* Core */
  --bg-top: #EEF8FF;
  --bg-bottom: #FFFFFF;
  --paper: #FAF9F7;
  --blue: #6EAFCB;
  --blue-dark: #3E8FAA;
  --blue-home: #7FB8D6;
  --rose: #E6A5A4;
  --coral: #E08A77;
  --text: #1B1B1F;
  --text-soft: #5F5F68;
  --surface: #FFFFFF;
  --surface-alt: #F7F7FB;
  --border: #E6E7EF;
  --hairline: #EAE8E3;

  /* Pasteller — används endast i hero/intro/loop, aldrig som sektionswash */
  --pastel-blue: #8EC7E8;
  --pastel-rose: #EFAEAD;
  --pastel-peach: #F3C6B4;
  --pastel-mint: #9AD7C9;
  --pastel-lavender: #C9BDF1;
  --pastel-gold: #E9CF85;
  --header-rose-top: #F5C8C7;
  --header-rose-bottom: #FFF0EC;
  --page-bg: #F4F5FA;
  --ink-1: #133040;
  --ink-2: #1B4156;
  --ink-3: #245672;

  /* Type */
  --serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 22px;
  --radius-sm: 14px;
  --shadow-card: 0 18px 50px -24px rgba(40, 80, 110, 0.28);
  --shadow-soft: 0 8px 30px -18px rgba(40, 80, 110, 0.22);
  --maxw: 1120px;

  /* Kubvändningens gemensamma tempo */
  --flip-dur: 1.05s;
  --flip-ease: cubic-bezier(.72, 0, .22, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* OBS: overflow-x HIDDEN gjorde body till scrollcontainer → alla view-timelines
   (storyn!) fick body som source och frös vita. CLIP klipper utan scroller.
   Buggen hittad 2026-06-12 efter Jespers liverapport. Ändra ALDRIG tillbaka. */
html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg-bottom);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--text); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.4em; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
p { margin: 0 0 1rem; color: var(--text-soft); font-size: 1.0625rem; }
a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.eyebrow { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8A8A93; margin-bottom: 1rem; }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.2rem); }

/* Gradienttext — sidans enda färg på ljus yta. Två toner: hav → solnedgång.
   Långsamt skimmer gör orden levande utan att störa. */
.grad-text { background: linear-gradient(100deg, var(--blue-dark) 0%, var(--blue-home) 30%, var(--coral) 70%, var(--blue-dark) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradshift 9s ease-in-out infinite alternate; }
.grad-light { background: linear-gradient(100deg, #A5D8F3 0%, #F2C5B6 55%, #EFD9A8 80%, #A5D8F3 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradshift 9s ease-in-out infinite alternate; }
@keyframes gradshift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .grad-text, .grad-light { animation: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 2rem; border-radius: 999px; font-family: var(--sans); font-size: 1rem; font-weight: 600;
  cursor: pointer; border: 0; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.btn-primary { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%); color: #fff;
  box-shadow: 0 14px 34px -14px rgba(62, 143, 170, 0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
/* Ljusglans som följer pekaren (--mx sätts av magnetknapp-skriptet) */
.btn-primary::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120px 60px at var(--mx, 50%) 0%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
  transition: opacity 0.25s ease; }
.btn-primary:hover::before { opacity: 1; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg); transition: left 0.5s ease; pointer-events: none; }
.btn-primary:hover { text-decoration: none; box-shadow: 0 18px 44px -14px rgba(62, 143, 170, 0.85), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-primary:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.btn-ghost:hover { transform: translateY(-1px); text-decoration: none; }

/* ---------- Top nav — liquid glass: äkta translucens med kantljus ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(170%) blur(22px);
  background: rgba(255, 255, 255, 0.55); border-bottom: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.nav.scrolled { background: rgba(255, 255, 255, 0.62); border-bottom-color: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 44px -22px rgba(40,80,110,0.35); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; transition: height 0.3s ease; }
.nav.scrolled .nav-inner { height: 56px; }
.brand { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.16em; color: var(--text); }
.nav-links { display: flex; gap: 1.6rem; align-items: center; }
.nav-links a { color: var(--text-soft); font-size: 0.95rem; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links .btn { padding: 0.6rem 1.3rem; }
/* Knapp-länkar i naven ska INTE ärva länkgrått — krispigt vitt på primärknappen
   (specificitetsfix: .nav-links a slog .btn-primary). Jesper 2026-06-11. */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }

/* Burger (mobil) */
.nav-burger { display: none; background: none; border: 0; padding: 10px 8px; margin-right: -8px; cursor: pointer; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav som overlay över mörk hero (endast index): transparent i toppen,
   vit text — växlar till vit bar med mörk text vid scroll. */
/* Naven ligger i flödet ovanför heron — mörkt liquid glass i samma familj som
   herons topp (#2E5F77), med kantljus. Smälter ihop med heron tills man scrollar. */
.nav.nav-overlay:not(.scrolled) { background: rgba(43,90,113,0.92); backdrop-filter: saturate(150%) blur(18px);
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(255,255,255,0.05); }
.nav.nav-overlay:not(.scrolled) .brand { color: #fff; text-shadow: 0 1px 12px rgba(15,45,65,0.45); }
.nav.nav-overlay:not(.scrolled) .nav-burger span { background: #fff; }
@media (min-width: 861px) {
  .nav.nav-overlay:not(.scrolled) .nav-links a:not(.btn) { color: rgba(255,255,255,0.88); }
  .nav.nav-overlay:not(.scrolled) .nav-links a:not(.btn):hover { color: #fff; }
}

/* Skip-link + fokus (tillgänglighet) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); color: var(--text); padding: 0.6rem 1.1rem; border-radius: 0 0 10px 0; box-shadow: var(--shadow-soft); }
.skip-link:focus { left: 0; }
a:focus-visible, .btn:focus-visible, .nav-burger:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; border-radius: 6px; }

/* ====================================================================
   HERO — sidans enda stora färgmoment.
   KANTFIX: grundgradienten slutar i rent vitt OCH alla animerade lager
   (.hero-bg) maskas ut mjukt långt före nederkanten. Inga overlays,
   inga klippta blurrar → ingen "spricka" mot nästa sektion.
   ==================================================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 8rem 0 11rem;
  /* Samma värld som introt: djupt hav i toppen → soluppgång → rent vitt i botten.
     Basen som möter nästa sektion är en REN linjär gradient som slutar i vitt.
     ALLA färglager ligger i .hero-bg och maskas ut långt före nederkanten. */
  background: linear-gradient(172deg, #27556E 0%, #3F86A5 26%, #4E97B4 38%, #8FC2DD 58%, #D8EAF4 78%, #FFFFFF 100%); }
.hero .container { position: relative; z-index: 2; }
.hero-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,0) 88%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,0) 88%); }
.hero-tint { position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(233,202,118,0.52) 0%, rgba(233,202,118,0) 38%),
    radial-gradient(140% 120% at 18% 30%, rgba(126,193,233,0.72) 0%, rgba(126,193,233,0) 55%),
    radial-gradient(150% 130% at 85% 55%, rgba(196,182,243,0.62) 0%, rgba(196,182,243,0) 50%),
    radial-gradient(120% 110% at 50% 95%, rgba(245,192,170,0.56) 0%, rgba(245,192,170,0) 45%); }
/* Djup + biokänsla (som introt): horisontglöd och mjuk vinjett — ligger i den
   maskade .hero-bg så att de aldrig kan skapa kanter mot nästa sektion. */
.hero-horizon { position: absolute; left: 4%; right: 4%; top: 44%; height: 170px; pointer-events: none;
  background: radial-gradient(55% 100% at 50% 50%, rgba(255,214,164,0.42) 0%, rgba(255,214,164,0) 70%); filter: blur(22px); }
.hero-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 85% at 50% 32%, rgba(0,0,0,0) 55%, rgba(14,40,58,0.4) 100%); }
/* Ljusglint som sveper över ordmärket när sidan landat (samma som introts) */
.hero-sheen { position: absolute; inset: -10% -8% 46% -8%; overflow: hidden; pointer-events: none; z-index: 3;
  -webkit-mask-image: radial-gradient(56% 55% at 50% 46%, #000 30%, rgba(0,0,0,0) 70%);
          mask-image: radial-gradient(56% 55% at 50% 46%, #000 30%, rgba(0,0,0,0) 70%); }
.hero-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24%;
  transform: skewX(-18deg) translateX(-280%); mix-blend-mode: screen;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  filter: blur(10px); animation: sheensweep 1.25s ease-in-out 1.7s forwards; }

/* Helskärmsglint — EN diskret ljussvepning över hela vyn när sidan landar
   efter kubvändningen (binder ihop introts värld med sidans). */
.page-glint { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow: hidden; opacity: 0;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 45%, #000 35%, rgba(0,0,0,0) 80%);
          mask-image: radial-gradient(75% 75% at 50% 45%, #000 35%, rgba(0,0,0,0) 80%); }
.page-glint::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -35%; width: 30%;
  transform: skewX(-16deg); mix-blend-mode: screen; filter: blur(18px);
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,0) 100%); }
body.page-arrived .page-glint { animation: glintshow 1.5s ease-in-out 0.1s forwards; }
body.page-arrived .page-glint::before { animation: glintsweep 1.5s cubic-bezier(.3,.2,.3,1) 0.1s forwards; }
@keyframes glintshow { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes glintsweep { to { transform: skewX(-16deg) translateX(520%); } }
@media (prefers-reduced-motion: reduce) { .page-glint { display: none; } }
/* Glasknapp på mörk hero (glassmorphism) */
.hero .btn-ghost { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.42);
  backdrop-filter: blur(10px); box-shadow: 0 10px 30px -16px rgba(10,35,52,0.6); }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.24); color: #fff; }

.hero-center .hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.hero-center .hero-wordmark { font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(3.2rem, 10vw, 6rem); letter-spacing: 0.06em; line-height: 1; margin: 0 0 0.5rem;
  text-shadow: 0 2px 24px rgba(30,70,95,0.45), 0 1px 3px rgba(30,70,95,0.3); }
/* Ordmärkets bokstäver landar koreograferat vid varje sidvisning (samma språk som introt) */
.hero-wordmark span { display: inline-block;
  animation: wordland 0.7s cubic-bezier(.2,.75,.25,1) both;
  animation-delay: calc(0.07s * var(--i) + 0.25s); }
@keyframes wordland { from { opacity: 0; transform: translateY(0.38em) scale(0.96); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
body.has-intro .hero-wordmark span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-wordmark span { animation: none; } }
.hero-center .rule { width: 64px; height: 3px; background: rgba(255,255,255,0.9); border-radius: 3px; margin: 0.8rem auto 1.5rem; }
.hero-center .tagline { font-family: var(--serif); font-size: clamp(1.4rem, 3.4vw, 2.1rem); color: #fff;
  max-width: 18ch; margin: 0 auto 0.9rem; text-shadow: 0 1px 14px rgba(30,70,95,0.45); }
.hero-center .sub { color: rgba(255,255,255,0.97); font-size: 1.1rem; max-width: 46ch; margin: 0 auto 2.2rem; text-shadow: 0 1px 10px rgba(30,70,95,0.4); }
.hero-center .cta-row { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* Ljuspooler — kantlösa, drivande dis av ljus.
   OBS: inga blur()-filter — radialgradienter är redan mjuka och kostar ~0 GPU. */
.glow-pool { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  will-change: transform; }
.glow-pool.gp1 { width: 72vw; height: 48vw; left: -14vw; top: -12vw;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.45) 0%, rgba(142,199,232,0.4) 38%, rgba(142,199,232,0) 72%);
  animation: pooldrift1 21s ease-in-out infinite alternate; }
.glow-pool.gp2 { width: 62vw; height: 44vw; right: -16vw; top: 2vw;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,236,200,0.5) 0%, rgba(233,207,133,0.36) 40%, rgba(233,207,133,0) 72%);
  animation: pooldrift2 27s ease-in-out infinite alternate; }
.glow-pool.gp3 { width: 54vw; height: 40vw; left: 24vw; bottom: -16vw;
  background: radial-gradient(50% 50% at 50% 50%, rgba(248,205,196,0.45) 0%, rgba(239,174,173,0.32) 40%, rgba(239,174,173,0) 72%);
  animation: pooldrift3 24s ease-in-out infinite alternate; }
@keyframes pooldrift1 { to { transform: translate3d(10vw, 5vw, 0) scale(1.16); } }
@keyframes pooldrift2 { to { transform: translate3d(-9vw, 6vw, 0) scale(0.92); } }
@keyframes pooldrift3 { to { transform: translate3d(8vw, -6vw, 0) scale(1.12); } }

.flow-mesh { position: absolute; inset: -45%; will-change: transform;
  background:
    radial-gradient(38% 38% at 20% 30%, rgba(142,199,232,0.7) 0%, rgba(142,199,232,0) 60%),
    radial-gradient(34% 34% at 80% 20%, rgba(233,207,133,0.5) 0%, rgba(233,207,133,0) 60%),
    radial-gradient(44% 44% at 70% 74%, rgba(201,189,241,0.6) 0%, rgba(201,189,241,0) 62%),
    radial-gradient(38% 38% at 28% 80%, rgba(239,174,173,0.6) 0%, rgba(239,174,173,0) 60%);
  animation: meshflow 18s ease-in-out infinite alternate; }
@keyframes meshflow {
  0%   { transform: translate3d(-8%, -5%, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(7%, 5%, 0) rotate(8deg) scale(1.2); }
  100% { transform: translate3d(5%, -7%, 0) rotate(-6deg) scale(1.12); }
}

.blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.6; will-change: transform; }
.hero.bg-paused .blob, .hero.bg-paused .flow-mesh, .hero.bg-paused .glow-pool { animation-play-state: paused; }
.blob.b1 { width: 56vw; height: 56vw; left: -8vw; top: -14vw; background: radial-gradient(circle, var(--pastel-blue) 0%, rgba(142,199,232,0) 70%); animation: drift1 24s ease-in-out infinite alternate; }
.blob.b2 { width: 48vw; height: 48vw; right: -6vw; top: -6vw; background: radial-gradient(circle, var(--pastel-gold) 0%, rgba(233,207,133,0) 70%); animation: drift2 31s ease-in-out infinite alternate; }
.blob.b3 { width: 50vw; height: 50vw; left: 26vw; top: 16vw; background: radial-gradient(circle, var(--pastel-rose) 0%, rgba(239,174,173,0) 70%); animation: drift3 27s ease-in-out infinite alternate; }
.blob.b4 { width: 46vw; height: 46vw; right: 16vw; top: 30vw; background: radial-gradient(circle, var(--pastel-lavender) 0%, rgba(201,189,241,0) 70%); animation: drift1 35s ease-in-out infinite alternate-reverse; }
.blob.b5 { width: 40vw; height: 40vw; left: 40vw; top: -10vw; background: radial-gradient(circle, var(--pastel-mint) 0%, rgba(154,215,201,0) 70%); animation: drift2 38s ease-in-out infinite alternate; opacity: 0.45; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(7vw, 5vw) scale(1.18); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.06); } to { transform: translate(-8vw, 5vw) scale(0.88); } }
@keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw, -7vw) scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .blob, .flow-mesh, .glow-pool { animation: none; } }

/* ---------- Sections (lugn rytm, mycket luft) ---------- */
section { padding: 7.5rem 0; }
.section-head { max-width: 62ch; margin-bottom: 3rem; }
.alt-paper { background: var(--paper); }
.section-alt { background: var(--page-bg); }

/* ---------- Legacy-block (används av undersidor) ---------- */
.section-tint-rose { background:
  radial-gradient(80% 60% at 80% 0%, var(--header-rose-bottom) 0%, rgba(255,240,236,0) 70%),
  linear-gradient(180deg, #fff 0%, var(--surface-alt) 100%); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem 1.8rem; box-shadow: var(--shadow-card); }
.card .ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 1.1rem;
  background: linear-gradient(160deg, var(--pastel-blue), var(--blue)); color: #fff; font-size: 1.3rem; }
.card .ico svg { width: 24px; height: 24px; }
.card.rose .ico { background: linear-gradient(160deg, var(--pastel-rose), var(--rose)); }
.card.mint .ico { background: linear-gradient(160deg, var(--pastel-mint), #4FA98E); }
.card.gold .ico { background: linear-gradient(160deg, var(--pastel-gold), #d9b85f); }
.card h3 { margin-bottom: 0.4rem; }
.card p { font-size: 0.98rem; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1.6rem 1.4rem; box-shadow: var(--shadow-soft); position: relative; }
.step::before { counter-increment: step; content: counter(step); font-family: var(--serif); font-size: 1.1rem;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--blue), var(--blue-dark)); margin-bottom: 0.9rem; }
.statement { text-align: center; }
.statement h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.statement p { font-size: 1.15rem; max-width: 56ch; margin-left: auto; margin-right: auto; }
.values { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
.value { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.55rem 1.3rem; font-size: 0.95rem; box-shadow: var(--shadow-soft); color: var(--text); }
.value b { color: var(--blue-dark); }
.pills { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.pill { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.55rem 1.1rem;
  font-size: 0.92rem; color: var(--text); box-shadow: var(--shadow-soft); }
.pill b { color: var(--blue-dark); }

/* ---------- Footer ---------- */
footer { background: #0B0D10; color: #cfd2da; padding: 3.5rem 0 2.2rem;
  border-top: 1px solid rgba(255,255,255,0.06); }
footer .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.4rem; }
footer .brand { color: #fff; display: block; margin-bottom: 0.8rem; }
footer h4 { color: #fff; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.9rem; }
footer a, footer p { color: #cfd2da; font-size: 0.95rem; display: block; margin-bottom: 0.5rem; }
footer a:hover { color: #fff; }
footer .legal { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.4rem; font-size: 0.85rem; color: #9a9ead; }
footer .legal a { display: inline; margin-bottom: 0; }
.placeholder { color: var(--blue-home); font-style: italic; }

/* ---------- Responsive (bas) ---------- */
@media (max-width: 860px) {
  .features, .steps { grid-template-columns: 1fr 1fr; }
  footer .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-burger { display: block; }
  .nav-links { position: absolute; top: 66px; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-soft);
    padding: 0.5rem 24px 1.1rem; }
  .nav-open .nav-links { display: flex; }
  .nav-links a { padding: 0.7rem 0; font-size: 1.05rem; }
  .nav-links .btn { margin-top: 0.5rem; align-self: flex-start; padding: 0.7rem 1.5rem; }
}
@media (max-width: 560px) {
  .features, .steps, footer .foot-grid { grid-template-columns: 1fr; }
  section { padding: 5rem 0; }
  .hero { padding: 5rem 0 7rem; }
  .container { padding-left: 20px; padding-right: 20px; }
  .hero-center .hero-inner { width: 100%; max-width: calc(100vw - 40px); }
  .hero-center .hero-wordmark { font-size: clamp(2.55rem, 15vw, 3.45rem); letter-spacing: 0.045em; }
  .hero-center .sub { max-width: 28ch; }
  .hero-center .cta-row { width: 100%; gap: 0.7rem; }
  .hero-center .cta-row .btn { width: min(100%, 250px); padding-left: 1.15rem; padding-right: 1.15rem; }
  .hero-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 292px); margin-left: auto; margin-right: auto; }
  .hero-chips a { min-width: 0; padding-left: 0.75rem; padding-right: 0.75rem; text-align: center; white-space: nowrap; }
}

/* ---------- Legal/content pages ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 3.5rem 0; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 0.4rem; }
.doc .meta { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 2rem; }
.doc h2 { font-size: 1.4rem; margin-top: 2.4rem; }
.doc p, .doc li { color: var(--text); }
.doc .note { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; color: var(--text-soft); font-size: 0.95rem; margin-bottom: 2rem; }
.doc table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: 0.95rem; }
.doc th, .doc td { text-align: left; padding: 0.55rem 0.8rem; border: 1px solid var(--border); vertical-align: top; }
.doc th { background: var(--surface-alt); font-family: var(--sans); font-weight: 600; }
/* Mobil: tabeller får inte spilla utanför skärmen (cookies-tabellen var 432px på 392px) */
@media (max-width: 560px) {
  .doc table { font-size: 0.8rem; }
  .doc th, .doc td { padding: 0.4rem 0.45rem; overflow-wrap: break-word; hyphens: auto; }
}
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.35rem; color: var(--text); }
.doc .ph { font-style: italic; color: var(--blue-dark); background: #eef6fb; padding: 0 0.25em; border-radius: 4px; }
.doc .contactbox { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0.6rem 0 1.4rem; }
.subnav { border-bottom: 1px solid var(--border); background: #fff; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; }
.faq details { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 0; margin-bottom: 0.7rem; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.4rem; font-weight: 600; color: var(--text);
  position: relative; padding-right: 3rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; color: var(--blue-dark); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 1.4rem 1.2rem; margin: 0; color: var(--text-soft); }

/* ---------- Scroll-reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.8,.28,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.reveal-stagger:not(.in) > * { opacity: 0; }
.reveal-stagger.in > * { animation: riseup 0.7s cubic-bezier(.22,.8,.28,1) backwards; }
.reveal-stagger.in > *:nth-child(1) { animation-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { animation-delay: 0.15s; }
.reveal-stagger.in > *:nth-child(3) { animation-delay: 0.25s; }
.reveal-stagger.in > *:nth-child(4) { animation-delay: 0.35s; }
.reveal-stagger.in > *:nth-child(5) { animation-delay: 0.45s; }
.reveal-stagger.in > *:nth-child(6) { animation-delay: 0.55s; }
.reveal-stagger.in > *:nth-child(7) { animation-delay: 0.65s; }
@keyframes riseup { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger:not(.in) > * { opacity: 1; }
  .reveal-stagger.in > * { animation: none; }
}

/* ---------- Print ---------- */
@media print {
  .nav, footer, .skip-link, .nav-burger, .note, .intro { display: none; }
  body { background: #fff; }
  .doc { max-width: 100%; padding: 0; }
  .doc p, .doc li, .doc h1, .doc h2 { color: #000; }
  a { color: #000; text-decoration: underline; }
  .ph { background: none; }
}

/* ====================================================================
   KUBVÄNDNINGEN — introt och sidan rör sig som EN kropp.
   ==================================================================== */
.page { position: relative; z-index: 1; background: var(--bg-bottom); }
body.has-intro { background: #E9C6C0; }
body.has-intro:not(.page-arrived) { overflow: hidden; }
body.has-intro .page { will-change: transform;
  transition: transform var(--flip-dur) var(--flip-ease); }
body.intro-active .page { transform: translate3d(0, 100vh, 0); }
@supports (height: 100lvh) {
  body.intro-active .page { transform: translate3d(0, 100lvh, 0); }
}
/* Mjuk vändning: pausa tunga animationer tills sidan landat */
body.has-intro .hero-bg span, body.has-intro .hero-sheen::before,
body.has-intro .loop-comet, body.has-intro .loop-dash, body.has-intro .loop-chip { animation-play-state: paused !important; }
body.has-intro .nav { backdrop-filter: none; }
.intro.intro-leaving .intro-aurora { animation-play-state: paused; }

/* ====================================================================
   Filmisk intro-overlay (en gång per session) — AIMOREs färger, ej svart
   ==================================================================== */
.intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(165deg, #2E5F77 0%, #4E97B4 42%, #8FC2DD 72%, #E9C6C0 100%);
  transition: transform var(--flip-dur) var(--flip-ease); will-change: transform; }
.intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; background: #E9C6C0; }
.intro-aurora { position: absolute; inset: -35%; mix-blend-mode: screen; pointer-events: none;
  filter: blur(30px); will-change: transform, opacity;
  background:
    radial-gradient(34% 30% at 24% 30%, rgba(201,189,241,0.55) 0%, rgba(201,189,241,0) 70%),
    radial-gradient(36% 32% at 76% 26%, rgba(233,207,133,0.5) 0%, rgba(233,207,133,0) 70%),
    radial-gradient(40% 34% at 64% 74%, rgba(239,174,173,0.55) 0%, rgba(239,174,173,0) 70%),
    radial-gradient(30% 28% at 34% 78%, rgba(142,199,232,0.5) 0%, rgba(142,199,232,0) 70%);
  animation: introglow 13s ease-in-out infinite alternate; }
@keyframes introglow {
  from { transform: translate3d(-5%, -3%, 0) scale(1); opacity: 0.6; }
  to   { transform: translate3d(5%, 4%, 0) scale(1.16); opacity: 0.85; }
}
.intro-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(115% 90% at 50% 44%, rgba(255,255,255,0) 52%, rgba(20,52,72,0.42) 100%); }
.intro-horizon { position: absolute; left: 6%; right: 6%; top: 57%; height: 130px; pointer-events: none; z-index: 1;
  background: radial-gradient(55% 100% at 50% 0%, rgba(255,212,164,0.5) 0%, rgba(255,212,164,0) 70%); filter: blur(18px); }
.intro-center { position: relative; z-index: 2; text-align: center; padding: 0 24px;
  animation: intropush 3.4s cubic-bezier(.25,.55,.3,1) 0.1s both; }
@keyframes intropush { from { transform: scale(0.985); } to { transform: scale(1.05); } }
.intro-word { font-family: var(--serif); font-weight: 600; color: #fff; margin: 0;
  font-size: clamp(3rem, 11vw, 6.6rem); letter-spacing: 0.02em; display: flex; justify-content: center; gap: 0.02em;
  text-shadow: 0 3px 40px rgba(15,45,65,0.5);
  animation: introtrack 2.4s cubic-bezier(.22,.8,.28,1) 0.25s both; }
@keyframes introtrack { from { letter-spacing: 0.12em; } to { letter-spacing: 0.02em; } }
.intro-word span { display: inline-block; opacity: 0; transform: translateY(0.5em) scale(0.9); filter: blur(8px);
  animation: introletter 0.85s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: calc(0.18s * var(--i) + 0.25s); }
.intro-rule { display: block; width: 0; height: 2px; background: rgba(255,255,255,0.85); margin: 1.1rem auto 0;
  animation: introrule 0.9s cubic-bezier(.22,.8,.28,1) 1.5s forwards; }
.intro-tagline { color: rgba(255,255,255,0.95); font-family: var(--serif); font-size: clamp(1rem, 2.4vw, 1.35rem);
  letter-spacing: 0.04em; margin: 1rem 0 0; opacity: 0; animation: fadeup 0.9s ease 1.75s forwards;
  text-shadow: 0 2px 18px rgba(15,45,65,0.5); }
.intro-sheen { position: absolute; inset: -30% -14%; overflow: hidden; pointer-events: none;
  /* Mjuk mask: glinten kan ALDRIG visa raka kanter ("blänkande box") */
  -webkit-mask-image: radial-gradient(58% 52% at 50% 50%, #000 32%, rgba(0,0,0,0) 72%);
          mask-image: radial-gradient(58% 52% at 50% 50%, #000 32%, rgba(0,0,0,0) 72%); }
.intro-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
  transform: skewX(-18deg) translateX(-220%); mix-blend-mode: screen;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
  filter: blur(9px); animation: sheensweep 1.15s ease-in-out 2.05s forwards; }
@keyframes sheensweep { to { transform: skewX(-18deg) translateX(640%); } }
.intro.intro-leaving { transform: translateY(-100%); }
@keyframes introletter { to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes introrule { to { width: 92px; } }
@keyframes fadeup { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .intro-aurora { animation: none; }
  .intro-word, .intro-word span { opacity: 1; transform: none; filter: none; animation: none; }
  .intro-center { animation: none; }
  .intro-sheen { display: none; }
  .intro-rule { width: 92px; animation: none; }
  .intro-tagline { opacity: 1; animation: none; }
  .intro { transition: opacity 0.4s ease; }
  .intro.intro-leaving { transform: none; opacity: 0; }
  body.intro-active .page { transform: none; }
  body.has-intro .page { transition: none; }
}

/* ====================================================================
   MANIFEST — vitt, tyst, enormt. Färg endast i gradientorden.
   ==================================================================== */
.manifest { text-align: center; padding: 9rem 0; background: #fff; }
.manifest h2 { font-size: clamp(2.5rem, 6vw, 4.3rem); letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto 1.6rem; }
.manifest .lead { max-width: 54ch; margin: 0 auto; }

/* ====================================================================
   MANIFEST-BERÄTTELSEN — pinnad scroll-story i tre satser
   ==================================================================== */
.story { padding: 0; }
.story-pin { display: grid; place-content: center; text-align: center; min-height: 70vh; padding: 6rem 24px; }
.story-slides { position: relative; }
.story-slide { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto 1.2rem; }
.story-lead { max-width: 50ch; margin: 1.6rem auto 0; }
/* Pinnad berättelse på ALLA skärmstorlekar (Jesper 2026-06-12: mobilen ska få
   samma upplevelse som datorn — inte staplad textvägg). Layouten gäller alltid
   (utom reduced motion); själva växlingen drivs av scroll-driven animations där
   det stöds, annars av JS-fallbacken i index.html (äldre iOS m.fl.). */
@media (prefers-reduced-motion: no-preference) {
  .story { height: 280vh; view-timeline: --story block; }
  .story-pin { position: sticky; top: 0; height: 100vh; height: 100svh;
    min-height: 0; padding: 0 24px; row-gap: 1.4rem; }
  .story-slides { display: grid; min-height: calc(clamp(2.4rem, 6vw, 4.4rem) * 3.4); place-items: center;
    width: min(92vw, 1060px); justify-self: center; }
  .story-slide { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0 auto;
    opacity: 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story-slide { animation: storyslide linear both; animation-timeline: --story; }
    .story-slide.ss1 { animation-range: cover 8% cover 40%; }
    .story-slide.ss2 { animation-range: cover 34% cover 64%; }
    .story-slide.ss3 { animation-range: cover 58% cover 90%; }
  }
}
@keyframes storyslide {
  0% { opacity: 0; transform: translateY(46px) scale(0.96); }
  22%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-46px) scale(0.97); }
}

/* ====================================================================
   PROVA KÄNSLAN — interaktiv smakbit med reglage + levande prisma
   ==================================================================== */
.tryit { padding: 8rem 0; }
.try-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; }
.try-row { display: block; margin-bottom: 2rem; }
.try-ends { display: flex; justify-content: space-between; margin-bottom: 0.6rem; }
.try-ends em { font-style: normal; font-size: 0.88rem; font-weight: 600; color: var(--text-soft); }
.try-row input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--blue-dark), var(--coral)) 0 0 / var(--fill, 50%) 100% no-repeat, #E8E6E1; }
.try-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; border: 1px solid var(--hairline);
  box-shadow: 0 4px 14px rgba(27,27,31,0.25), 0 0 0 5px rgba(110,175,203,0.15); transition: box-shadow 0.2s ease; }
.try-row input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 4px 14px rgba(27,27,31,0.3), 0 0 0 8px rgba(110,175,203,0.2); }
.try-row input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 1px solid var(--hairline); box-shadow: 0 4px 14px rgba(27,27,31,0.25); }
.try-note { font-size: 0.85rem; color: #9b9a93; margin: 0.6rem 0 0; }
.try-stage { text-align: center; }
.try-tag { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: #A6A49C; margin: 0 0 1.2rem; }
.prisma { position: relative; width: 230px; height: 230px; margin: 0 auto 1.6rem;
  transform: scale(var(--size, 1)); transition: transform 0.55s cubic-bezier(.22,.8,.28,1); }
/* Formlagret: proportion + lutning ligger HÄR (mjuk transition vid drag).
   Andningen ligger på kärnan. Skälet till uppdelningen: variabler som byts
   inuti pågående keyframes interpoleras INTE → det hackade vid dragning. */
.pr-form { position: absolute; inset: 18px; display: block;
  transform: scale(var(--sx, 1), var(--sy, 1)) rotate(var(--lean, 0deg));
  transition: transform 0.5s cubic-bezier(.22,.8,.28,1); will-change: transform; }
.pr-core { position: absolute; inset: 0;
  border-radius: var(--shape, 46% 54% 58% 42% / 52% 46% 54% 48%);
  background:
    radial-gradient(60% 60% at 32% 28%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg,
      color-mix(in oklch, #5FA8C7 calc((1 - var(--mix, 0.4)) * 100%), #F0907E calc(var(--mix, 0.4) * 100%)) 0%,
      color-mix(in oklch, #2F7691 calc((1 - var(--mix, 0.4)) * 100%), #DB6F65 calc(var(--mix, 0.4) * 100%)) 100%);
  box-shadow: 0 30px 70px -30px rgba(27,27,31,0.45), inset 0 2px 6px rgba(255,255,255,0.5);
  transition: border-radius 0.45s cubic-bezier(.22,.8,.28,1); will-change: border-radius, transform;
  animation: prismabreathe 5.5s ease-in-out infinite alternate; }
/* Liten, fast andning (amp uppdateras först när man SLÄPPER reglaget) */
@keyframes prismabreathe {
  from { transform: scale(calc(0.988 - 0.03 * var(--amp, 0.3)))
         rotate(calc(-1deg - 2deg * var(--amp, 0.3))); }
  to   { transform: scale(calc(1.012 + 0.035 * var(--amp, 0.3)))
         rotate(calc(1deg + 2.5deg * var(--amp, 0.3))); }
}
.pr-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(27,27,31,0.22);
  animation: loopspin var(--spin, 12s) linear infinite; }
.try-read { font-family: var(--serif); font-size: 1.18rem; color: var(--text); max-width: 30ch; margin: 0 auto; min-height: 3em; }

/* ====================================================================
   SÅ TÄNKER VI — horisontellt principgalleri med scroll-snap
   ==================================================================== */
.principles { padding: 8rem 0 8.5rem; }
.prin-rail { display: flex; gap: 1.3rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.5rem max(24px, calc((100vw - 1120px) / 2 + 24px)) 1.6rem;
  scroll-padding-inline: max(24px, calc((100vw - 1120px) / 2 + 24px));
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.prin-rail::-webkit-scrollbar { display: none; }
.prin { flex: 0 0 min(360px, 82vw); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--hairline); border-radius: 22px; padding: 2.2rem 2rem 2rem;
  box-shadow: 0 24px 50px -34px rgba(27,27,31,0.3), inset 0 1.5px 0 rgba(255,255,255,1); }
.prin-num { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1; margin-bottom: 1.1rem;
  background: linear-gradient(120deg, var(--blue-dark), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.prin h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.prin p { font-size: 0.97rem; margin: 0; }

/* Progresslinje under galleriet — fylls i takt med att rälsen rullas */
.prin-progress { display: none; width: min(220px, 40%); height: 2px; border-radius: 2px;
  margin: 0.6rem auto 0; overflow: hidden; background: rgba(27,27,31,0.12); }
.prin-progress i { display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-dark), var(--coral));
  transform: scaleX(0); transform-origin: left center; }
@supports (animation-timeline: scroll()) {
  .principles { timeline-scope: --rail; }
  .prin-rail { scroll-timeline: --rail inline; }
  .prin-progress { display: block; }
  .prin-progress i { animation: railfill linear both; animation-timeline: --rail; }
}
@keyframes railfill { from { transform: scaleX(0.06); } to { transform: scaleX(1); } }

/* ====================================================================
   VÅRT LÖFTE — orden bläcks in i scrolltakt (Apples "text massage")
   ==================================================================== */
.letter { padding: 9rem 0;
  background: radial-gradient(42% 55% at 92% 80%, rgba(224,138,119,0.08) 0%, rgba(224,138,119,0) 70%); }
.letter-text { font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.75rem, 3.7vw, 2.8rem); line-height: 1.32; letter-spacing: -0.012em;
  color: var(--text); max-width: 32ch; margin: 0; }
.letter-text span { opacity: clamp(0.13, calc(var(--prog, 0) - var(--i, 0)), 1);
  transition: opacity 0.18s linear; }
@media (prefers-reduced-motion: reduce) { .letter-text span { opacity: 1; transition: none; } }

/* ====================================================================
   DET VI STÅR FÖR — två drivande rader av värdeord (marquee)
   ==================================================================== */
.mq { position: relative; overflow: hidden; padding: 3rem 0 4.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
/* (chip-seten dubbleras av JS tills varje loophalva täcker viewporten) */
.mq-row { display: flex; gap: 0.9rem; width: max-content; padding: 0.45rem 0;
  animation: mqdrift 46s linear infinite; }
.mq-row.r2 { animation-duration: 58s; animation-direction: reverse; }
.mq:hover .mq-row { animation-play-state: paused; }
@keyframes mqdrift { to { transform: translate3d(-50%, 0, 0); } }
.mq-chip { white-space: nowrap; padding: 0.72rem 1.45rem; border-radius: 999px;
  border: 1px solid var(--hairline); background: #fff; font-weight: 600; font-size: 0.95rem;
  color: var(--text-soft); box-shadow: 0 12px 26px -20px rgba(27,27,31,0.35), inset 0 1px 0 #fff; }
.mq-chip.hot { color: transparent; background-image: linear-gradient(100deg, var(--blue-dark), var(--coral));
  -webkit-background-clip: text; background-clip: text; background-color: #fff; border-color: rgba(110,175,203,0.35); }
.mq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .mq { mask-image: none; -webkit-mask-image: none; }
  .mq-row { animation: none; width: auto; flex-wrap: wrap; justify-content: center;
    padding-left: 24px; padding-right: 24px; }
}
/* Mobil: färre chips syns samtidigt — låt raderna driva ~25 % snabbare (Jesper 2026-06-12) */
@media (max-width: 700px) {
  .mq-row { animation-duration: 34s; }
  .mq-row.r2 { animation-duration: 44s; }
}

/* Touch-tilt: vertikal svepning scrollar sidan som vanligt, sidledsdrag lutar objektet */
[data-tilt] { touch-action: pan-y; }

/* Resan: linjen ritas EN gång när sektionen landar och stannar sedan kvar
   (Jesper 2026-06-11: ingen tillbakaritning vid scroll upp — kulan ska ha mark). */

/* Prova känslan: ljus premiumpanel (vitt glas, tonade ljuspooler i hörnen) */
.try-grid { position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--hairline); border-radius: 30px; padding: 4rem;
  box-shadow: 0 44px 90px -58px rgba(27,27,31,0.5), inset 0 1.5px 0 #fff; }
.try-grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(42% 52% at 90% 6%, rgba(224,138,119,0.1) 0%, rgba(224,138,119,0) 70%),
  radial-gradient(48% 58% at 4% 98%, rgba(110,175,203,0.1) 0%, rgba(110,175,203,0) 70%); }
.try-controls, .try-stage { position: relative; }
.pr-core { box-shadow:
  0 14px var(--glowr, 64px) -14px color-mix(in oklch,
    rgba(95,168,199,0.55) calc((1 - var(--mix, 0.4)) * 100%),
    rgba(240,144,126,0.55) calc(var(--mix, 0.4) * 100%)),
  0 30px 70px -30px rgba(27,27,31,0.4), inset 0 2px 6px rgba(255,255,255,0.55); }

/* Stilla färgandning på de ljusa kapitlen — kantlösa radialer, aldrig kanter */
.principles { background: radial-gradient(46% 50% at 8% 6%, rgba(110,175,203,0.07) 0%, rgba(110,175,203,0) 70%); }
.bignum { background: radial-gradient(44% 62% at 86% 16%, rgba(233,191,110,0.12) 0%, rgba(233,191,110,0) 70%); }

/* ====================================================================
   I SIFFROR — produktlöftet som tre tal (Apples "by the numbers")
   ==================================================================== */
.bignum { padding: 6rem 0 7rem; }
.bignum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; text-align: center; }
.bn-val { display: block; font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: clamp(3.6rem, 8vw, 6.2rem); letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--blue-dark), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.7rem; }
.bn-val i { font-style: normal; font-variant-numeric: tabular-nums; }
.bn-lab { display: block; font-size: 0.97rem; color: var(--text-soft); max-width: 24ch; margin: 0 auto; }
.bn { position: relative; padding-top: 1.6rem; }
.bn::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 44px; height: 1.5px; background: linear-gradient(90deg, rgba(110,175,203,0), rgba(110,175,203,0.7), rgba(224,138,119,0)); }

@media (max-width: 980px) {
  .try-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 700px) {
  .bignum-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 560px) {
  .tryit, .principles { padding: 5.5rem 0; }
  .prisma { width: 190px; height: 190px; }
  .bignum { padding: 4.5rem 0 5rem; }
}

/* ====================================================================
   INK-BANDET — sidans mörka kontrastmoment. Lugnt: en gradient, en visual.
   ==================================================================== */
/* Apple-svärta: nästan svart scen där loopen träder fram ur mörkret med rimglöd */
.band-ink { position: relative; overflow: hidden; padding: 8rem 0;
  background:
    radial-gradient(52% 64% at 72% 42%, rgba(62,143,170,0.2) 0%, rgba(62,143,170,0) 62%),
    radial-gradient(40% 50% at 22% 78%, rgba(224,138,119,0.1) 0%, rgba(224,138,119,0) 60%),
    linear-gradient(180deg, #0B1116 0%, #0D151C 55%, #0A0F14 100%); }
.band-ink .container { position: relative; z-index: 2; }
/* Fint filmkorn — tar bort banding och ger djup (à la Apples mörka scener) */
.band-ink::after, .cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Levande nebulosa — mjuka färgmoln som driver genom mörkret (helt kantlösa,
   placerade väl innanför sektionen så inget kan klippas) */
.ink-nebula { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.ink-nebula.n1 { width: 46%; height: 52%; left: 6%; top: 16%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110,175,203,0.22) 0%, rgba(110,175,203,0) 70%);
  animation: nebdrift1 19s ease-in-out infinite alternate; }
.ink-nebula.n2 { width: 40%; height: 46%; right: 8%; bottom: 14%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240,144,126,0.16) 0%, rgba(240,144,126,0) 70%);
  animation: nebdrift2 24s ease-in-out infinite alternate; }
@keyframes nebdrift1 { to { transform: translate3d(9%, 7%, 0) scale(1.18); } }
@keyframes nebdrift2 { to { transform: translate3d(-8%, -6%, 0) scale(1.12); } }
.band-ink .eyebrow { color: #7FB6D4; }
.band-ink h2 { color: #fff; font-size: clamp(2.3rem, 5.2vw, 3.8rem); }
.band-ink h3 { color: #fff; }
.band-ink p { color: rgba(228,240,248,0.82); }
.diff-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; margin-bottom: 5rem; }

/* Loopen — avskalad: tunn ring, pärlband, komet, numrerade steg */
.loop-wrap { position: relative; width: min(380px, 84vw); aspect-ratio: 1 / 1; margin: 0 auto; }
.loop-svg { width: 100%; height: 100%; display: block; overflow: visible;
  filter: drop-shadow(0 0 16px rgba(143,200,232,0.22)); }
.loop-wrap { will-change: transform; }
.loop-track { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 1.5; }
.loop-dash { fill: none; stroke: url(#loopgrad); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1 14;
  animation: loopspin 30s linear infinite; transform-origin: 50% 50%; }
@keyframes loopspin { to { transform: rotate(360deg); } }
.loop-nodes .ln { filter: drop-shadow(0 0 6px rgba(255,255,255,0.7)); }
.ln1 { fill: #CDE9FA; } .ln2 { fill: #F6C9C0; } .ln3 { fill: #F2DFAC; }
.loop-comet { position: absolute; inset: 0; pointer-events: none; animation: cometspin 9s linear infinite; will-change: transform; }
@keyframes cometspin { to { transform: rotate(360deg); } }
.loop-comet i { position: absolute; left: 50%; top: 10.6%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 12px 3px rgba(255,255,255,0.7), 0 0 26px 9px rgba(142,199,232,0.4); }
.loop-comet i::before { content: ""; position: absolute; right: 92%; top: 50%; width: 48px; height: 7px;
  transform: translateY(-50%); border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6)); filter: blur(1px); }
.loop-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.loop-core .lc-mark { display: block; font-family: var(--serif); letter-spacing: 0.18em; color: #fff; font-size: 1.1rem; }
.loop-core .lc-sub { display: block; color: rgba(228,240,248,0.6); font-size: 0.78rem; letter-spacing: 0.06em; margin-top: 0.15rem; }
.loop-chip { position: absolute; display: inline-flex; align-items: center; padding: 0.45rem 0.95rem 0.45rem 0.5rem;
  border-radius: 999px; white-space: nowrap;
  background: rgba(30,58,80,0.75); border: 1px solid rgba(255,255,255,0.22); color: #fff;
  font-size: 0.88rem; font-weight: 600;
  animation: chippulse 9s ease-in-out infinite; }
.loop-chip b { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 0.5rem;
  border-radius: 50%; font-size: 0.66rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); }
.loop-chip.lc1 { top: -8px; left: 50%; transform: translateX(-50%); }
.loop-chip.lc2 { bottom: 13%; right: -4%; animation-delay: 3s; }
.loop-chip.lc3 { bottom: 13%; left: -6%; animation-delay: 6s; }
@keyframes chippulse {
  0%, 12%, 100% { background: rgba(255,255,255,0.08); }
  4%, 8% { background: rgba(255,255,255,0.22); box-shadow: 0 0 22px rgba(255,255,255,0.3); }
}
.loop-caption { text-align: center; margin: 1.8rem auto 0; max-width: 36ch;
  color: rgba(228,240,248,0.72); font-size: 0.95rem; }

/* Jämförelsen — Apple-chipkort: mörka paneler med tunna gradientramar */
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cmp { position: relative; border-radius: 18px; padding: 2rem 1.8rem;
  background: rgba(255,255,255,0.04); border: 1px solid transparent; background-clip: padding-box; }
.cmp::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.cmp-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(228,240,248,0.55); margin-bottom: 1.1rem; }
.cmp h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.cmp p { margin: 0; font-size: 0.97rem; color: rgba(228,240,248,0.72); }
.cmp-aimore { background: rgba(255,255,255,0.07); box-shadow: 0 0 44px -12px rgba(110,175,203,0.35); }
.cmp-aimore::before { background: linear-gradient(140deg, #7FC1E9, rgba(240,144,126,0.8) 55%, #EFD49B); }
.cmp-aimore .cmp-tag { color: #EFD9A8; }

/* ====================================================================
   SHOWCASES — vit/papper, ETT objekt per scen, EN accent. Stora rubriker.
   ==================================================================== */
.showcase { padding: 8rem 0; }
.show-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 5rem; align-items: center; }
.showcase.flip .show-copy { order: 2; }
.showcase.flip .show-stage { order: 1; }
.show-copy h2 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); margin-bottom: 1.1rem; }
.show-copy .lead { margin-bottom: 1.8rem; }
.show-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.show-points li { position: relative; padding-left: 1.6rem; color: var(--text); font-size: 1rem; }
.show-points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 16px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--blue-dark), var(--coral)); }
.show-stage { display: flex; justify-content: center; min-width: 0; }
.scene { position: relative; width: min(420px, 100%); aspect-ratio: 10 / 9; display: grid; place-items: center;
  animation: floaty 8s ease-in-out infinite alternate; }
@keyframes floaty { from { transform: translateY(5px); } to { transform: translateY(-9px); } }

/* 3D-tilt + färghalo bakom glasobjekten (halo = tight, aldrig nära sektionskanter) */
.tiltwrap { position: relative; transform-style: preserve-3d; will-change: transform; }
/* Wrappern får INTE shrink-wrappa procentbreda barn (då kollapsar staplarna) */
.scene-insight .tiltwrap { width: min(380px, 96%); }
.scene-insight .ins-card { width: 100%; }
.tiltwrap::before { content: ""; position: absolute; inset: -64px; border-radius: 50%;
  z-index: -1; pointer-events: none;
  animation: halobreathe 7s ease-in-out infinite alternate; }
.halo-rose::before { background: radial-gradient(50% 50% at 50% 50%, rgba(240,144,126,0.4) 0%, rgba(239,174,173,0.18) 45%, rgba(239,174,173,0) 72%); }
.halo-blue::before { background: radial-gradient(50% 50% at 50% 50%, rgba(110,175,203,0.42) 0%, rgba(142,199,232,0.18) 45%, rgba(142,199,232,0) 72%); }
@keyframes halobreathe { from { opacity: 0.75; transform: scale(0.96); } to { opacity: 1; transform: scale(1.06); } }

/* Scen 1 — ETT liquid glass-kort, en kompatibilitetsring */
.pickcard { position: relative; width: 252px; height: 332px; border-radius: 26px;
  background: linear-gradient(168deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.62) 100%);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.95); padding: 14px;
  box-shadow: 0 36px 70px -38px rgba(27,27,31,0.35), inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(27,27,31,0.05), 0 2px 6px rgba(27,27,31,0.04); }
.pickcard .pc-photo { display: block; position: relative; overflow: hidden; height: 64%; border-radius: 16px;
  background:
    radial-gradient(90% 60% at 30% 12%, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(64% 46% at 76% 28%, rgba(242,176,150,0.4) 0%, rgba(242,176,150,0) 70%),
    radial-gradient(120% 80% at 68% 108%, rgba(58,99,126,0.34) 0%, rgba(58,99,126,0) 58%),
    linear-gradient(165deg, #BDDAED 0%, #D3C9E8 48%, #EFC8B9 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), inset 0 -28px 44px -30px rgba(40,70,92,0.4); }
/* Drömskt suddig porträttsilhuett — tydligt abstrakt, aldrig ett riktigt ansikte */
.pc-fig { position: absolute; inset: 0; display: block; pointer-events: none;
  background:
    radial-gradient(42% 34% at 50% 30%, rgba(255,236,218,0.55) 0%, rgba(255,236,218,0) 70%),
    radial-gradient(30% 24% at 50% 33%, rgba(50,76,96,0.6) 0%, rgba(50,76,96,0.46) 56%, rgba(50,76,96,0) 76%),
    radial-gradient(76% 50% at 50% 104%, rgba(50,76,96,0.62) 0%, rgba(50,76,96,0.4) 50%, rgba(50,76,96,0) 78%);
  filter: blur(7px); }
/* Långsam ljussvepning över fotot — objektglans, diskret */
.pickcard .pc-photo::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 34%;
  transform: skewX(-18deg) translateX(-170%);
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  animation: photosheen 7s ease-in-out 2s infinite; }
@keyframes photosheen { 0% { transform: skewX(-18deg) translateX(-170%); } 22%, 100% { transform: skewX(-18deg) translateX(620%); } }
@media (prefers-reduced-motion: reduce) { .pickcard .pc-photo::after { animation: none; } }
.pickcard .pc-line { display: block; height: 11px; border-radius: 6px; background: #F1F0ED; margin: 14px 6px 0; }
.pickcard .pc-line.w60 { width: 60%; }
.pickcard .pc-line.w40 { width: 40%; }
.showcase.reveal .pickcard { transition: transform 0.9s cubic-bezier(.22,.8,.28,1); }
.showcase.reveal:not(.in) .pickcard { transform: translateY(26px); }
.pc-ring { position: absolute; top: -18px; right: -18px; width: 76px; height: 76px; border-radius: 50%;
  background: conic-gradient(var(--blue-dark) calc(var(--p, 96) * 1%), #EFEEE9 0);
  display: grid; place-items: center; box-shadow: 0 14px 30px -14px rgba(27,27,31,0.3); }
.pc-ring::before { content: ""; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.pc-ring i { position: relative; z-index: 1; font-style: normal; font-weight: 600; font-size: 0.92rem;
  color: var(--text); font-family: var(--sans); }
@property --p { syntax: "<number>"; initial-value: 96; inherits: false; }
.showcase.in .pc-ring { animation: ringfill 1.2s cubic-bezier(.22,.8,.28,1) 0.4s backwards; }
@keyframes ringfill { from { --p: 0; } to { --p: 96; } }

/* Scen 2 — stilla ringar, en korallpunkt, en svepande puls */
.lring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(27,27,31,0.1); }
.lr1 { width: 120px; height: 120px; }
.lr2 { width: 215px; height: 215px; border-color: rgba(27,27,31,0.07); }
.lr3 { width: 310px; height: 310px; border-color: rgba(27,27,31,0.05); }
.lr-sweep { width: 120px; height: 120px; border: 1.5px solid rgba(224,138,119,0.55); }
.showcase.in .lr-sweep { animation: sweep 3.6s cubic-bezier(.2,.5,.4,1) infinite; }
@keyframes sweep {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  80%, 100% { transform: translate(-50%, -50%) scale(2.65); opacity: 0; }
}
.live-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px;
  border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 0 5px rgba(224,138,119,0.18), 0 6px 16px -4px rgba(224,138,119,0.6); }
.showcase.in .live-dot { animation: dotbreathe 3.6s ease-in-out infinite; }
@keyframes dotbreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.15); } }
.live-pill { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  background: #fff; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.5rem 1.1rem;
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  box-shadow: 0 16px 36px -22px rgba(27,27,31,0.35); }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.showcase.in .live-pill i { animation: blink 1.8s ease infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
.showcase.reveal .live-pill { opacity: 0; transform: translateX(-50%) translateY(12px);
  transition: opacity 0.6s ease 0.7s, transform 0.6s cubic-bezier(.22,.8,.28,1) 0.7s; }
.showcase.reveal.in .live-pill { opacity: 1; transform: translateX(-50%); }

/* Scen 3 — ETT liquid glass-kort, tre staplar, en färg */
.ins-card { width: min(380px, 96%); border-radius: 22px;
  background: linear-gradient(168deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.64) 100%);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.95);
  padding: 2rem 2.1rem; display: grid; gap: 1.15rem;
  box-shadow: 0 36px 70px -40px rgba(27,27,31,0.32), inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(27,27,31,0.05), 0 2px 6px rgba(27,27,31,0.04); }
.ins-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 0.9rem; align-items: center;
  font-size: 0.9rem; color: var(--text-soft); }
.ins-bar { height: 8px; border-radius: 4px; background: #F1F0ED; overflow: hidden; }
.ins-bar i { display: block; height: 100%; width: var(--w, 80%); border-radius: 4px; background: var(--blue-dark);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22,.8,.28,1) 0.35s; }
.ins-row:nth-child(2) .ins-bar i { transition-delay: 0.5s; }
.ins-row:nth-child(3) .ins-bar i { transition-delay: 0.65s; }
.showcase.in .ins-bar i { transform: scaleX(1); }
.ins-val { font-family: var(--serif); font-size: 1rem; color: var(--text); }

/* ====================================================================
   SÅ FUNKAR DET — tyst spec-grid
   ==================================================================== */
.journey-sec .section-head h2 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
/* Resan: en gradientlinje ritar sig genom fyra steg-kort */
.journey-flow { position: relative; }
.jpath { position: absolute; left: 0; right: 0; top: -30px; width: 100%; height: 110px; pointer-events: none; }
.jpath path { fill: none; stroke-width: 2; }
.jp-track { stroke: rgba(110,175,203,0.18); stroke-dasharray: 0.1 6; stroke-linecap: round; }
.jp-draw { stroke: url(#jgrad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  filter: drop-shadow(0 1px 6px rgba(110,175,203,0.35));
  transition: stroke-dashoffset 1.8s cubic-bezier(.22,.8,.28,1) 0.25s; }
.journey-sec.reveal.in .jp-draw { stroke-dashoffset: 0; }
/* Ljuspärla som glider längs resan (efter att linjen ritats) */
.jp-pearl { position: absolute; top: -30px; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(40% 40% at 35% 30%, #FFFFFF 0%, #D9EAF6 70%, #BBD9EE 100%);
  box-shadow: 0 0 12px rgba(143,200,232,1), 0 0 28px rgba(143,200,232,0.6), 0 0 46px rgba(224,138,119,0.25);
  offset-path: path('M16 88 C 190 26, 360 22, 520 56 S 850 102, 1024 40'); offset-rotate: 0deg;
  animation: pearlride 9s linear infinite alternate; transition: opacity 0.6s ease 1.8s; }
.journey-sec.reveal.in .jp-pearl { opacity: 1; }
/* Kulan rullar fram och tillbaka med backfysik i ETT obrutet flyt.
   LINJÄRT mellan tätt satta nyckelrutor (ease-in-out gav nollfart = stopp
   vid varje brytpunkt — Jespers bugg). Fartskillnad ca ±25 %:
   uppför 0–30 % långsamt → ramp → nedför 42–70 % snabbare → ramp → uppför långsamt.
   Profilen sitter på POSITIONEN, så alternate ger rätt fysik åt båda hållen. */
@keyframes pearlride {
  0%    { offset-distance: 0%;   animation-timing-function: linear; }
  33.3% { offset-distance: 30%;  animation-timing-function: linear; }
  45.1% { offset-distance: 42%;  animation-timing-function: linear; }
  68.3% { offset-distance: 70%;  animation-timing-function: linear; }
  80%   { offset-distance: 82%;  animation-timing-function: linear; }
  100%  { offset-distance: 100%; }
}
@supports not (offset-path: path("M0 0 L1 1")) { .jp-pearl { display: none; } }
.jcards { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding-top: 62px; }
.jcard { background: #fff; border: 1px solid var(--hairline); border-radius: 18px; padding: 1.6rem 1.5rem 1.5rem;
  box-shadow: 0 24px 50px -34px rgba(27,27,31,0.3), inset 0 1.5px 0 rgba(255,255,255,1);
  transition: transform 0.25s ease, box-shadow 0.25s ease; }
.jcard:hover { transform: translateY(-4px); box-shadow: 0 32px 60px -34px rgba(27,27,31,0.36), inset 0 1.5px 0 #fff; }
.jmed { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.jmed b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--serif); font-weight: 600; font-size: 0.95rem; color: var(--blue-dark); background: #fff;
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 0 0 4px #fff, inset 0 0 0 5.5px rgba(110,175,203,0.45),
    0 10px 22px -12px rgba(27,27,31,0.3); }
.jmed svg { width: 19px; height: 19px; fill: none; stroke: var(--coral); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.jcard h3 { font-size: 1.13rem; margin-bottom: 0.4rem; }
.jcard p { font-size: 0.93rem; margin: 0; }

/* ====================================================================
   FEM YTOR — tyst grid, små bläckikoner
   ==================================================================== */
.surfaces-sec .section-head h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
.quiet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.2rem 1.8rem; }
.qitem h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.qitem p { font-size: 0.88rem; margin: 0; }
.qico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--hairline); color: var(--text); margin-bottom: 0.9rem; }
.qico svg { width: 20px; height: 20px; }

/* ====================================================================
   CITAT — redaktionellt
   ==================================================================== */
.quote-sec { text-align: center; padding: 8rem 0; }
.quote-sec blockquote { font-family: var(--serif); font-size: clamp(1.9rem, 4.4vw, 3rem); color: var(--text);
  max-width: 22ch; margin: 0 auto 1rem; line-height: 1.2; letter-spacing: -0.015em; }
.quote-sec cite { color: var(--text-soft); font-style: normal; font-size: 0.95rem; }
/* legacy-alias för undersidor */
.research { text-align: center; }
.research blockquote { font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.5rem); color: var(--text);
  max-width: 22ch; margin: 0 auto 0.8rem; line-height: 1.2; }
.research cite { color: var(--text-soft); font-style: normal; font-size: 0.92rem; }

/* ====================================================================
   CTA — sidans avslutande färgton: ren skymning, inga element
   ==================================================================== */
/* Apple-svart final: nästan svart med varm soluppgångsglöd vid horisonten */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: 8.5rem 0;
  background:
    radial-gradient(60% 55% at 50% 112%, rgba(240,144,126,0.42) 0%, rgba(240,144,126,0) 62%),
    radial-gradient(42% 38% at 50% 116%, rgba(255,205,150,0.3) 0%, rgba(255,205,150,0) 65%),
    radial-gradient(50% 60% at 18% -6%, rgba(62,143,170,0.14) 0%, rgba(62,143,170,0) 60%),
    linear-gradient(180deg, #0A0F14 0%, #0C1219 60%, #100F12 100%); }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.5rem); }
.cta-band p { color: rgba(234,244,252,0.82); font-size: 1.1rem; }
.cta-band p strong { color: #fff; font-weight: 600; }
.cta-band .placeholder { color: #BFE0F2; }
.cta-band .btn-primary { box-shadow: 0 20px 55px -14px rgba(142,199,232,0.55), 0 0 44px -8px rgba(110,175,203,0.4); }
.cta-notes { display: flex; gap: 1.9rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0 0; }
.cta-notes span { position: relative; font-size: 0.85rem; color: rgba(228,240,248,0.6); }
.cta-notes span + span::before { content: ""; position: absolute; left: -1.05rem; top: 50%;
  width: 3px; height: 3px; border-radius: 50%; transform: translateY(-50%);
  background: linear-gradient(135deg, #7FC1E9, #F0907E); }

/* ====================================================================
   Scrolldriven rörelse (progressiv förbättring — Chrome/Edge)
   ==================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
    .hero-center .hero-inner { animation: herorecede linear both; animation-timeline: scroll(root); animation-range: 0px 640px; }
    .scene { animation: scenesettle linear both, floaty 8s ease-in-out infinite alternate;
      animation-timeline: view(), auto; animation-range: entry 0% cover 45%, normal; }
    .manifest h2, .diff-copy h2, .show-copy h2, .quote-sec blockquote { animation: headsettle linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  }
}
@keyframes herorecede { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-64px) scale(0.95); opacity: 0; } }
@keyframes scenesettle { from { transform: translateY(56px) scale(0.95); } to { transform: translateY(0) scale(1); } }
@keyframes headsettle { from { transform: translateY(36px) scale(0.98); } to { transform: translateY(0) scale(1); } }

/* ====================================================================
   Responsivt för landningssektionerna
   ==================================================================== */
@media (max-width: 980px) {
  .diff-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .show-grid { grid-template-columns: 1fr; gap: 3rem; }
  .showcase.flip .show-copy { order: 0; }
  .showcase.flip .show-stage { order: 1; }
  .jpath, .jp-pearl { display: none; }
  .jcards { grid-template-columns: 1fr 1fr; padding-top: 0; }
  .quiet-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .compare { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .quiet-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .jcards { grid-template-columns: 1fr; gap: 1.1rem; }
  .manifest { padding: 6rem 0; }
  .band-ink, .showcase, .quote-sec, .cta-band { padding: 5.5rem 0; }
  .loop-chip { font-size: 0.8rem; padding: 0.4rem 0.8rem 0.4rem 0.45rem; }
  .loop-chip.lc2 { right: 0; }
  .loop-chip.lc3 { left: 0; }
  .scene { transform: scale(0.88); animation: none; }
}
@media (max-width: 460px) {
  .quiet-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════
   NATTPASS — granulär premiumfinish (2026-06-10)
   Ray-light på objekt, berättande scener, hero-detaljer, mikropolish.
   ════════════════════════════════════════════════════════════════════ */

/* ── Glashjärtat (raymarchad WebGL) — liten, gullig, klickbar ── */
.gem-wrap { position: relative; width: 138px; height: 138px; margin: 0 auto -0.2rem; }
.gem { width: 100%; height: 100%; display: block; }
.gem-halo { position: absolute; left: 50%; top: 66%; width: 150px; height: 56px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,205,170,0.38) 0%, rgba(240,144,126,0.13) 55%, rgba(0,0,0,0) 76%); }
@media (max-width: 640px) { .gem-wrap { width: 112px; height: 112px; } .gem-halo { width: 124px; } }

/* ── Äkta Z-djup: kortens lager separerar i 3D vid tilt ── */
.tiltwrap, .tiltwrap > * { transform-style: preserve-3d; }
.scene-pick .pickcard, .ins-card { backdrop-filter: none; } /* preserve-3d kräver oplattad kontext */
.pc-badge { transform: translateX(-50%) translateZ(56px); }
.scene-pick .pc-ring { transform: translateZ(48px); }
.scene-pick .pc-photo { transform: translateZ(20px); }
.pc-name, .pc-chips { transform: translateZ(34px); }
.pc-dims { transform: translateZ(30px); }
.pc-ai { transform: translateZ(28px); }
.pc-actions { transform: translateZ(42px); }
.ins-card .ins-row { transform: translateZ(26px); }
.ins-card .ins-note { transform: translateZ(14px); }
.loop-core { transform: translate(-50%, -50%) translateZ(42px); }
.loop-chip.lc1 { transform: translateX(-50%) translateZ(58px); }
.loop-chip.lc2, .loop-chip.lc3 { transform: translateZ(58px); }

/* Ray-light: speglande highlight som vandrar med ljusvektorn från tilt-JS */
.pickcard::before, .ins-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 3;
  background: radial-gradient(150px 100px at var(--lx, 55%) var(--ly, 26%),
    rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 62%);
  opacity: calc(0.22 + var(--li, 0) * 0.78); transition: opacity 0.3s ease; }

/* Hero: ljusbåge (soluppgångsmotiv) + scrollindikator */
.rule-arc { display: block; width: 132px; height: 26px; margin: 0.7rem auto 1.4rem; overflow: visible; }
.rule-arc path { fill: none; stroke: url(#arcgrad); stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(255,225,180,0.7));
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: arcdraw 1.1s cubic-bezier(.22,.8,.28,1) 0.95s forwards; }
@keyframes arcdraw { to { stroke-dashoffset: 0; } }
body.has-intro .rule-arc path { animation-play-state: paused; }
.scroll-cue { position: absolute; left: 50%; bottom: -5rem; transform: translateX(-50%);
  width: 25px; height: 40px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.55); }
.scroll-cue i { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; border-radius: 2px;
  margin-left: -2px; background: rgba(255,255,255,0.85); animation: cuedrop 1.9s ease-in-out infinite; }
@keyframes cuedrop { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; }
  65% { transform: translateY(13px); opacity: 0; } 100% { transform: translateY(13px); opacity: 0; } }

/* ── Handplockat-scenen: ur många (bak) handplockas EN (fram) ── */
.scene-pick { display: block; }
.cand-stack { position: absolute; left: 5%; top: 18%; width: 110px; height: 150px; }
.cand { position: absolute; width: 74px; height: 100px; border-radius: 14px; border: 1px solid var(--hairline);
  background: linear-gradient(165deg, #EFF4F8 0%, #F4EFEA 100%);
  box-shadow: 0 14px 28px -18px rgba(27,27,31,0.3); }
.cand::before { content: ""; position: absolute; inset: 7px 7px auto 7px; height: 52%; border-radius: 9px;
  background: linear-gradient(160deg, #D3E3EE 0%, #E6DCD2 100%); }
.cand::after { content: ""; position: absolute; left: 9px; right: 28px; bottom: 12px; height: 7px;
  border-radius: 4px; background: #E8E6E1; }
.cand.c1 { transform: rotate(-9deg); opacity: 0.5; }
.cand.c2 { transform: translate(17px, 15px) rotate(-2deg); opacity: 0.72; }
.cand.c3 { transform: translate(36px, 31px) rotate(6deg); opacity: 0.95; }
.showcase.reveal .cand { transition: transform 0.8s cubic-bezier(.22,.8,.28,1), opacity 0.6s ease; }
.showcase.reveal.in .cand.c2 { transition-delay: 0.08s; }
.showcase.reveal.in .cand.c3 { transition-delay: 0.16s; }
.showcase.reveal:not(.in) .cand { transform: translateY(20px); opacity: 0; }
.pick-arc { position: absolute; left: 12%; top: 13%; width: 30%; overflow: visible; opacity: 0.9; }
.pick-arc path { fill: none; stroke: rgba(27,27,31,0.3); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.pick-arc .arc-line { stroke-dasharray: 5 6; }
.showcase.reveal .pick-arc { transition: opacity 0.7s ease 0.35s, transform 0.7s ease 0.35s; }
.showcase.reveal:not(.in) .pick-arc { opacity: 0; transform: translateY(8px); }
.scene-pick .tiltwrap { position: absolute; right: 3%; top: 12%; }
.scene-pick .pickcard { width: 240px; height: auto; padding: 12px 12px 16px; }
.scene-pick .pc-photo { height: 138px; }
.pc-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 4;
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.34rem 0.8rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--hairline); font-size: 0.72rem; font-weight: 600; color: var(--text);
  box-shadow: 0 10px 24px -14px rgba(27,27,31,0.35); }
.pc-badge i { width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-dark), var(--coral)); }
.pc-name { display: block; font-family: var(--serif); font-size: 1.06rem; color: var(--text); margin: 12px 6px 6px; }
.pc-name em { font-style: normal; font-family: var(--sans, inherit); font-size: 0.78rem; color: var(--text-soft); letter-spacing: 0; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 6px; }
.pc-chips span { font-size: 0.68rem; font-weight: 600; color: var(--text-soft); padding: 0.26rem 0.62rem;
  border-radius: 999px; border: 1px solid var(--hairline); background: var(--paper); }
/* Appens fyra dimensioner — exakt så här ser matchkortet ut på riktigt */
.pc-dims { display: grid; gap: 6px; margin: 11px 6px 0; }
.pc-dim { display: grid; grid-template-columns: 76px 1fr 33px; align-items: center; gap: 7px; }
.pc-dim em { font-style: normal; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-soft); white-space: nowrap; }
.pc-dim i { display: block; height: 4px; border-radius: 2px; background: #EFEEE9;
  position: relative; overflow: hidden; }
.pc-dim i::after { content: ""; position: absolute; inset: 0; width: var(--w, 80%); border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-dark), var(--coral));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.9s cubic-bezier(.22,.8,.28,1) 0.6s; }
.showcase.reveal.in .pc-dim i::after { transform: scaleX(1); }
.showcase.reveal.in .pc-dim:nth-child(2) i::after { transition-delay: 0.72s; }
.showcase.reveal.in .pc-dim:nth-child(3) i::after { transition-delay: 0.84s; }
.showcase.reveal.in .pc-dim:nth-child(4) i::after { transition-delay: 0.96s; }
.pc-dim b { font-size: 0.64rem; font-weight: 600; color: var(--text); text-align: right;
  font-variant-numeric: tabular-nums; }

/* AI-drivna insikter: tryckbar rad precis som i appen */
.pc-ai { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 12px 6px 0; padding: 0.62rem 0.9rem; border-radius: 12px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; color: var(--blue-dark);
  background: linear-gradient(135deg, rgba(110,175,203,0.13) 0%, rgba(224,138,119,0.11) 100%);
  border: 1px solid rgba(110,175,203,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.pc-ai svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: var(--blue-dark);
  stroke-width: 1.6; stroke-linejoin: round; }
/* Hjärta + kryss: appens beslutsknappar */
.pc-actions { display: flex; justify-content: center; gap: 16px; margin: 13px 6px 2px; }
.pc-actions span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; }
.pa-love { background: linear-gradient(160deg, #F0907E 0%, #DB6F65 100%);
  box-shadow: 0 14px 28px -12px rgba(219,111,101,0.65), inset 0 1.5px 0 rgba(255,255,255,0.45); }
.pa-love svg { width: 21px; height: 21px; fill: #fff; stroke: none; }
.pa-skip { background: #fff; border: 1px solid var(--hairline); color: var(--text-soft);
  box-shadow: 0 10px 22px -14px rgba(27,27,31,0.35), inset 0 1.5px 0 #fff; }
.pa-skip svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; }

/* AI:ns "därför passar ni" (UR KORTET 2026-06-11 — appens vy har inte raden; kvar för ev. återbruk) */
.pc-why { display: block; margin: 9px 6px 0; padding-top: 8px; border-top: 1px solid var(--hairline);
  font-family: var(--serif); font-style: italic; font-size: 0.8rem; line-height: 1.45; color: var(--text-soft); }
.scene-pick .pc-ring { width: 80px; height: 80px; top: -16px; right: -16px; place-items: initial; place-content: center; text-align: center; }
.pc-ring em { position: relative; z-index: 1; display: block; font-style: normal; font-size: 0.54rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); margin-top: 1px; }

/* ── Live-scenen: bezel-ticks + söker→hittad-sekvens ── */
.live-bezel { position: absolute; left: 50%; top: 50%; width: 238px; height: 238px;
  transform: translate(-50%, -50%); overflow: visible; }
.live-bezel circle { fill: none; stroke: rgba(27,27,31,0.18); stroke-width: 1;
  stroke-dasharray: 0.5 4.5; stroke-linecap: round; }
.live-search, .live-pill { position: absolute; left: 50%; display: inline-flex; align-items: center; gap: 0.5rem;
  white-space: nowrap; background: #fff; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 0.5rem 1.1rem; font-size: 0.88rem; font-weight: 600; color: var(--text);
  box-shadow: 0 16px 36px -22px rgba(27,27,31,0.35); }
.live-search { top: 9%; transform: translateX(-50%); opacity: 0; color: var(--text-soft); }
.live-search i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--blue-dark);
  border-top-color: transparent; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.live-search em { font-style: normal; }
.showcase.reveal.in .live-search { animation: searchseq 3s ease forwards 0.2s; }
@keyframes searchseq {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  10%, 72% { opacity: 1; transform: translateX(-50%) translateY(0); }
  88%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}
.showcase.reveal .live-pill { transition-delay: 2.9s, 2.9s; }

/* ── Insiktskortet: radikoner + not ── */
.ins-row { grid-template-columns: 138px 1fr auto; }
.ins-lab { display: inline-flex; align-items: center; gap: 0.5rem; }
.ins-lab svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: var(--blue-dark);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ins-note { font-size: 0.76rem; color: #A09F98; border-top: 1px solid var(--hairline);
  padding-top: 0.9rem; margin-top: 0.15rem; }

/* ── Mikropolish ── */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--blue-dark), var(--coral));
  transition: right 0.25s ease; }
.nav-links a:not(.btn):hover::after { right: 0; }
.faq summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--blue-dark);
  border-bottom: 2px solid var(--blue-dark); transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease; }
.faq details[open] summary::after { content: ""; transform: translateY(-30%) rotate(225deg); }
.faq details { transition: background 0.2s ease; }
.faq details:hover { background: #FCFBF9; }
.quote-sec .container { position: relative; }
.quote-sec .container::before { content: "\201C"; position: absolute; left: 50%; top: -3.6rem;
  transform: translateX(-50%); font-family: var(--serif); font-size: 7.5rem; line-height: 1;
  background: linear-gradient(135deg, rgba(62,143,170,0.28), rgba(224,138,119,0.28));
  -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; }
.qitem { padding: 1.1rem 1rem; border-radius: 16px; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.qitem:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(27,27,31,0.28); }
.btn:active { transform: scale(0.97); }

@media (max-width: 640px) {
  .scroll-cue { display: none; }
  .cand-stack { left: 0; top: 22%; transform: scale(0.85); transform-origin: top left; }
  .pick-arc { left: 10%; top: 10%; }
  .scene-pick .tiltwrap { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rule-arc path { animation: none; stroke-dashoffset: 0; }
  .scroll-cue i, .live-search i, .jp-pearl { animation: none; }
  .jp-pearl { display: none; }
  .showcase.reveal.in .live-search { animation: none; opacity: 0; }
  .showcase.reveal .live-pill { transition-delay: 0s, 0s; }
  .show-points li::before { transform: scaleX(1); transition: none; }
  .faq details[open] p { animation: none; }
  .jp-draw { transition: none; stroke-dashoffset: 0; }
  .showcase.reveal .cand, .showcase.reveal .pick-arc { transition: none; }
  .showcase.reveal:not(.in) .cand.c1 { transform: rotate(-9deg); opacity: 0.5; }
  .showcase.reveal:not(.in) .cand.c2 { transform: translate(17px, 15px) rotate(-2deg); opacity: 0.72; }
  .showcase.reveal:not(.in) .cand.c3 { transform: translate(36px, 31px) rotate(6deg); opacity: 0.95; }
  .showcase.reveal:not(.in) .pick-arc { opacity: 0.9; transform: none; }
  .pickcard::before, .ins-card::before { opacity: 0.25; }
}

/* ════════════════════════════════════════════════════════════════════
   DETALJREGNET — Apple-principer i varje hörn (2026-06-10)
   ════════════════════════════════════════════════════════════════════ */

/* Mixed emphasis: grå brödtext med nyckelfraser i bläck/vitt (Apples signum) */
.lead strong { color: var(--text); font-weight: 600; }
.band-ink .lead strong { color: #fff; }

/* Hero-chips: glaspiller som snabbnav (à la Apples pillerlistor) */
.hero-chips { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-chips a { padding: 0.45rem 1.05rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  color: #fff; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.42);
  text-shadow: 0 1px 8px rgba(15,45,65,0.35);
  transition: background 0.2s ease, transform 0.2s ease; }
.hero-chips a:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); text-decoration: none; color: #fff; }
section[id] { scroll-margin-top: 80px; }

/* Markering & rullningslist i varumärkeston */
::selection { background: rgba(110,175,203,0.32); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(27,27,31,0.22); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(27,27,31,0.38); border: 3px solid transparent; background-clip: padding-box; }

/* Ljusbågen skimrar långsamt (detaljen Jesper gillade) */
.rule-arc path { stroke-dasharray: 100; }
.hero .rule-arc { filter: drop-shadow(0 0 6px rgba(255,225,180,0.35)); }

/* Scroll-cue tonar bort när man börjat scrolla */
.nav.scrolled ~ main .scroll-cue, body .nav.scrolled + main .scroll-cue { opacity: 0; }
.scroll-cue { transition: opacity 0.5s ease; }

/* Showcase-punkter: strecket växer in vid reveal */
.show-points li::before { transform: scaleX(0); transform-origin: left center; transition: transform 0.6s cubic-bezier(.22,.8,.28,1) 0.5s; }
.showcase.reveal.in .show-points li::before { transform: scaleX(1); }
.showcase.reveal.in .show-points li:nth-child(2)::before { transition-delay: 0.65s; }

/* Kompatibilitetsringen får instrument-ticks */
.pc-ring::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,255,255,0.55) 0deg 1.6deg, rgba(255,255,255,0) 1.6deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 83%, #000 96%, transparent 97%);
          mask: radial-gradient(closest-side, transparent 82%, #000 83%, #000 96%, transparent 97%); }

/* Pärlan på resan får en svans */
.jp-pearl::before, .jp-pearl::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; opacity: 0.4; transform: scale(0.7); filter: blur(1px); }
.jp-pearl::after { opacity: 0.18; transform: scale(0.45); filter: blur(2px); }

/* Journey-kortens ikoner vaknar vid hover */
.jcard svg { transition: transform 0.25s ease, stroke 0.25s ease; }
.jcard:hover svg { transform: scale(1.12) rotate(-4deg); }
.jcard:hover .jmed b { color: var(--coral); transition: color 0.25s ease; }

/* Fem ytor: spec-linje + färgskifte vid hover */
.qitem { border-top: 1px solid var(--hairline); border-radius: 0 0 16px 16px; padding-top: 1.4rem; }
.qitem:hover .qico { color: var(--coral); border-color: rgba(224,138,119,0.4); transition: color 0.25s ease, border-color 0.25s ease; }
.qitem h3 { transition: color 0.2s ease; }
.qitem:hover h3 { color: var(--blue-dark); }

/* Citat: guldlinjer kring källan */
.quote-sec cite { position: relative; display: inline-block; padding-top: 1.1rem; }
.quote-sec cite::before { content: ""; position: absolute; left: 50%; top: 0; width: 38px; height: 1.5px;
  transform: translateX(-50%); background: linear-gradient(90deg, rgba(233,191,110,0), #E9BF6E, rgba(233,191,110,0)); }

/* FAQ: svaret glider in när det öppnas */
.faq details[open] p { animation: faqopen 0.3s ease; }
@keyframes faqopen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Footer: gradientpunkter vid kolumnrubriker + mjuk länkglid */
footer h4 { position: relative; padding-left: 0.9rem; }
footer h4::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; transform: translateY(-50%); background: linear-gradient(135deg, #7FC1E9, #F0907E); }
footer a { transition: color 0.2s ease, transform 0.2s ease; }
footer a:hover { transform: translateX(2px); }

/* Knappar: tryckkänsla + pilknuff */
.btn:active { transform: scale(0.97) !important; }

/* Reduced motion — landningssektionerna visar slutläget direkt */
@media (prefers-reduced-motion: reduce) {
  .loop-dash, .loop-comet, .loop-chip, .scene, .tiltwrap::before, .ink-nebula,
  .showcase.in .lr-sweep, .showcase.in .live-dot, .showcase.in .live-pill i { animation: none !important; }
  .showcase.reveal .pickcard, .showcase.reveal .live-pill, .ins-bar i { transition: none !important; }
  .showcase.reveal:not(.in) .pickcard { transform: none; }
  .showcase.reveal .live-pill { opacity: 1; transform: translateX(-50%); }
  .ins-bar i { transform: scaleX(1) !important; animation: none !important; }
  .pc-ring { animation: none !important; }
  .lr-sweep { opacity: 0; }
  .pr-core, .pr-ring { animation: none !important; }
  .pc-dim i::after { transform: scaleX(1); transition: none; }
}