/* VinGPT-sida — felles stil. v3 05.11.2026: hero med telefon, Fraunces + Inter, kort med ikon. */
:root {
  color-scheme: dark;
  --bg:#150709; --bg2:#23090f; --flate:#2a0f16; --kant:#3d1a24; --tekst:#f3e8d8; --dempet:#bfa48f;
  --gull:#e2bd6d; --gull2:#f3dba0; --rod:#8d1f3a;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--tekst);
  font:17px/1.6 Inter,-apple-system,system-ui,sans-serif;
  background-image:
    radial-gradient(900px 500px at 15% -10%, rgba(141,31,58,.45), transparent 60%),
    radial-gradient(700px 500px at 100% 20%, rgba(226,189,109,.10), transparent 60%);
  background-repeat:no-repeat; }
main { max-width:1040px; margin:0 auto; padding:40px 24px 80px; }
h1,h2,h3,.lofte { font-family:Fraunces,Georgia,serif; letter-spacing:-.01em; }
h1 { font-size:1.6rem; margin:0; color:var(--tekst); }
h2 { color:var(--gull); font-size:1.15rem; margin:2em 0 .4em; font-weight:600; }
a { color:var(--gull); }
strong { color:#fff; }
.moden { color:var(--dempet); font-size:.9rem; margin-bottom:2em; }
footer { margin-top:4em; padding-top:1.5em; border-top:1px solid var(--kant); color:var(--dempet); font-size:.85rem; }

/* Topp */
.topp { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:48px; }
.topp .merke { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tekst); }
.topp .merke svg { width:30px; height:30px; }
.topp nav a { color:var(--dempet); text-decoration:none; margin-left:18px; font-size:.95rem; }
.topp nav a:hover { color:var(--gull); }

/* Hero: tekst venstre, telefon høyre */
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; margin-bottom:72px; }
.hero .lofte { font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1.08; margin:0 0 .5em; font-weight:600; color:#fff; }
.hero .lofte em { font-style:italic; color:var(--gull2); }
.hero p { margin:.4em 0; font-size:1.1rem; color:#e6d8c8; max-width:34em; }
.appstore { display:inline-flex; align-items:center; gap:10px; margin:1.2em 0 .6em; padding:15px 26px; border-radius:14px;
  background:linear-gradient(180deg,var(--gull2),var(--gull)); color:#1a090e; font-weight:700; text-decoration:none; font-size:1.05rem;
  box-shadow:0 10px 30px rgba(226,189,109,.25); }
.appstore:hover { filter:brightness(1.06); }
.appstore svg { width:20px; height:20px; }
.krav { color:var(--dempet); font-size:.85rem; margin-top:.2em; }
.merker { list-style:none; padding:0; margin:1.2em 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.merker li { font-size:.8rem; color:var(--tekst); background:rgba(255,255,255,.04); border:1px solid var(--kant); border-radius:999px; padding:4px 12px; }
.telefon { position:relative; justify-self:center; }
.telefon img { width:min(300px,80vw); display:block; border-radius:34px; border:6px solid #0b0405;
  box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); transform:rotate(-3deg); }
.telefon::before { content:""; position:absolute; inset:-30px; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(226,189,109,.18), transparent); }

/* Seksjoner */
h2.seksjon { font-size:clamp(1.6rem,3vw,2.1rem); color:#fff; text-align:center; margin:0 0 .35em; font-weight:600; }
.ingress { text-align:center; color:var(--dempet); margin:0 auto 2em; max-width:40em; }
section { margin-bottom:80px; }
.kort { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.kort > div { background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02)); border:1px solid var(--kant); border-radius:20px; padding:22px 22px 20px; }
.kort svg { width:30px; height:30px; color:var(--gull); margin-bottom:12px; }
.kort h3 { color:#fff; font-size:1.1rem; margin:0 0 .35em; font-weight:600; }
.kort p { margin:0; font-size:.95rem; color:#d9c8b6; }
.steg { counter-reset:steg; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.steg li { counter-increment:steg; background:var(--flate); border:1px solid var(--kant); border-radius:20px; padding:22px; }
.steg li::before { content:counter(steg); display:inline-block; width:2em; height:2em; border-radius:50%; margin-bottom:10px;
  background:var(--gull); color:#1a090e; font-weight:700; text-align:center; line-height:2em; }
.steg strong { display:block; color:#fff; font-family:Fraunces,Georgia,serif; font-size:1.1rem; margin-bottom:.2em; }
.bilder { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.bilder img { width:100%; height:auto; display:block; border-radius:26px; border:5px solid #0b0405; box-shadow:0 24px 50px rgba(0,0,0,.55); }
.faq h2 { font-size:1.08rem; color:var(--gull); margin:1.8em 0 .3em; }
.faq p { color:#e0d2c2; }
.band { text-align:center; background:linear-gradient(135deg,#3a0f1d,#1d0a10); border:1px solid var(--kant); border-radius:26px; padding:44px 24px; }
.band .lofte { font-size:1.7rem; margin:0 0 .3em; color:#fff; }
.band p { color:var(--dempet); margin:0; }

@media (max-width:760px) {
  .hero { grid-template-columns:1fr; gap:28px; text-align:center; }
  .hero p { margin-left:auto; margin-right:auto; }
  .merker { justify-content:center; }
  .telefon img { transform:none; }
  .kort, .steg { grid-template-columns:1fr; }
  .bilder { grid-template-columns:1fr 1fr; gap:12px; }
  .topp nav { display:none; }
  section { margin-bottom:56px; }
}