/* om.css — Om oss-sidans nya sektioner (om.js). Endast befintliga färgvärden:
   var(--teal) · rgba(79,227,212,x) · rgba(232,244,242,.2) · var(--text)/--dis · Archivo/Supreme/mono. */

/* (aurora-CSS:en bor i pages.css sedan 2026-07-26 — auroran kör på ALLA undersidor) */

/* ── hero-upgrade: riktigt bg-lager (parallax) + shimmer ── */
.om-hero::before{content:none}                       /* ::before-bilden ersätts av .om-hero-bg */
.om-hero-bg{position:absolute;inset:-16% 0 0;background-size:cover;background-position:center;will-change:transform;z-index:0}
.om-shimmer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.om-shimmer i{position:absolute;top:-20%;bottom:-20%;left:0;width:44%;
  background:linear-gradient(115deg,transparent 0%,rgba(232,244,242,.05) 45%,rgba(79,227,212,.04) 55%,transparent 100%);
  will-change:transform}
.om-hero h1 .om-mening{display:inline-block}
/* eyebrown i samma metaspråk som startsidans .beat-meta — låg, spärrad, läsbar */
.om-hero .kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text);opacity:.62;text-shadow:0 1px 14px rgba(0,0,0,.9);margin-bottom:1.1rem}

/* ── sidrytm: basenheten --rytm definieras i pages.css (delad av alla undersidor) ──
   (hero + pinnade löftes-sektionen är viewport-höga och står utanför skalan) */

/* ── manifest: stor typ, ord tänds vid scroll (om.js sätter ord-opacity) ── */
.om-mani{padding:calc(var(--rytm)*1.25) clamp(1.2rem,6vw,4rem) calc(var(--rytm)*1.5);position:relative;z-index:1}
.om-mani-inner{max-width:820px;margin:0 auto}
.om-mani p{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.35rem,3.2vw,2.4rem);
  line-height:1.45;letter-spacing:-.01em;color:var(--text);margin:0 0 1.6em}
.om-mani p:last-child{margin-bottom:0}
/* tesen: större, ensam — extra scrollrum före och efter (margin = scroll i scrubben) */
.om-mani p.om-tes{font-size:clamp(1.7rem,4.2vw,3.3rem);line-height:1.22;letter-spacing:-.02em;
  margin:2.4em 0 .4em}
.om-mani p.om-tes + p{margin-top:2.2em}      /* block efter en tes får eget andrum */
.om-ord{display:inline}

/* ── metaetiketter (samma språk som startsidans .beat-meta) för alla sektioner ── */
.om-duo .kicker,.om-mal .kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--text);opacity:.62;margin:0 0 .9rem}

/* ── duon: två namn, hairline-toppar, namnformeln i mono-mint ── */
.om-duo{padding:var(--rytm) clamp(1.2rem,6vw,4rem);position:relative;z-index:1}
.om-duo-inner{max-width:820px;margin:0 auto}
.om-duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);margin-top:2.2rem}
.om-duo-grid article{border-top:1px solid rgba(79,227,212,.16);padding-top:1.4rem}
.om-duo-grid b{display:block;font-family:Archivo,sans-serif;font-weight:700;
  font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.015em;line-height:1.05;color:var(--text)}
.om-duo-grid span{display:block;margin-top:.55rem;color:var(--dis);line-height:1.6;max-width:34ch}
/* 2026-07-27: er bästa rad ur maskinskriften — riktig typografi i statement-
   skala i stället för spärrad mono-etikett (topp 10-genomgången, punkt A5) */
.page p.om-namn{margin:3rem 0 0;font-family:Supreme,sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.45;letter-spacing:0;
  color:var(--text);max-width:30ch}   /* p-selektorn: vinner över .page p-kaskaden */
.om-namn b{color:var(--teal);font-weight:600}
@media (max-width:600px){.om-duo-grid{grid-template-columns:1fr;gap:1.8rem}}

/* ── målet ── */
.om-mal{padding:var(--rytm) clamp(1.2rem,6vw,4rem);position:relative;z-index:1}
.om-mal-inner{max-width:820px;margin:0 auto}
.om-mal h2{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.6rem,3.4vw,2.6rem);
  letter-spacing:-.02em;line-height:1.18;margin:.9rem 0 1.4rem;color:var(--text)}
.om-mal p:not(.kicker){color:var(--dis);font-size:1.06rem;line-height:1.7;max-width:58ch}

/* ── bakgrundslager i löftes-sektionen — synkat med shaderns mörkare stämning
   i samma scrollband (aurora.js dämpar till ~50% här): en mjuk fjädrad
   mörkervinjett istället för teal-glöd, samma --duk-svärta ── */
.om-stegbg{position:absolute;inset:-12% 0;z-index:0;pointer-events:none;will-change:transform;
  background:radial-gradient(92% 72% at 50% 44%,rgba(5,10,12,.72),rgba(5,10,12,.32) 58%,transparent 86%)}
.steg{position:relative}
.steg .steg-pin{position:relative;z-index:1}
.steg{overflow:clip}

/* ── tidslinje: Så jobbar vi med er — linjen RITAS med scrolln (om.js .om-rita),
   en ljuspuls rider på spetsen, noderna tänds när linjen når dem.
   Inga nummerlådor: rena mono-siffror i mint, generöst vitrum.
   Grundläget i CSS = färdigt och fullt tänt (no-JS/reduced) — motorn lägger
   html.om-tid-anim och först DÅ vilar otända steg på 45%. ── */
.om-tid{padding:var(--rytm) clamp(1.2rem,6vw,4rem);position:relative;z-index:1}
.om-tid-inner{max-width:760px;margin:0 auto}
.om-tid .kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text);opacity:.62;margin:0 0 .9rem}
.om-tid h2{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.02em;line-height:1.02;margin:.5rem 0 3.2rem;color:var(--text)}
.om-tid-ing{color:var(--dis);margin:-2.4rem 0 3rem;max-width:52ch}
.om-tid-koda{margin:calc(var(--rytm)*.4) 0 0;color:var(--dis);max-width:52ch}
.om-spar-ram{position:relative}   /* dekorationens hem — hålls UTANFÖR listan (a11y: ren <ol>) */
.om-spar{list-style:none;margin:0;padding:0;counter-reset:omsteg}
.om-spar-ram::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:rgba(79,227,212,.13)}
.om-rita{position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--teal);opacity:.6;
  transform:scaleY(0);transform-origin:top;will-change:transform;pointer-events:none}
.om-puls{position:absolute;left:6.5px;top:6px;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--teal);box-shadow:0 0 12px var(--teal),0 0 26px rgba(79,227,212,.45);pointer-events:none;z-index:1}
/* 2026-07-28 (Williams "just dom här siffrorna ser så AI genererade ut"):
   spärrade mono-siffrorna 01–05 STRUKNA — de var räknade etiketter, precis det
   husets anti-slop-doktrin förbjuder. Ersatta av NODEN: en liten ring som
   sitter på tidslinjen och fylls när steget tänds. Progressionen syns i
   linjen och noderna, inte i siffror. */
.om-spar li{position:relative;counter-increment:omsteg;padding:0 0 calc(var(--rytm)*.42) 52px}
.om-spar li:last-child{padding-bottom:0}
.om-spar li::before{content:"";position:absolute;left:6px;top:.42em;
  width:9px;height:9px;margin-left:-4px;border-radius:50%;box-sizing:border-box;
  background:var(--duk);border:1px solid rgba(79,227,212,.45);
  transition:background .6s ease,border-color .6s ease,transform .6s cubic-bezier(.25,.6,.25,1)}
.om-spar li b{display:block;font-family:Supreme,sans-serif;font-weight:600;font-size:1.08rem;color:var(--text);margin-bottom:.25em}
.om-spar li span{display:block;color:var(--dis);font-size:.98rem;line-height:1.6;max-width:46ch}
/* vilande/tända lägen — bara när motorn kör */
html.om-tid-anim .om-spar li{opacity:.45;transition:opacity .7s cubic-bezier(.25,.6,.25,1)}
html.om-tid-anim .om-spar li::before{border-color:rgba(79,227,212,.25)}
html.om-tid-anim .om-spar li b{transform:translateY(9px);transition:transform .65s cubic-bezier(.25,.6,.25,1)}
html.om-tid-anim .om-spar li span{transform:translateY(12px);transition:transform .65s cubic-bezier(.25,.6,.25,1) .09s}
html.om-tid-anim .om-spar li.on{opacity:1}
html.om-tid-anim .om-spar li.on::before{background:var(--teal);border-color:var(--teal);transform:scale(1.15)}
html.om-tid-anim .om-spar li.on b,html.om-tid-anim .om-spar li.on span{transform:none}

/* ── SUMMAN (2026-07-27, Linear-språket): statraden ersatt av en SKRIVEN
      mening — inga räknare, inga spärrade mono-etiketter. Faktan i fetstil
      bär ljuset, resten viker undan. ── */
.om-summa{padding:var(--rytm) clamp(1.2rem,6vw,4rem);position:relative;z-index:1}
.om-summa-inner{max-width:900px;margin:0 auto;border-top:1px solid rgba(79,227,212,.16);
  padding-top:clamp(2.2rem,5vw,3.6rem)}
.om-summa-inner p{margin:0;font-family:Supreme,sans-serif;font-weight:500;
  font-size:clamp(1.35rem,2.5vw,2.1rem);line-height:1.5;color:var(--dis);max-width:34ch}
.om-summa-inner b{font-weight:600;color:var(--text)}

/* ── CTA-slutscen: riktig 3D-wireframe-kupol (CSS 3D + SVG-ringar som kan
      dash-ritas), spegling i "golvet", magnetisk knapp — inget pulsglöd.
      ÅTERSTÄLLD 2026-07-27: William ville ha animationen tillbaka framför
      den renderade stillbilden (scen/kupol-scen.jpg parkerad). ── */
.om-cta{position:relative;overflow:clip;padding:var(--rytm) 1.5rem calc(var(--rytm)*1.25)}
.k3{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);width:min(780px,96vw);height:min(400px,52vw);
  perspective:1100px;pointer-events:none;z-index:0}
.k3-vy{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-12deg)}
.k3-rot{position:absolute;left:50%;bottom:6%;width:0;height:0;transform-style:preserve-3d}
html.k3-snurra .k3-rot{animation:k3snurr 120s linear infinite}   /* ett varv på 2 min — knappt förnimbart */
@keyframes k3snurr{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.k3-ring{position:absolute;transform-style:preserve-3d}
.k3-ring svg{display:block;overflow:visible;width:100%;height:100%}
.k3-ring circle{fill:none;stroke:rgba(79,227,212,.26);stroke-width:1.2;stroke-dasharray:1}
.k3-damm{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(79,227,212,.5);
  animation:k3damm var(--dd,8s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes k3damm{from{opacity:.05}to{opacity:.38}}
.om-cta-inne{position:relative;z-index:1}
.om-cta-spegel{position:absolute;left:0;right:0;top:99%;z-index:1;pointer-events:none;user-select:none;
  transform:scaleY(-1);transform-origin:top;opacity:.1;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.65),transparent 55%);
          mask-image:linear-gradient(to top,rgba(0,0,0,.65),transparent 55%)}
@media (prefers-reduced-motion: reduce){
  html.k3-snurra .k3-rot{animation:none}
  .k3-damm{animation:none;opacity:.16}
}

@media (max-width:600px){
  .om-spar li{padding-left:40px}
}
@media (prefers-reduced-motion: reduce){
  .om-shimmer{display:none}
  .om-cta .btn{animation:none}
  .om-rita,.om-puls{display:none}
  .om-spar li{opacity:1!important}
  .om-spar li b,.om-spar li span{transform:none!important}
}

/* ── VAD SOM ALLTID INGÅR (2026-07-26): duons hairline-språk i 3×2-grid ── */
.om-ingar{padding:var(--rytm) clamp(1.2rem,6vw,4rem);position:relative;z-index:1}
.om-ingar-inner{max-width:1040px;margin:0 auto}
.om-ingar .kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text);opacity:.62;margin:0 0 .9rem}
.om-ingar h2{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.8rem,4vw,2.8rem);
  letter-spacing:-.02em;line-height:1.05;margin:.5rem 0 2.6rem;color:var(--text)}
.om-ingar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.5vw,2.6rem)}
.om-ingar-grid article{border-top:1px solid rgba(79,227,212,.16);padding-top:1.2rem}
.om-ingar-grid b{display:block;font-family:Supreme,sans-serif;font-weight:600;font-size:1.06rem;
  color:var(--text);margin-bottom:.35em}
.om-ingar-grid span{display:block;color:var(--dis);font-size:.95rem;line-height:1.6}
@media (max-width:820px){.om-ingar-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.om-ingar-grid{grid-template-columns:1fr;gap:1.4rem}}

/* ── VÅRA ÅTAGANDEN (2026-07-27, Stripes brevspråk): BOKSTAVLIGT svart på
      vitt — ett ljust dokument i mörkret, signerat. Papper = husets --text,
      bläck = husets --duk; inga nya färgvärden. Spöknumren + mint-mono ströks
      (lästes som AI-genererade). ── */
.om-atag{padding:var(--rytm) clamp(1.2rem,6vw,4rem);position:relative;z-index:1}
.om-atag-inner{max-width:720px;margin:0 auto}
.om-atag .kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text);opacity:.62;margin:0 0 .9rem}
.om-atag h2{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.8rem,4vw,2.8rem);
  letter-spacing:-.02em;line-height:1.05;margin:.5rem 0 2.4rem;color:var(--text)}
.om-atag-papper{background:var(--text);color:var(--duk);border-radius:4px;
  padding:clamp(1.6rem,4vw,2.8rem) clamp(1.5rem,4vw,2.8rem) clamp(1.3rem,3vw,2rem);
  box-shadow:0 34px 80px rgba(0,0,0,.55)}
.om-atag-lista{list-style:none;margin:0;padding:0}
.om-atag-lista li{padding:1.3rem 0;border-bottom:1px solid rgba(5,10,12,.13)}
.om-atag-lista li:first-child{padding-top:.2rem}
.om-atag-lista b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:1.22rem;
  letter-spacing:-.01em;color:var(--duk);margin-bottom:.3em}
.om-atag-lista span{display:block;color:rgba(5,10,12,.6);font-size:.98rem;line-height:1.6;max-width:52ch}
.om-atag-sign{margin:1.5rem 0 0;font-size:.9rem;color:rgba(5,10,12,.55);text-align:right}