/* =========================================================================
   GETA MEDIA — stílar fyrir vef, innskráningu og viðskiptavinagátt
   Svart/hvítt útlit í anda vörumerkisins; gagnalitir aðeins í gröfum.
   ========================================================================= */

:root {
  --bg:        #0d0d0d;   /* síðuplan */
  --bg-deep:   #0a0a0a;
  --surface:   #1a1a19;   /* spjöld og gröf */
  --surface-2: #222220;   /* tooltip / upphækkað */
  --panel:     #141413;

  --ink:    #ffffff;
  --ink-2:  #c3c2b7;
  --muted:  #898781;

  --grid:     #2c2c2a;    /* hárfínar hjálparlínur */
  --baseline: #383835;
  --border:   rgba(255, 255, 255, 0.10);

  --tt:   #3987e5;        /* TikTok — sería 1 (staðfest með validator) */
  --ig:   #d55181;        /* Instagram — sería 2 */
  --good: #0ca30c;
  --bad:  #e66767;
  --warn: #c98500;

  /* dagatalsfærslur sem teymið skráir — aðgreindar frá birt/áætlað/samþykkt */
  --ev-efni:    #4bb3a6;
  --ev-toku:    #9b6ff0;
  --ev-fundur:  #7d94a8;
  --ev-herferd: #e0793f;
  --ev-annad:   #898781;

  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Án þessa teiknar vafrinn sína eigin reiti í ljósu þema — dagsetningarreitir,
     tölutakkar, fellilistar og skrunstikur urðu hvítir kassar á svörtum grunni. */
  color-scheme: dark;
}

/* ---------- grunnur ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: #ffffff; color: #0a0a0a; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 2px; border-radius: 4px; }
/* „Reduced motion“: sífelldar hreyfingar (borði, ljómi, ljóskastari) eru
   teknar af — en stuttu upphafshreyfingarnar halda sér, annars sæi fólk
   með þessa stillingu (t.d. sum Windows-tæki) aldrei vörumerkisopnunina. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-glow, .hero-blob { animation: none !important; }
  .hero::after { display: none; }
}

.wrap { width: min(1160px, 92vw); margin: 0 auto; }

/* ---------- merki ---------- */
/* Alvöru lógóið af Instagram (@geta_media), ekki lengur eftirlíking úr texta.
   Skráin er 144×60 og hvít á GEGNSÆJUM grunni — upprunalega myndin er hvítt á
   svörtu, svo birtan var færð yfir í alfa. Þess vegna fellur hún á hvaða dökka
   fleti sem er án þess að skilja eftir svartan kassa.
   Instagram skilar aðeins 150×150 útskráður, svo uppsprettan er lítil: haltu
   birtingarstærðinni í eða undir ~150px breidd í haus og ~240px í opnuninni,
   annars fer hún að mýkjast. */
.logo { display: inline-flex; align-items: center; line-height: 1; }
/* Merkið er 144x69: kassinn lokast núna utan um BÆÐI orðin, svo hlutfallið
   er hærra en áður (144x60). Hæðin hér er stillt upp á móti því — annars
   hefði GETA minnkað þegar ramminn stækkaði. */
.logo-img { display: block; height: 39px; width: auto; }
.site-footer .logo-img { height: 31px; }
.logo:hover .logo-img { opacity: 0.82; }
.logo-img { transition: opacity 0.2s ease; }

/* ---------- hnappar ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; color: #0a0a0a;
  font-weight: 700; font-size: 0.95rem;
  padding: 0.75em 1.5em; border-radius: 999px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); color: var(--ink);
  font-weight: 600; font-size: 0.95rem;
  padding: 0.75em 1.5em; border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }
.btn-small { padding: 0.45em 1em; font-size: 0.85rem; }

/* =========================================================================
   VEFSÍÐA (index)
   ========================================================================= */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--ink-2); font-size: 0.95rem; font-weight: 500; transition: color 0.15s ease; }
.nav a:hover { color: var(--ink); }
.nav .btn { color: #0a0a0a; }
.nav-toggle { display: none; }

/* --- hetjusvæði --- */
.hero {
  position: relative;
  /* Loftið hér er í beinni samkeppni við símana: veggurinn er hæsti hluturinn
     í hetjunni og hæð hans er bundin við gluggann. Hver dílur sem sparast að
     ofan verður að stærri síma. Þess vegna er þetta þéttara en annars staðar. */
  padding: clamp(36px, 4.5vh, 72px) 0 48px;
  overflow: hidden;
  background:
    radial-gradient(58% 46% at 72% 4%, rgba(255, 255, 255, 0.07), transparent 70%),
    var(--bg-deep);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(70% 60% at 50% 20%, #000 30%, transparent 100%);
}
.hero .wrap { position: relative; }
.kicker {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.32em; text-indent: 0.32em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 900; text-transform: uppercase;
  line-height: 0.95; letter-spacing: -0.015em;
  max-width: 11ch;
}
.hero p.lead {
  margin: 26px 0 34px; max-width: 56ch;
  color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-social { display: flex; gap: 18px; margin-top: 44px; }
.hero-social a { color: var(--muted); font-size: 0.9rem; transition: color 0.15s ease; }
.hero-social a:hover { color: var(--ink); }

/* --- talnaborði --- */
.stats-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); }
.stats-band .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 40px 0; text-align: center;
}
.stat-num { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -0.01em; }
.stat-label { color: var(--muted); font-size: 0.88rem; margin-top: 4px; }

/* --- kaflar --- */
.section { padding: 90px 0; }
.section-head { margin-bottom: 44px; max-width: 60ch; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.01em; }
.section-head p { color: var(--ink-2); margin-top: 12px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card-s {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card-s:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-3px); }
.card-index { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; color: var(--muted); }
.card-s h3 { font-size: 1.12rem; font-weight: 700; margin: 14px 0 8px; }
.card-s p { color: var(--ink-2); font-size: 0.93rem; }

/* --- gátt (kynning) --- */
.portal-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 54px; align-items: center; }
.check-list { list-style: none; margin: 22px 0 30px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; color: var(--ink-2); font-size: 0.97rem; }
.check-list li::before { content: "✓"; font-weight: 800; color: var(--ink); }

.mock {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.mock-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--grid); }
.mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.mock-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.mock-tile .m-label { font-size: 0.62rem; color: var(--muted); }
.mock-tile .m-val { font-size: 1.05rem; font-weight: 800; margin-top: 2px; }
.mock-tile .m-delta { font-size: 0.62rem; color: var(--good); margin-top: 2px; }
.mock-chart { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.mock-chart .m-label { font-size: 0.66rem; color: var(--muted); margin-bottom: 8px; }

/* --- hafa samband --- */
.contact { text-align: center; padding: 100px 0; }
.contact h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; }
.contact p { color: var(--ink-2); margin: 16px auto 30px; max-width: 46ch; }
.contact-mail {
  font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 700;
  border-bottom: 2px solid var(--border); padding-bottom: 4px;
  transition: border-color 0.15s ease;
}
.contact-mail:hover { border-color: #ffffff; }
.contact-social { display: flex; justify-content: center; gap: 22px; margin-top: 34px; color: var(--muted); font-size: 0.92rem; }
.contact-social a:hover { color: var(--ink); }

.site-footer { border-top: 1px solid var(--border); padding: 34px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.site-footer p { color: var(--muted); font-size: 0.85rem; }
.site-footer a { color: var(--muted); font-size: 0.85rem; }
.site-footer a:hover { color: var(--ink); }

/* =========================================================================
   INNSKRÁNING
   ========================================================================= */

body.login-page {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 70%),
    var(--bg-deep);
  padding: 40px 16px;
}
.login-card {
  width: min(430px, 94vw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 38px 34px;
}
.login-card .logo { margin: 0 auto 8px; display: flex; }
.login-card h1 { font-size: 1.3rem; font-weight: 800; text-align: center; margin-top: 18px; }
.login-card > p { color: var(--muted); font-size: 0.9rem; text-align: center; margin: 8px 0 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.82rem; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
.field input {
  width: 100%; background: #111110; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; color: var(--ink); font: inherit;
  transition: border-color 0.15s ease;
}
.field input:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); }
.login-error { color: var(--bad); font-size: 0.86rem; margin: -4px 0 12px; }
.login-card .btn { width: 100%; justify-content: center; padding: 0.85em; }
.demo-box {
  margin-top: 26px; border: 1px dashed var(--baseline); border-radius: 12px; padding: 16px;
}
.demo-box h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 10px; }
.demo-box p { font-size: 0.84rem; color: var(--ink-2); margin-bottom: 10px; }
.demo-box code { background: #111110; border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: 0.82rem; }
.demo-fill { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.login-back { display: block; text-align: center; margin-top: 22px; color: var(--muted); font-size: 0.88rem; }
.login-back:hover { color: var(--ink); }

/* =========================================================================
   VIÐSKIPTAVINAGÁTT (dashboard)
   ========================================================================= */

body.dash { display: grid; grid-template-columns: 240px 1fr; background: var(--bg); }

.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  padding: 24px 16px; background: var(--bg-deep);
}
.sidebar .logo { align-self: flex-start; margin-left: 6px; }
.customer-chip {
  margin: 22px 0 18px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.customer-chip .c-name { font-weight: 700; font-size: 0.95rem; }
.customer-chip .c-tag { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.badge-sample {
  display: inline-block; margin-top: 8px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warn); border: 1px solid rgba(201, 133, 0, 0.5);
  border-radius: 999px; padding: 2px 9px;
}
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ink-2); font-size: 0.93rem; font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.side-nav a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.side-nav a:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.side-nav a.active { background: rgba(255, 255, 255, 0.09); color: var(--ink); }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.sidebar-foot a, .sidebar-foot button {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 12px; border-radius: 10px;
  color: var(--muted); font-size: 0.88rem;
}
.sidebar-foot a:hover, .sidebar-foot button:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }

.main { min-width: 0; padding: 26px 34px 60px; }
.topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.topbar h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; }
.topbar .data-until { color: var(--muted); font-size: 0.82rem; }

/* --- síubar (eitt röð fyrir ofan allt sem hún nær yfir) --- */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
.seg button {
  padding: 8px 15px; font-size: 0.86rem; color: var(--ink-2); font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { color: var(--ink); }
.seg button.active { background: #ffffff; color: #0a0a0a; font-weight: 700; }
.filterbar select {
  background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font: inherit; font-size: 0.86rem;
}
.filterbar label { font-size: 0.82rem; color: var(--muted); }

/* --- talnaflísar --- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.tile-label { font-size: 0.8rem; color: var(--muted); }
.tile-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.01em; margin-top: 6px; }
.tile-hero .tile-value { font-size: 2.7rem; }
.tile-delta { font-size: 0.82rem; margin-top: 6px; font-weight: 600; }
.tile-delta.up { color: var(--good); }
.tile-delta.down { color: var(--bad); }
.tile-delta.neutral { color: var(--muted); font-weight: 500; }
.tile-delta-label { color: var(--muted); font-weight: 500; }
.tile-dim { opacity: 0.45; }
.tile-spark { margin-top: 12px; }

/* --- spjald með grafi --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; min-width: 0;
}
.card h3 { font-size: 0.98rem; font-weight: 700; }
.card .card-sub { font-size: 0.82rem; color: var(--muted); margin: 2px 0 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid-2 .card { margin-bottom: 0; }

.data-note { color: var(--muted); font-size: 0.8rem; margin-top: 6px; max-width: 90ch; }

/* --- gröf (sjá charts.js) --- */
.viz { position: relative; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; }
.viz-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; color: var(--ink-2); }
.viz-key { width: 14px; height: 3px; border-radius: 2px; display: inline-block; flex: none; }
.viz-key-rect { width: 11px; height: 11px; border-radius: 3px; }
.viz svg text { font-family: var(--font); }
.viz-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-grid { stroke: var(--grid); stroke-width: 1; }
.viz-baseline { stroke: var(--baseline); stroke-width: 1; }
.viz-cross { stroke: var(--baseline); stroke-width: 1; }
.viz-dot { stroke: var(--surface); stroke-width: 2; }
.viz-endlabel { fill: var(--ink-2); font-size: 12px; }
.viz-empty { color: var(--muted); font-size: 0.88rem; padding: 26px 0; }

.viz-tip {
  position: absolute; z-index: 6; pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; min-width: 140px; max-width: 260px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 0.8rem;
}
.viz-tip-date { color: var(--muted); font-size: 0.74rem; margin-bottom: 6px; }
.viz-tip-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.viz-tip-val { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-tip-name { color: var(--muted); }
.viz-tip-meta { color: var(--muted); font-size: 0.74rem; margin-top: 6px; }

.viz-table-btn {
  margin-top: 12px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.8rem; color: var(--ink-2);
  transition: background 0.12s ease;
}
.viz-table-btn:hover { background: rgba(255, 255, 255, 0.06); }
.viz-table-wrap { max-height: 250px; overflow: auto; margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; }
.viz-table { width: 100%; border-collapse: collapse; }
.viz-table th {
  position: sticky; top: 0; background: #1e1e1c; text-align: left;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); padding: 9px 13px; font-weight: 600;
}
.viz-table td { padding: 7px 13px; font-size: 0.84rem; color: var(--ink-2); border-top: 1px solid var(--grid); }
.viz-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- láréttar súlur --- */
.hbar-list { display: flex; flex-direction: column; gap: 11px; }
.hbar-row {
  display: grid; grid-template-columns: minmax(130px, 250px) 1fr;
  gap: 14px; align-items: center; border-radius: 6px;
}
.hbar-label { min-width: 0; }
.hbar-title { font-size: 0.85rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-sub { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.hbar-track { position: relative; height: 20px; }
.hbar-fill { height: 100%; border-radius: 0 4px 4px 0; transition: filter 0.12s ease; }
.hbar-row:hover .hbar-fill, .hbar-row:focus-visible .hbar-fill { filter: brightness(1.18); }
.hbar-value {
  position: absolute; top: 50%; transform: translate(8px, -50%);
  font-size: 0.8rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hbar-value.inside { transform: translate(calc(-100% - 8px), -50%); }
.viz-more { color: var(--muted); font-size: 0.8rem; margin-top: 12px; }

/* --- tafla yfir myndbönd --- */
.table-scroll { overflow-x: auto; }
.videos-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.videos-table th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid var(--baseline); white-space: nowrap;
  cursor: pointer; user-select: none;
}
.videos-table th:hover { color: var(--ink-2); }
.videos-table th.num, .videos-table td.num { text-align: right; }
.videos-table td { padding: 11px 12px; font-size: 0.88rem; border-bottom: 1px solid var(--grid); color: var(--ink-2); }
.videos-table td.num { font-variant-numeric: tabular-nums; color: var(--ink); }
.videos-table tr:hover td { background: rgba(255, 255, 255, 0.025); }
.vt-title { color: var(--ink); font-weight: 600; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-series { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }
.plat-cell { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.plat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.table-summary { color: var(--muted); font-size: 0.84rem; margin-top: 14px; }

/* --- framvinda --- */
.timeline { list-style: none; }
.timeline li { position: relative; padding: 0 0 22px 28px; }
.timeline li::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: -2px;
  width: 1px; background: var(--grid);
}
.timeline li:last-child::before { display: none; }
.timeline li::after {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
}
.timeline li.nad::after { background: var(--good); }
.timeline li.vinnsla::after { background: transparent; border: 2px solid var(--ink); }
.timeline li.framundan::after { background: transparent; border: 2px solid var(--muted); }
.tl-label { font-size: 0.92rem; color: var(--ink); }
.timeline li.framundan .tl-label { color: var(--ink-2); }
.tl-date { font-size: 0.78rem; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tl-state { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.vinnsla .tl-state { color: var(--ink-2); }
.framundan .tl-state { color: var(--muted); }

/* --- mælar (markmið) --- */
.meter { padding: 15px 0; border-top: 1px solid var(--grid); }
.meter:first-child { border-top: none; padding-top: 4px; }
.meter-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; }
.meter-label { color: var(--ink-2); }
.meter-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter-val b { color: var(--ink); font-weight: 700; }
.meter-track { height: 8px; border-radius: 999px; background: rgba(57, 135, 229, 0.16); margin-top: 9px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--tt); border-radius: 999px; }
.meter-foot { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--muted); margin-top: 6px; }
.meter-done { color: var(--good); font-weight: 700; }

/* --- stefna + hugmyndatafla --- */
.strategy h3 { font-size: 1.1rem; }
.strategy .strategy-body { color: var(--ink-2); font-size: 0.93rem; margin-top: 10px; max-width: 82ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; font-size: 0.8rem; color: var(--ink-2); }
.strategy-next {
  margin-top: 18px; padding: 12px 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04); border-radius: 0 10px 10px 0;
  color: var(--ink-2); font-size: 0.88rem;
}

.board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.board-hint { color: var(--muted); font-size: 0.82rem; }
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.board-col {
  flex: 1; min-width: 232px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; transition: border-color 0.12s ease, background 0.12s ease;
}
.board-col.dragover { border-color: rgba(255, 255, 255, 0.35); background: #191918; }
.board-col-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.84rem; font-weight: 700; padding: 2px 6px 10px;
}
.board-count { color: var(--muted); font-weight: 600; font-size: 0.76rem; background: rgba(255, 255, 255, 0.06); border-radius: 999px; padding: 1px 9px; }
.board-col-body { display: flex; flex-direction: column; gap: 10px; min-height: 70px; }
.board-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; cursor: grab;
}
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: 0.45; }
.board-card-title { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.board-card-note { font-size: 0.79rem; color: var(--muted); margin-top: 4px; }
.board-tag { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.72rem; color: var(--ink-2); }
.board-tag .viz-key { width: 8px; height: 8px; border-radius: 50%; }

/* =========================================================================
   SKJÁSTÆRÐIR
   ========================================================================= */

@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 .card { margin-bottom: 18px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(10, 10, 10, 0.97); border-bottom: 1px solid var(--border);
    padding: 12px 4vw 20px;
  }
  .nav.open a { padding: 10px 0; font-size: 1.05rem; width: 100%; }
  .nav-toggle { display: block; padding: 6px 10px; color: var(--ink); font-size: 1.4rem; line-height: 1; }
  .portal-grid { grid-template-columns: 1fr; gap: 34px; }
  .stats-band .wrap { grid-template-columns: repeat(2, 1fr); }

  body.dash { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 8px 18px;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 14px 5vw;
  }
  .customer-chip { margin: 0; padding: 8px 12px; order: 1; flex: 1 1 auto; min-width: 0; }
  .customer-chip .c-name, .customer-chip .c-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-nav { flex-direction: row; overflow-x: auto; width: 100%; order: 3; }
  .side-nav a { white-space: nowrap; padding: 8px 12px; }
  .sidebar-foot { margin-top: 0; flex-direction: row; margin-left: auto; order: 2; flex: none; }
  .sidebar-foot a, .sidebar-foot button { white-space: nowrap; }
  .main { padding: 20px 5vw 50px; }
}

@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .customer-chip .c-tag { display: none; }
  .badge-sample { margin-top: 2px; }
  .sidebar { gap: 8px 12px; }
  .hero-cta .btn, .hero-cta .btn-outline { width: 100%; justify-content: center; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hbar-row { grid-template-columns: minmax(90px, 130px) 1fr; gap: 10px; }
}

/* =========================================================================
   VÖRUMERKISOPNUN, HREYFINGAR & MYNDBÖND
   ========================================================================= */

.intro {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-deep);
  display: grid; place-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.intro-logo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: intro-pop 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}
.intro-logo .logo-img { width: min(240px, 54vw); height: auto; }
.intro.intro-out { opacity: 0; visibility: hidden; }
.intro.intro-out .intro-logo { transform: scale(1.7); opacity: 0; }
body.intro-on { overflow: hidden; }
/* hetjusvæðið bíður þar til opnunin víkur — þá rísa línurnar */
body.intro-hold .hero-line > span { animation-play-state: paused; }
@keyframes intro-pop {
  0% { opacity: 0; transform: scale(0.82); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

.site-header { transition: background 0.25s ease; }
.site-header.scrolled { background: rgba(10, 10, 10, 0.95); }

/* hetjusvæði: línur rísa upp + ljómi */
/* overflow: hidden felur línuna á meðan hún rís upp — en með line-height 0.95
   er línuboxið lægra en stafirnir, svo broddarnir á Ö/Á/Í klipptust af að ofan.
   padding-top gefur höfuðrými innan klippisvæðisins; neikvæð margin étur það
   upp aftur svo hæðin og bilið milli lína haldast óbreytt. */
.hero-line { display: block; overflow: hidden; padding-top: 0.16em; margin-top: -0.16em; }
.hero-line > span { display: inline-block; transform: translateY(112%); animation: hero-rise 0.85s cubic-bezier(0.16, 0.8, 0.24, 1) forwards; }
.hero-line:nth-child(2) > span { animation-delay: 0.12s; }
.hero h1 em { font-style: normal; color: var(--muted); }
@keyframes hero-rise { to { transform: translateY(0); } }
.hero-glow {
  position: absolute; inset: -20% -10%; pointer-events: none;
  background: radial-gradient(38% 30% at 78% 18%, rgba(255, 255, 255, 0.09), transparent 70%);
  animation: glow-drift 9s ease-in-out infinite alternate;
}
@keyframes glow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.08); opacity: 1; }
}
.btn-arrow { display: inline-block; transition: transform 0.18s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* birtist við skrun */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }

/* myndbandagrind á forsíðu */
.videos-section { background: var(--bg); }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.video-card {
  position: relative; text-align: left; min-height: 250px;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, #181817, #0d0d0c);
  border: 1px solid var(--border); border-radius: 18px; padding: 22px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.video-card:hover, .video-card:focus-visible { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.32); }
.vc-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.vc-title { font-size: 1.02rem; font-weight: 800; color: var(--ink); margin-top: 10px; line-height: 1.35; }
.vc-meta { margin-top: auto; padding-top: 26px; font-size: 0.82rem; color: var(--muted); padding-right: 56px; }
.vc-play {
  position: absolute; right: 16px; bottom: 14px;
  width: 46px; height: 46px; border-radius: 50%;
  background: #ffffff; color: #0a0a0a;
  display: grid; place-items: center; font-size: 15px;
  transition: transform 0.18s ease;
}
.video-card:hover .vc-play { transform: scale(1.12); }

/* spilari (modal) */
.player-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: 18px;
}
.player-box {
  width: min(420px, 94vw);
  background: #141413; border: 1px solid var(--border); border-radius: 18px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}
.player-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.player-title { flex: 1; font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-close {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; color: var(--ink-2);
  transition: background 0.12s ease, color 0.12s ease;
}
.player-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.player-frame { height: min(68vh, 620px); background: #000; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-foot { padding: 10px 16px; }
.player-foot a { font-size: 0.84rem; color: var(--ink-2); }
.player-foot a:hover { color: var(--ink); }

/* ▶ hnappur í töflum */
.play-btn {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 1px solid var(--border); color: var(--ink); font-size: 10px;
  display: grid; place-items: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.play-btn:hover { background: #ffffff; color: #0a0a0a; border-color: #ffffff; }
.vt-cell { display: flex; align-items: center; gap: 11px; }
.vt-text { min-width: 0; }
.hbar-row.clickable { cursor: pointer; }

/* =========================================================================
   SPJALL
   ========================================================================= */

.chat-thread { display: flex; flex-direction: column; gap: 12px; max-height: 440px; overflow-y: auto; padding: 6px 2px; }
.chat-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; }
.chat-msg.theirs { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg.mine { align-self: flex-end; background: #eceae4; color: #111; border-bottom-right-radius: 4px; }
.chat-author { font-size: 0.7rem; color: var(--muted); margin-bottom: 4px; }
.chat-msg.mine .chat-author { color: #6b6a63; }
.chat-text { font-size: 0.9rem; line-height: 1.45; }
.chat-compose { display: flex; gap: 10px; margin-top: 16px; }
.chat-compose input[type="text"] {
  flex: 1; background: #111110; border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 16px; color: var(--ink); font: inherit; font-size: 0.9rem;
}
.chat-compose input[type="text"]:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); }
.chat-compose select {
  background: #111110; color: var(--ink-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 0.84rem; max-width: 170px;
}
.chat-note { font-size: 0.74rem; color: var(--muted); margin-top: 10px; }

/* =========================================================================
   STJÓRNBORÐ
   ========================================================================= */

.nav-label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin: 16px 12px 6px;
}
.proj-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.team-box { margin-top: 18px; padding: 0 12px; }
.team-avatars { display: flex; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 2px solid var(--bg-deep);
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 700; color: var(--ink-2);
  margin-left: -7px;
}
.avatar:first-child { margin-left: 0; }
.avatar.me { background: #ffffff; color: #0a0a0a; }

.block-title { font-size: 1.02rem; font-weight: 700; margin: 28px 0 14px; }
.customer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cust-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cust-card:hover { border-color: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.cust-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cust-name { font-weight: 800; font-size: 1.08rem; }
.cust-tag { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.cust-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; margin: 16px 0; }
.cust-stats b { display: block; font-size: 1.1rem; font-weight: 800; }
.cust-stats span { font-size: 0.74rem; color: var(--muted); }
.cust-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.project-head { margin-bottom: 16px; }
.project-head h2 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.01em; }
.p-sub { color: var(--muted); font-size: 0.9rem; margin-top: 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-handles { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.tabs { margin-bottom: 20px; }

/* hugmyndataflan: bæta við spjaldi + eyða */
.board-form { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.board-form input, .board-form select {
  background: #111110; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 13px; color: var(--ink); font: inherit; font-size: 0.86rem;
}
.board-form input:focus, .board-form select:focus {
  outline: none; border-color: rgba(255, 255, 255, 0.45);
}
.board-form #bf-title { flex: 2 1 200px; }
.board-form #bf-note { flex: 3 1 240px; }
.card-del {
  position: absolute; top: 7px; right: 9px;
  font-size: 0.68rem; color: var(--muted); padding: 3px 6px; border-radius: 6px;
  opacity: 0; transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.board-card { position: relative; }
.board-card:hover .card-del, .card-del:focus-visible { opacity: 1; }
.card-del:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }

@media (max-width: 900px) {
  .team-box { display: none; }
  .nav-label { display: none; }
  #project-nav { display: flex; }
}
@media (max-width: 560px) {
  .chat-msg { max-width: 94%; }
  .chat-compose { flex-wrap: wrap; }
}

/* =========================================================================
   INNBYGGÐ TIKTOK-MYNDBÖND, LIFANDI BAKGRUNNUR, SAMBANDSFORM & NÝSKRÁNING
   ========================================================================= */

/* — þrjú pinnuðu myndböndin, hlið við hlið — */
.tt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1080px; margin: 0 auto;
}
.tt-embed {
  background: #000; border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; margin: 0;
}
.tt-embed iframe {
  width: 100%; height: clamp(480px, 62vh, 660px);
  border: 0; display: block; background: #000;
}
.tt-embed figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 12px 16px; font-size: 0.82rem; color: var(--muted);
  border-top: 1px solid var(--border); background: var(--surface);
}
.tt-embed figcaption b { color: var(--ink); font-weight: 700; }
.tt-embed figcaption a { margin-left: auto; color: var(--ink-2); white-space: nowrap; }
.tt-embed figcaption a:hover { color: var(--ink); }

/* — lifandi bakgrunnur í hetjusvæði — */
.hero-blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: 0.55;
}
.hero-blob.b1 {
  width: 44vw; height: 44vw; max-width: 640px; max-height: 640px;
  right: -12%; top: -18%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.13), transparent 65%);
  animation: blob-a 13s ease-in-out infinite alternate;
}
.hero-blob.b2 {
  width: 34vw; height: 34vw; max-width: 480px; max-height: 480px;
  left: -10%; bottom: -22%;
  background: radial-gradient(circle, rgba(57, 135, 229, 0.13), transparent 65%);
  animation: blob-b 17s ease-in-out infinite alternate;
}
@keyframes blob-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-7%, 9%, 0) scale(1.15); } }
@keyframes blob-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9%, -7%, 0) scale(1.12); } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 72%) var(--my, 30%), rgba(255, 255, 255, 0.07), transparent 70%);
}
.morph { display: inline-block; min-height: 1em; }

/* — sambandsform — */
.contact-form { max-width: 720px; margin: 34px auto 0; text-align: left; }
.cf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.contact-form .field textarea {
  width: 100%; background: #111110; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; color: var(--ink);
  font: inherit; resize: vertical; min-height: 110px;
  transition: border-color 0.15s ease;
}
.contact-form .field textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); }
.contact-form .btn { margin-top: 4px; }
.cf-note { color: var(--good); font-size: 0.86rem; margin-top: 12px; }
.cf-alt { color: var(--muted); font-size: 0.88rem; margin-top: 26px; }
.cf-alt .contact-mail { font-size: inherit; font-weight: 600; border-bottom-width: 1px; }

/* — fótur með samfélagsmiðlum (alltaf neðst) — */
.footer-grid { row-gap: 14px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-social a { color: var(--ink-2); font-size: 0.88rem; }
.footer-social a:hover { color: var(--ink); }
.login-social { justify-content: center; margin-top: 20px; }
.login-social a { color: var(--muted); font-size: 0.82rem; }

/* — nýskráning á innskráningarsíðu — */
.login-tabs { display: flex; width: 100%; margin-bottom: 22px; }
.login-tabs button { flex: 1; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* — hlekkur á færslu + eyða handskráðu myndbandi — */
.link-btn {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--ink-2); font-size: 12px;
  display: grid; place-items: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.link-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.vid-del { position: static; opacity: 0.55; }
.vid-del:hover { opacity: 1; }

/* — höfundur hugmyndar + merki fyrir nýskráð fyrirtæki — */
.card-author { font-size: 0.7rem; color: var(--muted); margin-top: 6px; }
.board-tag .card-author { margin-top: 0; }
.badge-reg { color: var(--good); border-color: rgba(12, 163, 12, 0.5); }
.board-explainer { margin-bottom: 16px; }
.board-explainer b { color: var(--ink); }

@media (max-width: 900px) {
  .tt-grid { grid-template-columns: 1fr; max-width: 420px; }
  .cf-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   HETJU-SÍMINN — iPhone 16 með TikTok-straumnum okkar
   Hönd flettir sjálfvirkt í gegnum raunveruleg myndbönd Geta Media.
   ========================================================================= */
.hero-grid {
  display: grid;
  /* Hægri dálkurinn þarf að rúma TVO síma OG bilið á milli þeirra, sem er
     orðið breitt af því líkateljarinn býr þar. 470px dugði fyrir þétta
     veggnum en klemmir þann dreifða. */
  grid-template-columns: 1fr minmax(320px, 680px);
  gap: clamp(24px, 3.2vw, 48px);
  align-items: center;
}
.hero-copy { min-width: 0; }
.hero h1 { max-width: 12ch; }

/* --- SÍMAVEGGURINN: fjórir símar í ferningi hægra megin ---
   2×2, allir jafnstórir í sama ramma. */
.phone-wall {
  /* Hæð eins síma. Nú er BARA EIN röð, svo síminn fær nánast alla hæð
     gluggans — mínus haus, loft og skiltið sem situr undir.
     Efra þakið (640px) er ekki skraut: við 2 síma hlið við hlið ræður
     dálkbreiddin, og hærri sími yrði of breiður fyrir hetjudálkinn. */
  --ph: clamp(300px, calc(100vh - 250px), 640px);

  display: grid;
  /* auto, EKKI 1fr. Með 1fr verða dálkarnir breiðari en símarnir, og af því
     .iphone er með justify-self:center bætist loft á hliðarnar — dálkurinn
     réði þá bilinu, ekki gap-ið. auto = dálkur nákvæmlega eins breiður og
     síminn, svo gap-ið eitt stýrir bilinu. */
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  /* Símarnir standa dreift, ekki þétt: láretta bilið er vísvitandi miklu
     breiðara en það lóðrétta því LÍKATELJARINN býr í miðjunni. Hann er
     absolute-staðsettur, svo hann ýtir engu frá sér — bilið verður að vera
     til staðar fyrir hann.
     Bilið er geymt í breytu því teljarinn stillir breidd sína eftir því; ef
     hann er fastbreiður étur hann símana á millibreiddum þar sem bilið er
     þröngt. */
  /* Bilið er núna ÞRÖNGT, ekki breitt. Áður bjó skiltið í krossinum milli
     fjögurra síma og bilið varð að rúma það; núna situr það undir þeim og
     hver dílur í bilinu er dílur sem síminn fær ekki að vera breiður. */
  --wall-gap: clamp(20px, 3vw, 48px);
  column-gap: var(--wall-gap);
  row-gap: clamp(12px, 1.6vw, 20px);
  align-items: center;
  justify-items: center;
}

/* --- LÍKATELJARINN Í MIÐJUNNI ---
   Absolute svo hann liggi í krossinum milli símanna fjögurra án þess að
   hnika þeim. Hann má gjarnan skarast örlítið inn á símabrúnirnar — það
   lætur hann fljóta ofan á veggnum frekar en að sitja í holu. */
/* Fyrirmyndin er heimsklukkuskilti (NEW YORK 07:47 / LONDON 12:47): svartur
   plastflötur, hvítt prentað merki og grænir díóðustafir sem ljóma.
   Merkið og talan liggja HLIÐ VIÐ HLIÐ á einni línu. */
.like-core {
  --lc-green: #3dff86;
  /* Tvö skilti, EITT Í HVORUM DÁLKI: áhorf undir vinstri símanum, líkar
     undir þeim hægri. Þau eru börn 3 og 4 í grid-inu og detta því sjálfkrafa
     í aðra röð, sinn í hvorn dálk — ekkert grid-column þarf, og það mætti
     alls ekki spanna báða dálka eins og eina skiltið gerði áður. */
  justify-self: center;
  width: max-content;
  max-width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 15px;
  border-radius: 5px;
  /* Harður svartur flötur, EKKERT gler: myndböndin fyrir aftan mega ekki
     skína í gegn, þá hættir þetta að lesast sem skilti. */
  background: linear-gradient(#0b0d0c, #050605);
  border: 1px solid #24312a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 60px -22px rgba(0, 0, 0, 0.95);
}
/* prentaða merkið — hvítt, harðspásserað, eins og borgarnafnið á skiltinu */
.lc-cmd {
  flex: none;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
/* díóðustafirnir */
.lc-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.05rem, 1.75vw, 1.7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--lc-green);
  /* jafnbreiðar tölur — annars titrar talan meðan hún rúllar */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0 4px rgba(61, 255, 134, 0.9), 0 0 14px rgba(61, 255, 134, 0.45);
}
/* Staðan er aðeins fyrir skjálesara — skiltið sjálft sýnir bara merki og
   tölu, eins og klukkuskiltið. (Græni púlspunkturinn var hér áður; Mikael
   tók hann út.) */
.lc-state {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Dreifðir, ekki í stífum ferningi: hver sími fær sinn halla og sína hæð.
   Gildin lifa í --rot/--dy því phone-in-hreyfingin skrifar yfir transform
   í lokastöðu — þau verða því að vera INNI í keyframe-inu. */
/* Beinir símar — enginn halli. Hæðarmunurinn stendur eftir svo þeir raðist
   ekki eins og í töflu. */
.phone-wall .iphone { --rot: 0deg; --dy: 0px; }   /* beinir og í beinni röð */
.phone-wall .iphone:hover { z-index: 3; }

/* --- NEON-LJÓMINN SEM FLAKKAR MILLI SÍMANNA ---
   Ljóminn býr á ::after sem hefur ENGAN bakgrunn — aðeins box-shadow. Skugginn
   teiknast utan við kassann, svo hann lýsir upp brúnina án þess að leggjast
   yfir skjáinn. (Að reyna z-index:-1 virkar ekki: phone-in-hreyfingin gefur
   símanum transform og þar með eigin staflunarsamhengi, svo ::after myndi
   hverfa bak við bakgrunn símans.)

   Ljóminn gekk áður sinn hring á föstum takti, óháður því sem gerðist á
   skjánum. Núna blossar hann þegar straumurinn skiptir um færslu — js/site.js
   setur .blossi á símann við hvert skref — svo ljósið og skrunið segja sömu
   söguna í stað þess að reka hvort á annað. */
.phone-wall .iphone::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 12px 2px rgba(255, 255, 255, 0.34),
    0 0 34px 8px rgba(230, 232, 238, 0.22),
    0 0 70px 20px rgba(200, 205, 215, 0.12);
}
/* Blossinn sjálfur — ein umferð, ræst af straumnum en ekki tímamæli. */
.phone-wall .iphone.blossi::after {
  animation: neon-blossi 1.1s ease-in-out 1;
}
@keyframes neon-blossi {
  0%          { opacity: 0; }
  14%, 42%    { opacity: 1; }
  100%        { opacity: 0; }
}
/* EKKI gata þetta á prefers-reduced-motion. Vafri Mikaels tilkynnir alltaf
   „reduce“, og þá slokknaði ljóminn algjörlega — hann sá aldrei neitt. Þetta
   er hrein birtubreyting (opacity), ekkert færist úr stað, svo hún er ekki af
   þeirri gerð sem reduced-motion er ætlað að slökkva á. */
/* Hæðin ræðst af SKJÁHÆÐINNI, ekki dálkbreiddinni — annars vex 2×2-veggurinn
   niður úr glugganum og fólk lendir á hálfum síma. Breiddin leiðist af
   aspect-ratio, og justify-self:center kemur í veg fyrir að grid-ið teygi
   símann aftur upp í dálkbreidd.
   260px = loftið fyrir ofan/neðan + bilið + skekkingin (--dy) á milli raða. */
.phone-wall .iphone {
  width: auto;                 /* breiddin leiðist af aspect-ratio */
  height: var(--ph);
  justify-self: center;        /* annars teygir grid-ið símann aftur upp í dálkbreidd */
  border-radius: clamp(20px, 2.4vw, 36px);
  /* grannur málmrammi — þykka útlínan á stóra símanum var of mikil hér */
  padding: clamp(2px, 0.28vw, 4px);
  box-shadow:
    0 1px 3px rgba(255, 255, 255, 0.3) inset,
    0 0 0 1px #0a0a0a,
    0 30px 60px -22px rgba(0, 0, 0, 0.85),
    0 10px 26px -14px rgba(57, 135, 229, 0.3);
}
.phone-wall .iphone-screen { box-shadow: none; }
/* Engin skörun: raðirnar mega ekki liggja hvor yfir aðra. Hæðin er því
   bundin við (100vh - loft) / 2 — tvær heilar símahæðir komast fyrir. */
/* container-type: size gerir skjáinn að „query container“ svo börnin geti
   mælt sig í cqh (1% af skjáhæð) og skalast með símanum. */
.phone-wall .iphone-screen { border-radius: clamp(18px, 2.1vw, 33px); container-type: size; }
/* símarnir rísa hver á eftir öðrum */
.phone-wall .iphone:nth-child(1) { animation-delay: 1.05s; }
.phone-wall .iphone:nth-child(2) { animation-delay: 1.18s; }
.phone-wall .iphone:nth-child(3) { animation-delay: 1.31s; }
.phone-wall .iphone:nth-child(4) { animation-delay: 1.44s; }

/* Skjáhlutarnir skala með símanum í cqh (1% af skjáhæð) svo TikTok-viðmótið
   haldi hlutföllum hvort sem síminn er 200px eða 400px í fullscreen. Gildin
   eru kvörðuð við ~284px skjáhæð — sama útlit og áður við venjulega stærð. */
.phone-wall .ip-island { top: 2.46cqh; width: 19cqh; height: 5.6cqh; }
.phone-wall .ip-cam { width: 1.76cqh; height: 1.76cqh; }
.phone-wall .ip-home { bottom: 1.76cqh; width: 22.5cqh; height: 1.06cqh; }
.phone-wall .tt-top { top: 9.86cqh; padding: 0 2.82cqh; }
.phone-wall .tt-live { font-size: 2.82cqh; }
.phone-wall .tt-tabs { gap: 2.82cqh; font-size: 3.27cqh; }
.phone-wall .tt-search { width: 4.58cqh; height: 4.58cqh; }
.phone-wall .tt-rail { right: 2.11cqh; bottom: 20.4cqh; gap: 4.2cqh; }
.phone-wall .tt-act { gap: 1cqh; }
.phone-wall .tt-act svg { width: 7cqh; height: 7cqh; }
.phone-wall .tt-act b { font-size: 3.15cqh; }
.phone-wall .tt-meta { left: 2.82cqh; right: 4cqh; bottom: 4.2cqh; }
.phone-wall .tt-user { font-size: 3.72cqh; margin-bottom: 2.1cqh; }
.phone-wall .tt-follow { font-size: 2.93cqh; padding: 0.35cqh 1.76cqh; }
.phone-wall .tt-cap { font-size: 3.27cqh; -webkit-line-clamp: 2; }
.phone-wall .tt-stats { font-size: 3.1cqh; gap: 4.2cqh; margin-top: 2.46cqh; }
.phone-wall .tt-stat { gap: 1.4cqh; }
.phone-wall .tt-stats svg { width: 3.5cqh; height: 3.5cqh; }
.phone-wall .tt-music { font-size: 2.93cqh; gap: 2.46cqh; margin-top: 2.46cqh; }
.phone-wall .tt-music svg { width: 3.17cqh; height: 3.17cqh; }
.phone-wall .ip-edge { display: none; }

/* prófílmyndin í hliðarstikunni er núna alvöru mynd, ekki stafur */
.av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* width: 100% og 1fr-dálkar eru NAUÐSYNLEG hér, ekki skraut. `margin: 0 auto`
     slekkur á justify-self:stretch, svo veggurinn varð shrink-to-fit; dálkarnir
     eru `auto` og símarnir `width: 100%` — hringtenging sem leysist í NÚLL.
     Veggurinn hrundi þá í 25px og símarnir í 5px: fjórir ósýnilegir símar.
     Skýr breidd rýfur hringinn og 1fr gefur dálkunum raunverulega breidd. */
  .phone-wall {
    width: 100%; max-width: 560px; margin: 0 auto; gap: 16px;
    /* minmax(0, 1fr), EKKI 1fr. Bert `1fr` þýðir `minmax(auto, 1fr)`, og
       auto-lágmarkið neitar að fara niður fyrir min-content dálksins — sem
       er TikTok-viðmótið inni í símanum. Dálkarnir uxu þá upp í 192px og
       174px inni í 376px vegg og hægri síminn hékk út af skjánum.
       Núllið rýfur lágmarkið og leyfir dálkunum að skreppa saman. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
  /* hetjan er stöfluð hér — þá er ekkert vit í að binda hæðina við gluggann */
  .phone-wall .iphone { height: auto; width: 100%; margin-top: 0; }
  .phone-wall .iphone:nth-child(n + 3) { margin-top: 0; }
  .phone-wall { row-gap: 16px; }

  /* Teljarinn getur ekki setið í miðjunni hér: bilin eru orðin þétt og hann
     legðist ofan á símana. Hann fer því úr absolute-stöðunni og inn í flæðið
     sem borði yfir veggnum — sama tala, bara í annarri stöðu. */
  /* Skiltið er þegar undir símunum í flæðinu — hér þarf það bara að fylla
     breiddina svo það líti út eins og borði en ekki lítill miði. */
  .like-core {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
  .lc-num { font-size: 1.35rem; }
}
@media (max-width: 460px) {
  .phone-wall { gap: 10px; }
  /* Textinn og hljóðlínan fara — tölurnar EKKI. Þær eru erindið með
     símunum; myndbandið stendur alveg fyrir sínu án myndatextans. */
  .phone-wall .tt-cap, .phone-wall .tt-music, .phone-wall .tt-top { display: none; }
  .phone-wall .tt-stats { margin-top: 0; }
}

/* --- sviðið sem síminn stendur á --- */
.phone-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}
.phone-halo {
  position: absolute; width: 118%; height: 82%; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(57, 135, 229, 0.35), rgba(213, 81, 129, 0.20) 55%, transparent 78%);
  filter: blur(46px);
  animation: halo-breathe 7s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* --- síminn kemur inn þegar opnunin víkur --- */
.iphone {
  position: relative;
  width: min(310px, 78vw);
  aspect-ratio: 302 / 620;
  border-radius: 54px;
  padding: 11px;
  background:
    linear-gradient(150deg, #6a6f78 0%, #2b2d30 26%, #4b4e54 52%, #1e1f22 74%, #55585e 100%);
  box-shadow:
    0 2px 5px rgba(255, 255, 255, 0.35) inset,
    0 0 0 2px #0a0a0a,
    0 40px 80px -24px rgba(0, 0, 0, 0.85),
    0 12px 30px -12px rgba(57, 135, 229, 0.35);
  --rot: 0deg; --dy: 0px;
  opacity: 0; transform: translateY(34px) scale(0.96);
  animation: phone-in 1s cubic-bezier(0.16, 0.8, 0.24, 1) 1.15s both;
}
@keyframes phone-in {
  to { opacity: 1; transform: translateY(var(--dy)) rotate(var(--rot)) scale(1); }
}
/* hnappar á hlið */
.ip-edge { position: absolute; background: #2a2c30; border-radius: 2px; }
.ip-vol-up { left: -3px; top: 132px; width: 3px; height: 34px; }
.ip-vol-dn { left: -3px; top: 176px; width: 3px; height: 34px; }
.ip-action { left: -3px; top: 96px; width: 3px; height: 24px; }
.ip-power  { right: -3px; top: 150px; width: 3px; height: 56px; }

.iphone-screen {
  position: relative; height: 100%; width: 100%;
  border-radius: 44px; overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9) inset;
}

/* Dynamic Island */
.ip-island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 26px; border-radius: 16px; background: #000; z-index: 6;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
}
.ip-cam { width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #35507a, #05070c 70%); }
.ip-home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.75); z-index: 6;
}
/* efstu TikTok-flipar */
/* --- efsta stikan: LIVE · flipar · leit --- */
.tt-top {
  position: absolute; top: 46px; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.tt-live { font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.tt-tabs { display: flex; gap: 16px; font-size: 0.86rem; font-weight: 600; color: rgba(255, 255, 255, 0.62); }
.tt-tabs .on { color: #fff; }
.tt-tabs .on::after {
  content: ""; display: block; height: 2px; width: 60%; margin: 4px auto 0; background: #fff; border-radius: 2px;
}
.tt-search { width: 22px; height: 22px; fill: #fff; }

/* --- straumurinn sjálfur ---
   Færslurnar liggja hver undir annarri í venjulegu flæði og fylla skjáinn
   hver um sig (.tt-post er height:100%, og .tt-feed er jafnhár skjánum).
   Það sem stendur út fyrir klippist af .iphone-screen. js/site.js færir
   strauminn upp um eina skjáhæð í einu — þess vegna transform en ekki
   skrun: skrun myndi berjast við skrun síðunnar á snertiskjá.

   z-index 1 heldur straumnum UNDIR eyjunni, heimatakkanum og efstu röðinni,
   sem sitja á 6. */
.tt-feed {
  position: absolute; inset: 0; z-index: 1;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.5, 0.02, 0.2, 1);
}
/* „Reduce motion“ mildar rennslið en tekur það ekki af: væri það sett á
   `none` skiptu færslurnar um sig með hörðu stökki, sem sést verr en stutt
   renna. Myndböndin spila áfram — sjá athugasemdina við ras() í site.js. */
@media (prefers-reduced-motion: reduce) {
  .tt-feed { transition: transform 0.25s ease-out; }
}
.tt-post {
  position: relative; display: block;
  height: 100%; width: 100%;
  background: #000;
  color: #fff; overflow: hidden;
}
.tt-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #14161d; pointer-events: none;
}
.tt-post::after { /* dökkur stígandi efst og neðst svo texti/UI lesist */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0) 32%),
              linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 20%);
}
/* aðgerðaröð hægra megin */
.tt-rail {
  position: absolute; right: 8px; bottom: 92px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 15px;
}
.av-wrap { position: relative; margin-bottom: 6px; }
.tt-rail .av {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #3987e5, #d55181);
  border: 1.5px solid #fff; color: #fff; font-weight: 900; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.av-plus {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%; background: #fe2c55; color: #fff;
  font-size: 0.8rem; font-weight: 700; line-height: 17px; text-align: center;
}
.tt-act { display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff; font-size: 0.7rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.tt-act svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.tt-act b { color: #fff; white-space: nowrap; }   /* talan alltaf hvít */
.tt-act.liked svg { color: #fe2c55; }              /* aðeins hjartað rautt */
.tt-disc {
  width: 40px; height: 40px; border-radius: 50%; margin-top: 2px;
  background: radial-gradient(circle at 50% 50%, #444 22%, #111 24%, #1a1a1a 60%, #000 100%);
  border: 4px solid #2a2a2a;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
  animation: disc-spin 4s linear infinite;
}
@keyframes disc-spin { to { transform: rotate(360deg); } }
/* neðri texti */
.tt-meta {
  position: absolute; left: 12px; right: 64px; bottom: 76px; z-index: 3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}
.tt-user { font-weight: 700; font-size: 0.92rem; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
/* min-width:0 er lykillinn: sjálfgefið er flex-hlutur `min-width:auto` og
   neitar að skreppa niður fyrir innihaldið, svo langt notandanafn ýtti
   „Fylgja“ út fyrir brúnina þar sem .tt-post klippti hann af. */
.tt-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-follow {
  flex: none;
  font-size: 0.68rem; font-weight: 600; color: #fff;
  border: 1px solid rgba(255,255,255,0.85); border-radius: 6px; padding: 1px 8px;
}
.tt-cap  { font-size: 0.8rem; line-height: 1.35; color: rgba(255,255,255,0.96);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* --- líkur og áhorf undir textanum --- */
.tt-stats {
  display: flex; align-items: center; gap: 12px;
  margin-top: 7px; font-size: 0.76rem; font-weight: 700;
  white-space: nowrap;
}
.tt-stat { display: inline-flex; align-items: center; gap: 4px; color: #fff; }
.tt-stat svg { width: 14px; height: 14px; flex: none; }
/* hjartað rautt, spilunarþríhyrningurinn hvítur — sama málnotkun og TikTok */
.tt-stat:first-child svg { color: #fe2c55; }
.tt-stat b { font-weight: 700; }

.tt-music { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 0.74rem; overflow: hidden; white-space: nowrap; }
.tt-music svg { width: 15px; height: 15px; flex: none; }
.tt-song { display: inline-block; animation: song-marquee 9s linear infinite; }
@keyframes song-marquee {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(calc(-100% + 150px)); }
}
/* --- neðsta valstikan --- */
.tt-nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 5;
  display: flex; align-items: center; justify-content: space-around;
  background: linear-gradient(to top, #000 62%, rgba(0,0,0,0.35));
  padding-bottom: 8px;
}
.tt-nav span {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.56rem; font-weight: 500; color: rgba(255,255,255,0.62);
}
.tt-nav span.on { color: #fff; }
.tt-nav svg { width: 24px; height: 24px; fill: currentColor; }
.tt-plus svg { width: 44px; height: 30px; fill: #fff;
  background: linear-gradient(90deg, #29f3ee, #fe2c55);
  border-radius: 9px; padding: 3px 0;
  box-shadow: 4px 0 0 -1px #fe2c55, -4px 0 0 -1px #29f3ee; }

@media (prefers-reduced-motion: reduce) {
  .phone-halo, .tt-disc, .tt-song { animation: none !important; }
}

/* --- svörun --- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; justify-items: start; gap: 40px; }
  .hero h1 { max-width: 14ch; }
  .phone-stage { justify-self: center; margin-top: 4px; }
}
@media (max-width: 560px) {
  .iphone { width: min(270px, 74vw); }
}

/* =========================================================================
   FYRRI VERKEFNI — case studies (lógó · umsögn · bak við tjöldin)
   ========================================================================= */
.cases { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 56px); }
.case {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(22px, 4vw, 52px); align-items: center;
}
.case:nth-child(even) .case-media { order: 2; }

/* --- myndhliðin --- */
.case-media { position: relative; }

/* Myndirnar eru lóðréttar TikTok-rammar (9:16) en kassarnir láréttir.
   Í stað þess að klippa hausana af (object-fit: cover) sýnum við ALLAN
   rammann og fyllum afganginn með óskýrri útgáfu af sömu mynd — eins og
   TikTok og YouTube gera við lóðrétt myndbönd. */
.case-frame {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1;   /* ferningur — lóðrétta myndbandið fær mesta plássið */
  border-radius: var(--radius); border: 1px solid var(--border);
  background: #0a0a0a;
}
.fr-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(24px) brightness(0.42) saturate(1.15);
  transform: scale(1.25);   /* teygt út svo óskýra brúnin sjáist ekki */
}
.fr-img {
  position: relative;
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}
.case-badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(10, 10, 10, 0.72); backdrop-filter: blur(6px);
  color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
}
.case-badge .rec { width: 7px; height: 7px; border-radius: 50%; background: #fe2c55; animation: rec-blink 1.4s ease-in-out infinite; }
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* lítil ræma með fleiri römmum úr tökunum — lóðrétt, eins og upprunalega efnið */
.case-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.case-strip img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border); opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.case-strip img:hover { opacity: 1; transform: translateY(-2px); }

/* --- textahliðin --- */
.case-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.case-logo svg { width: 26px; height: 26px; color: var(--ink); }
.case-logo span { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.01em; }
.case-tag { color: var(--muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; }
.case blockquote {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.4; font-weight: 500;
  color: var(--ink); margin-bottom: 14px;
}
.case-by { color: var(--ink-2); font-size: 0.92rem; margin-bottom: 20px; }
.case-by b { color: var(--ink); }
/* framleiðsluferlið sem lítil skref */
.case-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.case-steps li {
  position: relative; font-size: 0.78rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border);
  padding: 5px 11px; border-radius: 999px;
}
.case-steps li:not(:last-child)::after { content: "→"; margin-left: 10px; color: var(--muted); }
.case-metric { display: flex; flex-wrap: wrap; gap: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.case-metric span { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--muted); }
.case-metric b { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.1; }

@media (prefers-reduced-motion: reduce) { .case-badge .rec { animation: none !important; } }

@media (max-width: 820px) {
  .case { grid-template-columns: 1fr; gap: 20px; }
  .case:nth-child(even) .case-media { order: 0; }
}

/* =========================================================================
   SÉRSÍÐUR — verkefni.html og gatt.html
   ========================================================================= */
.nav a.current { color: var(--ink); }
.nav a.current::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  background: var(--ink); border-radius: 2px;
}

/* --- síðuhaus (léttur hero fyrir undirsíður) --- */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(70px, 12vh, 120px) 0 clamp(34px, 6vh, 60px);
  background:
    radial-gradient(60% 50% at 78% 0%, rgba(57, 135, 229, 0.12), transparent 70%),
    var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 900; text-transform: uppercase;
  line-height: 0.98; letter-spacing: -0.015em; margin-bottom: 4px;
}
.page-hero .lead { max-width: 62ch; color: var(--ink-2); font-size: clamp(1rem, 1.4vw, 1.16rem); margin: 20px 0 0; }
.page-hero .hero-cta { margin-top: 30px; }

/* --- fyrirsögn með hnapp til hægri --- */
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.section-head-row p { margin-top: 10px; }

/* --- kynningarspjöld á forsíðu (mini) --- */
.case-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-mini {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 14px 20px; transition: border-color 0.15s ease, transform 0.15s ease;
}
.case-mini:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-3px); }
.case-mini-media {
  position: relative; overflow: hidden; margin-bottom: 16px;
  aspect-ratio: 1 / 1; border-radius: 10px; background: #0a0a0a;
}
.case-mini-media .fr-bg,
.case-mini-media .fr-img { border-radius: 0; }
.case-mini .case-logo { margin-bottom: 6px; }
.case-mini .case-logo span { font-size: 1rem; }
.case-mini .case-tag { margin-bottom: 12px; }
.case-mini-line { color: var(--ink-2); font-size: 0.92rem; flex: 1; }
.case-mini-link { margin-top: 16px; font-size: 0.9rem; font-weight: 700; color: var(--ink); }

/* --- útvíkkuð verkefni (verkefni.html) --- */
.case-full .case-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.01em; margin: 4px 0 16px; }
.case-desc { margin-bottom: 20px; display: grid; gap: 12px; }
.case-desc p { color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; }
.case-desc b { color: var(--ink); font-weight: 700; }

/* --- eiginleikanet (gatt.html) --- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.feature:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-3px); }
.feature-ic {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); border: 1px solid var(--border); color: var(--ink);
}
.feature-ic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.feature p { color: var(--ink-2); font-size: 0.93rem; }

/* --- prófaðu-gáttina reitur --- */
.portal-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: clamp(26px, 4vw, 44px);
}
.portal-demo h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
.portal-demo p { color: var(--ink-2); margin: 12px 0 18px; max-width: 52ch; }
.demo-cred { display: flex; flex-wrap: wrap; gap: 12px; }
.demo-cred span { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 0.9rem; color: var(--ink-2); }
.demo-cred b { color: var(--ink); }
.portal-demo-cta { display: flex; flex-direction: column; gap: 12px; }

/* --- kall-til-aðgerðar neðst á undirsíðu --- */
.page-cta { text-align: center; margin-top: clamp(50px, 8vw, 90px); padding-top: clamp(40px, 6vw, 70px); border-top: 1px solid var(--border); }
.page-cta h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; }
.page-cta p { color: var(--ink-2); max-width: 48ch; margin: 14px auto 26px; }

@media (max-width: 760px) {
  .case-minis { grid-template-columns: 1fr; max-width: 440px; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
  .portal-demo-cta { width: 100%; }
  .portal-demo-cta .btn, .portal-demo-cta .btn-outline { justify-content: center; }
}

/* ==========================================================================
   SÝNIDÆMI ÚR GÁTTINNI (gatt.html) — alvöru skjáir í stað eiginleikakassa
   ========================================================================== */
.showcase { display: flex; flex-direction: column; gap: 5.5rem; }

.show-row {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem; align-items: center;
}
.show-row:nth-child(even) .show-copy { order: 2; }

.show-copy .show-step {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tt); margin: 0 0 0.6rem;
}
.show-copy h3 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.8rem; }
.show-copy p { color: var(--ink-2); line-height: 1.65; margin: 0; }

/* --- skjárinn sjálfur --- */
.shot {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.shot-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0.6rem 0.85rem; background: var(--panel); border-bottom: 1px solid var(--border);
}
.shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: #3a3a37; }
.shot-bar em {
  margin-left: 0.6rem; font-style: normal; font-size: 0.72rem; color: var(--muted);
}
.shot-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }

.s-label {
  display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem;
}

/* tímabils-veljari */
.shot-seg { display: flex; gap: 4px; }
.shot-seg b, .shot-seg span {
  font-size: 0.68rem; font-weight: 600; color: var(--muted);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
}
.shot-seg .on { background: var(--ink); color: #0d0d0d; border-color: var(--ink); }

/* lykiltölur */
.shot-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.shot-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 2px;
}
.shot-tile .s-label { margin-bottom: 0.2rem; }
.s-val { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.s-up { font-size: 0.7rem; font-weight: 700; color: var(--good); }

/* línurit */
.shot-chart {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem;
}
.shot-legend { display: flex; gap: 1rem; margin-top: 0.5rem; }
.lg { font-size: 0.68rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.lg::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
.lg.tt::before { background: var(--tt); }
.lg.ig::before { background: var(--ig); }

/* myndbandatafla */
.shot-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.shot-table th {
  text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 0.5rem 0.5rem; border-bottom: 1px solid var(--border);
}
.shot-table td {
  padding: 0.55rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--ink-2); white-space: nowrap;
}
.shot-table tr:last-child td { border-bottom: 0; }
.shot-table td:first-child {
  color: var(--ink); font-weight: 600;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.shot-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.s-eng { color: var(--good); font-weight: 700; }
.shot-foot { font-size: 0.7rem; color: var(--muted); margin: 0; }

/* miðlapunktur */
.s-pl {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 7px; vertical-align: middle;
}
.s-pl.tt { background: var(--tt); }
.s-pl.ig { background: var(--ig); }

/* tvískiptur skjár */
.shot-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

/* tímalína */
.shot-timeline { list-style: none; margin: 0; padding: 0; }
.shot-timeline li {
  position: relative; padding: 0 0 0.85rem 1.1rem;
  border-left: 1px solid var(--border); font-size: 0.76rem; color: var(--ink-2);
}
.shot-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.shot-timeline li::before {
  content: ""; position: absolute; left: -4.5px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--muted);
}
.shot-timeline li.done::before { background: var(--good); border-color: var(--good); }
.shot-timeline li.wip::before  { background: var(--warn); border-color: var(--warn); }
.shot-timeline li b { display: inline; color: var(--ink); font-weight: 700; }
.shot-timeline li em {
  display: block; font-style: normal; font-size: 0.66rem; color: var(--muted); margin-top: 2px;
}

/* markmið */
.shot-goal { margin-bottom: 0.85rem; }
.shot-goal:last-child { margin-bottom: 0; }
.g-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.74rem; margin-bottom: 5px;
}
.g-top b { font-weight: 600; color: var(--ink); }
.g-top span { color: var(--muted); font-variant-numeric: tabular-nums; }
.g-bar { height: 6px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.g-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tt); }

/* hugmyndatafla */
.shot-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.shot-col {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem;
}
.s-col-h {
  display: flex; justify-content: space-between; align-items: center; gap: 4px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap; color: var(--muted); margin-bottom: 0.5rem;
}
.s-col-h i {
  font-style: normal; background: var(--surface-2); border-radius: 999px;
  padding: 1px 6px; color: var(--ink-2);
}
.s-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px;
  padding: 0.45rem 0.5rem; margin-bottom: 0.4rem;
  font-size: 0.68rem; line-height: 1.3; color: var(--ink);
}
.s-card:last-child { margin-bottom: 0; }
.s-card.s-mine { border-color: var(--tt); }
.s-card em {
  display: block; font-style: normal; font-size: 0.6rem; color: var(--tt); margin-top: 3px;
}

/* spjall */
.shot-chat {
  display: flex; flex-direction: column; gap: 0.45rem;
  border-top: 1px solid var(--border); padding-top: 0.9rem;
}
.s-msg {
  max-width: 78%; padding: 0.5rem 0.7rem; border-radius: 12px;
  font-size: 0.72rem; line-height: 1.4;
}
.s-msg.them { background: var(--panel); border: 1px solid var(--border); color: var(--ink-2); }
.s-msg.them b {
  display: block; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.s-msg.me { align-self: flex-end; background: var(--tt); color: #fff; font-weight: 500; }

@media (max-width: 880px) {
  .showcase { gap: 3.5rem; }
  .show-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .show-row:nth-child(even) .show-copy { order: 0; }
  .shot-split { grid-template-columns: 1fr; }
  .shot-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .shot-tiles { grid-template-columns: 1fr; }
  .shot-board { grid-template-columns: 1fr; }
  .shot-table td:first-child { max-width: 120px; }
}

/* ==========================================================================
   GÁTTIN — SAMÞYKKTIR, DAGATAL, ÁHORFSGÆÐI OG SKRÁASAFN
   ========================================================================== */

/* teljari í hliðarstiku: hversu margt bíður þín */
.side-badge {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--tt); color: #fff; font-size: 0.7rem; font-weight: 800; text-align: center;
}

/* --- áhorfsgæði --- */
.tiles-4 { grid-template-columns: repeat(4, 1fr); }
.videos-table td.cell-good { color: var(--good); font-weight: 700; }
.videos-table td.cell-weak { color: var(--warn); font-weight: 700; }
.est-note {
  margin: 0.6rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted);
  border-left: 2px solid var(--border); padding-left: 0.7rem;
}

/* --- til samþykktar --- */
.appr-list { display: flex; flex-direction: column; gap: 1rem; }
.appr {
  display: grid; grid-template-columns: 128px 1fr; gap: 1.1rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1rem;
}
.appr-media {
  position: relative; border-radius: 9px; overflow: hidden; background: #000;
  height: 228px;
}
.appr-media video, .appr-media img { width: 100%; height: 228px; object-fit: cover; display: block; }
.appr-nopreview {
  position: absolute; inset: auto 0 0 0; padding: 0.35rem 0.5rem;
  background: rgba(0, 0, 0, 0.7); color: var(--ink-2); font-size: 0.64rem; text-align: center;
}
.appr-body { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.appr-top { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.appr-top h4 { margin: 0; font-size: 1.05rem; }
.appr-status {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.appr-status.bidur     { background: rgba(201, 133, 0, 0.16);  color: #e0a230; }
.appr-status.samthykkt { background: rgba(12, 163, 12, 0.16);  color: #3ec93e; }
.appr-status.breyting  { background: rgba(230, 103, 103, 0.16); color: var(--bad); }
.appr-meta {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--muted);
}
.appr-when { margin-left: auto; color: var(--ink-2); font-weight: 600; }
.appr-note {
  margin: 0; padding: 0.6rem 0.75rem; border-radius: 8px;
  background: var(--surface); border-left: 2px solid var(--tt);
  font-size: 0.84rem; line-height: 1.55; color: var(--ink-2);
}
.appr-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.appr-actions input {
  flex: 1 1 220px; min-width: 0; padding: 0.5rem 0.7rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink); font: inherit; font-size: 0.84rem;
}
.appr-actions input.input-error { border-color: var(--bad); }
.appr-empty, .asset-empty { color: var(--muted); font-size: 0.9rem; margin: 0; }

.appr-done { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.appr-done-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0.65rem; background: var(--panel); border-radius: 8px; font-size: 0.84rem;
}
.appr-done-title { font-weight: 600; }
.appr-done-fb { color: var(--ink-2); font-style: italic; }
.appr-done-when { margin-left: auto; color: var(--muted); font-size: 0.75rem; }

/* --- dagatal --- */
.cal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cal-nav { display: flex; gap: 0.35rem; }
.cal-nav button {
  padding: 0.35rem 0.7rem; background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 0.82rem; cursor: pointer;
}
.cal-nav button:hover { background: var(--surface-2); color: var(--ink); }
.cal-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 0.9rem 0; }
.cal-key { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--muted); }
.cal-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.cal-key.birt::before      { background: var(--good); }
.cal-key.aaetlad::before   { background: var(--warn); }
.cal-key.samthykkt::before { background: var(--tt); }
.cal-key.efni::before      { background: var(--ev-efni); }
.cal-key.toku::before      { background: var(--ev-toku); }
.cal-key.fundur::before    { background: var(--ev-fundur); }
.cal-key.herferd::before   { background: var(--ev-herferd); }
.cal-key.annad::before     { background: var(--ev-annad); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 0 0 0.3rem 0.2rem;
}
.cal-cell {
  min-height: 92px; padding: 0.35rem; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cal-blank { background: transparent; border-color: transparent; }
.cal-today { border-color: var(--tt); }
.cal-day { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.cal-today .cal-day { color: var(--tt); }
.cal-ev {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 5px; border-radius: 5px; font-size: 0.66rem; line-height: 1.25;
  border-left: 2px solid transparent; background: var(--surface-2);
}
.cal-ev.birt      { border-left-color: var(--good); }
.cal-ev.aaetlad   { border-left-color: var(--warn); }
.cal-ev.samthykkt { border-left-color: var(--tt); }
.cal-ev.efni      { border-left-color: var(--ev-efni); }
.cal-ev.toku      { border-left-color: var(--ev-toku); }
.cal-ev.fundur    { border-left-color: var(--ev-fundur); }
.cal-ev.herferd   { border-left-color: var(--ev-herferd); }
.cal-ev.annad     { border-left-color: var(--ev-annad); }
.cal-ev-play { cursor: pointer; }
.cal-ev-play:hover { background: #2c2c29; }
.cal-ev-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2);
}

/* --- skráasafn --- */
.asset-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem;
}
.asset {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
.asset-media { position: relative; height: 150px; overflow: hidden; background: #000; }
.asset-media img { width: 100%; height: 150px; object-fit: cover; display: block; }
.asset-kind {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.72); color: #fff;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.asset-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.asset-name {
  font-weight: 600; font-size: 0.88rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.asset-note { font-size: 0.74rem; color: var(--muted); line-height: 1.4; }
.asset-meta { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.asset-dl { margin-top: auto; align-self: flex-start; }

@media (max-width: 900px) {
  .tiles-4 { grid-template-columns: repeat(2, 1fr); }
  .appr { grid-template-columns: 110px 1fr; gap: 0.8rem; }
  .cal-cell { min-height: 70px; }
  .cal-ev-title { display: none; }
}
@media (max-width: 600px) {
  .tiles-4 { grid-template-columns: 1fr; }
  .appr { grid-template-columns: 1fr; }
  .appr-media { max-width: 160px; }
  .appr-when { margin-left: 0; }
}

/* ==========================================================================
   FLÆÐI MILLI VIÐSKIPTAVINAR OG TEYMIS — tengingarstaða og athygli
   ========================================================================== */

/* er þetta í beinu sambandi, eða bara þessi eini vafri? */
.conn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 0.74rem; font-weight: 600;
}
.conn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.conn.live    { background: rgba(12, 163, 12, 0.12); color: #3ec93e; }
.conn.live::before    { background: #3ec93e; box-shadow: 0 0 0 3px rgba(62, 201, 62, 0.18); }
.conn.offline { background: rgba(201, 133, 0, 0.14); color: #e0a230; }
.conn.offline::before { background: #e0a230; }
.topbar .data-until { margin-left: 1rem; }

/* verkefnaspjöld í stjórnborðinu: hvað bíður okkar */
.cust-attn { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.8rem; }
.attn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; text-decoration: none;
}
.attn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.attn-msg  { background: rgba(57, 135, 229, 0.14); color: #6aa8ee; }
.attn-msg::before  { background: #3987e5; }
.attn-appr { background: rgba(201, 133, 0, 0.16); color: #e0a230; }
.attn-appr::before { background: #c98500; }
.attn:hover { filter: brightness(1.25); }

@media (max-width: 700px) {
  .conn { display: none; }
}

/* ==========================================================================
   STJÓRNBORÐ — teymið ritstýrir því sem viðskiptavinurinn sér
   ========================================================================== */
.tab-note {
  margin: 0 0 1rem; padding: 0.7rem 0.9rem;
  background: rgba(57, 135, 229, 0.08); border-left: 2px solid var(--tt);
  border-radius: 8px; font-size: 0.84rem; color: var(--ink-2);
}

/* eyðingarhnappur á röð (áfangi / markmið) */
.row-del, .asset-del {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-size: 0.7rem; line-height: 1; cursor: pointer;
  padding: 4px 6px; transition: color 0.15s ease, border-color 0.15s ease;
}
.row-del:hover, .asset-del:hover { color: var(--bad); border-color: var(--bad); }

.timeline.admin-edit li { position: relative; padding-right: 34px; }
.timeline.admin-edit .row-del { position: absolute; top: 0; right: 0; }

.goal-row { position: relative; padding-right: 34px; }
.goal-row .row-del { position: absolute; top: 2px; right: 0; }

.asset-del {
  position: absolute; top: 8px; right: 8px;
  background: rgba(10, 10, 10, 0.75); color: #fff;
}

/* stefnuritill */
.strat-form { display: flex; flex-direction: column; gap: 0.9rem; }
.strat-form label {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-2);
}
.strat-form .hint { font-weight: 400; color: var(--muted); }
.strat-form input, .strat-form textarea {
  padding: 0.6rem 0.75rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 400;
  resize: vertical;
}
.strat-form input:focus, .strat-form textarea:focus {
  outline: none; border-color: var(--tt);
}
.strat-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.saved-flash { color: var(--good); font-size: 0.82rem; font-weight: 700; }

/* ---------- dagatal og prófíll í stjórnborðinu ---------- */
.mini-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0.2rem 0 0.6rem;
}

.ev-row, .fol-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.ev-row:last-child, .fol-row:last-child { border-bottom: 0; }

.ev-kind {
  flex: none; min-width: 92px; font-size: 0.68rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; text-align: center;
  background: var(--surface-2); border-left: 3px solid var(--ev-annad);
}
.ev-kind.efni    { border-left-color: var(--ev-efni); }
.ev-kind.toku    { border-left-color: var(--ev-toku); }
.ev-kind.fundur  { border-left-color: var(--ev-fundur); }
.ev-kind.herferd { border-left-color: var(--ev-herferd); }

.ev-date, .fol-date { flex: none; font-size: 0.78rem; color: var(--muted); min-width: 108px; }
.ev-title { font-size: 0.86rem; font-weight: 600; }
.ev-note {
  flex: 1; font-size: 0.78rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-row .row-del, .fol-row .row-del { margin-left: auto; }

.fol-n { font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dagsetningarreitir geta ekki haft placeholder — vafrinn sýnir alltaf
   „dd.mm.yyyy“. Þeir fá því sýnilegt merki fyrir ofan sig. Formið raðar öllum
   reitum eftir neðri brún svo merkið ýti ekki línunni úr skorðum.
   NB: heitir .date-field, ekki .field — .field er innskráningar- og
   sambandsformið og setur width:100% + aðra spássíu. */
.board-form { align-items: flex-end; }
.board-form input, .board-form select { height: 40px; }   /* select var 3px lægra */

.board-form .date-field {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0;   /* label erfir 16px botnspássíu — flex-end jafnar spássíukassann,
                  svo hún lyfti sýnilega reitnum upp fyrir hina */
}
.board-form .date-field > span {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); padding-left: 3px;
}

/* =========================================================================
   PERSÓNULEG EFNISGERÐ (folk.html) — ættartré
   Vörumerkið efst, lóðréttur stofn niður, lárétt grein og fjórar rætur.
   Línurnar eru hreint CSS: engin SVG, engin skjöl að hlaða.
   ========================================================================= */
.folk-sum {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border);
}
.folk-sum div { display: flex; flex-direction: column; gap: 3px; }
.folk-sum b { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; }
.folk-sum span { font-size: 0.8rem; color: var(--muted); }

/* --stubbur býr hér en ekki á .tree-kids af því að .tree-stem er systkini
   hennar, ekki barn — það erfir hana ekki nema hún standi á sameiginlega
   foreldrinu. Stofninn og strikin verða að vera jafnlöng. */
.tree { --line: #35373a; --line-lit: var(--tt); --stubbur: 30px; }
.tree-top { display: flex; justify-content: center; }

/* stofninn frá vörumerkinu niður í greinina */
.tree-stem {
  width: 2px; height: 54px; margin: 0 auto;
  background: linear-gradient(to bottom, var(--line-lit), var(--line));
}

/* TVÆR RAÐIR: tveir efst, fjórir undir.
   Grindin er fjórir dálkar og efri kortin tvö spanna tvo hvor. Þannig sitja
   Gabbi og Máni beint yfir fjórmenningunum án þess að tvær aðskildar grindur
   þurfi — og fjórir jafnbreiðir dálkar halda neðri röðinni jafnri.

   --stubbur er hæð lóðréttu strikanna. Hún er líka padding-top á grindinni,
   svo greinin lendi nákvæmlega þar sem strikin byrja; breytist annað án hins
   hanga strikin í lausu lofti. */
.tree-kids {
  position: relative;
  --rod-bil: 34px;                        /* milli raðanna tveggja */
  --dalk-bil: clamp(12px, 1.4vw, 20px);   /* milli dálka */
  padding-top: var(--stubbur);
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: var(--dalk-bil); row-gap: var(--rod-bil);
}
/* Gabbi og Máni sitja í dálkum 2 og 3 — EKKI spannandi tvo dálka hvor.
   Spönn hefði gert þá tvöfalt breiðari en fjórmenningana; hér eru allir sex
   kassarnir jafnstórir og efri tveir standa einfaldlega yfir miðjunni. */
/* ÖLL SEX FÁ STAÐSETNINGU SAGÐA BERUM ORÐUM — grid-area: röð / dálkur.
   Efri röðin skilur eftir dálka 1 og 4 auða, og sjálfvirk niðurröðun fyllir
   þá með næstu kortum frekar en að byrja nýja röð. Að festa aðeins sum
   kortin dugir ekki: þá raðast hin í götin sem eftir standa. Annaðhvort
   ræður grindin öllu eða engu. */
.tree-kids > .kid:nth-child(1) { grid-area: 1 / 2; }
.tree-kids > .kid:nth-child(2) { grid-area: 1 / 3; }
.tree-kids > .kid:nth-child(3) { grid-area: 2 / 1; }
.tree-kids > .kid:nth-child(4) { grid-area: 2 / 2; }
.tree-kids > .kid:nth-child(5) { grid-area: 2 / 3; }
.tree-kids > .kid:nth-child(6) { grid-area: 2 / 4; }

/* lárétta greinin — nær milli miðju dálks 2 og dálks 3, þ.e. 37,5% og 62,5% */
.tree-kids::before {
  content: ""; position: absolute; top: 0; height: 2px;
  left: 37.5%; right: 37.5%;
  background: var(--line);
}
/* rótin úr greininni niður í hvert kort */
.kid { position: relative; display: flex; flex-direction: column; }
.kid > .node { flex: 1; }   /* öll kortin jafnhá → klippurnar liggja á sömu línu */
.kid::before {
  content: ""; position: absolute; top: calc(-1 * var(--stubbur)); left: 50%;
  width: 2px; height: var(--stubbur); margin-left: -1px;
  background: var(--line);
}
/* NEÐRI GREININ.
   Gabbi og Máni standa yfir dálkum 2 og 3, en fjórmenningarnir undir fylla
   dálka 1–4. Lóðrétt strik beint upp úr þeim ystu myndu því benda á autt
   pláss. Í staðinn liggur lárétt grein á miðju bilinu milli raða: efri
   kortin senda strik NIÐUR í hana, þau neðri senda strik UPP í hana.

   Öll strikin eru hálft raðabilið, svo þau mætast nákvæmlega á greininni.
   Breytist --rod-bil fylgja þau með. */
.tree-kids > .kid:nth-child(n + 3)::before {
  top: calc(-1 * var(--rod-bil) / 2); height: calc(var(--rod-bil) / 2);
}
.tree-kids > .kid:nth-child(-n + 2)::after {
  content: ""; position: absolute;
  bottom: calc(-1 * var(--rod-bil) / 2); left: 50%; margin-left: -1px;
  width: 2px; height: calc(var(--rod-bil) / 2);
  background: var(--line);
}
/* Sjálf greinin. Hún er teiknuð út frá ÞRIÐJA kortinu (fyrsta í neðri röð)
   og nær yfir þrjá dálka og þrjú bil — þ.e. frá miðju fyrsta korts að miðju
   þess fjórða. Prósentan miðast við .kid, sem er einn dálkur á breidd. */
.tree-kids > .kid:nth-child(3)::after {
  content: ""; position: absolute;
  top: calc(-1 * var(--rod-bil) / 2); left: 50%;
  width: calc(300% + 3 * var(--dalk-bil)); height: 2px;
  background: var(--line);
}

/* --- ALLT MINNA ---
   Tréð var byggt fyrir fjögur stór kort. Með sex manns og fjórum í neðstu
   röð þarf hver hlutur að skreppa saman, annars fer hæðin úr böndunum. */
.tree-section .node { gap: 7px; padding: 13px 11px; }
.tree-section .node-face { width: 46px; height: 46px; border-width: 1px; }
.tree-section .node-root { max-width: 400px; padding: 14px 18px; gap: 14px; }
.tree-section .node-root .node-face { width: 58px; height: 58px; }
.tree-section .node-name { font-size: 0.86rem; }
.tree-section .node-root .node-name { font-size: 1.05rem; }
.tree-section .node-handle,
.tree-section .node-mail { font-size: 0.72rem; }
/* Hlutverkið situr milli nafns og notandanafns. Það er upplýsingin sem
   segir hver gerir hvað — nafnið eitt gerir það ekki.

   Liturinn er slípað silfur: hallandi ljósbönd klippt ofan í stafina og
   færð hægt yfir þá, svo það glampar eins og málmur sem snýst í ljósi.
   Grunnliturinn er heilsteyptur og gljáinn lagður ofan á í @supports —
   styddi vafrinn ekki background-clip:text yrði textinn ósýnilegur,
   því text-fill-color er gegnsætt. */
.node-role {
  font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 800; color: #c2c8cf;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .node-role {
    background-image: linear-gradient(100deg,
      #8a9096 0%, #c8ced5 14%, #ffffff 26%, #dfe4ea 36%,
      #939aa1 50%, #f2f5f8 66%, #b4bac1 82%, #8a9096 100%);
    background-size: 300% 100%;
    background-clip: text; -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: silfur 7s linear infinite;
  }
}
@keyframes silfur {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
/* ENGIN UNDANTEKNING FYRIR „reduce“ — sami hraði alls staðar, að ósk Mikaels.
   Rökin: ekkert færist úr stað, aðeins liturinn í stöfunum breytist, svo
   þetta er ekki sú tegund hreyfingar sem stillingin er hugsuð gegn. Áður
   var gljáinn hægður í 16 sek hjá þeim sem hafa hana kveikta — sem er
   vélin hans — og gljáinn varð þar með annar en allir aðrir sjá. */
.tree-section .tree-stem { height: var(--stubbur, 30px); }
/* Klippurnar eru ekki lengur í trénu — þær réðu hæðinni og gerðu kortin
   misstór. Efnið sjálft lifir áfram á verkefni.html og í hlekkjunum á
   TikTok-reikningana. */

/* --- hnútarnir sjálfir --- */
.node {
  position: relative;   /* akkeri fyrir .node-link::after */
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 18px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.node:hover {
  transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}
.node-root {
  flex-direction: row; text-align: left; gap: 20px;
  max-width: 560px; padding: 24px 28px;
  border-color: rgba(57, 135, 229, 0.45);
  box-shadow: 0 0 0 1px rgba(57, 135, 229, 0.12), 0 24px 60px -30px rgba(57, 135, 229, 0.5);
}
.node-root .node-face { width: 96px; height: 96px; }

.node-face {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid rgba(255, 255, 255, 0.14);
}
.node-face-blank {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--muted);
  font-weight: 800; font-size: 1.2rem; letter-spacing: 0.04em;
  border-style: dashed;
}
.node-soon { opacity: 0.72; }

.node-body { display: flex; flex-direction: column; gap: 5px; align-items: inherit; min-width: 0; }
.node-root .node-body { align-items: flex-start; }
.node:not(.node-root) .node-body { align-items: center; }
.node-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.node-root .node-name { font-size: 1.35rem; }
.node-handle { font-size: 0.78rem; color: var(--tt); font-weight: 600; }

/* Kortin eru ekki lengur einn stór hlekkur — netfangið þarf
   að vera smellanlegt og hlekkur inni í hlekk gengur ekki. Í staðinn
   teygir TikTok-hlekkurinn sig ósýnilega yfir allt kortið, og netfangið
   situr ofan á honum. Kortið hegðar sér því eins og áður. */
.node-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.node-mail {
  /* engin align-self hér — .node-body ræður röðuninni (miðjað hjá strákunum,
     vinstrijafnað á rótinni) */
  position: relative; z-index: 1;
  font-size: 0.76rem; color: var(--muted);
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.node-mail:hover { color: var(--ink); border-bottom-color: rgba(255, 255, 255, 0.3); }

/* Flokkamerkin (Grín & sketsar / Bak við tjöldin), tölfræðin og
   lýsingartextinn á rótinni tekin út að beiðni Mikaels — öll kortin bera nú
   það sama: mynd, nafn, notendanafn og netfang. */

/* --- klippurnar undir hverjum --- */
.kid-clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.clip {
  position: relative; display: block; border-radius: 10px; overflow: hidden;
  aspect-ratio: 9 / 16; background: var(--panel); border: 1px solid var(--border);
}
.clip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.clip:hover img { transform: scale(1.06); }
.clip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 48%);
}
.clip-views {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 0.62rem; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, 0.6); padding: 2px 6px; border-radius: 6px;
  backdrop-filter: blur(4px);
}
.clip-cap {
  position: absolute; bottom: 6px; left: 6px; right: 6px; z-index: 2;
  font-size: 0.6rem; line-height: 1.25; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kid-clips-empty {
  display: block; padding: 16px; border: 1px dashed var(--border); border-radius: 10px;
}
.kid-clips-empty p { font-size: 0.82rem; color: var(--muted); margin: 0; }

/* --- af hverju þetta skiptir máli --- */
.why-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.why-points { display: grid; gap: 18px; }
.why-point {
  padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  border-left: 3px solid var(--tt);
}
.why-point b { display: block; margin-bottom: 6px; font-size: 0.98rem; }
.why-point p { color: var(--muted); font-size: 0.9rem; margin: 0; }

@media (max-width: 980px) {
  /* Fjórmenningarnir verða tveir og tveir. Efri kortin spanna áfram alla
     breiddina, svo tréð helst: tveir efst, fjórir undir — í tveimur röðum. */
  /* Tveir dálkar: efri tveir hlið við hlið, fjórmenningarnir tveir og tveir.
     Greinarnar eiga þá ekki lengur við — dálkarnir eru ekki fjórir og
     strikin lentu á röngum stöðum. */
  .tree-kids { grid-template-columns: repeat(2, 1fr); }
  /* Föstu staðsetningarnar að ofan miðast við fjóra dálka — dálkur 4 er ekki
     til hér og grindin byggi ósýnilegan dálk utan á sig ef þær stæðu eftir. */
  .tree-kids > .kid { grid-area: auto; }
  .tree-kids > .kid:nth-child(1) { grid-area: 1 / 1; }
  .tree-kids > .kid:nth-child(2) { grid-area: 1 / 2; }
  .tree-kids::before { left: 25%; right: 25%; }
  .tree-kids > .kid:nth-child(3)::after { display: none; }
  .tree-kids > .kid:nth-child(-n + 2)::after { display: none; }
  .tree-kids > .kid:nth-child(n + 3)::before { display: none; }
  .why-grid { grid-template-columns: 1fr; }
  .folk-sum { grid-template-columns: repeat(2, 1fr); }
  .node-root { flex-direction: column; text-align: center; }
  .node-root .node-body { align-items: center; }
}
@media (max-width: 560px) {
  /* Einn dálkur — þá er ekkert tré lengur, bara listi, og strikin eiga
     hvergi heima. Spönnin verður líka að fara, annars ná efri kortin tvö
     yfir dálk sem er ekki til. */
  .tree-kids { grid-template-columns: 1fr; }
  .tree-kids > .kid { grid-area: auto; }
  .tree-kids::before { display: none; }
  .kid::before { display: none; }
  .tree-kids > .kid::after { display: none; }
  .folk-sum { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   VIÐSKIPTAVINABORÐI á forsíðunni — í stað verkefnakortanna
   Lógóin liggja á ljósum skífum (þau eru úr öllum áttum: sum dökk á ljósu,
   sum gagnsæ) og eru dempuð þar til músin fer yfir.
   ========================================================================= */
.clients-section { text-align: center; }

/* =========================================================================
   MYNDBANDABORÐINN — efnið sem er í loftinu, rennur til hliðar
   ========================================================================= */
.reel-band {
  position: relative;
  overflow: hidden;
  /* Lítil botnspássía: .index-section fyrir neðan kemur með sína eigin
     .section-spássíu, svo full spássía hér tvöfaldaðist í of stórt gat. */
  margin-bottom: clamp(8px, 1.2vw, 20px);
  /* Deyfing út í brúnirnar svo spjöldin líði inn og út í stað þess að
     klippast af. mask, ekki gradient-lag: bakgrunnurinn er ekki einlitur. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.reel-track {
  display: flex;
  gap: clamp(10px, 1.1vw, 16px);
  width: max-content;
  /* -50% er nákvæmlega annar helmingurinn — listinn er tvítekinn, svo
     brautin er komin aftur í sjónrænt sama horf þegar lotan endar.
     Þess vegna má hvorki gap-ið né fjöldinn skeikast milli helminganna. */
  animation: reel-slide 78s linear infinite;
}
@keyframes reel-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.reel-band:hover .reel-track,
.reel-band:focus-within .reel-track { animation-play-state: paused; }

.reel {
  position: relative;
  flex: none;
  width: clamp(118px, 12vw, 168px);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #101014;
  border: 1px solid var(--border);
  text-align: left;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.reel:hover, .reel:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.95);
}
.reel-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;              /* fyllir spjaldið — engir svartir borðar */
  background: #101014;
  pointer-events: none;
}
/* EKKI gata þetta á prefers-reduced-motion. Rennslið ER erindið sem beðið
   var um, og vafri Mikaels tilkynnir alltaf „reduce“ — þá stæði borðinn
   kyrr hjá honum sjálfum. Hann stöðvast við yfirsvif og fókus, sem gefur
   hverjum sem er leið til að stoppa hann. */

.clients-head { margin-bottom: clamp(30px, 4vw, 48px); }
.clients-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em;
}
.client-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 3vw, 46px);
}
.client {
  width: clamp(96px, 11vw, 142px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  background: #f2f1ee; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1) brightness(0.66);
  transition: filter 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}
/* cover, ekki contain: lógóin eiga að fylla skífuna út í brún.
   Battar er undantekning — sjá .client-fit. */
.client img { width: 100%; height: 100%; object-fit: cover; padding: 0; }

/* Breið orðmerki (Nikulás, Battar) þola ekki ferningsklippingu — nafnið
   einfaldlega skerst af. Þau fá contain og fylla breiddina út í brún í staðinn.
   Þetta lagast um leið og til er ferningslaga útgáfa af þeim merkjum. */
.client-fit img { object-fit: contain; padding: 0 2px; }
.client:hover, .client:focus-visible {
  filter: none;
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 3px rgba(57, 135, 229, 0.22);
}
.clients-foot { margin-top: clamp(32px, 4vw, 52px); }

/* =========================================================================
   UPPHLEÐSLA Á SKRÁM (stjórnborð → Skráasafn)
   ========================================================================= */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 34px 20px; margin-bottom: 16px;
  border: 2px dashed rgba(255, 255, 255, 0.16); border-radius: var(--radius);
  background: var(--panel); color: var(--muted);
  cursor: pointer; text-align: center;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.drop:hover, .drop.over {
  border-color: var(--tt); background: rgba(57, 135, 229, 0.07); color: var(--ink-2);
}
.drop.has-file { border-style: solid; border-color: rgba(12, 163, 12, 0.5); }
.drop svg { width: 30px; height: 30px; color: inherit; }
.drop b { color: var(--ink); font-size: 0.95rem; }
.drop span { font-size: 0.8rem; }

.up-status {
  margin-top: 14px; padding: 11px 14px; border-radius: 10px;
  font-size: 0.86rem; border: 1px solid var(--border); background: var(--panel);
}
.up-status.busy { color: var(--ink-2); border-color: rgba(57, 135, 229, 0.4); }
.up-status.ok   { color: #7fdc7f; border-color: rgba(12, 163, 12, 0.4); background: rgba(12, 163, 12, 0.1); }
.up-status.bad  { color: var(--bad); border-color: rgba(230, 103, 103, 0.45); background: rgba(230, 103, 103, 0.08); }

.up-manual summary {
  cursor: pointer; font-weight: 700; font-size: 0.92rem; color: var(--ink-2);
  list-style: none;
}
.up-manual summary::-webkit-details-marker { display: none; }
.up-manual summary::before { content: "+ "; color: var(--muted); }
.up-manual[open] summary::before { content: "− "; }
.up-manual[open] summary { margin-bottom: 12px; }

/* =========================================================================
   HUGMYNDASPJALD Í FULLRI STÆRÐ — smellur á spjald opnar textann óklipptan
   ========================================================================= */
.board-card { cursor: pointer; }
.cmodal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px);
  animation: cmodal-in 0.16s ease both;
}
@keyframes cmodal-in { from { opacity: 0; } to { opacity: 1; } }
.cmodal-box {
  position: relative;
  width: min(560px, 100%); max-height: 80vh; overflow-y: auto;
  padding: 30px 32px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}
.cmodal-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--muted); font-size: 0.9rem;
}
.cmodal-x:hover { background: var(--surface-2); color: var(--ink); }
.cmodal-col {
  display: inline-block; margin-bottom: 12px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.cmodal-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.cmodal-note {
  margin-top: 12px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55;
  white-space: pre-wrap;   /* línuskil í hugmyndinni haldast */
}
.cmodal-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--muted);
}
.cmodal-author { color: var(--muted); }

/* =========================================================================
   VERKASKRÁIN (verkefni.html) — merki síðunnar
   Stór nafnalisti; myndbandið eltir bendilinn. Hugmyndin er sótt í það sem
   verðlaunasíður gera: EITT eftirminnilegt augnablik, ekki tuttugu effektar.
   ========================================================================= */
.index-section { position: relative; }
.index-head { margin-bottom: clamp(28px, 4vw, 44px); }
.index-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.index-head p { color: var(--muted); margin-top: 8px; }

.index { border-top: 1px solid var(--border); }
.idx-row { border-bottom: 1px solid var(--border); }

.idx-head {
  position: relative; z-index: 2;
  display: grid;
  /* Aðeins þrír dálkar: númer, merki, +. Flokkur/tögl/ártal eru ekki lengur
     teiknuð, svo dálkarnir þeirra eru farnir líka. */
  grid-template-columns: 3.2rem minmax(0, 1fr) 2rem;
  align-items: center; gap: 18px;
  width: 100%; padding: clamp(18px, 2.4vw, 30px) 6px;
  background: none; border: 0; text-align: left; cursor: pointer;
  transition: opacity 0.25s ease, padding-left 0.25s ease;
}
.idx-num {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* MERKIÐ er nafnið. Lógóin koma úr öllum áttum — sum dökk á ljósum grunni,
   sum gagnsæ — svo þau sitja á ljósri flís.

   FÖST HÆÐ, BREIDDIN RÆÐST AF LÓGÓINU: flísin lagar sig að hlutföllum hvers
   merkis (breiður borði verður breiður, ferningur verður ferningur). Þá fyllir
   lógóið flísina alveg út. Föst kassastærð skildi eftir tómar spássíur af því
   merkin eru allt frá 1:1 upp í 3:1 — og að klippa þau í sömu stærð hefði
   skorið nöfnin af (sbr. Nikulás og Battar).

   Dempuð þar til svifið er yfir. */
/* ENGINN ljós reitur lengur — merkin fljóta beint á dökka bakgrunninum.
   Ljósi kassinn (#f2f1ee + rammi + rúnn) var tekinn út að beiðni Mikaels;
   í staðinn eru merkin sjálf gerð gagnsæ/hvít þar sem þurfti (Total Tempo,
   KKÍ), ICEBOX rennur inn í svörtu. Dempunin er nú mild ógegnsæi í stað
   grátóna, svo litamerkin haldi lit sínum. */
.idx-mark {
  justify-self: start;
  display: block;
  height: clamp(64px, 6.6vw, 94px);
  width: auto;
  opacity: 0.72;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.idx-mark img { height: 100%; width: auto; display: block; }
.idx-mark-round img { height: 100%; width: auto; }
.idx-cat, .idx-teaser { font-size: 0.84rem; color: var(--muted); }
.idx-teaser { color: var(--ink-2); }
.idx-year { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.idx-plus {
  justify-self: end; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border);
  font-size: 0.9rem; color: var(--muted);
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* þegar svifið er yfir einni röð dofna hinar — listinn fær fókus */
.index.hovering .idx-head { opacity: 0.34; }
.index .idx-row.hot .idx-head { opacity: 1; padding-left: 16px; }
.idx-row.hot .idx-mark,
.idx-row.open .idx-mark {
  opacity: 1;
  transform: scale(1.04);
}
.idx-row.hot .idx-plus { border-color: var(--ink); color: var(--ink); }

/* --- opna spjaldið --- */
.idx-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 0.8, 0.24, 1);
}
.idx-row.open .idx-panel { grid-template-rows: 1fr; }
.idx-panel-in { overflow: hidden; }
.idx-row.open .idx-plus { transform: rotate(45deg); border-color: var(--ink); color: var(--ink); }

.idx-panel-in > * { padding-bottom: 34px; }
.idx-panel-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.idx-story { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.idx-status {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.idx-status.live { color: #7fdc7f; border-color: rgba(12, 163, 12, 0.4); background: rgba(12, 163, 12, 0.12); }
.idx-blurb { color: var(--ink-2); font-size: 0.98rem; max-width: 62ch; line-height: 1.6; }
.idx-metrics { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.idx-metrics div { display: flex; flex-direction: column; }
.idx-metrics b { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.idx-metrics span { font-size: 0.75rem; color: var(--muted); }
.idx-note { font-size: 0.78rem; color: var(--muted); }

.idx-clips { display: flex; gap: 12px; }
.idx-clips .clip { width: clamp(120px, 12vw, 158px); }
.idx-logo {
  width: 158px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: #f2f1ee; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.idx-logo img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }

@media (hover: none), (pointer: coarse) {
  /* engin yfirsvif á snertiskjá → merkin eru alltaf í fullum lit */
  .idx-head { grid-template-columns: 2.2rem minmax(0, 1fr) 2rem; gap: 12px; }
  .index.hovering .idx-head { opacity: 1; }
  .idx-mark { opacity: 1; }
}
@media (max-width: 1100px) and (hover: hover) {
  .idx-head { grid-template-columns: 2.6rem minmax(0, 1fr) 2rem; }
}
@media (max-width: 820px) {
  .idx-panel-in { grid-template-columns: 1fr; }
  .idx-clips { flex-wrap: wrap; }
}