/* ==========================================================================
   GLOBALT — återställning, typografi, glas, knappar, formulär, scenen och
   sidhuvudet. Undersidorna har egna filer (home.css, cup.css …) för det som
   bara gäller dem.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; min-height: 100svh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 1.02rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-text); text-underline-offset: .2em; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: .95; letter-spacing: .005em; margin: 0 0 .6em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.05; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-accent); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1rem;
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before { content: ""; width: 1.8em; height: 2px; background: currentColor; border-radius: 2px; }
.lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 60ch; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
.text-grad {
  background: var(--gradient); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Glas ------------------------------------------------------------- */
.glass {
  position: relative; isolation: isolate;
  border-radius: var(--radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
.glass--strong { background: var(--glass-strong); }
/* Ljusfläck som följer pekaren + glödande kant (sätts av site.js: --mx/--my) */
.glass::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%), var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.glass:hover::before, .glass:hover::after, .glass:focus-within::before { opacity: 1; }
.glow-hover { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.glow-hover:hover { box-shadow: var(--glow), inset 0 1px 0 var(--glass-hi); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--surface); }
}

/* ---- Knappar ---------------------------------------------------------- */
.btn {
  --b: var(--accent);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75em 1.5em; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .86rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
  transition: transform .25s var(--ease-spring), box-shadow .3s, background .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 1.15em; height: 1.15em; }
.btn--ghost {
  background: rgb(255 255 255 / .05); color: var(--text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 0 var(--glass-hi);
}
:root[data-theme="light"] .btn--ghost { background: rgb(255 255 255 / .6); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--accent), 0 12px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn--sm { min-height: 38px; padding: .55em 1.1em; font-size: .76rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Formulär --------------------------------------------------------- */
.field { display: grid; gap: .35rem; }
.field > span, .label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.field small { color: var(--text-dim); font-size: .8rem; }
input, select, textarea {
  width: 100%; min-height: 48px; padding: .7rem .95rem;
  font: inherit; font-size: 1rem; color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; min-height: 0; height: 1.15rem; accent-color: var(--accent); padding: 0; }

/* Segmentväljare (nivå, klass) */
.seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg label { position: relative; flex: 1 1 auto; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 52px; padding: .5rem .9rem; border-radius: var(--radius-sm); text-align: center;
  border: 1px solid var(--line-strong); font-weight: 600; transition: all .2s;
}
.seg span small { font-weight: 400; color: var(--text-dim); font-size: .74rem; }
.seg input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg input:disabled + span { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.flash { display: grid; gap: .5rem; margin-bottom: 1rem; }
.flash p { margin: 0; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid; font-weight: 500; }
.flash .error { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-text); }
.flash .ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }

/* Nivåprickar */
.lvl { display: inline-flex; align-items: center; gap: .35em; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.lvl::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.lvl-1 { --c: var(--lvl-1); } .lvl-2 { --c: var(--lvl-2); } .lvl-3 { --c: var(--lvl-3); }

/* ==========================================================================
   SCENEN — fast bakgrund: en fotbollsplan i perspektiv, strålkastarljus och
   mjuka ljusklot. Sektioner med data-scene="…" vrider planen när de tar över
   skärmen (site.js sätter data-scene på <body>).
   ========================================================================== */
.stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.stage__pitch {
  position: absolute; left: 50%; top: 58%; width: 150vmax; aspect-ratio: 105 / 68;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) perspective(900px) rotateX(62deg) rotateZ(0deg) scale(1);
  transition: transform 1.8s var(--ease-out), opacity 1.2s;
}
.stage__pitch svg { width: 100%; height: 100%; overflow: visible; }
.stage__pitch .stripes rect:nth-child(odd) { fill: var(--pitch-a); }
.stage__pitch .stripes rect:nth-child(even) { fill: var(--pitch-b); }
.stage__pitch .lines { fill: none; stroke: var(--pitch-line); stroke-width: .35; }
.stage__pitch .lines .dot { fill: var(--pitch-line); stroke: none; }
/* Linjerna ritas upp vid sidladdning */
.fx .stage__pitch .lines * { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw-line 3.2s var(--ease-out) .2s forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

body[data-scene="center"]  .stage__pitch { transform: translate(-50%, -50%) perspective(900px) rotateX(62deg) rotateZ(0deg) scale(1); }
body[data-scene="box"]     .stage__pitch { transform: translate(-22%, -40%) perspective(900px) rotateX(58deg) rotateZ(-90deg) scale(1.5); }
body[data-scene="corner"]  .stage__pitch { transform: translate(-80%, -30%) perspective(900px) rotateX(55deg) rotateZ(35deg) scale(1.8); }
body[data-scene="top"]     .stage__pitch { transform: translate(-50%, -48%) perspective(900px) rotateX(18deg) rotateZ(90deg) scale(.95); }
body[data-scene="side"]    .stage__pitch { transform: translate(-50%, -38%) perspective(900px) rotateX(70deg) rotateZ(12deg) scale(1.3); }

.stage__beams i {
  position: absolute; top: -20vh; width: 45vw; height: 140vh; filter: blur(30px);
  background: linear-gradient(180deg, var(--beam), transparent 75%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  transition: transform 2s var(--ease-out), opacity 1.5s;
}
.stage__beams i:nth-child(1) { left: -12vw; transform: rotate(-24deg); transform-origin: top center; }
.stage__beams i:nth-child(2) { right: -12vw; transform: rotate(24deg); transform-origin: top center; }
.fx .stage__beams i { animation: flicker 7s ease-in-out infinite; }
.fx .stage__beams i:nth-child(2) { animation-delay: -3.5s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 48% { opacity: .75; } 50% { opacity: .95; } 52% { opacity: .8; } }
body[data-scene="box"] .stage__beams i:nth-child(1), body[data-scene="corner"] .stage__beams i:nth-child(2) { opacity: .35; }

.stage__orbs i { position: absolute; border-radius: 50%; filter: blur(90px); }
.stage__orbs i:nth-child(1) { width: 44vmax; height: 44vmax; left: -14vmax; top: 30%; background: var(--orb-1); }
.stage__orbs i:nth-child(2) { width: 36vmax; height: 36vmax; right: -10vmax; top: -8vmax; background: var(--orb-2); }
.fx .stage__orbs i:nth-child(1) { animation: orb-a 26s ease-in-out infinite alternate; }
.fx .stage__orbs i:nth-child(2) { animation: orb-b 32s ease-in-out infinite alternate; }
@keyframes orb-a { to { transform: translate3d(22vw, -14vh, 0) scale(1.15); } }
@keyframes orb-b { to { transform: translate3d(-16vw, 20vh, 0) scale(.9); } }
.stage__veil { position: absolute; inset: 0; background: var(--veil); opacity: calc(.35 + var(--scroll-p, 0) * .65); }
.stage__grain {
  position: absolute; inset: -50%; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Sidhuvud --------------------------------------------------------- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: left; transform: scaleX(var(--progress, 0)); background: var(--gradient); }
.header { position: fixed; inset: 0 0 auto; z-index: 50; padding: .8rem var(--gutter) 0; transition: padding .4s var(--ease-out); }
.header.is-scrolled { padding-top: .45rem; }
.header__bar {
  display: flex; align-items: center; gap: 1rem;
  width: min(100%, var(--container)); margin-inline: auto; height: 60px; padding: 0 .6rem 0 1.1rem;
  border-radius: 999px; background: var(--header-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 1px 0 var(--glass-hi), 0 20px 40px -24px rgb(0 0 0 / .6);
}
.brand { display: flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; font: 800 1.55rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.brand svg { width: 30px; height: 30px; color: var(--accent); }
.fx .brand:hover svg { animation: spin 1s var(--ease-out); }
@keyframes spin { to { transform: rotate(360deg); } }
.brand em { font-style: italic; color: var(--accent-text); }
.nav { display: flex; gap: .2rem; margin-left: auto; }
.nav a { padding: .55rem .95rem; border-radius: 999px; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: .92rem; transition: color .2s, background .2s; }
.nav a:hover, .nav a[aria-current] { color: var(--text); background: rgb(255 255 255 / .07); }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--glass-border); transition: box-shadow .2s, transform .3s var(--ease-spring); }
.icon-btn:hover { box-shadow: inset 0 0 0 1px var(--accent); transform: rotate(-12deg); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-sun { display: none; }
:root[data-theme="light"] .theme-sun { display: block; }
:root[data-theme="light"] .theme-moon { display: none; }
.menu-btn { display: none; }
.mobile-menu { position: fixed; inset: 0; z-index: 45; padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mobile-menu a { display: block; padding: .8rem 0; font: 800 2.4rem/1 var(--font-display); text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }

/* ---- Sidfot ----------------------------------------------------------- */
.footer { padding: 3rem 0 6rem; border-top: 1px solid var(--line); color: var(--text-muted); font-size: .9rem; }
.footer__row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }

/* ---- Mobilvy: telefonram med sidan i (PHONE_PREVIEW i .env) ----------- */
.phone-btn { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70; }
.phone-btn .btn { box-shadow: var(--glow); }
.phone-dock { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.phone-dock[hidden] { display: none; }
.phone {
  position: relative; width: 410px; height: min(864px, 92svh); padding: 14px; border-radius: 56px;
  background: linear-gradient(145deg, #2b2f2d, #0c0e0d); box-shadow: 0 0 0 2px #3a3f3c, 0 40px 120px -20px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .08);
  animation: phone-in .6s var(--ease-spring);
}
@keyframes phone-in { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 44px; background: var(--bg); }
.phone__notch { position: absolute; top: 24px; left: 50%; width: 110px; height: 30px; transform: translateX(-50%); border-radius: 20px; background: #000; z-index: 2; }
.phone-dock__close { position: absolute; top: 1.2rem; right: 1.2rem; }
.phone-dock__url { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: .8rem; opacity: .7; }
.embed .phone-btn { display: none; }

@media (max-width: 860px) {
  :root { --header-h: 68px; --glass-blur: 14px; }
  .nav { display: none; }
  .menu-btn { display: grid; margin-left: auto; }
  .header__bar { height: 54px; }
  .phone-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}