/* ============================================================
   Nätverkstan UF — sidkomponenter
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top:clamp(7.5rem,6rem + 8vw,10.5rem);
  padding-bottom:clamp(3rem,2rem + 4vw,5rem);
  overflow:clip;
}
.hero__grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2.2rem,2rem + 3vw,4.5rem);align-items:center;
}
.hero__copy>*+*{margin-top:1.3rem}
.hero__title{margin-top:1.1rem}
.hero__title .ser{color:var(--accent-deep)}
.hero .btns{margin-top:2rem}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.2rem;
  padding-top:1.5rem;border-top:1px solid var(--line);
}
.hero__trust li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-2)}
.hero__trust svg{width:15px;height:15px;flex:none;stroke:var(--accent-deep);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Scenen med den svävande webbläsaren */
.stage{position:relative;perspective:1800px;translate:0 var(--py,0)}
/* Kortet och chiparna hör ihop och mäts mot varandra. Bildtexten
   ligger utanför, annars förskjuts chiparnas lägen av dess höjd. */
.stage__box{position:relative}
.stage::before{ /* varm glöd bakom */
  content:"";position:absolute;inset:6% -8% -6% -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,74,28,.22), transparent 72%);
  filter:blur(14px);
}
.stage__in{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .6s var(--ease-2);
  will-change:transform;
}

/* ---------- Sidan som bygger om sig själv ----------
   Hero visar en färdig hemsida i miniatyr. Var fjärde sekund byter den
   verksamhet: adressen, namnet, rubriken, knappen, formerna och hela
   färgskalan. Poängen är påståendet — vi bygger en sida i taget, för
   en verksamhet i taget — och att besökaren känner igen sin egen.

   Färgerna är registrerade som riktiga färger med @property. Utan det
   går de inte att tona mjukt mellan, och bytet blir ett hopp.
   Innehållet står i main.js, i modulen mockup().              */
@property --c1{syntax:'<color>';inherits:true;initial-value:#D8330A}
@property --c2{syntax:'<color>';inherits:true;initial-value:#FFF1EB}
@property --ci{syntax:'<color>';inherits:true;initial-value:#171210}

.mk{
  --c1:#D8330A;--c2:#FFF1EB;--ci:#171210;--lr:6px;--ar:14px;
  position:relative;border-radius:16px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-l);
  animation:float 9s ease-in-out infinite;
  transition:--c1 .95s var(--ease), --c2 .95s var(--ease), --ci .95s var(--ease);
}

.mk__bar{
  display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;
  background:var(--tint);border-bottom:1px solid var(--line);
}
.mk__bar i{width:8px;height:8px;border-radius:50%;background:rgba(23,18,16,.16);flex:none}
.mk__bar i:first-child{background:rgba(255,74,28,.5)}
.mk__url{
  margin-left:.5rem;flex:1;min-width:0;
  background:var(--card);border-radius:var(--pill);
  padding:.26rem .8rem;font-size:.72rem;color:var(--ink-3);
  display:flex;align-items:center;gap:.4rem;
  overflow:hidden;white-space:nowrap;
}
.mk__url::before{content:"";width:7px;height:7px;border-radius:50%;background:#3BB273;flex:none}
.mk__url b{font-weight:500;overflow:hidden;text-overflow:ellipsis}

.mk__page{
  background:var(--c2);color:var(--ci);
  padding:1.05rem 1.15rem 1.3rem;
  display:grid;gap:1rem;align-content:start;
  min-height:296px;
}

/* ---------- Arbeten i hero ----------
   Ligger tomt tills ni lägger in <img> eller <video> i [data-shots].
   Finns det något sätter main.js klassen mk--shots, och då tar
   arbetena över rutan medan den ritade skissen kliver undan.
   Ramen och adressfältet står kvar — det är de som gör att
   innehållet läses som en hemsida och inte som en bild.

   Sidan rullas inte in. Den vecklas ut ur adressfältet, som när
   ett fönster far ur Docken på en Mac fast baklänges, och först
   när den ligger utbredd börjar filmen spela. Utvecklingen ritas
   på en canvas — se heroReel() i main.js. */

.mk__shots{display:none}
.mk--shots .mk__page{display:none}
.mk--shots .mk__shots{
  display:block;position:relative;
  aspect-ratio:var(--ar,8/5);
  background:var(--tint);
  overflow:hidden;
}

.mk__shots img,
.mk__shots video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
  opacity:0;
  transition:opacity .45s var(--ease);
}
.mk__shots img.is-on,
.mk__shots video.is-on{opacity:1}

/* Duken som utvecklingen ritas på. Ligger över innehållet medan
   den spelar och släcks när filmen tar vid. */
.mk__genie{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  opacity:0;pointer-events:none;
  z-index:2;
}
.mk__genie.is-on{opacity:1}

@media (prefers-reduced-motion: reduce){
  .mk__shots img,
  .mk__shots video{transition:none}
  .mk__genie{display:none}
}

.mk__top{display:flex;align-items:center;gap:.55rem}
.mk__logo{
  width:21px;height:21px;flex:none;background:var(--c1);
  border-radius:var(--lr);transition:border-radius .95s var(--ease);
}
.mk__name{
  font-family:var(--font-display);font-weight:600;font-size:.84rem;
  letter-spacing:-.018em;color:var(--ci);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.mk__nav{display:flex;gap:.45rem;margin-left:auto;flex:none}
.mk__nav i{width:22px;height:5px;border-radius:3px;background:var(--ci);opacity:.22}

.mk__hero{display:flex;gap:1rem;align-items:center}
.mk__txt{flex:1.15;min-width:0;display:grid;gap:.32rem;justify-items:start}
.mk.is-flip .mk__art{order:-1}
.mk__art{
  flex:.85;align-self:stretch;min-height:116px;
  border-radius:var(--ar);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--c1) 58%, #fff),
    color-mix(in srgb, var(--c1) 13%, #fff));
  transition:border-radius .95s var(--ease);
}

.mk__eyebrow{
  font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c1);
}
.mk__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.02rem,.86rem + .7vw,1.42rem);
  line-height:1.14;letter-spacing:-.026em;color:var(--ci);
  margin:.1rem 0 .2rem;
}
.mk__lead{display:grid;gap:5px;width:100%;margin-bottom:.4rem}
.mk__lead i{height:5px;border-radius:3px;background:var(--ci);opacity:.19}
.mk__lead i:last-child{width:70%}
.mk__cta{
  padding:.44rem .9rem;border-radius:var(--pill);
  background:var(--c1);color:#fff;
  font-size:.7rem;font-weight:600;white-space:nowrap;
}

.mk__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mk__cards span{
  height:44px;border-radius:9px;
  background:color-mix(in srgb, var(--c1) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--c1) 20%, transparent);
}

/* Bytet: innehållet lämnar uppåt, det nya stiger in nerifrån.
   --k ger varje del sin plats i ledet så att sidan byggs om i ordning. */
/* Ut samlat och snabbt — det är uppbyggnaden som ska synas, inte
   rivningen. Utan det står kortet tomt en halv sekund och bytet
   läses som ett fel i stället för som en ny sida. */
.mk.is-out [data-mkf]{animation:mkOut .26s var(--ease) both}
.mk.is-new [data-mkf]{
  animation:mkIn .5s var(--ease) both;
  animation-delay:calc(var(--k,0) * 55ms);
}
@keyframes mkOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes mkIn{from{opacity:0;transform:translateY(13px)}}

/* Raden under scenen som förklarar vad man tittar på */
.stage__cap{
  margin-top:1.4rem;text-align:center;
  font-size:.88rem;color:var(--ink-3);
}
.stage__cap b{color:var(--ink-2);font-weight:600}

@media (max-width:560px){
  .mk__hero{flex-direction:column;align-items:stretch}
  .mk.is-flip .mk__art{order:0}
  .mk__art{min-height:84px}
  .mk__page{min-height:0}
}

/* Etiketter som svävar runt fönstret */
.chip{
  position:absolute;z-index:4;display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem;border-radius:var(--pill);
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:var(--shadow-m);
  font-size:.79rem;font-weight:600;color:var(--ink);white-space:nowrap;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
/* Chiparna hänger på kortets kanter, inte över dess innehåll:
   den ena straddlar överkanten vid webbläsarlisten, den andra
   ligger vid kortraden längst ner. Båda ytorna är dekor. */
.chip--a{left:-5%;top:-5%;animation:float 7s ease-in-out infinite}
.chip--b{right:-4%;bottom:13%;animation:float 9s ease-in-out .8s infinite}

@media (max-width:940px){
  .hero__grid{grid-template-columns:1fr;gap:3rem}
  .stage{max-width:560px;margin-inline:auto;width:100%}
  .chip--a{left:-2%}
  .chip--b{right:-2%}
}
@media (max-width:560px){
  .chip{font-size:.71rem;padding:.4rem .68rem}
  .chip--a{left:-1%;top:-4%}
  .chip--b{right:-1%;bottom:11%}
}

/* ---------- Sidhuvud på undersidor ---------- */
.phead{
  padding-top:clamp(7.5rem,6rem + 7vw,10rem);
  padding-bottom:clamp(2.2rem,2rem + 2vw,3.4rem);
  position:relative;
}
.phead__in{max-width:44ch}
.phead__in>*+*{margin-top:1.1rem}
.phead .lead{max-width:52ch}

/* ---------- Kortrutnät ---------- */
.grid{display:grid;gap:clamp(.9rem,.7rem + .7vw,1.15rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(1.3rem,1.1rem + .7vw,1.75rem);
  border-radius:var(--r);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s;
}
.card::before{ /* mjuk ljuspöl som följer pekaren */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(280px 200px at var(--mx,50%) var(--my,0%), rgba(255,74,28,.10), transparent 70%);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(255,74,28,.28)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.5rem}
.card p{color:var(--ink-2);font-size:.965rem}

.card__ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:var(--accent-soft);color:var(--accent-deep);
  transition:transform .6s var(--ease), background .4s;
}
.card__ic svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card:hover .card__ic{transform:translateY(-2px) rotate(-4deg);background:rgba(255,74,28,.16)}

.card--flat{background:transparent;border:0;box-shadow:none;padding:0}
.card--line{background:transparent;box-shadow:none}

/* Numrerad lista med hårfina linjer */
.rows{border-top:1px solid var(--line)}
.rows li{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;
  padding:1.25rem .2rem;border-bottom:1px solid var(--line);
  transition:background .4s, padding-left .5s var(--ease);
}
.rows li:hover{background:rgba(255,74,28,.035);padding-left:.7rem}
.rows b{
  font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.08em;
  color:var(--accent-deep);padding-top:.28rem;
}
.rows h3{margin-bottom:.3rem}
.rows p{color:var(--ink-2);font-size:.965rem;max-width:62ch}

/* ---------- Processen: fastnålad sidoscroll ----------
   Sektionen görs hög av main.js. Medan man scrollar förbi den ligger
   innehållet stilla och korten glider i sidled istället — ett steg i
   taget, där bubblan man är framme vid växer och fylls med orange.

   Grundläget nedan är en vanlig staplad lista. Klassen `is-h` läggs
   på av main.js först när sidoscrollen faktiskt ska användas, alltså
   inte på smala skärmar, inte vid reducerad rörelse och inte utan
   JavaScript. Då står stegen kvar under varandra och fungerar ändå. */
.hsec{
  --cw:min(440px, 74vw);              /* kortbredd */
  --gap:clamp(2rem, 4vw, 4rem);       /* avstånd mellan kort */
  position:relative;
}
.hsec__stage{padding-block:clamp(4rem,3rem + 5.5vw,7rem)}

.hsec__head{margin-bottom:clamp(2.2rem,1.6rem + 2vw,3.4rem)}
.hsec__head>*+*{margin-top:1rem}
.hsec__count{
  display:none;font-family:var(--font-display);font-weight:600;
  font-size:.78rem;letter-spacing:.16em;color:var(--ink-3);
}

.hsec__track{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;gap:clamp(1.8rem,1.4rem + 2vw,2.8rem);
}

/* --- Bubblorna som vätskebehållare ---
   Två tal styr allt, båda satta av main.js för varje steg:
     --fill  0–1  hur full bubblan är
     --near  0–1  hur nära mitten steget är (styr storleken)
   De är registrerade som riktiga tal med @property, annars går de
   inte att animera mjukt i det staplade läget. */
@property --fill{syntax:'<number>';inherits:true;initial-value:0}
@property --near{syntax:'<number>';inherits:true;initial-value:0}
@property --f{syntax:'<number>';inherits:true;initial-value:0}

.step{position:relative;--fill:0;--near:0}
/* Staplat läge animerar talen; i sidoscrollen sätts de per bildruta
   och då ska ingen övergång ligga emellan och släpa efter. */
.step{transition:--fill .55s var(--ease), --near .55s var(--ease)}
.hsec.is-h .step{transition:none}

/* Rutan är alltid 72 px och det är den som skalas. Då ligger bubblans
   mittpunkt stilla, så att röret mellan stegen aldrig hoppar. */
.step__bub{
  position:relative;width:72px;height:72px;margin-bottom:1rem;
  transform:scale(calc(.74 + .26 * var(--near)));
  will-change:transform;
}
.step__glow{               /* värmen under bubblan, tänds med vätskan */
  position:absolute;inset:-16px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,74,28,.6), transparent 72%);
  opacity:var(--fill);
}
.step__n{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow-s);
}

/* Vätskan är alltid lika hög som bubblan och skjuts nedåt istället
   för att krympa — då rör sig bara en transform, och ytan behåller
   sin form hela vägen. */
.step__liq{
  position:absolute;left:-30%;right:-30%;bottom:0;height:100%;
  background:linear-gradient(180deg,#FF5A28,var(--accent-deep));
  transform:translateY(calc((1 - var(--fill)) * 100%));
  opacity:clamp(0, calc(var(--fill) * 16), 1);
  will-change:transform;
}
/* Två ellipser som ligger i ytan och vaggar i otakt — det är de som
   får det att se ut som att det skvalpar. */
.step__liq i{
  position:absolute;left:50%;top:0;width:215%;height:26%;
  border-radius:50%;background:#FF5A28;
  animation:slosh 3.6s ease-in-out infinite;
}
.step__liq i:last-child{
  height:34%;background:#FF7A45;opacity:.5;
  animation-duration:5.3s;animation-delay:-1.7s;
}
@keyframes slosh{
  0%,100%{transform:translate(-55%,-56%) rotate(-4.5deg)}
  50%    {transform:translate(-45%,-44%) rotate(4.5deg)}
}

/* Siffran är grå ovanför vattenlinjen och vit under. Den vita kopian
   klipps av på exakt samma nivå som vätskan står. */
.step__num{
  position:relative;z-index:2;
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  color:var(--ink-3);
}
.step__num::after{
  content:attr(data-n);
  position:absolute;left:0;top:0;color:#fff;
  clip-path:inset(calc((1 - var(--fill)) * 100%) 0 0 0);
}

.step h3{margin-bottom:.5rem;transition:color .4s}
.step p{
  color:var(--ink-2);font-size:.965rem;max-width:38ch;
  transition:opacity .5s var(--ease);
}

/* Röret mellan två bubblor. Visas bara i sidoscrollen. */
.step__pipe{display:none}


@media (min-width:801px){
  .hsec.is-h .hsec__stage{
    position:sticky;top:0;height:100svh;overflow:hidden;padding-block:0;
    display:flex;flex-direction:column;justify-content:center;
  }
  .hsec.is-h .hsec__head{
    width:100%;max-width:var(--maxw);margin-inline:auto;
    padding-inline:var(--gutter);
    margin-bottom:clamp(2rem,1.4rem + 2vw,3.2rem);
  }
  .hsec.is-h .hsec__count{display:inline-block}

  /* Vadderingen i båda ändar är exakt halva tomrummet runt ett kort.
     Då hamnar första kortet mitt i rutan från start, och vandringen
     blir precis avståndet mellan första och sista bubblan. */
  .hsec.is-h .hsec__track{
    display:flex;align-items:flex-start;
    width:max-content;max-width:none;margin:0;
    gap:var(--gap);padding-inline:var(--pad,0px);
    transform:translate3d(var(--x,0px),0,0);
    will-change:transform;
  }
  .hsec.is-h .step{flex:0 0 var(--cw);width:var(--cw)}

  /* Röret från den här bubblans mitt till nästas. Inuti glider en
     klick vätska som transporterar det orangea vidare. */
  .hsec.is-h .step__pipe{
    display:block;position:absolute;z-index:-1;overflow:hidden;
    left:36px;top:34px;height:4px;border-radius:4px;
    width:calc(100% + var(--gap));
    background:rgba(23,18,16,.08);
  }
  .hsec.is-h .step:last-child .step__pipe{display:none}
  /* Klicken är 62 % av rörets längd. Förskjutningen räknas i andelar
     av klickens EGEN bredd: -100 % är precis utanför till vänster,
     161,3 % precis utanför till höger — alltså 261,3 % att vandra. */
  .hsec.is-h .step__pipe i{
    position:absolute;top:0;bottom:0;left:0;width:62%;
    background:linear-gradient(90deg,transparent,#FF5A28 30%,#FF8A3C 70%,transparent);
    transform:translateX(calc(var(--f) * 261.3% - 100%));
    will-change:transform;
  }

  /* Det som inte är framme just nu träder tillbaka en aning */
  .hsec.is-h .step:not(.is-on) h3{color:var(--ink-2)}
  .hsec.is-h .step:not(.is-on) p{opacity:.62}
}

/* ============================================================
   Säljsektioner: text till vänster, ett objekt bredvid som
   illustrerar resonemanget utan att avbilda det bokstavligt.
   Objekten spelar upp sig en gång när de kommer i sikte —
   main.js sätter då klassen is-live. Animationerna är alltså
   definierade under .obj.is-live och står stilla dessförinnan.
   ============================================================ */
.feat{padding-block:clamp(3.4rem,2.4rem + 4.6vw,6rem)}
.feat__grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2.2rem,1.8rem + 3.4vw,5rem);align-items:center;
}
.feat--flip .feat__art{order:-1}
.feat__copy>*+*{margin-top:1.1rem}
.feat__copy .lead{max-width:52ch}

.feat__list{
  display:grid;gap:.9rem;margin-top:1.9rem;
  padding-top:1.6rem;border-top:1px solid var(--line);
}
.feat__list li{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  font-size:.95rem;color:var(--ink-2);
}
.feat__list svg{
  width:16px;height:16px;margin-top:.34rem;
  stroke:var(--accent-deep);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Den ärliga brasklappen — får medvetet en egen, lugnare form */
.feat__note{
  margin-top:1.7rem;padding-left:1.15rem;
  border-left:2px solid var(--accent);
  font-size:.94rem;color:var(--ink-2);
}

@media (max-width:900px){
  .feat__grid{grid-template-columns:1fr;gap:2.6rem}
  .feat--flip .feat__art{order:0}
}

/* ============================================================
   OBJEKTEN BREDVID SÄLJTEXTEN

   Fem scener, en per avsnitt. Tre regler styr dem allihop:

   1. Riktigt innehåll. Inga grå platshållarstreck någonstans —
      det som står i ett objekt går att läsa och är sant.
   2. Djup på riktigt. Varje scen ligger i ett perspektiv, och
      delarna står på olika avstånd med translateZ. Det är därför
      de flyttar sig olika mycket när scenen vaggar.
   3. Långsamt. Förloppet tar sju till nio sekunder. Det är
      medvetet: en animation som är över innan ögat hunnit fram
      har lika gärna kunnat vara ett stillbild.

   Efter förloppet står scenen still och vaggar bara. Den spelas
   en gång, inte i loop — den som läser ska få läsa i fred.
   ============================================================ */

.obj{
  position:relative;
  border-radius:var(--r-l);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-m);
  padding:clamp(1.3rem,1rem + 1.3vw,1.9rem);
  /* Perspektivet står här, på ramen, så att allt inuti delar
     samma synpunkt. Utan det blir translateZ bara en skalning. */
  perspective:1200px;
  perspective-origin:50% 42%;
}
.obj::before{
  content:"";position:absolute;inset:auto -25% -45% 25%;height:85%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,74,28,.11), transparent 70%);
}

/* Scenens plan. Allt innehåll ligger på den, och det är den som
   vaggar. Barnen ärver preserve-3d så att deras egna translateZ
   räknas i samma rum. */
.obj__3d{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-8deg);
  will-change:transform;
}
.feat--flip .obj__3d{transform:rotateX(6deg) rotateY(8deg)}

/* Vaggningen. Långsam nog att man inte ser den börja, och alla
   objekt går i otakt tack vare de negativa fördröjningarna. */
@keyframes objSvaj{
  0%,100%{transform:rotateX(6deg)   rotateY(-8deg) translate3d(0,-7px,0)}
  50%    {transform:rotateX(3.5deg) rotateY(-5deg) translate3d(0,7px,0)}
}
@keyframes objSvajFlip{
  0%,100%{transform:rotateX(6deg)   rotateY(8deg) translate3d(0,-7px,0)}
  50%    {transform:rotateX(3.5deg) rotateY(5deg) translate3d(0,7px,0)}
}
.obj.is-live .obj__3d{animation:objSvaj 15s ease-in-out infinite}
.feat--flip .obj.is-live .obj__3d{animation-name:objSvajFlip}
.obj--speed.is-live .obj__3d{animation-duration:17s;animation-delay:-4s}
.obj--phone.is-live .obj__3d{animation-duration:13s;animation-delay:-7s}
.obj--form.is-live  .obj__3d{animation-duration:16s;animation-delay:-2s}
.obj--craft.is-live .obj__3d{animation-duration:19s;animation-delay:-9s}

/* Lyftet använder translate, inte transform. Nästan varje del i de
   här scenerna bär ett eget translateZ, och en keyframe som slutar
   på transform:none skulle nolla djupet i samma ögonblick som
   intoningen är klar. */
@keyframes objUp{from{opacity:0;translate:0 11px}to{opacity:1;translate:none}}
@keyframes objRing{0%{opacity:.8;transform:scale(1)}30%,100%{opacity:0;transform:scale(1.75)}}

/* Texten skrivs fram genom att masken dras åt sidan. Ett riktigt
   ord som växer fram, inte ett streck som blir längre. */
@keyframes skriv{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}


/* ---------- A. Sökresultatet ----------
   Er rad kommer fram ur listan i stället för att byta plats i den.
   Djupet gör jobbet: ni lyfts mot betraktaren, de andra viker
   bakåt. Det säger samma sak som en omsortering, utan att påstå
   att vi styr Googles ordning. */

.obj--find .obj__3d{display:grid;gap:1rem}

.fd__q{
  display:flex;align-items:center;gap:.6rem;
  background:var(--tint);border:1px solid var(--line);
  border-radius:var(--pill);padding:.62rem .95rem;
  transform:translateZ(30px);
}
.fd__q svg{width:15px;height:15px;flex:none;stroke:var(--ink-3);stroke-width:2;fill:none}
.fd__q b{
  font-size:.845rem;font-weight:500;color:var(--ink-2);
  white-space:nowrap;clip-path:inset(0 100% 0 0);
}
.obj.is-live .fd__q b{animation:skriv 2.2s steps(14,end) .5s both}
.fd__q i{width:1.5px;height:15px;background:var(--accent-deep);opacity:0}
.obj.is-live .fd__q i{animation:caret 1.15s steps(1) .5s 4}
@keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}

.fd__rows{display:grid;gap:9px;list-style:none;margin:0;padding:0}
.fd__row{
  position:relative;
  border-radius:10px;padding:.62rem .8rem;
  background:var(--card);border:1px solid var(--line);
  display:grid;gap:2px;
  opacity:0;
  transition:transform 1.9s var(--ease), filter 1.4s var(--ease), border-color 1.9s var(--ease);
}
.fd__row b{font-size:.8rem;font-weight:600;color:var(--ink);line-height:1.3}
.fd__row u{font-size:.695rem;text-decoration:none;color:var(--ink-3)}
.fd__row em{
  display:none;font-style:normal;
  font-size:.715rem;color:var(--ink-2);line-height:1.45;margin-top:2px;
}
.obj.is-live .fd__row{
  opacity:1;
  animation:objUp .8s var(--ease) both;
  animation-delay:calc(2.9s + var(--r) * .28s);
}

/* Efter att listan lagt sig: er rad fram, de andra bakåt */
.fd__row--us{border-color:rgba(216,51,10,.28)}
.fd__row--us em{display:block}
.obj.is-live .fd__row--us{
  transform:translateZ(58px) translateY(-6px);
  box-shadow:0 18px 34px -22px rgba(216,51,10,.55);
  transition-delay:4.4s;
}
/* Nedtoningen görs med filter och inte med opacity. Intoningen
   objUp fyller framåt med opacity:1, och en animation slår alltid
   en vanlig deklaration — raderna hade aldrig mörknat. */
.obj.is-live .fd__row:not(.fd__row--us){
  transform:translateZ(-26px);
  filter:opacity(.45);
  transition-delay:4.4s;
}

.fd__badge{
  position:absolute;top:-9px;left:-9px;
  width:24px;height:24px;border-radius:50%;
  background:var(--accent-deep);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:.72rem;font-weight:600;
  transform:translateZ(20px) scale(.4);opacity:0;
  transition:transform .7s var(--ease) 5.2s, opacity .7s var(--ease) 5.2s;
}
.obj.is-live .fd__badge{transform:translateZ(20px) scale(1);opacity:1}

.fd__meta{
  transform:translateZ(12px);
  font-size:.7rem;line-height:1.5;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:.75rem;
  opacity:0;
}
.fd__meta span{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  color:var(--accent-deep);margin-right:.4rem;
}
.obj.is-live .fd__meta{animation:objUp .9s var(--ease) 6s both}


/* ---------- B. Laddtiden ----------
   Siffran är inte påhittad. main.js läser webbläsarens egen
   mätning av den här sidan och räknar upp till den. Staplarna
   är filernas verkliga storlek, komprimerade som servern
   skickar dem. */

.obj--speed .obj__3d{display:grid;gap:1.15rem}

.spd__head{
  display:flex;align-items:center;gap:.5rem;
  font-size:.735rem;letter-spacing:.02em;color:var(--ink-3);
  transform:translateZ(26px);
  opacity:0;
}
.spd__head i{
  width:7px;height:7px;border-radius:50%;background:#3BB273;flex:none;
}
.obj.is-live .spd__head{animation:objUp .8s var(--ease) .5s both}

.spd__big{
  display:grid;gap:.15rem;transform:translateZ(44px);
  opacity:0;
}
.spd__big b{
  font-family:var(--font-display);font-stretch:82%;
  font-size:clamp(2.6rem,2rem + 2.4vw,3.9rem);
  font-weight:600;line-height:1;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.spd__big span{font-size:.79rem;color:var(--ink-2)}
.obj.is-live .spd__big{animation:objUp .9s var(--ease) 1.1s both}

.spd__bars{
  display:grid;gap:.6rem;list-style:none;margin:0;padding:0;
  transform:translateZ(16px);
}
.spd__bars li{
  display:grid;grid-template-columns:5.4rem 1fr 3.1rem;
  align-items:center;gap:.7rem;
  font-size:.735rem;color:var(--ink-2);
  opacity:0;
}
.spd__bars i{
  display:block;height:7px;border-radius:4px;
  background:var(--line);position:relative;overflow:hidden;
}
.spd__bars i::after{
  content:"";position:absolute;inset:0 auto 0 0;
  width:var(--w);border-radius:4px;
  background:linear-gradient(90deg,#FF6234,var(--accent-deep));
  transform:scaleX(0);transform-origin:left;
}
.spd__bars u{text-decoration:none;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums}
.obj.is-live .spd__bars li{
  animation:objUp .7s var(--ease) both;
  animation-delay:calc(2.2s + var(--k) * .55s);
}
.obj.is-live .spd__bars i::after{
  animation:spdFyll 1.5s var(--ease) both;
  animation-delay:calc(2.4s + var(--k) * .55s);
}
@keyframes spdFyll{to{transform:scaleX(1)}}

.spd__zero span,.spd__zero u{color:var(--accent-deep)}
.spd__zero i{background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px)}

.spd__note{
  transform:translateZ(10px);
  font-size:.72rem;line-height:1.5;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:.75rem;
  opacity:0;
}
.obj.is-live .spd__note{animation:objUp .9s var(--ease) 5.1s both}


/* ---------- C. Mobilen ----------
   Ramen är ett fotografi av en iPhone 17 Pro, och vår sida ritas
   inuti den. Skärmytan är utmätt ur bildens pixeldata: glasets
   kanter ligger på x 37 och 790, y 34 och 1669, i en bild som är
   828 × 1709. Procenttalen nedan är exakt de måtten — därför
   sitter innehållet innanför kanten och inte ovanpå ramen.

   Bilden saknar genomskinlighet: hörnen är vita. Det gör
   ingenting så länge kortet under är vitt, vilket .obj är.

   Dynamic Island ritas av oss. Den ligger på skärmen i
   fotografiet, så den försvinner när vi lägger vårt innehåll
   över — utan den ser telefonen fel ut. */

/* Telefonen står utan kort omkring sig. En vit ruta runt en
   telefon läser som en platshållare som ingen hunnit fylla —
   telefonen är motivet, och den klarar sig själv mot sidan. */
.obj--phone{
  background:none;border:0;box-shadow:none;padding:0;
}
.obj--phone::before{
  inset:auto 6% -4% 6%;height:64%;
}
.obj--phone .obj__3d{display:grid;place-items:center;min-height:0}

.ph{
  position:relative;
  width:min(196px,54%);
}
/* Skuggan ritas som en egen fläck under telefonen, utanför dess
   silhuett — inte som en filter-skugga på bilden. */
.ph::after{
  content:"";position:absolute;z-index:0;
  left:6%;right:6%;bottom:-3%;height:7%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(23,18,16,.34), transparent 72%);
  filter:blur(7px);
}
/* Fotografiet har äkta alfakanal, så de rundade hörnen är genomskinliga
   på riktigt. Tidigare låg här mix-blend-mode:multiply för att dölja en
   vit bakgrund, men blandningen bryts av att .obj__3d bär både
   transform-style och will-change — de skapar en egen grupp, och då har
   bilden inget att blanda sig mot. Hörnen blev vita igen. Genomskinlighet
   i filen är oberoende av vad som ligger runtom. */
.ph__frame{position:relative;z-index:1;display:block;width:100%;height:auto}

.ph__scr{
  z-index:2;
  position:absolute;
  left:4.469%;top:1.989%;right:4.589%;bottom:2.341%;
  /* Vågrät radie räknas på bredden, lodrät på höjden. Två olika
     tal krävs för att hörnet ska bli runt och inte äggformat. */
  border-radius:13.95% / 6.42%;
  overflow:hidden;
  background:var(--card);
  padding:8.5% 5.5% 5.5%;
  display:grid;gap:.42rem;align-content:start;
}
.ph__scr > *{opacity:0;translate:0 12px}
.obj.is-live .ph__scr > *{
  animation:objUp .85s var(--ease) both;
  animation-delay:calc(.9s + var(--d) * .58s);
}

/* Dynamic Island — måtten är tagna ur samma bild */
.ph__island{
  z-index:3;
  position:absolute;left:39.5%;top:3.4%;
  width:21%;height:2.9%;
  border-radius:99px;background:#05070C;
  pointer-events:none;
}

.ph__stat{
  display:flex;align-items:center;gap:3px;
  font-size:.5rem;color:var(--ink-3);margin-bottom:.15rem;
}
.ph__stat b{font-weight:600;color:var(--ink-2);margin-right:auto;letter-spacing:.01em}
.ph__stat i{width:9px;height:5px;border-radius:1.5px;background:var(--line-2)}
.ph__stat i:last-child{width:13px}

.ph__top{
  display:flex;align-items:center;gap:.34rem;
  font-size:.61rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  padding-bottom:.4rem;border-bottom:1px solid var(--line);
}
.ph__top i{width:11px;height:11px;border-radius:50%;background:var(--ink);flex:none}
.ph__top b{color:var(--accent-deep);font-weight:600}

.ph__h{
  font-family:var(--font-display);font-stretch:85%;font-weight:600;
  font-size:.88rem;line-height:1.1;color:var(--ink);letter-spacing:-.01em;
  margin-top:.2rem;
}
.ph__p{font-size:.6rem;line-height:1.5;color:var(--ink-2)}
.ph__img{
  height:70px;border-radius:8px;
  background:linear-gradient(140deg,var(--accent-soft),var(--tint));
  border:1px solid var(--line);
}
.ph__cta{
  position:relative;
  margin-top:.1rem;height:30px;border-radius:var(--pill);
  background:var(--accent-deep);color:#fff;
  display:grid;place-items:center;
  font-size:.62rem;font-weight:600;
}
/* Tre kort under knappen. Utan dem står nedre halvan av skärmen
   tom, och telefonen ser ut att visa en sida som inte laddat
   klart i stället för en färdig. */
.ph__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:.3rem}
.ph__cards i{
  height:44px;border-radius:6px;
  background:var(--tint);border:1px solid var(--line);
}
.ph__foot{
  margin-top:.5rem;padding-top:.55rem;
  border-top:1px solid var(--line);
  display:grid;gap:.28rem;
}
.ph__foot b{
  font-size:.46rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;
}
.ph__foot em{
  font-style:normal;font-size:.56rem;color:var(--ink-2);
  display:flex;align-items:center;gap:.3rem;
}
.ph__foot em::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--accent-deep);flex:none;
}

.ph__tap{
  position:absolute;width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  opacity:0;
}
.obj.is-live .ph__tap{animation:objRing 4.4s ease-out 5.2s infinite}

.ph__tag{
  position:absolute;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--pill);padding:.36rem .7rem;
  font-size:.665rem;font-weight:600;color:var(--ink-2);white-space:nowrap;
  box-shadow:var(--shadow-s);
  opacity:0;
}
.ph__tag::after{
  content:"";position:absolute;top:50%;width:20px;height:1px;background:var(--line-2);
}
.ph__tag--a{top:29%;left:2%;transform:translateZ(78px)}
.ph__tag--a::after{right:-20px}
.ph__tag--b{top:50%;right:2%;transform:translateZ(78px)}
.ph__tag--b::after{left:-20px}
.obj.is-live .ph__tag--a{animation:objUp .9s var(--ease) 4.6s both}
.obj.is-live .ph__tag--b{animation:objUp .9s var(--ease) 5.5s both}

@media (max-width:460px){
  .ph{width:min(176px,58%)}
  .ph__tag{font-size:.6rem;padding:.3rem .55rem}
  .ph__tag--a{left:-4%}
  .ph__tag--b{right:-4%}
}

/* ---------- D. Formuläret ----------
   Fälten skrivs i sig själva med riktig text, kuvertet lyfter,
   och notisen landar. Kuvertet flyger i djupled också — det är
   därför det växer på vägen. */

.obj--form .obj__3d{display:grid;gap:1rem}

.fm__card{
  display:grid;gap:.7rem;
  transform:translateZ(18px);
}
.fm__f{
  display:grid;gap:.2rem;
  border:1px solid var(--line);border-radius:9px;
  padding:.5rem .7rem;background:var(--card);
}
.fm__f label{
  font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.fm__f i{
  font-style:normal;font-size:.78rem;color:var(--ink);line-height:1.45;
  clip-path:inset(0 100% 0 0);
}
.fm__f--big i{min-height:2.6em}
.obj.is-live .fm__f i{
  animation:skriv 1.5s steps(24,end) both;
  animation-delay:calc(.7s + var(--k) * 1.5s);
}
.fm__btn{
  height:38px;border-radius:var(--pill);
  background:var(--accent-deep);color:#fff;
  display:grid;place-items:center;position:relative;
  font-size:.78rem;font-weight:600;
  transform:translateZ(8px);
}
.fm__btn::after{
  content:"";position:absolute;inset:0;border-radius:var(--pill);
  border:2px solid var(--accent-deep);opacity:0;
}
.obj.is-live .fm__btn::after{animation:objRing 1.4s ease-out 5.5s both}

.fm__env{
  position:absolute;left:50%;bottom:4.2rem;
  width:34px;height:34px;margin-left:-17px;
  border-radius:9px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  display:grid;place-items:center;
  opacity:0;
}
.fm__env svg{width:18px;height:18px;stroke:var(--accent-deep);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.obj.is-live .fm__env{animation:fmFlyg 2.2s var(--ease) 5.7s both}
@keyframes fmFlyg{
  0%  {opacity:0;transform:translate3d(0,10px,0) scale(.75)}
  22% {opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:0;transform:translate3d(0,-118px,90px) scale(1.25)}
}

.fm__inbox{
  display:grid;gap:2px;
  border-radius:10px;padding:.65rem .8rem;
  background:var(--accent-soft);border:1px solid rgba(216,51,10,.22);
  transform:translateZ(40px);
  opacity:0;
  position:relative;
}
.fm__inbox b{font-size:.775rem;font-weight:600;color:var(--ink);line-height:1.3}
.fm__inbox u{font-size:.695rem;text-decoration:none;color:var(--ink-2)}
.fm__dot{
  position:absolute;top:-6px;right:-6px;
  width:15px;height:15px;border-radius:50%;background:var(--accent-deep);
  box-shadow:0 0 0 3px var(--card);
}
.obj.is-live .fm__inbox{animation:objUp 1s var(--ease) 7.3s both}


/* ---------- E. Hantverket ----------
   Tre kort ur det verkliga designsystemet: paletten med sina
   riktiga värden, typsnittet med sin bredd, och en färdig
   komponent. De ligger på tre olika avstånd. */

.obj--craft{padding-block:clamp(1.8rem,1.4rem + 2vw,2.6rem)}
.obj--craft .obj__3d{display:grid;place-items:center;min-height:352px}

.cr{
  position:absolute;border-radius:14px;
  background:var(--card);
  box-shadow:0 22px 44px -28px rgba(23,18,16,.6);
  border:1px solid var(--line);
  opacity:0;
}
.cr--1{
  width:140px;padding:10px;display:grid;gap:6px;
}
.cr--1 i{
  height:34px;border-radius:8px;
  display:flex;align-items:flex-end;padding:5px 7px;
}
.cr--1 b{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.575rem;font-weight:500;letter-spacing:.02em;
}
.cr--1 i:nth-child(1){background:var(--bg);border:1px solid var(--line)}
.cr--1 i:nth-child(1) b{color:var(--ink-3)}
.cr--1 i:nth-child(2){background:var(--accent-deep)}
.cr--1 i:nth-child(2) b{color:#fff}
.cr--1 i:nth-child(3){background:var(--ink-bg)}
.cr--1 i:nth-child(3) b{color:rgba(255,255,255,.75)}

.cr--2{
  width:112px;height:112px;
  display:grid;place-content:center;gap:2px;text-align:center;
}
.cr--2 b{
  font-family:var(--font-display);font-stretch:82%;font-weight:600;
  font-size:2.5rem;line-height:1;letter-spacing:-.03em;color:var(--ink);
}
.cr--2 u{text-decoration:none;font-size:.6rem;color:var(--ink-3)}

.cr--3{
  width:158px;padding:12px;display:grid;gap:5px;align-content:start;
}
.cr--3 b{
  font-family:var(--font-display);font-stretch:88%;
  font-size:.82rem;font-weight:600;color:var(--ink);
}
.cr--3 p{font-size:.66rem;color:var(--ink-2);line-height:1.45;margin:0}
.cr--3 em{
  font-style:normal;margin-top:4px;
  background:var(--accent-deep);color:#fff;
  border-radius:var(--pill);padding:.34rem .6rem;
  font-size:.63rem;font-weight:600;text-align:center;
}

/* Fördröjningarna är utdragna så att korten kommer ett i taget
   och hinner uppfattas var för sig. */
.obj.is-live .cr{animation:crIn 1.15s var(--ease) both}
.obj.is-live .cr--1{animation-delay:.6s}
.obj.is-live .cr--2{animation-delay:1.5s}
.obj.is-live .cr--3{animation-delay:2.4s}
/* Slutvärdet för transform står medvetet inte i keyframen, utan i
   reglerna nedan. Saknas en egenskap i to-rutan hämtar animationen
   elementets egen slutposition — så varje kort landar i sin egen
   vinkel och på sitt eget djup. */
@keyframes crIn{from{opacity:0;transform:translateY(34px) scale(.9)}to{opacity:1}}
.obj.is-live .cr--1{transform:translate3d(-118px,26px,-34px) rotate(-8deg)}
.obj.is-live .cr--2{transform:translate3d(26px,-104px,54px)  rotate(5deg)}
.obj.is-live .cr--3{transform:translate3d(76px,62px,16px)    rotate(7deg)}
@media (max-width:460px){
  .obj.is-live .cr--1{transform:translate3d(-78px,30px,-34px) rotate(-8deg)}
  .obj.is-live .cr--3{transform:translate3d(54px,64px,16px)   rotate(7deg)}
}


/* ---------- Reducerad rörelse ----------
   Ingen vaggning, inga förlopp. Allt står i sitt slutläge direkt,
   och allt går fortfarande att läsa. */
@media (prefers-reduced-motion: reduce){
  .obj.is-live .obj__3d{animation:none}
  .obj.is-live .fd__q b,
  .obj.is-live .fm__f i{clip-path:none;animation:none}
  .obj.is-live .fd__q i,
  .obj.is-live .ph__tap,
  .obj.is-live .fm__btn::after,
  .obj.is-live .fm__env{animation:none;opacity:0}
  .obj.is-live .fd__row,
  .obj.is-live .fd__meta,
  .obj.is-live .spd__head,
  .obj.is-live .spd__big,
  .obj.is-live .spd__bars li,
  .obj.is-live .spd__note,
  .obj.is-live .ph__scr > *,
  .obj.is-live .ph__tag,
  .obj.is-live .fm__inbox,
  .obj.is-live .cr{animation:none;opacity:1;transform:none}
  .obj.is-live .spd__bars i::after{animation:none;transform:scaleX(1)}
  .obj.is-live .fd__row{transition:none}
  .obj.is-live .fd__badge{transition:none;opacity:1;transform:scale(1)}
  .obj.is-live .cr--1{transform:translate(-118px,26px) rotate(-8deg)}
  .obj.is-live .cr--2{transform:translate(26px,-104px) rotate(5deg)}
  .obj.is-live .cr--3{transform:translate(76px,62px) rotate(7deg)}
}

/* --- Kompakt kryssad lista, två spalter --- */
.ticks{
  display:grid;grid-template-columns:1fr 1fr;
  gap:.9rem clamp(1.4rem,1rem + 2vw,3rem);
}
.ticks li{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
  font-size:.955rem;color:var(--ink-2);
}
.ticks b{display:block;color:var(--ink);font-weight:600}
.ticks svg{
  width:16px;height:16px;margin-top:.34rem;
  stroke:var(--accent-deep);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width:700px){.ticks{grid-template-columns:1fr}}

/* ---------- Pris ---------- */
.price{
  position:relative;overflow:hidden;border-radius:var(--r-l);
  padding:clamp(1.8rem,1.4rem + 2.6vw,3.2rem);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-m);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,1.4rem + 2vw,3.2rem);
  align-items:center;
}
.price::before{
  content:"";position:absolute;inset:auto -20% -70% 40%;height:150%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,74,28,.14), transparent 70%);
}
/* Raden över siffran är en hel mening, inte en etikett. "Från"
   i versaler gjorde 3 499 till ett golv att bygga vidare på —
   det är precis motsatsen till vad som ska sägas. */
.price__tag{display:grid;justify-items:start;gap:.3rem;margin-block:1rem .5rem}
.price__from{
  font-size:1.03rem;font-weight:500;line-height:1.35;
  color:var(--ink-2);max-width:24ch;
}
.price__num{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;
  font-size:clamp(2.6rem,1.8rem + 3.4vw,4rem);line-height:1;
  background:linear-gradient(105deg,#FF6234,var(--accent-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Det ska framgå vad priset är. Vi är ett UF-företag och är inte
   momsregistrerade, så summan är den kunden betalar. */
.price__moms{font-size:.82rem;color:var(--ink-3);margin-top:.15rem}
.price__list{position:relative;display:grid;gap:.72rem}
.price__list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.965rem;color:var(--ink-2)}
.price__list svg{width:17px;height:17px;flex:none;margin-top:.28rem;stroke:var(--accent-deep);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.price__list b{color:var(--ink);font-weight:600}
@media (max-width:820px){.price{grid-template-columns:1fr}}

/* ---------- Arbeten ---------- */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,.8rem + 1vw,1.6rem)}
@media (max-width:760px){.works{grid-template-columns:1fr}}
.work{
  border-radius:var(--r-l);overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  transition:transform .65s var(--ease), box-shadow .65s var(--ease);
}
.work:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.work__shot{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,var(--tint),#fff);border-bottom:1px solid var(--line);
  display:grid;place-items:center;
}
.work__shot>div{
  width:78%;border-radius:8px 8px 0 0;background:#fff;box-shadow:var(--shadow-m);
  transform:translateY(12%) scale(1);transition:transform .8s var(--ease);
  overflow:hidden;border:1px solid var(--line);border-bottom:0;
}
.work:hover .work__shot>div{transform:translateY(6%) scale(1.03)}
.work__mock{padding:.7rem;display:grid;gap:.45rem}
.work__mock i{display:block;border-radius:3px;background:var(--line-2);height:5px}
.work__mock i.h{height:11px;width:58%;background:var(--ink);border-radius:4px}
.work__mock i.a{height:34px;border-radius:6px;background:linear-gradient(120deg,rgba(255,74,28,.2),var(--tint))}
.work__mock i.s{width:74%}
.work__body{padding:clamp(1.1rem,1rem + .6vw,1.5rem)}
.work__body h3{margin-bottom:.35rem}
.work__body p{color:var(--ink-2);font-size:.95rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.tag{
  font-size:.76rem;font-weight:600;letter-spacing:.02em;padding:.28rem .65rem;
  border-radius:var(--pill);background:var(--accent-soft);color:var(--accent-deep);
}

/* ---------- Statistik ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,.8rem + 1vw,2rem)}
/* Två påståenden i stället för tre. Vi lovar bara sådant vi kan hålla,
   och två som stämmer väger tyngre än tre där ett är en förhoppning. */
.stats--tva{grid-template-columns:repeat(2,1fr);max-width:52rem}
@media (max-width:700px){.stats,.stats--tva{grid-template-columns:1fr;gap:1.4rem}}
.stat b{
  display:block;font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(2.1rem,1.6rem + 2vw,2.9rem);line-height:1;color:var(--ink);
}
.stat span{display:block;margin-top:.55rem;color:var(--ink-2);font-size:.945rem;max-width:30ch}

/* ---------- Dragspel / FAQ ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.4rem;
  padding:1.3rem .2rem;text-align:left;
  font-family:var(--font-display);font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);
  font-weight:500;letter-spacing:-.015em;color:var(--ink);line-height:1.35;
  transition:color .3s, padding-left .5s var(--ease);
}
.acc__btn:hover{color:var(--accent-deep);padding-left:.6rem}
.acc__ic{
  position:relative;flex:none;width:26px;height:26px;border-radius:50%;margin-top:.1rem;
  background:var(--tint);transition:.5s var(--ease);
}
.acc__ic::before,.acc__ic::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;border-radius:2px;
  background:var(--ink);transform:translate(-50%,-50%);transition:.5s var(--ease);
}
.acc__ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__ic{background:var(--accent-deep)}
.acc__btn[aria-expanded="true"] .acc__ic::before,
.acc__btn[aria-expanded="true"] .acc__ic::after{background:#fff}
.acc__btn[aria-expanded="true"] .acc__ic::after{transform:translate(-50%,-50%) rotate(0)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.acc__panel>div{overflow:hidden;min-height:0}
.acc__item.is-open .acc__panel{grid-template-rows:1fr}
.acc__panel p{
  padding:0 3rem 1.5rem .2rem;color:var(--ink-2);max-width:70ch;
  opacity:0;transform:translateY(6px);transition:.6s var(--ease) .1s;
}
.acc__item.is-open .acc__panel p{opacity:1;transform:none}
@media (max-width:600px){.acc__panel p{padding-right:.4rem}}

/* ---------- Formulär ---------- */
.form{display:grid;gap:1.05rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem}
.field label{font-size:.85rem;font-weight:600;color:var(--ink-2);letter-spacing:-.005em}
.field label span{color:var(--ink-3);font-weight:400}
/* Textstorleken får aldrig understiga 16 px. Safari på iPhone zoomar in
   när man trycker i ett fält som har mindre text — och zoomar inte ut
   igen. Sidan står då kvar förstorad mitt i formuläret. Det låg på
   .985rem, alltså 15,76 px, och missade gränsen med en fjärdedels pixel. */
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border-radius:14px;
  background:var(--card);border:1px solid var(--line-2);
  font-size:1rem;color:var(--ink);
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--accent-deep);box-shadow:0 0 0 4px rgba(255,74,28,.14);
}
.field .err{font-size:.8rem;color:var(--accent-deep);min-height:0}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--accent-deep);background:var(--accent-soft)}

.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:inline-block;padding:.5rem .95rem;border-radius:var(--pill);
  border:1px solid var(--line-2);font-size:.885rem;font-weight:500;color:var(--ink-2);
  transition:.35s var(--ease);
}
.choice:hover span{border-color:var(--ink-3);color:var(--ink)}
.choice input:checked+span{background:var(--accent-soft);border-color:var(--accent-deep);color:var(--accent-deep);font-weight:600}
.choice input:focus-visible+span{outline:2px solid var(--accent-deep);outline-offset:2px}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.885rem;color:var(--ink-2)}
.consent input{margin-top:.28rem;width:17px;height:17px;accent-color:var(--accent-deep);flex:none}
.consent.has-error{color:var(--accent-deep)}

.form__foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:.4rem}
.form__status{font-size:.885rem;color:var(--ink-3)}
.form__status.is-err{color:var(--accent-deep)}
.form.is-sent{display:none}
.sent{
  display:none;padding:clamp(1.6rem,1.3rem + 1.5vw,2.4rem);border-radius:var(--r-l);
  background:var(--accent-soft);border:1px solid rgba(255,74,28,.28);
}
.sent.is-on{display:block;animation:pop .7s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sent h3{margin-bottom:.5rem;color:var(--ink)}
.sent p{color:var(--ink-2)}
.sent:focus{outline:none}
.sent:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
/* Felrutan ska läsas som allvarlig men inte larmande — samma varma
   accentyta, men med en tydlig kant och plats för utvägarna. */
.sent--fail{
  margin-top:1.4rem;
  background:var(--card);
  border:1px solid rgba(255,74,28,.35);
  box-shadow:0 1px 2px rgba(23,18,16,.05), 0 14px 34px -20px rgba(216,51,10,.4);
}

/* Kontaktkolumn */
.contact{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,1.6rem + 2.5vw,3.6rem);align-items:start}
@media (max-width:880px){.contact{grid-template-columns:1fr}}
.cbox{padding:1.4rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.cbox+.cbox{margin-top:1rem}
.cbox h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.7rem}
.cbox a{font-family:var(--font-display);font-size:1.08rem;font-weight:500;letter-spacing:-.02em;transition:color .3s}
.cbox a:hover{color:var(--accent-deep)}
.cbox p{font-size:.92rem;color:var(--ink-2);margin-top:.5rem}

/* ---------- Notis / liten ruta ---------- */
.note{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1.05rem 1.2rem;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid rgba(255,74,28,.2);
  font-size:.93rem;color:var(--ink-2);
}
.note svg{width:18px;height:18px;flex:none;margin-top:.2rem;stroke:var(--accent-deep);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.note b{color:var(--ink)}