/* ============================================================
   MIDLERTIDIG PLASSHOLDER — designsystem delt med kundesidene
   (samme palett/typografi som Hos Grekerne: dyp marine, egeisk
   kobolt, himmelblått, kalkhvit + honninggull for én handling)
   ============================================================ */

:root{
  --ink:#062A5A;          /* dyp marine — tekst */
  --cobalt:#1E63B8;       /* egeisk brand-blå */
  --cobalt-deep:#0A3C7D;
  --sky:#CFE7F5;          /* mykt himmelblått */
  --sky-tint:#EAF3FA;
  --wash:#F3F6F8;         /* kalkhvit bakgrunn (kjølig) */
  --paper:#FFFFFF;
  --gold:#E4A93C;         /* honninggull — kun én handling */
  --gold-deep:#C88E24;
  --line:#DCE6EC;
  --muted:#5B7186;

  --shadow-md:0 14px 40px rgba(6,42,90,.10);
  --shadow-lg:0 40px 90px rgba(6,42,90,.16);

  --display:"Fraunces",Georgia,serif;
  --body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;min-height:100vh;
  display:flex;flex-direction:column;
  font-family:var(--body);
  color:var(--ink);
  background:var(--wash);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:8px;
}

/* ---------- rolig bakgrunnsskjær ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(10px);opacity:.9}
.glow--a{
  top:-220px;right:-180px;width:680px;height:680px;
  background:radial-gradient(circle at center,var(--sky) 0%,var(--sky-tint) 44%,transparent 70%);
}
.glow--b{
  bottom:-260px;left:-200px;width:560px;height:560px;
  background:radial-gradient(circle at center,var(--sky-tint) 0%,transparent 68%);
}

/* ---------- scene ---------- */
.stage{
  position:relative;z-index:1;
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:56px 24px;
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow-lg);
  padding:64px 60px 60px;
  max-width:620px;width:100%;
  text-align:center;
  position:relative;
}

/* ---------- monoline-merke ---------- */
.mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:88px;height:88px;border-radius:22px;
  background:var(--sky-tint);
  margin-bottom:30px;
}
.mark svg{width:52px;height:52px;overflow:visible}
.mark-ring{fill:none;stroke:var(--sky);stroke-width:2}
.mark-stroke{
  fill:none;stroke:var(--cobalt);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:draw 1.1s .25s cubic-bezier(.22,.61,.36,1) forwards;
}
.mark-dot{fill:var(--gold);opacity:0;animation:pop .3s 1.15s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}

/* ---------- eyebrow + status ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cobalt);margin:0 0 22px;
}
.status-dot{
  width:9px;height:9px;border-radius:50%;background:var(--cobalt);
  box-shadow:0 0 0 0 rgba(30,99,184,.5);
  animation:pulse 2.4s infinite;flex:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(30,99,184,.5)}
  70%{box-shadow:0 0 0 9px rgba(30,99,184,0)}
  100%{box-shadow:0 0 0 0 rgba(30,99,184,0)}
}

/* ---------- overskrift + penselstrøk ---------- */
.headline{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,7vw,4.4rem);line-height:1.02;
  letter-spacing:-.02em;margin:0 0 20px;
  font-variation-settings:"opsz" 120;
}
.headline span{display:inline-block}
.brush{position:relative}
.brush::after{
  content:"";position:absolute;left:-3%;right:-3%;bottom:-.1em;height:.4em;
  background:no-repeat center/100% 100%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34'><path d='M4 22 C60 10 120 8 190 12 C240 15 275 20 296 14 C280 26 210 28 150 26 C95 24 45 26 6 30 Z' fill='%231E63B8'/></svg>");
  opacity:.92;transform:scaleX(0);transform-origin:left center;
  animation:paint .85s 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes paint{to{transform:scaleX(1)}}

.lead{
  font-size:1.16rem;color:var(--muted);
  max-width:42ch;margin:0 auto;
}

/* ---------- handling ---------- */
.actions{margin-top:34px;min-height:1px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-weight:800;font-size:1rem;
  padding:14px 30px;border-radius:999px;
  border:2px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--contact{
  background:var(--gold);color:#3A2A05;
  box-shadow:0 8px 20px rgba(228,169,60,.34);
}
.btn--contact:hover{
  background:var(--gold-deep);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(200,142,36,.4);
}
.btn[hidden]{display:none}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
  padding:22px 32px;
  font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--line);
  background:rgba(243,246,248,.6);
  backdrop-filter:saturate(140%) blur(6px);
}
.foot-tag{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
.foot-credit a{color:var(--cobalt);font-weight:700}
.foot-credit a:hover{color:var(--ink)}

/* ---------- responsiv ---------- */
@media (max-width:560px){
  .card{padding:48px 30px 44px;border-radius:22px}
  .mark{width:76px;height:76px;margin-bottom:24px}
  .mark svg{width:44px;height:44px}
  .lead{font-size:1.06rem}
  .foot{justify-content:center;text-align:center;padding:20px 24px}
}

/* ---------- redusert bevegelse ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .status-dot{animation:none}
  .mark-stroke{stroke-dashoffset:0;animation:none}
  .mark-dot{opacity:1;animation:none}
  .brush::after{transform:scaleX(1);animation:none}
}