/* ============================================================
   PRECISION BIL — style.css
   Designsystem: "Instrumentet". Svart anodiserad panel, hårfina
   linjer och skalstreck, ett elektriskt blått spår, och siktet
   ur logotypen som återkommande registermärke.

   INNEHÅLL
   1.  Tokens (färger, typografi, mått)
   2.  Bas & webbläsarytor
   3.  Byggstenar (shell, knappar, ikoner, rubriker, hörnmärken)
   4.  Header & navigation
   5.  Hero
   6.  Tjänster
   7.  Prislista
   8.  Så fungerar det
   9.  Bokningsformulär
   10. Varför Precision Bil
   11. FAQ
   12. Om
   13. Kontakt
   14. Footer
   15. Mobilt bottenfält
   16. Modaler
   17. Rörelse & reveal
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ytor */
  --bg:            #05070A;
  --bg-alt:        #080B11;
  --panel:         #0A0E15;
  --panel-hi:      rgba(255,255,255,.035);
  --panel-lo:      rgba(255,255,255,.012);

  /* Linjer */
  --line:          rgba(255,255,255,.085);
  --line-2:        rgba(255,255,255,.155);

  /* Blått */
  --blue:          #1B6DF0;   /* logotypens blå — grafik, fyllning, ramar */
  --blue-lift:     #4D94FF;   /* ljusare — används för blå TEXT (kontrast) */
  --blue-deep:     #0A244F;   /* diskret mörkblå ton */
  --blue-glow:     rgba(27,109,240,.34);

  /* Text */
  --ink:           #FFFFFF;
  --ink-2:         #AEB9C9;
  --ink-3:         #808C9E;

  /* Typografi */
  --font-display:  "Saira", "Segoe UI", system-ui, sans-serif;
  --font-body:     "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Mått */
  --shell:         1200px;
  --shell-narrow:  860px;
  --gutter:        clamp(20px, 5vw, 40px);
  --radius:        4px;
  --radius-lg:     6px;
  --section-y:     clamp(84px, 11vw, 152px);

  /* Rörelse */
  --ease-out:      cubic-bezier(.23,1,.32,1);
  --ease-in-out:   cubic-bezier(.77,0,.175,1);

  /* Skugga med både offset och mjuk oskärpa */
  --shadow:        0 18px 40px -18px rgba(0,0,0,.85), 0 2px 6px -2px rgba(0,0,0,.6);
  --shadow-lift:   0 26px 60px -22px rgba(0,0,0,.9), 0 4px 12px -4px rgba(0,0,0,.6);
}

/* ---------- 2. BAS & WEBBLÄSARYTOR ---------- */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.menu-open{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0;
}

p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

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

/* Webbläsarytor tematiseras — de delar vi inte ritat bär också designen */
::selection{ background:var(--blue); color:#fff; }
:root{ accent-color:var(--blue); color-scheme:dark; }

:focus-visible{
  outline:2px solid var(--blue-lift);
  outline-offset:3px;
  border-radius:2px;
}

@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{
    background:#1a2231; border:3px solid var(--bg); border-radius:99px;
  }
  ::-webkit-scrollbar-thumb:hover{ background:#26354c; }
}
html{ scrollbar-color:#1a2231 var(--bg); scrollbar-width:thin; }

.skip{
  position:fixed; left:16px; top:-100px; z-index:200;
  background:var(--blue); color:#fff;
  padding:12px 18px; border-radius:var(--radius);
  font-weight:600;
  transition:top 180ms var(--ease-out);
}
.skip:focus{ top:16px; }

/* ---------- 3. BYGGSTENAR ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell-narrow{ max-width:var(--shell-narrow); }

.section{ padding-block:var(--section-y); position:relative; }
.section-prices{ background:var(--bg-alt); border-block:1px solid var(--line); }
.section-book{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(27,109,240,.10), transparent 60%),
    var(--bg-alt);
  border-block:1px solid var(--line);
}
.section-about{ background:var(--bg-alt); border-block:1px solid var(--line); }

/* Ikoner — en enda streckgrammatik genom hela sidan */
.i{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* Sektionsrubrik med siktesmärke och hårfin linje */
.s-head{ margin-bottom:clamp(38px, 5vw, 60px); max-width:64ch; }
.s-mark{
  width:22px; height:22px; color:var(--blue);
  margin-bottom:20px;
  display:block;
}
.s-head h2, .about h2{
  font-size:clamp(2rem, 4.6vw, 3.25rem);
  letter-spacing:-.03em;
  padding-top:20px;
  border-top:1px solid var(--line);
  position:relative;
}
.s-head h2::before, .about h2::before{
  content:""; position:absolute; top:-1px; left:0;
  width:64px; height:2px; background:var(--blue);
}
.s-lead{
  margin-top:16px;
  color:var(--ink-2);
  font-size:1.0625rem;
  max-width:62ch;
}

/* Hörnmärken — siktet som "låser" på ett element vid hover/fokus */
.card-corners{
  position:absolute; inset:-1px; pointer-events:none;
  opacity:0; transform:scale(1.035);
  transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  --c:var(--blue); --l:15px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0        / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0        / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0     / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0     / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%     / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%     / var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%  / 1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%  / var(--l) 1px no-repeat;
}

/* Punktlistor med ritad bock */
.ticks li{
  position:relative;
  padding-left:26px;
  color:var(--ink-2);
  margin-top:9px;
}
.ticks li:first-child{ margin-top:0; }
.ticks li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:9px; height:9px;
  border-left:1.5px solid var(--blue);
  border-bottom:1.5px solid var(--blue);
  transform:rotate(-45deg) translateY(-1px);
}

/* Knappar */
.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:var(--btn-bg);
  font-family:var(--font-body);
  font-size:1rem; font-weight:600; letter-spacing:-.01em;
  line-height:1.2;
  cursor:pointer;
  position:relative;
  transition:transform 150ms var(--ease-out),
             background-color 200ms ease,
             border-color 200ms ease,
             color 200ms ease,
             box-shadow 220ms var(--ease-out);
}
.btn .i{ width:18px; height:18px; transition:transform 240ms var(--ease-out); }
.btn:active{ transform:scale(.972); }

.btn-primary{
  --btn-bg:var(--blue);
  color:#fff;
  box-shadow:0 10px 26px -12px var(--blue-glow);
}
.btn-ghost{
  color:var(--ink);
  border-color:var(--line-2);
  background:rgba(255,255,255,.02);
}
.btn-lg{ padding:17px 28px; font-size:1.0625rem; }
.btn-block{ width:100%; }

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ background:#2b7cfb; box-shadow:0 16px 36px -14px var(--blue-glow); }
  .btn-primary:hover .i{ transform:translateX(3px); }
  .btn-ghost:hover{ border-color:var(--blue); background:rgba(27,109,240,.10); }
}

/* Textknapp som ser ut som en länk */
.linklike{
  background:none; border:0; padding:0;
  font:inherit; color:var(--blue-lift); cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(77,148,255,.4);
  transition:text-decoration-color 180ms ease, color 180ms ease;
}
.linklike:hover{ text-decoration-color:var(--blue-lift); }

/* Skalstreckslinjal — sidans mätinstrument-motiv */
.scale-rule{
  height:22px;
  border-top:1px solid var(--line);
  background-image:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 8px);
  background-size:100% 11px, 100% 6px;
  background-repeat:no-repeat;
  background-position:0 0, 0 0;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---------- 4. HEADER & NAVIGATION ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color 260ms ease, backdrop-filter 260ms ease;
}
.site-header::before{
  content:""; position:absolute; inset:0;
  background:rgba(5,7,10,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0;
  transition:opacity 280ms var(--ease-out);
}
.site-header.is-stuck::before{ opacity:1; }

.header-rule{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 420ms var(--ease-out);
}
.site-header.is-stuck .header-rule{ transform:scaleX(1); }

.header-inner{
  position:relative;
  display:flex; align-items:center; gap:24px;
  height:78px;
}

/* LOGOTYP: byt endast filen assets/logo.png */
.brand{ display:flex; align-items:center; flex:none; padding-block:6px; }
.brand img{
  height:34px; width:auto;
  transition:opacity 200ms ease;
}
.brand:hover img{ opacity:.85; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:34px; }
.nav-list{ display:flex; align-items:center; gap:30px; }
.nav-list a{
  position:relative;
  font-size:.9375rem; font-weight:500;
  color:var(--ink-2);
  padding-block:6px;
  transition:color 180ms ease;
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--blue);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 220ms var(--ease-out);
}
.nav-list a:hover{ color:var(--ink); }
.nav-list a:hover::after,
.nav-list a.is-active::after{ transform:scaleX(1); }
.nav-list a.is-active{ color:var(--ink); }

.nav-cta{ padding:11px 20px; font-size:.9375rem; }
.nav-close{ display:none; }

.nav-toggle{
  display:none;
  margin-left:auto;
  width:46px; height:46px;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink); cursor:pointer;
  transition:transform 150ms var(--ease-out), border-color 200ms ease;
}
.nav-toggle:active{ transform:scale(.94); }
.nav-toggle .i{ width:22px; height:22px; }

.nav-scrim{
  position:fixed; inset:0; z-index:98;
  background:rgba(3,5,8,.7);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity 240ms var(--ease-out);
}
.nav-scrim.is-on{ opacity:1; }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; z-index:99;
    top:0; right:0; bottom:0;
    width:min(360px, 86vw);
    margin:0;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    padding:88px 26px 34px;
    background:var(--panel);
    border-left:1px solid var(--line);
    box-shadow:var(--shadow-lift);
    transform:translateX(100%);
    transition:transform 320ms var(--ease-out);
    overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }

  .nav-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:16px; right:20px;
    width:46px; height:46px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line); border-radius:var(--radius);
    color:var(--ink); cursor:pointer;
  }
  .nav-close .i{ width:22px; height:22px; }

  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-list li{ border-bottom:1px solid var(--line); }
  .nav-list a{
    display:block;
    font-family:var(--font-display);
    font-size:1.35rem; font-weight:600; letter-spacing:-.02em;
    color:var(--ink);
    padding-block:18px;
  }
  .nav-list a::after{ bottom:-1px; height:2px; }
  .nav-cta{ margin-top:26px; padding:16px 20px; font-size:1.0625rem; }
}

/* ---------- 5. HERO ---------- */
.hero{
  position:relative;
  padding-top:clamp(130px, 20vw, 180px);
  padding-bottom:0;
  overflow:hidden;
  isolation:isolate;
}

.hero-field{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

/* Graticule — instrumentets mätskala, inte ett dekorativt rutnät.
   Grova delstreck var 96:e px, fina var 16:e, och bara där siktet sitter. */
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 16px 16px, 16px 16px;
  mask-image:radial-gradient(46% 62% at 74% 48%, #000 0%, rgba(0,0,0,.35) 52%, transparent 78%);
  -webkit-mask-image:radial-gradient(46% 62% at 74% 48%, #000 0%, rgba(0,0,0,.35) 52%, transparent 78%);
}
@media (max-width:900px){
  .hero-grid{
    mask-image:radial-gradient(72% 40% at 60% 24%, #000 0%, rgba(0,0,0,.3) 54%, transparent 80%);
    -webkit-mask-image:radial-gradient(72% 40% at 60% 24%, #000 0%, rgba(0,0,0,.3) 54%, transparent 80%);
  }
}

.hero-glow{
  position:absolute;
  left:50%; top:-14%;
  width:min(1100px, 130vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(27,109,240,.20), rgba(10,36,79,.12) 38%, transparent 66%);
  filter:blur(6px);
}

.hero-instrument{
  position:absolute;
  right:-6%; top:50%;
  width:min(760px, 78vw);
  transform:translateY(-52%);
  will-change:transform;
}
.reticle{ width:100%; height:auto; display:block; overflow:visible; }
.reticle g{ fill:none; stroke-linecap:round; }

.r-ring-outer circle{ stroke:rgba(255,255,255,.09); stroke-width:1; }
.r-ticks circle{
  stroke:rgba(255,255,255,.20); stroke-width:8;
  stroke-dasharray:2 17.37;
  transform-origin:260px 260px;
  animation:spin 90s linear infinite;
}
.r-ring-mid circle{
  stroke:var(--blue); stroke-width:1.5; opacity:.45;
  stroke-dasharray:220 43.9;
  transform-origin:260px 260px;
  transform:rotate(-45deg);
}
.r-ring-in circle{ stroke:rgba(255,255,255,.14); stroke-width:1; }
.r-cross path{ stroke:var(--blue); stroke-width:1.5; opacity:.6; }
.r-sweep path{
  stroke:var(--blue-lift); stroke-width:2; opacity:.85;
  transform-origin:260px 260px;
  animation:spin 6.5s linear infinite;
  filter:drop-shadow(0 0 10px var(--blue-glow));
}
.r-dot{ fill:var(--ink); }

@keyframes spin{ to{ transform:rotate(360deg); } }

.hero-inner{ position:relative; padding-bottom:clamp(70px, 9vw, 110px); }

.hero-title{
  font-size:clamp(3rem, 10.5vw, 6rem);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:.94;
  text-transform:uppercase;
  max-width:15ch;
}
.hero-title .l1,
.hero-title .l2{ display:block; }
.hero-title .mark{
  font-style:normal;
  position:relative;
  color:var(--ink);
  white-space:nowrap;
}
.mark-line{
  position:absolute; left:0; right:0; bottom:-.02em;
  height:.075em; min-height:3px;
  background:var(--blue);
  display:block;
  transform:scaleX(0); transform-origin:0 50%;
}
.mark-line::after{
  content:""; position:absolute; right:0; top:50%;
  width:1px; height:22px;
  background:var(--blue);
  transform:translateY(-50%);
}

.hero-sub{
  margin-top:30px;
  max-width:52ch;
  font-size:clamp(1.0625rem, 1.9vw, 1.25rem);
  line-height:1.6;
  color:var(--ink-2);
}

.hero-actions{
  margin-top:38px;
  display:flex; flex-wrap:wrap; gap:14px;
}

.hero-points{
  margin-top:46px;
  display:flex; flex-wrap:wrap;
  gap:12px 32px;
  padding-top:26px;
  border-top:1px solid var(--line);
  max-width:760px;
}
.hero-points li{
  display:flex; align-items:center; gap:10px;
  font-size:.9375rem; font-weight:500;
  color:var(--ink-2);
  letter-spacing:.01em;
}
.hero-points .i{
  width:16px; height:16px;
  color:var(--blue-lift);
  stroke-width:2.4;
}

@media (max-width:900px){
  .hero{ padding-top:clamp(112px, 26vw, 150px); }
  .hero-instrument{
    right:-32%; top:6%;
    width:min(620px, 118vw);
    transform:none;
    opacity:.62;
  }
  .hero-title{ font-size:clamp(2.75rem, 13.5vw, 4.4rem); max-width:none; }
  .hero-points{ gap:14px 26px; }
}
@media (max-width:520px){
  .hero-actions .btn{ flex:1 1 100%; }
  .hero-points{ flex-direction:column; gap:12px; }
}

/* ---------- 6. TJÄNSTER ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.card{
  position:relative;
  background:linear-gradient(180deg, var(--panel-hi), var(--panel-lo)), var(--bg);
  padding:34px 30px 32px;
  display:flex; flex-direction:column;
  transition:background-color 260ms ease, transform 260ms var(--ease-out);
}
.card-ico{
  width:30px; height:30px;
  color:var(--blue-lift);
  stroke-width:1.4;
  margin-bottom:22px;
  transition:transform 320ms var(--ease-out), color 260ms ease;
}
.card h3{
  font-size:1.375rem;
  letter-spacing:-.02em;
  margin-bottom:16px;
}
.card .ticks{ margin-bottom:auto; }
.card-note{
  margin-top:22px; padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.9375rem;
  color:var(--ink-3);
}
.card-cta{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
.card-cta a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--blue-lift); font-weight:600; font-size:.9375rem;
}
.card-cta .i{ width:16px; height:16px; transition:transform 240ms var(--ease-out); }
.card-cta a:hover .i{ transform:translateX(4px); }

@media (hover:hover) and (pointer:fine){
  .card:hover{ background:linear-gradient(180deg, rgba(27,109,240,.09), rgba(27,109,240,.02)), var(--bg); }
  .card:hover .card-corners{ opacity:1; transform:scale(1); }
  .card:hover .card-ico{ transform:translateY(-2px) scale(1.04); color:var(--blue-lift); }
}

/* ---------- 7. PRISLISTA ---------- */
.pricetable{
  border-top:1px solid var(--line-2);
  margin-bottom:34px;
}
.price-row{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap;
  gap:0 20px;
  padding:26px 16px 26px 18px;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background-color 220ms ease;
}
.price-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--blue);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform 260ms var(--ease-out);
}
.price-name{
  font-family:var(--font-display);
  font-size:clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight:600;
  letter-spacing:-.02em;
}
/* Villkorsrad på egen rad under priset — bocken signalerar "ingår".
   width:100% tvingar ner den på egen rad i radläget och är
   verkningslös i kolumnläget på mobil, så ordningen blir densamma:
   namn, pris, villkor. */
.price-sub{
  width:100%;
  display:flex; align-items:center; gap:9px;
  margin-top:12px;
  font-family:var(--font-body);
  font-size:.9375rem; font-weight:500;
  letter-spacing:0;
  color:var(--blue-lift);
}
.price-sub .i{ width:15px; height:15px; stroke-width:2.6; }

.price-val{
  text-align:right;
  white-space:nowrap;
  transition:color 220ms ease;
}
.price-val .num{
  font-family:var(--font-display);
  font-size:clamp(1.875rem, 4.4vw, 2.75rem);
  font-weight:800;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.price-val .unit{
  display:inline-block;
  margin-left:6px;
  font-size:.9375rem; font-weight:500;
  color:var(--ink-2);
}
.price-val .txt{
  font-size:1.0625rem; font-weight:600;
  color:var(--blue-lift);
}

@media (hover:hover) and (pointer:fine){
  .price-row:hover{ background:rgba(27,109,240,.055); }
  .price-row:hover::before{ transform:scaleY(1); }
  .price-row:hover .price-val .num{ color:var(--blue-lift); }
}

@media (max-width:640px){
  .price-row{
    flex-direction:column; align-items:flex-start; gap:6px;
    padding:22px 14px;
  }
  .price-val{ text-align:left; }
}

.price-notes{
  display:grid; gap:10px;
  margin-bottom:clamp(52px, 7vw, 84px);
}
.price-notes li{
  position:relative;
  padding-left:22px;
  color:var(--ink-2);
  font-size:.9375rem;
}
.price-notes li::before{
  content:""; position:absolute; left:2px; top:.68em;
  width:7px; height:7px;
  border:1px solid var(--blue);
  transform:rotate(45deg);
}

/* Jämförelse: felkodsläsning vs felsökning */
.compare{
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(27,109,240,.10), transparent 62%),
    var(--panel);
  padding:clamp(28px, 4vw, 44px);
  box-shadow:var(--shadow);
  margin-bottom:clamp(44px, 6vw, 64px);
}
.compare-title{
  font-size:clamp(1.375rem, 3vw, 1.875rem);
  letter-spacing:-.025em;
  margin-bottom:30px;
  text-align:center;
}
.compare-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(24px, 4vw, 44px);
  align-items:start;
}
.compare-div{
  width:1px; align-self:stretch;
  background:linear-gradient(180deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
  position:relative;
}
.compare-div::after{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-5px 0 0 -5px;
  border:1px solid var(--blue);
  background:var(--panel);
  transform:rotate(45deg);
}
.compare-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.compare-label{
  font-family:var(--font-display);
  font-size:1.25rem; font-weight:700; letter-spacing:-.02em;
}
.compare-price{
  font-family:var(--font-display);
  font-size:1.25rem; font-weight:800;
  color:var(--blue-lift);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.compare-col p{ color:var(--ink-2); font-size:1rem; }
.compare-warn{
  margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--line);
  color:var(--ink-3) !important;
  font-size:.9375rem;
}
.compare-warn strong{ color:var(--ink); font-weight:600; }

@media (max-width:760px){
  .compare-grid{ grid-template-columns:1fr; }
  .compare-div{
    width:100%; height:1px;
    background:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
  }
  .compare-title{ text-align:left; }
}

.price-cta{ text-align:center; }
@media (max-width:520px){
  .price-cta .btn{ width:100%; }
}

/* ---------- 8. SÅ FUNGERAR DET ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  position:relative;
  border-top:1px solid var(--line);
  padding-top:0;
}
.steps::before{
  content:""; position:absolute; left:0; right:0; top:0; height:11px;
  background-image:repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 34px);
  opacity:.7;
  pointer-events:none;
}
.step{
  position:relative;
  padding:44px 28px 8px 0;
  border-left:1px solid var(--line);
  padding-left:26px;
}
.step:first-child{ border-left:0; padding-left:0; }
.step::before{
  content:""; position:absolute; top:-1px; left:0;
  width:34px; height:2px; background:var(--blue);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 500ms var(--ease-out);
}
.step.in::before{ transform:scaleX(1); }
.step:first-child::before{ left:0; }

.step-no{
  display:block;
  font-family:var(--font-display);
  font-size:.875rem; font-weight:700;
  letter-spacing:.16em;
  color:var(--blue-lift);
  margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.step-no::before{ content:"0"; }
.step h3{ font-size:1.25rem; letter-spacing:-.02em; margin-bottom:12px; }
.step p{ color:var(--ink-2); font-size:1rem; }

@media (max-width:960px){
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .step{ padding-top:38px; }
  .step:nth-child(3){ border-left:0; padding-left:0; }
  .step:nth-child(-n+2){ border-bottom:1px solid var(--line); padding-bottom:34px; }
  .step:nth-child(n+3){ padding-top:38px; }
  .step:nth-child(n+3)::before{ display:none; }
}
@media (max-width:600px){
  .steps{ grid-template-columns:1fr; }
  .steps::before{ display:none; }
  .step, .step:first-child, .step:nth-child(3){
    border-left:1px solid var(--line);
    border-bottom:0;
    padding:26px 0 26px 26px;
  }
  .step::before{
    display:block;
    top:32px; left:0; width:16px; height:1px;
    transform:scaleX(1);
  }
  .step:nth-child(n+3)::before{ display:block; }
  .step-no{ margin-bottom:10px; }
}

/* ---------- 9. BOKNINGSFORMULÄR ---------- */
.book-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,.85fr);
  gap:clamp(24px, 3vw, 40px);
  align-items:start;
}
@media (max-width:1000px){ .book-grid{ grid-template-columns:1fr; } }

.book-panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:clamp(26px, 3.4vw, 44px);
  box-shadow:var(--shadow);
}

.f-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:20px 18px;
}
.f-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.f-12{ grid-column:span 12; }
.f-6{ grid-column:span 6; }
.f-4{ grid-column:span 4; }
@media (max-width:720px){
  .f-6, .f-4{ grid-column:span 12; }
  .f-grid{ gap:18px 14px; }
}

.f-field label{
  font-size:.875rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3);
}
.req{ color:var(--blue-lift); }

.f-field input,
.f-field textarea,
.f-field select{
  width:100%;
  font-family:inherit; font-size:1rem;
  color:var(--ink);
  background:rgba(255,255,255,.028);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 15px;
  caret-color:var(--blue-lift);
  transition:border-color 200ms ease, background-color 200ms ease, box-shadow 220ms var(--ease-out);
  -webkit-appearance:none; appearance:none;
}
.f-field textarea{ resize:vertical; min-height:132px; line-height:1.6; }
.f-field input::placeholder,
.f-field textarea::placeholder{ color:#8492a6; }

.f-field input:hover,
.f-field textarea:hover,
.f-field select:hover{ border-color:var(--line-2); }

.f-field input:focus,
.f-field textarea:focus,
.f-field select:focus{
  outline:none;
  border-color:var(--blue);
  background:rgba(27,109,240,.06);
  box-shadow:0 0 0 3px rgba(27,109,240,.16);
}

/* Registreringsnummer skrivs som på skylten */
.plate{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.select-wrap{ position:relative; display:block; }
.select-wrap select{ padding-right:44px; cursor:pointer; }
.select-wrap option{ background:var(--panel); color:var(--ink); }
.select-arrow{
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  color:var(--ink-3);
  pointer-events:none;
}

.f-hint{ font-size:.875rem; color:var(--ink-3); }

.f-err{
  font-size:.875rem;
  color:#ff8a8a;
  min-height:0;
  display:none;
}
.f-err.is-on{ display:block; }
.f-field.has-error input,
.f-field.has-error textarea{
  border-color:#c8493f;
  background:rgba(200,73,63,.07);
}

/* Kryssrutor */
.f-checks{
  margin-top:30px; padding-top:26px;
  border-top:1px solid var(--line);
  display:grid; gap:16px;
}
.check{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  cursor:pointer;
}
.check input{
  position:absolute; opacity:0; width:0; height:0;
}
.check .box{
  width:24px; height:24px; flex:none;
  border:1px solid var(--line-2);
  border-radius:3px;
  background:rgba(255,255,255,.03);
  display:grid; place-items:center;
  margin-top:1px;
  transition:border-color 180ms ease, background-color 180ms ease;
}
.check .box .i{
  width:15px; height:15px;
  stroke-width:2.8;
  color:#fff;
  opacity:0; transform:scale(.7);
  transition:opacity 160ms var(--ease-out), transform 200ms var(--ease-out);
}
.check:hover .box{ border-color:var(--blue); }
.check input:checked + .box{ background:var(--blue); border-color:var(--blue); }
.check input:checked + .box .i{ opacity:1; transform:scale(1); }
.check input:focus-visible + .box{ outline:2px solid var(--blue-lift); outline-offset:3px; }
.check-txt{ font-size:.9375rem; color:var(--ink-2); line-height:1.55; }

.btn-submit{
  margin-top:28px;
  width:100%;
}
.spinner{
  display:none;
  width:17px; height:17px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.form.is-sending .spinner{ display:block; }
.form.is-sending .btn-submit{ pointer-events:none; opacity:.75; }

.form-status{
  margin-top:16px;
  font-size:.9375rem;
  color:#ff8a8a;
  text-align:center;
  min-height:0;
}
.form-status:empty{ display:none; }

.form-disclaimer{
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; gap:14px; align-items:flex-start;
  font-size:.9375rem;
  color:var(--ink-2);
  line-height:1.55;
}
.form-disclaimer .i{
  width:20px; height:20px;
  color:var(--blue-lift);
  margin-top:1px;
}

/* Tack-läge */
.form-done{ text-align:center; padding:clamp(24px, 4vw, 48px) 0; }
.done-ico{
  width:52px; height:52px;
  color:var(--blue-lift);
  stroke-width:2;
  margin:0 auto 22px;
}
.form-done h3{ font-size:1.625rem; letter-spacing:-.025em; margin-bottom:14px; }
.form-done p{ color:var(--ink-2); max-width:46ch; margin-inline:auto; }
.form-done-note{
  margin-top:20px !important;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--ink-3) !important;
  font-size:.9375rem;
}
.form-done .btn{ margin-top:26px; }

/* Skräppostfälla */
.hp{
  position:absolute !important;
  left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* Sidokolumn */
.book-aside{ display:grid; gap:18px; }
.aside-card{
  position:relative;
  background:linear-gradient(180deg, var(--panel-hi), var(--panel-lo)), var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 26px;
}
.aside-card h3{ font-size:1.1875rem; letter-spacing:-.02em; margin-bottom:12px; }
.aside-card > p{ color:var(--ink-2); font-size:.9375rem; margin-bottom:18px; }
.aside-card .btn{ margin-top:10px; justify-content:flex-start; }
.aside-card .ticks li{ font-size:.9375rem; }
.aside-link{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:.9375rem; }

@media (hover:hover) and (pointer:fine){
  .aside-card:hover .card-corners,
  .book-panel:hover .card-corners{ opacity:1; transform:scale(1); }
}

/* ---------- 10. VARFÖR PRECISION BIL ---------- */
.why{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
}
.why-item{
  background:var(--bg);
  padding:clamp(28px, 3.6vw, 44px);
  transition:background-color 260ms ease;
}
.why-ico{
  width:26px; height:26px;
  color:var(--blue-lift);
  stroke-width:1.4;
  margin-bottom:20px;
}
.why-item h3{ font-size:1.3125rem; letter-spacing:-.02em; margin-bottom:12px; }
.why-item p{ color:var(--ink-2); max-width:44ch; }

@media (hover:hover) and (pointer:fine){
  .why-item:hover{ background:rgba(27,109,240,.045); }
}
@media (max-width:720px){
  .why{ grid-template-columns:1fr; }
}

/* ---------- 11. FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:24px 4px;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:clamp(1.0625rem, 2.2vw, 1.25rem);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.35;
  transition:color 200ms ease;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--blue-lift); }
.qa summary:focus-visible{ outline:2px solid var(--blue-lift); outline-offset:-2px; }
.qa-ico{
  width:22px; height:22px; flex:none;
  color:var(--blue-lift);
  transition:transform 260ms var(--ease-out);
}
.qa[open] .qa-ico{ transform:rotate(180deg); }
.qa-body{ overflow:hidden; }
.qa-body > div{ padding:0 4px 26px; }
.qa-body p{ color:var(--ink-2); max-width:70ch; }

/* ---------- 12. OM ---------- */
.about .s-mark{ margin-inline:0; }
.about-text{
  margin-top:22px;
  font-size:clamp(1.0625rem, 2.1vw, 1.3125rem);
  line-height:1.7;
  color:var(--ink-2);
  max-width:66ch;
}

/* ---------- 13. KONTAKT ---------- */
.contact{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.ct{
  position:relative;
  background:linear-gradient(180deg, var(--panel-hi), var(--panel-lo)), var(--bg);
  padding:30px 28px;
  display:flex; flex-direction:column;
  min-height:150px;
  transition:background-color 240ms ease;
  /* Kortet blir sin egen måttstock så att långa värden — en e-postadress
     är det längsta — kan krympa efter kortets bredd i stället för att
     radbrytas mitt i ordet. */
  container-type:inline-size;
}
.ct-ico{
  width:22px; height:22px;
  color:var(--blue-lift);
  margin-bottom:auto;
}
.ct-label{
  margin-top:22px;
  font-size:.875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.ct-val{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:1.25rem; font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  word-break:break-word;
}
/* Alla värden i raden krymper tillsammans, så kolumnerna ser lika ut.
   Webbläsare utan stöd för containerenheter behåller 1.25rem ovan. */
@supports (width: 1cqi){
  .ct-val{ font-size:min(1.25rem, 8cqi); word-break:normal; overflow-wrap:anywhere; }
}
.ct-cta{
  background:linear-gradient(150deg, var(--blue), #0f4dc0);
  justify-content:flex-end;
}
.ct-cta .ct-label{ color:rgba(255,255,255,.78); margin-top:0; }
.ct-cta .ct-val{ font-size:1.375rem; font-weight:800; }
@supports (width: 1cqi){
  .ct-cta .ct-val{ font-size:min(1.375rem, 8.8cqi); }
}
.ct-arrow{
  position:absolute; top:28px; right:26px;
  width:22px; height:22px; color:#fff;
  transition:transform 260ms var(--ease-out);
}

@media (hover:hover) and (pointer:fine){
  .ct-link:hover{ background:linear-gradient(180deg, rgba(27,109,240,.10), rgba(27,109,240,.02)), var(--bg); }
  .ct-link:hover .card-corners{ opacity:1; transform:scale(1); }
  .ct-cta:hover{ background:linear-gradient(150deg, #2b7cfb, #1355cc); }
  .ct-cta:hover .ct-arrow{ transform:translateX(5px); }
}
.ct-link:active, .ct-cta:active{ transform:scale(.99); }

/* ---------- 14. FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-alt);
  padding-top:clamp(56px, 7vw, 84px);
  padding-bottom:clamp(44px, 5vw, 56px);
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap:clamp(30px, 4vw, 48px);
  padding-bottom:clamp(40px, 5vw, 56px);
  border-bottom:1px solid var(--line);
}
.foot-brand img{ height:32px; width:auto; }
.foot-city{
  margin-top:18px;
  font-family:var(--font-display);
  font-size:1.125rem; font-weight:600; letter-spacing:.02em;
}
.foot-note{ margin-top:10px; color:var(--ink-3); font-size:.9375rem; max-width:38ch; }

.foot-h{
  font-size:.875rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
  font-family:var(--font-body);
  margin-bottom:18px;
}
.foot-list{ display:grid; gap:12px; font-size:.9375rem; color:var(--ink-2); }
.foot-list a,
.foot-list .linklike{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink-2);
  text-decoration:none;
  transition:color 180ms ease;
}
.foot-list .linklike{ color:var(--ink-2); }
.foot-list a:hover,
.foot-list .linklike:hover{ color:var(--blue-lift); }
.foot-list .i{ width:17px; height:17px; color:var(--ink-3); }
.foot-mut{ color:var(--ink-3); font-size:.875rem; letter-spacing:.04em; }
.foot-fskatt{ display:flex; align-items:center; gap:10px; }
.foot-fskatt .i{ color:var(--blue-lift); }

.foot-bottom{
  padding-top:26px;
  display:flex; flex-wrap:wrap; gap:10px 30px;
  justify-content:space-between; align-items:baseline;
  font-size:.875rem; color:var(--ink-3);
}
.foot-vat{ max-width:56ch; }

@media (max-width:900px){
  .foot-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot-brand{ grid-column:span 2; }
  /* Större träffytor för tummen */
  .foot-list{ gap:6px; }
  .foot-list a,
  .foot-list .linklike{ min-height:44px; }
}
@media (max-width:520px){
  .foot-grid{ grid-template-columns:1fr; }
  .foot-brand{ grid-column:span 1; }
}

/* ---------- 15. MOBILT BOTTENFÄLT ---------- */
.mobile-bar{
  display:none;
  position:fixed; z-index:95;
  left:0; right:0; bottom:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
  background:rgba(6,9,13,.9);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line);
  transform:translateY(0);
  transition:transform 320ms var(--ease-out), opacity 260ms ease;
}
.mobile-bar.is-hidden{ transform:translateY(105%); opacity:0; }
.mb{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:52px;
  border-radius:var(--radius);
  font-size:1.0625rem; font-weight:600;
  transition:transform 150ms var(--ease-out), background-color 200ms ease;
}
.mb:active{ transform:scale(.97); }
.mb .i{ width:19px; height:19px; }
.mb-call{
  color:var(--ink);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);
}
.mb-book{
  color:#fff;
  background:var(--blue);
  box-shadow:0 8px 22px -10px var(--blue-glow);
}

@media (max-width:900px){
  .mobile-bar{ display:flex; }
  /* Utrymme så att bottenfältet aldrig täcker footerns innehåll */
  .site-footer{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
}

/* ---------- 16. MODALER ---------- */
.modal{
  width:min(760px, calc(100vw - 32px));
  max-height:min(86vh, 900px);
  padding:0;
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  background:var(--panel);
  color:var(--ink);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.modal::backdrop{
  background:rgba(3,5,8,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.modal[open]{
  animation:modalIn 260ms var(--ease-out);
}
.modal[open]::backdrop{ animation:fadeIn 260ms var(--ease-out); }
@keyframes modalIn{
  from{ opacity:0; transform:scale(.97) translateY(10px); }
}
@keyframes fadeIn{ from{ opacity:0; } }

.modal-inner{ position:relative; max-height:inherit; }
.modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:rgba(10,14,21,.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink); cursor:pointer;
  transition:transform 150ms var(--ease-out), border-color 200ms ease, background-color 200ms ease;
}
.modal-close:hover{ border-color:var(--blue); background:rgba(27,109,240,.14); }
.modal-close:active{ transform:scale(.94); }
.modal-close .i{ width:20px; height:20px; }

.modal-body{
  max-height:min(86vh, 900px);
  overflow-y:auto;
  padding:clamp(28px, 4vw, 44px);
  overscroll-behavior:contain;
}
.modal-body h2{
  font-size:clamp(1.625rem, 3.6vw, 2.25rem);
  letter-spacing:-.03em;
  padding-right:56px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.modal-meta{ font-size:.875rem; color:var(--ink-3); margin-bottom:26px; }
.modal-body h3{
  font-size:1.125rem;
  letter-spacing:-.015em;
  margin-top:30px; margin-bottom:10px;
  color:var(--ink);
}
.modal-body h3::before{
  content:""; display:block;
  width:26px; height:2px; background:var(--blue);
  margin-bottom:12px;
}
.modal-body p{ color:var(--ink-2); margin-bottom:12px; font-size:1rem; }
.modal-body .ticks{ margin:14px 0 18px; }
.modal-body .ticks li{ font-size:1rem; }
.modal-body span{ color:var(--ink); }

/* ---------- 17. RÖRELSE & REVEAL ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay:var(--d, 0ms);
}
.js .reveal.in{ opacity:1; transform:none; }

/* Hero-inlåsningen: sidans enda regisserade rörelse */
.js .hero-title .l1,
.js .hero-title .l2,
.js .hero-sub,
.js .hero-actions,
.js .hero-points{
  opacity:0;
  transform:translateY(14px);
  animation:heroIn 760ms var(--ease-out) forwards;
}
.js .hero-title .l1{ animation-delay:60ms; }
.js .hero-title .l2{ animation-delay:150ms; }
.js .hero-sub{ animation-delay:300ms; }
.js .hero-actions{ animation-delay:380ms; }
.js .hero-points{ animation-delay:460ms; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

.js .mark-line{
  animation:lineIn 620ms var(--ease-out) 620ms forwards;
}
@keyframes lineIn{ to{ transform:scaleX(1); } }

.js .reticle > g,
.js .reticle > circle{
  opacity:0;
  animation:lockIn 900ms var(--ease-out) forwards;
}
.js .r-ring-outer{ animation-delay:520ms; }
.js .r-ticks{ animation-delay:400ms; }
.js .r-ring-mid{ animation-delay:280ms; }
.js .r-ring-in{ animation-delay:340ms; }
.js .r-cross{ animation-delay:180ms; }
.js .r-sweep{ animation-delay:700ms; }
.js .r-dot{ animation-delay:120ms; }
@keyframes lockIn{ to{ opacity:1; } }

.js .reticle{ transform:scale(1.06); animation:lockScale 1100ms var(--ease-out) forwards; }
@keyframes lockScale{ to{ transform:scale(1); } }

/* Mindre rörelse — behåll det som hjälper förståelsen, ta bort förflyttning */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .js .hero-title .l1,
  .js .hero-title .l2,
  .js .hero-sub,
  .js .hero-actions,
  .js .hero-points,
  .js .reticle > g,
  .js .reticle > circle{
    opacity:1; transform:none; animation:none;
  }
  .js .reticle{ transform:none; animation:none; }
  .js .mark-line{ transform:scaleX(1); animation:none; }
  .r-ticks circle, .r-sweep path{ animation:none; }
  .hero-instrument{ transform:translateY(-52%) !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Utskrift */
@media print{
  .site-header, .mobile-bar, .nav-scrim, .hero-field, .btn, .form{ display:none !important; }
  body{ background:#fff; color:#000; }
}