:root {
  --accent: #e5a158;
  --bg: #0d0f14;
  --bg-soft: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.1);
  --text: #f5f5f5;
  --text-muted: rgba(245, 245, 245, 0.65);
}

* {
  box-sizing: border-box;
}

/* i18n: content is duplicated per-language in the markup; only the active
   language's blocks are shown. Defaults to English before i18n.js runs. */
:root:not([data-lang]) .is,
:root[data-lang="en"] .is {
  display: none;
}
:root[data-lang="is"] .en {
  display: none;
}

.lang-switch {
  display: inline-flex;
  gap: 4px;
  margin-left: 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.lang-switch button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.lang-switch button.active {
  background: var(--accent);
  color: #fff;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

header.site {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

header.site nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

header.site a.brand {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

header.site a.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  margin-left: 20px;
}

main {
  padding: 64px 0;
}

h1 {
  font-size: 2.4rem;
  margin: 0 0 16px;
}

h2 {
  font-size: 1.6rem;
  margin: 48px 0 16px;
}

p.lead {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 640px;
}

.card {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  overflow: hidden;
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  color: var(--text-muted);
  margin: 0 0 16px;
}

.card-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin: -24px -24px 20px;
  width: calc(100% + 48px);
  display: block;
}

.product-cover {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  margin-bottom: 32px;
}

/* Cross-promo banner that sits above the site header, ahead of everything
   else on the page. Deliberately large — it is an advert, not an
   announcement strip. The whole block is one link, so there is no small
   target to hit. Placeholder copy: swap the text and drop an image in as
   .promo-banner-img when the real artwork exists. */
.promo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: clamp(200px, 26vw, 340px);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(80% 140% at 80% 0%, rgba(229, 161, 88, 0.35) 0%, rgba(13, 15, 20, 0) 65%),
    linear-gradient(120deg, #16202a 0%, #0f1319 100%);
}

.promo-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.promo-banner-inner {
  position: relative;
  max-width: 860px;
  padding: 40px 24px;
  text-align: center;
}

.promo-banner-eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.promo-banner h2 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.15;
}

.promo-banner p {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

/* Looks like .btn but is not one — the parent <a> carries the navigation, so
   a nested link here would be invalid markup. */
.promo-banner-cta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
}

.promo-banner:hover .promo-banner-cta {
  filter: brightness(1.08);
}

/* Full-bleed banner band at the top of a page, above the .wrap content.
   .banner-img is an optional photo layer; the accent gradient underneath means
   the band still reads as a banner if the photo is missing or slow to load. */
.banner {
  position: relative;
  width: 100%;
  min-height: clamp(240px, 38vw, 420px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(90% 120% at 20% 0%, rgba(229, 161, 88, 0.28) 0%, rgba(13, 15, 20, 0) 70%),
    linear-gradient(160deg, #1a1d26 0%, var(--bg) 100%);
}

.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* Keeps the title legible over any photo. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 15, 20, 0.92) 0%, rgba(13, 15, 20, 0.35) 55%, rgba(13, 15, 20, 0.1) 100%);
}

.banner-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 24px 40px;
}

.banner-eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.banner h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
}

.banner-tagline {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 540px;
}

/* Alternating image/text rows. Odd rows read image -> text, even rows read
   text -> image. On narrow screens every row collapses to image-above-text. */
.features {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 24px;
}

.feature-row:nth-of-type(even) .feature-media {
  order: 2;
}

/* If the image fails to load the row collapses to a single column rather than
   leaving an empty half. See the onerror handler on .feature-media. */
.feature-row.no-media {
  grid-template-columns: 1fr;
}

.feature-row.no-media .feature-media {
  display: none;
}

.feature-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  display: block;
}

.feature-body h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
}

.feature-body p {
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-row:nth-of-type(even) .feature-media {
    order: 0;
  }
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 0 12px;
}

/* Original price next to the pre-sale one, so the discount is legible without
   a second sentence explaining it. */
.price-was {
  color: var(--text-muted);
  text-decoration: line-through;
  margin-right: 6px;
}

.price {
  color: var(--accent);
  font-weight: 700;
}

.status-msg {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.status-msg.is-error {
  color: #ff8f8f;
}

.form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.form label {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.form input,
.form textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  width: 100%;
}

.form textarea {
  resize: vertical;
  min-height: 140px;
}

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(229, 161, 88, 0.18);
}

/* Off-screen rather than display:none — bots that skip hidden inputs still
   fill this one in, which is the point. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.profile-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}

.profile-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  box-shadow: 0 0 32px rgba(229, 161, 88, 0.25);
  flex-shrink: 0;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.btn-outline {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 8px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.btn-outline:hover {
  opacity: 0.8;
}

/* Landing page only: the name and socials stacked and centred, rather than the
   photo-beside-text arrangement .profile-hero uses on the inner pages. */
.intro {
  text-align: center;
  margin: 48px 0 56px;
}

.intro h1 {
  margin: 0 0 20px;
}

.intro .profile-photo {
  margin-bottom: 24px;
}

/* Blurb under the landing-page heading: narrower than the page so it reads as
   a single centred column rather than a full-width paragraph. */
.intro-blurb {
  max-width: 560px;
  margin: 0 auto 24px;
  color: var(--text-muted);
}

.intro .social-links {
  justify-content: center;
}

/* The two doors off the landing page. One column on phones, side by side from
   640px up. Each tile is one whole link, so there is no small target to hit. */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 64px;
}

@media (min-width: 640px) {
  .tiles {
    grid-template-columns: 1fr 1fr;
  }
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(160px, 24vw, 240px);
  padding: 32px 24px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(229, 161, 88, 0.18) 0%, rgba(13, 15, 20, 0) 70%),
    var(--bg-soft);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tile h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}

.tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Honour a reduced-motion preference: keep the border cue, drop the lift. */
@media (prefers-reduced-motion: reduce) {
  .tile {
    transition: border-color 0.15s ease;
  }

  .tile:hover {
    transform: none;
  }
}

.highlight {
  color: var(--accent);
  font-weight: 700;
}

footer {
  padding: 32px 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
}