/* ============================================================
   TINIUS BILSENTER — Design v4: "Digital Showroom"
   Mørk aurora-bakgrunn, glass, kinetisk typografi, spotlight-hover.
   ============================================================ */

:root{
  --bg:        #0b0b0d;
  --bg-2:      #161618;
  --ink:       #ffffff;
  --ink-dim:   #bcbec3;
  --ink-faint: #87898f;

  --glass-bg:     rgba(255,255,255,.04);
  --glass-bg-2:   rgba(255,255,255,.07);
  --glass-border: rgba(255,255,255,.10);
  --glass-border-hi: rgba(255,255,255,.22);

  --accent-a: #2454d1;   /* dempet, eksklusivt blått — brukes sparsomt */
  --accent-b: #4d7fe0;   /* litt lysere, kun til små detaljer/lenker */
  --accent-c: #d4af6a;   /* dempet gull — pris-aksent */
  --accent-grad: var(--accent-a);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --container: 1280px;
  --header-h: 88px;

  --shadow-sm: 0 10px 24px -16px rgba(0,0,0,.55);
  --shadow-md: 0 24px 48px -22px rgba(0,0,0,.65);
  --shadow-lg: 0 36px 80px -30px rgba(0,0,0,.72);

  --font-display: 'Space Grotesk', 'Arial', sans-serif;
  --font-body: 'Manrope', -apple-system, Segoe UI, sans-serif;

  --ease: cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 1400px 900px at 50% 0%, #1b1d24 0%, var(--bg) 62%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--ink);
}
p{ margin:0 0 1em; color:var(--ink-dim); }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; position:relative; z-index:1; }
section{ position:relative; scroll-margin-top:110px; }

/* ---------- Glass utility ---------- */
.glass{
  background:linear-gradient(160deg, var(--bg-2) 0%, #131315 100%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

/* ---------- Seksjons-rytme: veksler mellom transparent og tonet bakgrunn ---------- */
.section-alt{
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%), var(--bg-2);
  border-top:1px solid var(--glass-border);
  border-bottom:1px solid var(--glass-border);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); padding:8px 16px 8px 8px;
  background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
  border-radius:999px; margin-bottom:22px;
}
.eyebrow .dot{ width:22px; height:22px; border-radius:50%; background:var(--accent-grad); flex-shrink:0; }

.section-head{ max-width:620px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(30px,4vw,44px); }
.section-head p{ font-size:17px; max-width:520px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:999px;
  font-family:var(--font-body); font-weight:700; font-size:14px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
  will-change:transform;
}
.btn-primary{ background:var(--accent-a); color:#fff; box-shadow:0 10px 24px -12px rgba(0,0,0,.6); }
.btn-primary:hover{ background:#1c44b0; }
.btn-outline{ background:rgba(255,255,255,.03); border-color:var(--glass-border-hi); color:var(--ink); }
.btn-outline:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.btn-amber{ background:var(--accent-c); color:#231404; box-shadow:0 10px 24px -12px rgba(0,0,0,.6); }
.btn-sm{ padding:11px 20px; font-size:12.5px; }
.btn-block{ width:100%; }
.magnetic{ display:inline-block; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h); display:flex; align-items:center;
  background:rgba(7,7,10,.5);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:height .3s var(--ease), background .3s ease, border-color .3s ease;
}
.site-header.scrolled{ height:70px; background:rgba(7,7,10,.78); border-bottom-color:var(--glass-border); }
.header-inner{ max-width:var(--container); margin:0 auto; padding:0 32px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.logo img{ height:34px; width:auto; }
.logo .wordmark{ font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em; color:var(--ink); }
.logo .wordmark i{ font-style:normal; display:block; font-family:var(--font-body); font-weight:600; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{ position:relative; padding:10px 16px; font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--ink-dim); border-radius:999px; transition:color .25s ease; }
.main-nav a:hover{ color:var(--ink); }
.main-nav a.active{ color:var(--ink); background:rgba(255,255,255,.07); }
.main-nav a.active::after{ content:""; position:absolute; left:16px; right:16px; bottom:5px; height:2px; background:var(--accent-a); border-radius:2px; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.header-phone{ display:flex; flex-direction:column; align-items:flex-end; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
.header-phone span{ font-family:var(--font-body); font-weight:600; font-size:9.5px; letter-spacing:.12em; color:var(--ink-faint); text-transform:uppercase; margin-top:2px; }
.burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--glass-border-hi); background:rgba(255,255,255,.04); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; flex-shrink:0; }
.burger span{ width:16px; height:1.5px; background:var(--ink); display:block; transition:.3s ease; border-radius:2px; }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero: fullbredde bakgrunnsbilde ---------- */
.hero{
  position:relative; min-height:82vh; display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 40px) 0 72px;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(0deg, rgba(15,16,20,.96) 0%, rgba(15,16,20,.72) 38%, rgba(15,16,20,.32) 68%, rgba(15,16,20,.55) 100%);
}
.hero-inner{ position:relative; z-index:1; max-width:820px; }
.hero h1{ font-size:clamp(38px,6vw,68px); margin-bottom:22px; }
.kinetic .word{ display:inline-block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; vertical-align:bottom; }
.kinetic .word .letters{ display:inline-block; transform:translateY(60%); opacity:0; transition:transform .6s var(--ease), opacity .5s ease; }
.kinetic.in .word .letters{ transform:translateY(0); opacity:1; }
.kinetic .hl .letters{ color:var(--accent-b); }
.hero p.lead{ font-size:18px; color:#d7d9de; max-width:540px; margin-bottom:32px; opacity:0; transform:translateY(12px); transition:opacity .6s ease .35s, transform .6s var(--ease) .35s; }
.hero.in p.lead{ opacity:1; transform:none; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(12px); transition:opacity .6s ease .45s, transform .6s var(--ease) .45s; }
.hero.in .hero-actions{ opacity:1; transform:none; }

/* ---------- Stat counters (rolig autoritets-linje rett under hero) ---------- */
.stat-row{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--glass-border); background:var(--bg-2); }
.stat-row .stat{ padding:26px 24px; border-right:1px solid var(--glass-border); }
.stat-row .stat:last-child{ border-right:none; }
.stat-row .num{ font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--ink); }
.stat-row .label{ font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

/* ---------- Sections ---------- */
.section{ padding:120px 0; }
.section.tight{ padding:84px 0; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.1; box-shadow:var(--shadow-lg); border:1px solid var(--glass-border); }
.about-media img{ width:100%; height:100%; object-fit:cover; }
.about-list{ margin-top:26px; display:grid; gap:14px; }
.about-list li{ display:flex; gap:14px; align-items:flex-start; color:var(--ink-dim); font-size:15px; }
.about-list li .ic{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:rgba(77,127,224,.14); border:1px solid rgba(77,127,224,.3); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.about-list li .ic svg{ width:12px; height:12px; color:var(--accent-b); }

/* ---------- Bento cars with spotlight ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:240px; gap:14px; }
.bento-item{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--glass-border); background:var(--bg-2);
  --mx:50%; --my:50%;
}
.bento-item.big{ grid-column:span 4; grid-row:span 2; }
.bento-item.small{ grid-column:span 2; grid-row:span 1; }
.bento-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.bento-item:hover img{ transform:scale(1.06); }
.bento-item::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(circle 220px at var(--mx) var(--my), rgba(255,255,255,.16), transparent 70%);
  mix-blend-mode:overlay;
}
.bento-item:hover::before{ opacity:1; }
.bento-item::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 40%, rgba(3,3,5,.92) 100%); }
.bento-info{ position:absolute; left:0; right:0; bottom:0; padding:24px; z-index:3; }
.bento-item.small .bento-info{ padding:18px; }
.bento-info .make{ color:var(--accent-b); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; }
.bento-info h3{ color:var(--ink); font-size:22px; margin:4px 0 8px; }
.bento-item.small .bento-info h3{ font-size:16.5px; margin:3px 0 6px; }
.bento-info .specs{ color:var(--ink-dim); font-size:12px; font-weight:600; display:flex; gap:14px; flex-wrap:wrap; }
.price-pill{
  position:absolute; top:18px; right:18px; z-index:3;
  background:rgba(11,11,13,.75); backdrop-filter:blur(6px); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  font-family:var(--font-display); font-weight:700; font-size:13px;
  padding:9px 16px; border-radius:999px;
}
.cars-cta{ text-align:center; margin-top:52px; }

/* ---------- Sell banner ---------- */
.sell-banner{
  position:relative; overflow:hidden; padding:64px 56px; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  box-shadow:var(--shadow-md);
}
.sell-banner{ border-top:2px solid var(--accent-a); }
.sell-banner > *{ position:relative; z-index:1; }
.sell-banner h2{ font-size:clamp(28px,3.6vw,40px); max-width:480px; margin-bottom:14px; }
.sell-banner p{ max-width:440px; margin-bottom:0; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; }
.contact-info{ padding:48px; }
.contact-map{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--glass-border); box-shadow:var(--shadow-md); }
.contact-map iframe{ width:100%; height:100%; min-height:420px; border:0; filter:grayscale(.6) invert(.9) contrast(.85); }
.info-row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--glass-border); }
.info-row:last-child{ border-bottom:none; }
.info-row .ic{ width:40px; height:40px; border-radius:50%; background:rgba(77,127,224,.14); border:1px solid rgba(77,127,224,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent-b); }
.info-row .ic svg{ width:17px; height:17px; }
.info-row h4{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); margin-bottom:4px; font-family:var(--font-body); font-weight:700; }
.info-row p{ margin:0; font-size:14.5px; }
.hours-table{ width:100%; margin-top:4px; border-collapse:collapse; }
.hours-table tr td{ padding:3px 0; font-size:14.5px; color:var(--ink-dim); }
.hours-table tr td:last-child{ text-align:right; color:var(--ink); font-weight:600; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--glass-border); position:relative; }
.footer-cta{ padding:90px 32px; text-align:center; }
.footer-cta h2{ font-size:clamp(34px,5.6vw,68px); margin-bottom:30px; }
.footer-main{ max-width:var(--container); margin:0 auto; padding:0 32px 56px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; }
.footer-brand p{ font-size:13.5px; max-width:260px; margin-top:16px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); transition:.25s; }
.footer-social a:hover{ color:var(--bg); background:var(--ink); border-color:var(--ink); }
.footer-col h4{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:18px; }
.footer-col ul{ display:grid; gap:11px; }
.footer-col a{ font-size:14.5px; color:var(--ink-dim); transition:.2s; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{ border-top:1px solid var(--glass-border); padding:22px 32px; max-width:var(--container); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom p{ margin:0; font-size:12.5px; color:var(--ink-faint); }

/* ---------- Forms ---------- */
.form-card{ padding:44px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid.full, .field.full{ grid-column:1/-1; }
.field label{ display:block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
  border-radius:var(--radius-sm); padding:14px 16px; color:var(--ink);
  font-family:var(--font-body); font-size:14.5px; transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent-b); }
.field textarea{ resize:vertical; min-height:120px; }
.form-success{ text-align:center; padding:26px 10px; }
.form-success .ic-ok{ width:56px; height:56px; border-radius:50%; background:var(--accent-grad); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; color:#fff; }
.form-success .ic-ok svg{ width:24px; height:24px; }
.form-success h3{ font-size:22px; margin-bottom:10px; }
.form-success p{ font-size:14.5px; margin:0 auto; max-width:360px; }

/* ---------- Pricing ---------- */
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.price-card{ padding:46px 40px; position:relative; overflow:hidden; }
.price-card.featured{ border-color:var(--glass-border-hi); }
.price-card.featured{ border-top:2px solid var(--accent-a); }
.price-card .tier-label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.price-card h3{ font-size:23px; margin-bottom:6px; max-width:380px; }
.price-card .price{ font-family:var(--font-display); font-size:48px; font-weight:600; margin:18px 0 4px; }
.price-card .price sup{ font-size:16px; color:var(--ink-faint); font-family:var(--font-body); font-weight:700; }
.price-card .price.price-cta{ font-size:30px; color:var(--accent-b); }
.price-card .price-note{ font-size:13px; color:var(--ink-faint); margin-bottom:26px; }
.price-card ul{ display:grid; gap:13px; margin-bottom:30px; }
.price-card ul li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-dim); }
.price-card ul li svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; color:var(--accent-b); }
.price-card .examples{ font-size:13px; color:var(--ink-faint); background:rgba(255,255,255,.03); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:13px 15px; margin-bottom:26px; }
.price-card .examples b{ color:var(--ink-dim); }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step{ padding:30px 26px; transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--glass-border-hi); }
.step .step-num{ font-family:var(--font-display); font-size:26px; font-weight:600; color:transparent; -webkit-text-stroke:1.3px var(--accent-b); display:block; margin-bottom:16px; }
.step h4{ font-size:16px; margin-bottom:8px; }
.step p{ font-size:14px; margin:0; }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.team-card{ overflow:hidden; }
.team-photo{ aspect-ratio:1/1; overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:transform .5s var(--ease); }
.team-card:hover .team-photo img{ transform:scale(1.05); }
.team-info{ padding:22px 24px 26px; }
.team-info h4{ font-size:18px; margin-bottom:3px; }
.team-role{ font-size:12px; font-weight:700; color:var(--accent-b); text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.team-info p.bio{ font-size:13.5px; margin-bottom:0; }
.team-contact{ display:flex; gap:10px; margin-top:16px; }
.team-contact a{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); transition:.2s; }
.team-contact a:hover{ color:var(--bg); background:var(--ink); }
.team-contact svg{ width:14px; height:14px; }

/* ---------- Page hero ---------- */
.page-hero{
  position:relative; padding:calc(var(--header-h) + 70px) 0 64px;
  border-bottom:1px solid var(--glass-border);
  background:radial-gradient(ellipse 1100px 520px at 12% 0%, rgba(36,84,209,.16) 0%, transparent 60%), var(--bg-2);
  background-size:cover; background-position:center;
}
.page-hero::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg, var(--accent-a), transparent 60%); }
.page-hero.has-image::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(11,11,13,.94) 0%, rgba(11,11,13,.86) 42%, rgba(11,11,13,.55) 100%);
}
.page-hero.has-image .container{ position:relative; z-index:1; }
.breadcrumb{ font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:18px; text-transform:uppercase; }
.breadcrumb a{ color:var(--ink-faint); }
.breadcrumb a:hover{ color:var(--ink); }
.page-hero h1{ font-size:clamp(34px,5.4vw,56px); max-width:760px; }
.page-hero p{ max-width:560px; font-size:17px; }

/* ---------- Filter bar ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:18px; margin-bottom:40px; border-radius:var(--radius); }
.filter-bar select, .filter-bar input{ background:rgba(255,255,255,.05); border:1px solid var(--glass-border); color:var(--ink); border-radius:999px; padding:11px 16px; font-size:13.5px; font-family:var(--font-body); }
.filter-bar select:focus, .filter-bar input:focus{ outline:none; border-color:var(--accent-b); }
.filter-bar .grow{ flex:1; min-width:200px; }
.filter-reset{ background:transparent; border:1px solid var(--glass-border-hi); color:var(--ink-dim); border-radius:999px; padding:11px 18px; font-size:12px; font-weight:700; cursor:pointer; transition:.2s; font-family:var(--font-body); }
.filter-reset:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.result-count{ color:var(--ink-faint); font-size:13.5px; margin-bottom:24px; }
.empty-state{ display:none; text-align:center; padding:70px 20px; border:1px dashed var(--glass-border-hi); border-radius:var(--radius); color:var(--ink-dim); font-size:15px; }
.empty-state.show{ display:block; }
.empty-state a{ color:var(--accent-b); font-weight:700; }

/* Billink iframe wrapper */
.billink-frame{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--glass-border); min-height:1400px; }
.billink-frame iframe{ width:100%; height:1600px; border:0; display:block; }

/* ---------- Legacy car-grid (fallback) ---------- */
.cars-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.car-card{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--glass-border); background:var(--bg-2); aspect-ratio:4/3.1; }
.car-card .car-media{ position:absolute; inset:0; }
.car-card .car-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.car-card:hover .car-media img{ transform:scale(1.05); }
.car-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(3,3,5,.94) 100%); z-index:1; }
.car-tag{ position:absolute; top:16px; left:16px; z-index:3; background:rgba(7,7,10,.6); backdrop-filter:blur(8px); border:1px solid var(--glass-border-hi); color:var(--ink); font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:7px 13px; border-radius:999px; }
.car-body{ position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2; }
.car-body .make{ color:var(--accent-b); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.car-body h3{ color:var(--ink); font-size:19px; margin-bottom:10px; }
.car-specs{ display:flex; flex-wrap:wrap; gap:8px 14px; font-size:11.5px; font-weight:600; color:var(--ink-dim); padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.14); }
.car-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.car-price{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--ink); }
.car-price small{ display:block; font-weight:600; font-size:10px; color:var(--ink-faint); }

/* ---------- Kort med hover-løft (dekningskort, priskort, teamkort) ---------- */
.coverage-card, .price-card, .team-card, .faq-item{ transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.coverage-card:hover, .price-card:hover, .team-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--glass-border-hi); }
.price-card.featured{ box-shadow:var(--shadow-lg); }

/* ---------- Nyheter/tilbud ---------- */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.news-card{ overflow:hidden; display:flex; flex-direction:column; }
.news-media{ aspect-ratio:16/10; overflow:hidden; }
.news-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.news-card:hover .news-media img{ transform:scale(1.05); }
.news-body{ padding:22px 24px 26px; }
.news-date{ font-size:11.5px; font-weight:700; color:var(--accent-b); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.news-body h3{ font-size:19px; margin-bottom:8px; }
.news-body p{ font-size:14.5px; margin:0; }

/* ---------- Varsel-banner (f.eks. "stengt i dag") ---------- */
.site-alert{
  position:relative; z-index:1001; background:var(--accent-a); color:#fff;
  padding:12px 32px; font-size:13.5px; font-weight:600; text-align:center;
}
.site-alert .container{ display:flex; align-items:center; justify-content:center; gap:16px; position:relative; }
.site-alert-close{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.15); border:none; color:#fff; width:22px; height:22px;
  border-radius:50%; cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.site-alert-close:hover{ background:rgba(255,255,255,.28); }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px; max-width:820px; }
.faq-item{ overflow:hidden; }
.faq-q{ padding:22px 26px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); }
.faq-q svg{ width:16px; height:16px; color:var(--accent-b); transition:transform .3s ease; flex-shrink:0; margin-left:18px; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 26px 24px; }
.faq-a-inner p{ margin:0; font-size:14.5px; }

/* ---------- Coverage ---------- */
.coverage-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.coverage-card{ padding:30px; text-align:center; }
.coverage-card .zone{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-b); margin-bottom:12px; }
.coverage-card .time{ font-size:28px; font-family:var(--font-display); font-weight:600; color:var(--ink); }
.coverage-card .time small{ font-size:12.5px; color:var(--ink-faint); font-family:var(--font-body); font-weight:600; }

/* ---------- Reveal utility ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.mt-lg{ margin-top:60px; }
.text-center{ text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .about-grid{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento-item.big{ grid-column:span 2; grid-row:span 1; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .footer-main{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .price-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .coverage-grid{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .cars-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .main-nav, .header-phone{ display:none; }
  .burger{ display:flex; }
  .main-nav.open{
    display:flex; position:fixed; inset:70px 12px auto 12px; flex-direction:column;
    background:rgba(9,9,13,.96); backdrop-filter:blur(20px);
    padding:14px; gap:2px; border-radius:var(--radius); border:1px solid var(--glass-border);
  }
  .main-nav.open a{ padding:14px 16px; font-size:15px; border-radius:var(--radius-sm); }
  .form-grid{ grid-template-columns:1fr; }
  .cars-grid, .bento, .team-grid, .coverage-grid, .news-grid{ grid-template-columns:1fr; }
  .bento-item.big, .bento-item.small{ grid-column:span 1; }
  .sell-banner{ padding:44px 26px; }
  .footer-main{ grid-template-columns:1fr; gap:34px; }
  .contact-info{ padding:34px 24px; }
  .price-card{ padding:34px 24px; }
  .stat-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .hero{ min-height:auto; padding:calc(var(--header-h) + 24px) 0 44px; }
  .hero-visual{ aspect-ratio:4/3.4; margin-top:44px; }
  .page-hero{ padding:calc(var(--header-h) + 36px) 0 36px; }
  .section{ padding:56px 0; }
  .section.tight{ padding:44px 0; }
  .container{ padding:0 20px; }
  .billink-frame{ min-height:900px; border-radius:var(--radius); }
  .billink-frame iframe{ height:1200px; }
  .form-card{ padding:26px 20px; }
  .contact-info{ padding:26px 20px; }
  .price-card{ padding:26px 20px; }
  .footer-cta{ padding:64px 20px; }
  .filter-bar{ padding:14px; }
}