/* ============================================================
   AUGLJÓST — main.css  (v6)
   Brand: #FF6464 · warm paper · editorial / refined-minimal
   Motion: spring-easing, staggered reveals, transform/opacity only
   UX:    tabular figures, 44px targets, focus-visible, reduced-motion
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* brand + surfaces */
  --ff:        #FF6464;   /* BRAND coral */
  --ff-700:    #ED4F4F;   /* hover / pressed */
  --ff-100:    #FFE7E4;   /* tint */
  --on-ff:     #FFFFFF;

  --paper:     #EFEAE0;   /* page background (warm cream) */
  --paper-2:   #F6F2EA;
  --card:      #FBFAF6;   /* near-white card */
  --ink:       #2B2926;   /* near-black text */
  --ink-2:     #6E675E;   /* muted */
  --ink-3:     #9A938A;   /* faint / labels */
  --line:      #E3DDD1;   /* hairline */
  --line-2:    #D7CFC0;

  /* type */
  --font: "Google Sans Flex", system-ui, sans-serif;

  /* radii */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --pill: 999px;

  /* shadows */
  --sh-1:  0 1px 2px rgba(43,41,38,.04), 0 3px 12px rgba(43,41,38,.05);
  --sh-2:  0 14px 40px rgba(43,41,38,.12);
  --sh-ff: 0 12px 30px rgba(255,100,100,.30);

  /* motion */
  --e-out:    cubic-bezier(.22,1,.36,1);
  --e-spring: cubic-bezier(.34,1.42,.5,1);
  --e-in:     cubic-bezier(.4,0,1,1);
  --t-micro:  .18s;
  --t-base:   .28s;
  --t-rev:    .62s;

  /* layout */
  --wrap: 1240px;
  --gut:  clamp(18px, 4vw, 48px);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
h1,h2,h3,h4,p,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }
:where(a,button,input,[tabindex]){ touch-action:manipulation; }

/* tabular figures everywhere numbers matter */
.countdown,.card__price,.cat__count,.ghost-card__count,.newsletter__hint{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- A11Y ---------- */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:10px; left:50%; transform:translate(-50%,-150%);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:var(--pill);
  z-index:1000; transition:transform var(--t-base) var(--e-out);
}
.skip-link:focus{ transform:translate(-50%,0); }
:focus-visible{
  outline:2.5px solid var(--ff);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--ff);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--ff); }
.eyebrow--mute{ color:var(--ink-3); }
.eyebrow--mute .dot{ background:var(--ink-3); }
.eyebrow--inverse{ color:#fff; }
.eyebrow--inverse .dot{ background:#fff; }

.display{
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.display em{ font-style:normal; color:inherit; }
.display--sm{ font-size:clamp(1.5rem,3vw,2.1rem); }
.display--inverse{ color:#fff; }
.display--inverse em{ color:#fff; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:3px; }

.lede{ font-size:1.06rem; line-height:1.6; color:var(--ink-2); max-width:46ch; }
.lede--inverse{ color:rgba(255,255,255,.92); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; color:var(--ff);
  transition:gap var(--t-base) var(--e-out);
}
.link-arrow:hover{ gap:.85em; }
.link-arrow--small{ font-size:.92rem; }

.arrow{ display:inline-block; transition:transform var(--t-base) var(--e-out); }

/* ---------- BUTTONS ---------- */
.btn{
  --bh:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:var(--bh); padding:0 1.5em;
  border-radius:var(--pill);
  font-weight:600; letter-spacing:.01em;
  transition:transform var(--t-micro) var(--e-spring),
             background var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out),
             color var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out);
  will-change:transform;
}
.btn .arrow{ transition:transform var(--t-base) var(--e-out); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn:active{ transform:scale(.97); }
.btn--sm{ --bh:44px; padding:0 1.15em; font-size:.92rem; }

.btn--primary{ background:var(--ff); color:var(--on-ff); box-shadow:var(--sh-ff); }
.btn--primary:hover{ background:var(--ff-700); transform:translateY(-2px); box-shadow:0 16px 38px rgba(255,100,100,.36); }
.btn--primary:active{ transform:translateY(0) scale(.98); }

.btn--ghost{ border:1.5px solid var(--ff); color:var(--ff); background:transparent; }
.btn--ghost:hover{ background:var(--ff); color:#fff; transform:translateY(-2px); }

.btn--invert{ background:var(--ink); color:#fff; }
.btn--invert:hover{ background:#000; transform:translateY(-2px); }

.btn--block{ width:100%; }

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(239,234,224,.78);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-wrap{
  display:flex; align-items:center; gap:24px;
  min-height:72px;
}
.brand{ display:flex; align-items:baseline; gap:10px; margin-right:auto; }
.brand__logo{ height:24px; width:auto; }
.brand__sub{ font-size:.82rem; color:var(--ink-3); font-weight:500; }
.nav{ display:flex; gap:4px; }
.nav a{
  padding:10px 14px; border-radius:var(--pill);
  font-weight:500; color:var(--ink-2);
  transition:color var(--t-base) var(--e-out), background var(--t-base) var(--e-out);
}
.nav a:hover{ color:var(--ink); background:rgba(43,41,38,.05); }

/* ============================================================
   HERO  — story-format (9:16) tilboðs-gluggi
   ============================================================ */
.hero{ padding:clamp(22px,3.5vw,40px) 0 clamp(40px,5vw,64px); }
.hero__grid{
  display:grid;
  grid-template-columns:.86fr 1fr .92fr;
  gap:20px;
  align-items:stretch;            /* allir dálkar = hæð story-gluggans */
}

/* --- LEFT: previous drops --- */
.ghost-card{
  display:flex; flex-direction:column; justify-content:space-between;
  border:1.5px solid var(--ff);
  border-radius:var(--r-lg);
  padding:32px 30px;
  color:var(--ff);
  background:var(--paper-2);
  transition:transform var(--t-base) var(--e-out),
             background var(--t-base) var(--e-out),
             box-shadow var(--t-base) var(--e-out);
}
.ghost-card:hover{ transform:translateY(-4px); background:var(--ff-100); box-shadow:var(--sh-2); }
.ghost-card__count{ font-size:.92rem; font-weight:500; color:var(--ink-3); }
.ghost-card__count strong{ color:var(--ff); font-weight:700; }
.ghost-card__title{
  font-size:clamp(2.1rem,3.2vw,3.1rem); font-weight:700; line-height:.96; letter-spacing:-.025em;
  color:var(--ff);
}
.ghost-card__cta{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:1.05rem;
  transition:gap var(--t-base) var(--e-out);
}
.ghost-card:hover .ghost-card__cta{ gap:.85em; }

/* --- CENTER: live story window (9:16) --- */
.stage{
  position:relative; margin:0;
  width:100%; min-width:0;                   /* haldast innan dálksins — má ekki flæða undir kortin */
  aspect-ratio:9 / 16;                       /* STORY stærð */
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-2);
  /* fallback ef mynd vantar — lítur út eins og studio bakgrunnur */
  background:
    radial-gradient(120% 80% at 50% 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,.08)),
    linear-gradient(160deg,#ECE7DC,#DBD5C8 55%,#CEC7B9);
}
.stage__img{
  position:absolute; inset:0; z-index:2;     /* yfir placeholder */
  width:100%; height:100%;
  object-fit:cover;                          /* heimildarmynd er 9:16 → engin teyging */
  object-position:center top;
}
.stage__ph{                                  /* sést aðeins ef mynd vantar */
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:rgba(43,41,38,.30); font-weight:600; letter-spacing:.04em;
}
.stage__ph small{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }

.stage__live{
  position:absolute; top:16px; right:16px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 12px; border-radius:var(--pill);
  background:rgba(255,255,255,.94);
  color:var(--ff); font-size:.84rem; font-weight:700; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(43,41,38,.16);
}
.pulse{ width:9px; height:9px; border-radius:50%; background:var(--ff); position:relative; }
.pulse::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--ff);
  animation:pulse 1.8s var(--e-out) infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.6 } 70%,100%{ transform:scale(2.6); opacity:0 } }

/* logo placement marker (valfrjálst per drop) */
.merki{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:3;
  display:flex; align-items:center; gap:10px; color:#fff; pointer-events:none;
}
.merki__ring{
  width:104px; height:104px; border-radius:50%;
  border:2px dashed rgba(255,255,255,.95);
  flex:0 0 auto;
}
.merki__arrow{ width:50px; height:18px; color:#fff; margin-left:-30px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.merki__label{ font-size:.95rem; font-weight:700; line-height:1.15; text-shadow:0 1px 8px rgba(0,0,0,.45); }

.btn--stage{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:4;
  font-size:1.08rem;
}

/* --- RIGHT: panel --- */
.panel{ display:flex; flex-direction:column; gap:18px; }
.card{ border-radius:var(--r-lg); padding:26px 28px; }
.card--ff{ background:var(--ff); color:var(--on-ff); }

.card--countdown{ display:flex; flex-direction:column; gap:10px; }
.countdown{
  font-size:clamp(2rem,3.6vw,3rem);
  font-weight:700; letter-spacing:.005em; line-height:1;
  display:flex; align-items:baseline; gap:.04em;
}
.countdown i{ font-style:normal; opacity:.8; }
.cd-s{ display:inline-block; transform-origin:50% 60%; }
.cd-s.tick{ animation:tick .42s var(--e-out); }
@keyframes tick{ 0%{ transform:scale(1) } 32%{ transform:scale(1.1) } 100%{ transform:scale(1) } }
.card__sub{ font-size:.98rem; color:rgba(255,255,255,.94); }
.card__sub strong{ font-weight:700; color:#fff; }

.card--product{ flex:1; display:flex; flex-direction:column; gap:6px; text-align:center; justify-content:center; padding:30px 28px; }
.card__title{ font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:700; line-height:1.02; letter-spacing:-.015em; }
.card__price{ font-size:clamp(1.35rem,2.6vw,1.8rem); font-weight:700; }
.card__unit{ font-weight:600; }
.card__desc{ margin-top:12px; font-size:1.02rem; line-height:1.5; color:rgba(255,255,255,.95); max-width:28ch; margin-inline:auto; }

/* meta grid — pinned to bottom of column */
.meta{
  margin-top:auto;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.meta li{
  padding:18px 22px;
  display:flex; flex-direction:column; gap:4px;
  border-bottom:1px solid var(--line);
}
.meta li:nth-child(odd){ border-right:1px solid var(--line); }
.meta li:nth-last-child(-n+2){ border-bottom:0; }
.meta span{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.meta strong{ font-size:1.1rem; font-weight:700; color:var(--ink); }

.hero__note{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin-top:26px; font-size:.95rem; color:var(--ink-2);
}
.hero__note-dot{ width:6px; height:6px; border-radius:50%; background:var(--ff); flex:0 0 auto; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{ padding:clamp(36px,5vw,60px) 0; border-top:1px solid var(--line); }
.timeline__head{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.timeline__track{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:8px;
  scroll-snap-type:x proximity; scrollbar-width:thin;
}
.tl-card{
  scroll-snap-align:start; flex:0 0 auto; width:200px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.tl-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.tl-card__wk{ font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.tl-card__name{ margin:8px 0 4px; font-size:1.1rem; font-weight:600; }
.tl-card__price{ font-size:.92rem; color:var(--ff); font-weight:600; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.section-head{
  display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end;
  margin-bottom:clamp(28px,4vw,48px);
}
.section-head__left{ display:flex; flex-direction:column; gap:14px; }
.section-head__right{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }

.how{ padding:clamp(40px,6vw,80px) 0; border-top:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; display:flex; flex-direction:column; gap:12px;
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.step:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.step__num{ font-size:.9rem; font-weight:700; color:var(--ff); }
.step__title{ font-size:1.3rem; font-weight:600; letter-spacing:-.01em; }
.step__body{ color:var(--ink-2); line-height:1.55; }
.step__body strong,.step__body em{ color:var(--ink); font-style:normal; font-weight:600; }
.step__tag{
  margin-top:auto; align-self:flex-start;
  font-size:.78rem; font-weight:600; color:var(--ff);
  background:var(--ff-100); padding:6px 12px; border-radius:var(--pill);
}
.how__rule{ display:flex; align-items:center; gap:18px; margin-top:clamp(32px,4vw,52px); }
.how__rule-line{ flex:1; height:1px; background:var(--line); }
.how__rule-text{ font-size:.92rem; color:var(--ink-3); text-align:center; max-width:48ch; }

/* ============================================================
   CATEGORIES
   ============================================================ */
.categories{ padding:clamp(40px,6vw,80px) 0; border-top:1px solid var(--line); }
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cat{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; min-height:170px;
  display:flex; flex-direction:column;
  color:var(--ink);
  transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out),
             border-color var(--t-base) var(--e-out), background var(--t-base) var(--e-out);
}
.cat:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--ff); }
.cat__num{ font-size:.8rem; font-weight:700; color:var(--ink-3); }
.cat__icon{ margin:14px 0 auto; color:var(--ink-2); transition:color var(--t-base) var(--e-out); }
.cat__icon svg{ width:40px; height:40px; }
.cat:hover .cat__icon{ color:var(--ff); }
.cat__name{ font-size:1.22rem; font-weight:600; letter-spacing:-.01em; }
.cat__count{ font-size:.84rem; color:var(--ink-3); margin-top:2px; }
.cat--accent{ background:var(--ff); border-color:var(--ff); color:#fff; }
.cat--accent .cat__num,
.cat--accent .cat__icon,
.cat--accent .cat__count{ color:rgba(255,255,255,.9); }
.cat--accent:hover{ background:var(--ff-700); border-color:var(--ff-700); }
.cat--accent:hover .cat__icon{ color:#fff; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter{ padding:clamp(20px,3vw,40px) 0 clamp(40px,6vw,80px); }
.newsletter__wrap{
  background:var(--ff); color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(32px,5vw,64px);
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
  box-shadow:var(--sh-ff);
}
.newsletter__copy{ display:flex; flex-direction:column; gap:14px; }
.newsletter__form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.newsletter__form input{
  flex:1 1 220px; min-height:52px; padding:0 18px;
  border-radius:var(--pill); border:0;
  background:#fff; color:var(--ink); font-size:1rem;
  transition:box-shadow var(--t-base) var(--e-out);
}
.newsletter__form input::placeholder{ color:var(--ink-3); }
.newsletter__form input:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.7); }
.newsletter__hint{ flex-basis:100%; font-size:.86rem; color:rgba(255,255,255,.9); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); padding:clamp(40px,5vw,64px) 0 32px; }
.footer-wrap{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.footer-col h4{ font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:9px; }
.footer-col a{ color:var(--ink-2); transition:color var(--t-base) var(--e-out); }
.footer-col a:hover{ color:var(--ff); }
.footer-col p{ color:var(--ink-2); }
.footer-logo{ height:26px; width:auto; margin-bottom:14px; }
.footer-tagline{ color:var(--ink-2); max-width:38ch; line-height:1.55; }
.footer-social{ display:flex; gap:16px; margin-top:16px; }
.footer-social a{ font-size:.9rem; font-weight:600; color:var(--ink); }
.footer-social a:hover{ color:var(--ff); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--ink-3);
}
.footer-bottom a{ color:var(--ink-2); }
.footer-bottom a:hover{ color:var(--ff); }

/* ============================================================
   REVEAL (scroll-in) — staggered
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--t-rev) var(--e-out), transform var(--t-rev) var(--e-out);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* stagger children of key groups */
.steps.is-in .step,
.cat-grid.is-in .cat,
.panel-stagger.is-in > *{
  opacity:0; transform:translateY(16px);
  animation:rise var(--t-rev) var(--e-out) forwards;
}
.steps.is-in .step:nth-child(1){ animation-delay:.04s }
.steps.is-in .step:nth-child(2){ animation-delay:.10s }
.steps.is-in .step:nth-child(3){ animation-delay:.16s }
.cat-grid.is-in .cat:nth-child(1){ animation-delay:.02s }
.cat-grid.is-in .cat:nth-child(2){ animation-delay:.06s }
.cat-grid.is-in .cat:nth-child(3){ animation-delay:.10s }
.cat-grid.is-in .cat:nth-child(4){ animation-delay:.14s }
.cat-grid.is-in .cat:nth-child(5){ animation-delay:.18s }
.cat-grid.is-in .cat:nth-child(6){ animation-delay:.22s }
.cat-grid.is-in .cat:nth-child(7){ animation-delay:.26s }
.cat-grid.is-in .cat:nth-child(8){ animation-delay:.30s }
@keyframes rise{ to{ opacity:1; transform:none } }

/* hero panel cards rise in sequence on first load */
.hero__grid.is-in .ghost-card{ animation:rise var(--t-rev) var(--e-out) .04s both; }
.hero__grid.is-in .stage{ animation:rise var(--t-rev) var(--e-out) .10s both; }
.hero__grid.is-in .panel > *{ opacity:0; animation:rise var(--t-rev) var(--e-out) both; }
.hero__grid.is-in .panel > *:nth-child(1){ animation-delay:.16s }
.hero__grid.is-in .panel > *:nth-child(2){ animation-delay:.22s }
.hero__grid.is-in .panel > *:nth-child(3){ animation-delay:.28s }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr 1fr; }
  .ghost-card{ order:3; min-height:180px; }
  .stage{ order:1; grid-column:1 / -1; max-width:640px; margin-inline:auto; width:100%; }
  .panel{ order:2; }
  .cat-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-wrap{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav{ display:none; }
  .hero__grid{ grid-template-columns:1fr; }
  .panel{ order:2; }
  .ghost-card{ order:3; }
  .section-head{ grid-template-columns:1fr; gap:18px; }
  .steps{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .newsletter__wrap{ grid-template-columns:1fr; gap:24px; }
  .footer-wrap{ grid-template-columns:1fr 1fr; gap:24px; }
  .footer-col--brand{ grid-column:1 / -1; }
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; align-items:center; }
}
@media (max-width:420px){
  .cat-grid{ grid-template-columns:1fr; }
  .meta strong{ font-size:1rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  [data-reveal]{ opacity:1!important; transform:none!important; }
  .hero__grid.is-in *,.steps.is-in .step,.cat-grid.is-in .cat,.panel > *{ opacity:1!important; transform:none!important; animation:none!important; }
  .pulse::after{ display:none; }
}

/* ============================================================
   v8 — SKORTUR & EFTIRVÆNTING
   ============================================================ */

/* phase-lína efst í countdown-korti */
.card__phase{
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.95);
}
.pulse--light{ background:#fff; }
.pulse--light::after{ background:#fff; }

/* vikuglugginn: progress bar */
.window{
  height:6px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.28);
}
.window__bar{
  display:block; height:100%; width:0%;
  background:#fff; border-radius:99px;
  transition:width .6s var(--e-out);
}
.window__label{ font-size:.82rem; color:rgba(255,255,255,.92); }

/* urgency: síðasti sólarhringurinn */
.card--countdown.is-urgent{
  background:var(--ff-700);
  animation:urgent-glow 1.8s ease-in-out infinite;
}
@keyframes urgent-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(237,79,79,.0); }
  50%{ box-shadow:0 0 0 7px rgba(237,79,79,.22); }
}
@media (prefers-reduced-motion: reduce){
  .card--countdown.is-urgent{ animation:none; }
}

/* næsta tilboð — eftirvæntingarkort í panel */
.card--next{
  background:var(--ff-100);
  border-left:4px solid var(--ff);
  padding:18px 22px;
  display:flex; flex-direction:column; gap:4px;
}
.card--next__eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ff-700);
}
.card--next__date{ font-size:1.06rem; font-weight:700; color:var(--ink); }
.card--next__hint{ font-size:.88rem; color:var(--ink-2); }
.card--next__hint a{ font-weight:700; color:var(--ff-700); text-decoration:underline; text-underline-offset:3px; }

/* lokað state: FARIÐ yfir gluggann */
.stage__closed{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(43,41,38,.66); backdrop-filter:blur(3px);
  color:#fff; text-align:center; padding:24px;
  border-radius:inherit;
}
.stage__closed[hidden]{ display:none; }
.stage__closed-badge{
  display:inline-block; transform:rotate(-7deg);
  border:3px solid #fff; border-radius:10px;
  padding:8px 20px;
  font-size:1.5rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.stage__closed p{ font-size:1.05rem; line-height:1.45; max-width:24ch; }
.stage__closed strong{ font-weight:800; }

body.is-closed .merki{ display:none; }
body.is-closed .btn--stage{ z-index:6; }
body.is-closed .stage__live{ color:var(--ink-3); }

/* timeline: farið — kemur aldrei aftur */
.tl-card--gone .tl-card__price{ text-decoration:line-through; opacity:.55; }
.tl-card__gone{
  display:block;
  margin-top:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ff-700);
}

/* ============================================================
   v9 — FJÁRFESTA-ÚTGÁFA: liðin tilboð, pöntun, takk
   ============================================================ */

/* ---------- LIÐIN TILBOÐ (tilbod.html) ---------- */
.archive-page{ padding: clamp(40px,7vw,90px) 0 clamp(60px,9vw,120px); }
.archive-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(16px,2.4vw,28px);
  margin-top: clamp(28px,4vw,48px);
}
.arch-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.arch-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.arch-card__media{
  position:relative; margin:0; aspect-ratio:9/12; overflow:hidden;
  background:var(--paper-2);
}
.arch-card__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(.96);
}
.arch-card__ph{
  display:grid; place-items:center; height:100%;
  font-weight:700; letter-spacing:.04em; color:var(--ink-3);
}
.arch-card__gone{
  position:absolute; top:12px; left:12px;
  padding:5px 12px; border-radius:var(--pill);
  background:var(--ink); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.arch-card__body{ padding:16px 18px 18px; }
.arch-card__wk{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3);
}
.arch-card__name{ margin-top:4px; font-size:1.05rem; font-weight:700; }
.arch-card__prices{ margin-top:6px; font-variant-numeric:tabular-nums; }
.arch-card__prices s{ color:var(--ink-3); margin-left:8px; font-weight:400; }
.arch-card__note{
  display:block; margin-top:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ff-700);
}

/* ---------- STEP STRIP (pontun.html) ---------- */
.step-strip{ border-bottom:1px solid var(--line); background:var(--paper-2); }
.step-strip__wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0; flex-wrap:wrap;
}
.step-strip__crumb{ font-size:.85rem; color:var(--ink-2); }
.step-strip__crumb a{ border-bottom:1px solid var(--line-2); }
.step-strip__progress{ display:flex; gap:18px; }
.step-strip__progress li{
  display:flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:600; color:var(--ink-3);
  letter-spacing:.03em; text-transform:uppercase;
}
.step-strip__progress li span{
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line-2);
  font-size:.68rem; font-variant-numeric:tabular-nums;
}
.step-strip__progress li.is-active{ color:var(--ink); }
.step-strip__progress li.is-active span{ background:var(--ff); border-color:var(--ff); color:#fff; }

/* ---------- PÖNTUN LAYOUT ---------- */
.pontun{ padding: clamp(36px,6vw,72px) 0 clamp(60px,9vw,110px); }
.pontun__wrap{
  display:grid; grid-template-columns:minmax(0,1fr) 380px;
  gap: clamp(24px,4vw,56px); align-items:start;
}
@media (max-width: 960px){
  .pontun__wrap{ grid-template-columns:1fr; }
  .pontun-summary{ order:-1; }
}
.pontun-form__head{ margin-bottom:clamp(24px,4vw,40px); }
.pontun-form__head .lede{ margin-top:10px; max-width:56ch; }

.form-section{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card);
  padding: clamp(18px,3vw,28px);
  margin:0 0 18px;
}
.form-section__legend{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.02em;
  padding:0 8px; margin-left:-8px;
}
.form-section__legend span{
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--ff-100); color:var(--ff-700);
  font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.field-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 16px; margin-top:14px;
}
@media (max-width: 640px){ .field-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--span-2{ grid-column:1 / -1; }
.field__label{ font-size:.8rem; font-weight:600; color:var(--ink-2); }
.field input, .field select, .field textarea{
  font:inherit; color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:12px 14px; min-height:44px;
  transition: border-color var(--t-micro), box-shadow var(--t-micro);
}
.field textarea{ resize:vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--ff);
  box-shadow:0 0 0 3px var(--ff-100);
}
.field__hint{ font-size:.78rem; color:var(--ink-3); }
.field__hint a{ border-bottom:1px solid var(--line-2); }

/* magn */
.qty-input{ display:flex; gap:8px; align-items:stretch; }
.qty-input input{ width:110px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.qty-btn{
  min-width:44px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--card); font-weight:700; font-variant-numeric:tabular-nums;
  transition: background var(--t-micro), border-color var(--t-micro);
}
.qty-btn:hover{ background:var(--ff-100); border-color:var(--ff); color:var(--ff-700); }

/* afhending */
.delivery-toggle{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px; margin-top:14px;
}
@media (max-width: 640px){ .delivery-toggle{ grid-template-columns:1fr; } }
.delivery-opt input{ position:absolute; opacity:0; pointer-events:none; }
.delivery-opt__inner{
  display:flex; flex-direction:column; gap:4px;
  border:1.5px solid var(--line-2); border-radius:var(--r);
  padding:16px; height:100%; cursor:pointer;
  transition: border-color var(--t-micro), background var(--t-micro), box-shadow var(--t-micro);
}
.delivery-opt input:checked + .delivery-opt__inner{
  border-color:var(--ff); background:var(--ff-100)33;
  box-shadow:0 0 0 3px var(--ff-100);
}
.delivery-opt input:focus-visible + .delivery-opt__inner{ outline:2px solid var(--ff); outline-offset:2px; }
.delivery-opt__icon{ color:var(--ff-700); width:32px; }
.delivery-opt__title{ font-weight:700; }
.delivery-opt__sub{ font-size:.8rem; color:var(--ink-2); }

/* ---------- PÖNTUN SUMMARY ---------- */
.pontun-summary__sticky{ position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }
.summary-card{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--card); box-shadow:var(--sh-1);
}
.summary-card__media{
  position:relative; aspect-ratio:9/10;
  background:linear-gradient(160deg, var(--ff) 0%, var(--ff-700) 100%);
  background-size:cover; background-position:center;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:16px; color:#fff;
}
.summary-card__media.has-img .summary-card__brand,
.summary-card__media.has-img .summary-card__week{ text-shadow:0 1px 8px rgba(0,0,0,.35); }
.summary-card__brand{ font-weight:800; letter-spacing:.02em; }
.summary-card__week{
  position:absolute; top:16px; right:16px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.summary-card__live{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:var(--pill);
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.summary-card__body{ padding:16px 18px 18px; }
.summary-card__kicker{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3);
}
.summary-card__title{ margin-top:4px; font-size:1.2rem; font-weight:800; }
.summary-card__meta{ margin-top:4px; font-size:.85rem; color:var(--ink-2); }

.summary-lines{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); padding:6px 18px;
}
.summary-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 0; border-bottom:1px dashed var(--line);
  font-size:.92rem; font-variant-numeric:tabular-nums;
}
.summary-line:last-child{ border-bottom:0; }
.summary-line--mute{ color:var(--ink-3); }
.summary-line--total strong{ font-size:1.05rem; }
.summary-line--grand{ border-top:2px solid var(--ink); border-bottom:0; }
.summary-line--grand strong{ font-size:1.3rem; font-weight:800; color:var(--ff-700); }
.btn--block{ width:100%; justify-content:center; }
.pontun-summary__hint{ font-size:.82rem; color:var(--ink-2); text-align:center; }
.pontun-summary__bullets{ display:flex; flex-direction:column; gap:6px; }
.pontun-summary__bullets li{
  position:relative; padding-left:18px; font-size:.82rem; color:var(--ink-2);
}
.pontun-summary__bullets li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:8px; height:8px; border-radius:50%; background:var(--ff);
}

/* mobile CTA */
.pontun-mobile-cta{
  display:none; align-items:center; justify-content:space-between; gap:14px;
  margin-top:6px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
}
.pontun-mobile-cta__total{ display:flex; flex-direction:column; }
.pontun-mobile-cta__total em{ font-style:normal; font-weight:800; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.pontun-mobile-cta__total small{ color:var(--ink-3); font-variant-numeric:tabular-nums; }
@media (max-width: 960px){
  .pontun-mobile-cta{ display:flex; }
  .pontun-summary__cta{ display:none; }
}

/* lokað gate */
.pontun-closed{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  border:1.5px solid var(--ink); border-radius:var(--r-lg);
  background:var(--card); padding:clamp(20px,3.5vw,32px);
  margin-bottom:24px;
}
.pontun-closed__badge{
  padding:6px 14px; border-radius:var(--pill);
  background:var(--ink); color:#fff;
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.pontun-closed h2{ font-size:1.4rem; font-weight:800; }
.pontun-closed p{ color:var(--ink-2); max-width:52ch; }
.pontun-form.is-closed{ opacity:.45; pointer-events:none; filter:grayscale(.4); }
.adm-msg, .pontun-msg{
  padding:12px 16px; border-radius:var(--r-sm);
  background:var(--ff-100); color:var(--ff-700); font-weight:600;
}

/* ---------- TAKK ---------- */
.takk-section{ padding: clamp(48px,8vw,100px) 0 clamp(70px,10vw,130px); }
.takk-wrap{ position:relative; max-width:820px; }
.takk__stamp{
  position:absolute; right:0; top:-10px;
  display:flex; flex-direction:column; align-items:center;
  padding:16px 18px; border:2.5px solid var(--ff);
  border-radius:var(--r); color:var(--ff-700);
  transform:rotate(7deg);
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.takk__stamp-line{ font-size:.62rem; }
.takk__stamp-big{ font-size:1.5rem; letter-spacing:.06em; }
@media (max-width: 720px){ .takk__stamp{ display:none; } }
.takk__lead{ margin-top:14px; max-width:56ch; color:var(--ink-2); font-size:1.05rem; }
.takk__order-card{
  margin-top:clamp(24px,4vw,40px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--card); box-shadow:var(--sh-1);
  padding:clamp(18px,3vw,28px);
}
.takk__order-row--big{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-bottom:16px; border-bottom:2px solid var(--ink); }
.takk__order-row--big .oc-value{ font-size:1.4rem; font-weight:800; color:var(--ff-700); }
.takk__order-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px 24px; margin-top:16px;
}
@media (max-width: 640px){ .takk__order-grid{ grid-template-columns:1fr; } }
.takk__order-row--full{ grid-column:1 / -1; }
.oc-label{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.oc-value{ margin-top:2px; font-weight:600; }
.mono{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.takk__steps{ margin-top:clamp(28px,5vw,48px); }
.takk__steps-title{ font-size:1.1rem; font-weight:800; margin-bottom:14px; }
.status-steps{ display:flex; flex-direction:column; gap:0; }
.status-step{
  position:relative; display:flex; gap:16px;
  padding:16px 0 16px; border-bottom:1px dashed var(--line);
}
.status-step__num{
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--line-2); color:var(--ink-3);
  font-size:.75rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.status-step h3{ font-size:.98rem; font-weight:700; }
.status-step p{ margin-top:2px; font-size:.88rem; color:var(--ink-2); max-width:58ch; }
.status-step--done .status-step__num{ background:var(--ink); border-color:var(--ink); color:#fff; }
.status-step--current .status-step__num{ background:var(--ff); border-color:var(--ff); color:#fff; }
.takk__actions{ margin-top:clamp(28px,5vw,44px); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.takk__hint{ width:100%; margin-top:8px; font-size:.85rem; color:var(--ink-2); }
.takk__hint a{ border-bottom:1px solid var(--line-2); }
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:#000; }