/* ===================================================================
   Visorium Studio — aura.css
   "Pärlglas"-profilen: en mix av tre paletter enligt kundens val.
     • Isglas (A): ljus, sval isblå ton + vitt frostat glas
     • Porslin (B): varm off-white bas som mjukar upp helheten
     • Skymningsglas (C): mörka cinematiska glas-detaljer som djup
       (footer, bildöverlägg, lightbox, cookie-panel)
   Ljus, glasig och genomskinlig med balans. Varumärkets blå bevaras
   på logotyp, CTA:er och accenter. Laddas efter styles.css → vinner.
   =================================================================== */

/* ---- 1. Tokens: ljus pärlbas, mörk text, brand-blå accent ---- */
:root{
  --bg:#F4EEE3;                 /* varmare pärlvit */
  --bg-alt:rgba(20,30,45,.035);
  --surface:rgba(255,255,255,.62);
  --surface-2:rgba(255,255,255,.82);
  --border:rgba(20,30,45,.12);
  --border-strong:rgba(20,30,45,.22);
  --text:#1D2736;               /* mörk navy-skiffer */
  --muted:#141C27;
  --muted-2:#26313F;
  --accent:#2D8EFF;             /* varumärkets blå – bevarad */
  --accent-deep:#1B6FE0;
  --accent-soft:rgba(45,142,255,.13);
  --accent-2:#0FA8C9;           /* cyan-komplement */
  --glass-blur:16px;
  --shadow:0 24px 60px -30px rgba(20,30,45,.28);
}

/* ---- 2. Ljus bakgrund: EN enhetlig varm nyans hela vägen (topp→botten).
   Detta är även fallback när bakgrundsvideon inte laddas (mobil, spardata,
   reducerad rörelse) – då ser sidan likadant enhetligt ljus ut. ---- */
/* Den varma basen ligger på html. body MÅSTE vara genomskinlig – annars
   målas body-bakgrunden ovanpå .site-bgfx (z-index:-1) och döljer spiralen. */
html{background:#F3ECDF;overscroll-behavior-y:none}
body{background:transparent}

/* ---- 3. Liquid-glass grundklass (delas av flera ytor) ---- */
.card,.quote,.contact-card,.callout,.client-logos .logo,.steps,.chip,
.mode-toggle,.faq,.port-filter,.badge,.best-for{
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
}

/* Kort / paneler – vitt frostat glas med subtil kant-glans */
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.55));
  border-color:rgba(20,30,45,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px -30px rgba(20,30,45,.3);
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.6),transparent 32%);
  opacity:.7;
}
.card:hover{border-color:rgba(45,142,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--shadow)}

/* ---- 4. Header + lägesväljare som ljust glas, brand-blå aktiv flik ---- */
.site-header.scrolled{background:rgba(248,248,246,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom-color:rgba(20,30,45,.1)}
.mode-toggle{background:rgba(255,255,255,.6);border-color:rgba(20,30,45,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 26px -14px rgba(20,30,45,.35)}
.mode-toggle a,.mode-toggle button{color:#5A6A85}
.mode-toggle a:hover,.mode-toggle button:hover{color:var(--text);background:rgba(20,30,45,.05)}
.mode-toggle a.active,.mode-toggle button.active{color:#fff}
.mode-toggle a.active:hover,.mode-toggle button.active:hover{color:#fff}
.mode-toggle [data-mode="foretag"].active,.mode-toggle a.active{
  background:linear-gradient(135deg,#1B6FE0 0%,#2D8EFF 100%);
  box-shadow:0 0 0 1px rgba(45,142,255,.4),0 10px 26px -8px rgba(45,142,255,.65);
}
.mode-toggle [data-mode="privat"].active{
  background:linear-gradient(135deg,#2D8EFF 0%,#0FA8C9 100%);
  box-shadow:0 0 0 1px rgba(15,168,201,.45),0 10px 26px -8px rgba(15,168,201,.6);
}
.nav a:hover{color:var(--accent-deep)}

/* ---- 5. Hero: genomskinlig så helsides-bakgrunden (spiralen) syns även
   här – heron och resten av sidan får en och samma konsekventa nyans ---- */
.hero-bg{background:transparent}
.hero-bg::after{display:none}

/* Content-sektioner: lugn, luftig ljus yta (scrollar med) för jämn
   läsbarhet. Hero lämnas fri så spiralen syns tydligare där (mix:
   cinematiskt intro i toppen, subtil textur i resten). */
.section{background:rgba(246,240,231,.58)}
.section-alt{background:rgba(246,240,231,.58)}
.trust{background:rgba(246,240,231,.5);border-color:rgba(20,30,45,.08)}

/* ---- 6. Footer: ljust glas i samma nyans som resten (inte mörk längre) ---- */
.site-footer{
  background:rgba(246,240,231,.62);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top-color:rgba(20,30,45,.1);
}
.site-footer .brand-word{color:var(--text)}
.footer-brand p,.footer-col a,.footer-col span{color:var(--muted)}
.footer-col h4{color:var(--muted-2)}
.footer-col a:hover{color:var(--accent-deep)}
.footer-bottom{color:var(--muted-2);border-top-color:rgba(20,30,45,.1)}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--accent-deep)}

/* ---- 7. Shiny gradient-rubrik: navy → brand-blå → cyan (ljus-läsbar) ---- */
.hero h1 .hl{
  background:linear-gradient(100deg,#0B2551 0%,#1B6FE0 30%,#00A6C8 50%,#1B6FE0 70%,#0B2551 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:aura-shiny 6s linear infinite;
}
@keyframes aura-shiny{0%{background-position:-120% center}100%{background-position:220% center}}

/* ---- 8. Formulär och fält som ljust glas ---- */
.quote{background:rgba(255,255,255,.72)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.88);border-color:rgba(20,30,45,.14);color:var(--text);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.chip{background:rgba(255,255,255,.72);color:var(--muted)}
.chip:has(input:checked){color:var(--text)}
.quote-step legend{color:var(--text)}
.qp-step{background:rgba(255,255,255,.8);color:var(--muted-2)}

/* ---- 9. Ljus-anpassning av ytor som var hårdkodat mörka/vita ---- */
.stat-num{color:var(--text)}
.price-amount{color:var(--text)}
.review .who strong{color:var(--text)}
.btn-ghost:hover{color:var(--text)}
.trust-logos span:hover{color:var(--accent-deep)}
.callout{background:rgba(45,142,255,.09);border-color:rgba(45,142,255,.3)}
.work{background:rgba(255,255,255,.5)}         /* bildkorten – mörka överlägg (C) behålls i styles.css */
.faq-item{border-color:rgba(20,30,45,.12)}
.faq{border-top-color:rgba(20,30,45,.12)}
.steps{background:rgba(255,255,255,.6)}
.steps .step:hover,.step:hover{background:rgba(255,255,255,.85)}
.port-filter{background:rgba(255,255,255,.65)}
.port-filter:hover{color:var(--text)}
.client-logos .logo:hover{color:var(--text)}

/* ---- 10. Fokus-synlighet (tillgänglighet) ---- */
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}

/* Skip-länk: gömd tills den får tangentbordsfokus */
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:400;
  padding:10px 18px;border-radius:10px;
  background:var(--accent);color:#fff;font-weight:600;text-decoration:none;
  box-shadow:0 8px 22px -8px var(--accent);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}

/* ---- 11. Knappar: brand-blå CTA med vit text på ljus bakgrund ---- */
.btn-accent{color:#fff}
.btn-accent:hover{color:#fff}
.nav .nav-cta{color:#fff}
.nav .nav-cta:hover{color:#fff}
.port-filter.active{color:#fff}
.qp-step.active{color:#fff}
.badge{color:#fff}
.done-check{color:#fff}
.to-top{color:#fff}
.work:hover .work-play{color:#fff}

/* ---- 12. Reducerad rörelse ---- */
@media(prefers-reduced-motion:reduce){
  .hero h1 .hl{animation:none}
  body{background-attachment:scroll}
}

/* ===================================================================
   Aura-integrationen: signaturelement fran Aura-landningssidan,
   anpassade till Visoriums ljusa parlglas-profil.
   =================================================================== */

/* ---- A1. Liquid-glass-kant (Auras mask-composite-gradient) pa korten ---- */
.card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:1;
  padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.35) 80%, rgba(255,255,255,.9) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* ---- A3. Korn/noise pa shiny-rubriken (Auras c3-noise-filter) ---- */
.hero h1 .hl{filter:url(#c3-noise)}

/* ---- A4. Helsides-bakgrund (spiralen): en fixed video bakom HELA sidan,
   injiceras av experience.js. Ett varmt ljust lager gör att sajten förblir
   ljus och att nyansen blir enhetlig topp→botten. Videon skymtar subtilt
   igenom överallt. En stilla varm bas ligger under så det ser bra ut även
   om videon inte laddas. ---- */
.site-bgfx{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#F5EEE2 0%,#F3ECDF 100%);
}
.site-bgfx video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:saturate(1) brightness(1.06) contrast(1.03);transition:opacity 1.6s var(--ease);
  pointer-events:none;
}
.site-bgfx video.is-on{opacity:.66}
/* Dölj alla inbyggda video-kontroller/overlays (PiP-, cast-, spola-knappar) */
.site-bgfx video::-webkit-media-controls,
.site-bgfx video::-webkit-media-controls-enclosure,
.site-bgfx video::-webkit-media-controls-panel,
.site-bgfx video::-webkit-media-controls-start-playback-button,
.site-bgfx video::-webkit-media-controls-overlay-play-button,
.site-bgfx video::-internal-media-controls-overlay-cast-button,
.site-bgfx video::-webkit-media-controls-picture-in-picture-button{
  display:none !important;
  -webkit-appearance:none;appearance:none;
}
.site-bgfx-veil{
  position:absolute;inset:0;
  /* Global slöja: lätt i toppen (spiralen syns i hero) och något starkare
     neråt. Textsektionerna har dessutom en egen ljus yta så spiralen blir
     mycket subtil bakom text. (Justerbara alfa-värden för mer/mindre spiral.) */
  background:radial-gradient(100% 72% at 50% -10%, rgba(255,252,246,.16), transparent 62%),
    linear-gradient(180deg, rgba(245,239,230,.34) 0%, rgba(245,239,230,.44) 100%);
}

/* ---- A5. macOS-fonster runt portfolj/galleri ---- */
.mac-window{
  border-radius:18px;overflow:hidden;border:1px solid rgba(20,30,45,.14);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 30px 70px -40px rgba(20,30,45,.45);
}
.mac-titlebar{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;
  background:linear-gradient(165deg,rgba(56,63,75,.97),rgba(43,49,60,.97));
  border-bottom:1px solid rgba(255,255,255,.08);position:relative;
}
.mac-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.mac-title{position:absolute;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.55);font-size:.78rem;font-family:"Space Grotesk",sans-serif;letter-spacing:.04em}
.mac-window .port-grid{padding:16px;gap:14px}

@media(prefers-reduced-motion:reduce){
  .site-bgfx video{display:none}
}

/* ===================================================================
   Företag: reklamfilm-showcase – två breda 16:9-rutor (ersätter rutnät)
   =================================================================== */
.port-grid.films{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:18px}
.port-grid.films .work{aspect-ratio:16/9}
.port-grid.films .work img{height:100%}
@media(max-width:720px){.port-grid.films{grid-template-columns:1fr}}

/* ---- Länk till dedikerad reklamfilmssida (fallback för mobil) ---- */
.port-filmlinks{text-align:center;margin:20px 0 0;color:var(--muted);font-size:.95rem;
  display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:center}
.port-filmlinks a{display:inline-flex;align-items:center;gap:.35em;color:var(--accent);font-weight:600;
  text-decoration:none;border:1px solid var(--border);padding:.5em 1em;border-radius:999px;
  transition:border-color .2s,background .2s}
.port-filmlinks a:hover{border-color:var(--accent);background:rgba(45,142,255,.10)}

/* ---- Privat: processen har 4 steg (inte 5) → 4 kolumner på desktop, ingen tom ruta ---- */
@media(min-width:981px){.steps-privat{grid-template-columns:repeat(4,1fr)}}

/* ---- Pris inkl. moms (liten text bredvid priset) ---- */
.price-vat{font-family:Inter,-apple-system,sans-serif;font-size:.72rem;font-weight:600;
  color:var(--muted);letter-spacing:.02em;white-space:nowrap;margin-left:.45em;vertical-align:middle}

/* ---- "Mest populär"-etiketten: tydligt framför kortet (inte täckt) ---- */
.pricing{padding-top:18px}
.price.featured{z-index:2}
.badge{top:-15px;z-index:5;box-shadow:0 6px 16px -6px rgba(45,142,255,.75)}
@media(max-width:760px){.pricing .price.featured{margin-top:22px}}

/* ---- Honeypot (spam-fälla): helt dold för människor, syns bara för bots ---- */
.hp-field{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- Bekräftelse efter bokat möte (Calendly) ---- */
.booked-overlay{position:fixed;inset:0;z-index:1200;display:none;place-items:center;padding:24px;
  background:rgba(12,18,28,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.booked-overlay.open{display:grid;animation:fade .25s var(--ease)}
.booked-card{position:relative;width:100%;max-width:460px;text-align:center;
  background:rgba(255,255,255,.96);border:1px solid rgba(20,30,45,.12);border-radius:20px;
  padding:38px 30px 30px;box-shadow:0 40px 90px -40px rgba(12,20,34,.6)}
.booked-card h3{font-size:1.45rem;margin:0 0 10px;color:var(--text)}
.booked-card p{color:var(--muted);margin:0 0 12px;line-height:1.6}
.booked-card .booked-help{font-size:.9rem;color:var(--muted-2)}
.booked-card .booked-help a{color:var(--accent);font-weight:600}
.booked-card .btn{margin-top:8px}
.booked-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:10px;
  border:1px solid rgba(20,30,45,.12);background:rgba(255,255,255,.7);color:var(--text);
  font-size:1.4rem;line-height:1;cursor:pointer}
.booked-close:hover{background:#fff;border-color:var(--accent)}

/* ---- Galleri: packa rutnätet tätt så inga tomma vita luckor uppstår
   när höga (tall) och låga bilder blandas ---- */
.port-grid:not(.films){grid-auto-flow:dense}

/* ---- Galleri som masonry: bilderna flyter och fyller alltid ut,
   så inga tomma vita ytor uppstår oavsett hur många bilder som visas.
   (Filmrutnätet på företagssidan påverkas inte.) ---- */
.port-grid:not(.films){display:block;columns:3;column-gap:16px;grid-auto-rows:auto}
.port-grid:not(.films) .work{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:block;width:100%;margin:0 0 16px;height:auto;
}
.port-grid:not(.films) .work.tall{grid-row:auto}
.port-grid:not(.films) .work img{height:auto;display:block}
@media(max-width:980px){.port-grid:not(.films){columns:2}}
@media(max-width:760px){.port-grid:not(.films){columns:1}}