:root {
  --ink: #111;
  --paper: #fff;
  --muted-bg: #f2f2f2;
  --gold: oklch(0.86 0.13 85);
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(56px, 8vw, 112px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { opacity: .7; }

html { scroll-behavior: smooth; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 16px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.btn-sm { padding: 12px 20px; font-size: 15px; flex: none; }
.btn-lg { padding: 18px 28px; font-size: 17px; font-weight: 700; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-outline { padding: 14px 22px; border: 2px solid var(--ink); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-outline-light { color: #fff; padding: 16px 26px; border: 2px solid #fff; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row.center { align-items: center; }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px var(--gutter);
  flex-wrap: wrap;
}
.logo { font-weight: 800; letter-spacing: .06em; font-size: 20px; }
.spacer { flex: 1; }
.nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; flex-wrap: wrap; }

/* Hero */
.hero {
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 32px;
  align-items: end;
}
.hero h1 {
  margin: 0;
  font-size: clamp(64px, 10vw, 168px);
  line-height: .84;
  letter-spacing: -.06em;
  font-weight: 800;
}
.hero-side { display: flex; flex-direction: column; gap: 22px; max-width: 480px; }
.hero-side p {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  font-weight: 500;
  text-wrap: pretty;
}

/* Layers (accordion bands) */
.layers { display: flex; flex-direction: column; }
.layer {
  cursor: pointer;
  padding: 0 var(--gutter);
  transition: padding .35s var(--ease);
}
.layer:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.layer-row {
  display: grid;
  grid-template-columns: clamp(36px, 5vw, 72px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: clamp(16px, 1.8vw, 24px) 0;
}
.layer-n { font-size: 15px; font-weight: 700; }
.layer-name {
  font-size: clamp(24px, 3.4vw, 52px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
}
.layer-icon { font-size: clamp(22px, 2.4vw, 34px); font-weight: 500; }
.layer-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  padding: 0 0 clamp(24px, 3vw, 40px) clamp(52px, calc(5vw + 16px), 88px);
}
.layer-body p {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
  font-weight: 500;
  max-width: 480px;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-content: flex-start; }
.chip-dark {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}

/* Container */
.container { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-pad) 0; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.full { grid-column: 1 / -1; margin-bottom: 24px; }

.h2 {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 800;
}
.h2.narrow { max-width: 900px; }

/* Logos */
.logos {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
  padding: 40px 0;
}
.logos-label { font-size: 14px; font-weight: 700; }
.logo-ph {
  width: 112px;
  height: 36px;
  border-radius: 8px;
  background: var(--muted-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  letter-spacing: .06em;
}

/* Compare cards */
.card {
  border-radius: 28px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 320px;
}
.card-muted { background: var(--muted-bg); }
.card-dark { background: var(--ink); color: #fff; }
.card-label { font-size: 15px; font-weight: 700; }
.big-num {
  font-size: clamp(96px, 12vw, 180px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
}
.big-num.muted { color: #bbb; }
.big-num.gold { color: var(--gold); }
.vendor-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.vendor {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 2px solid #ccc;
  color: #777;
}
.card-foot { margin-top: auto; font-size: 18px; font-weight: 500; line-height: 1.45; }

/* Pillars: bento with animated icons */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.pillar {
  grid-column: span 7;
  border-radius: 28px;
  padding: 16px;
  display: flex;
  gap: 16px;
  min-height: 460px;
}
.pillar.narrow { grid-column: span 5; }
.pillar-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pillar-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pillar-t, .pillar-d { margin: 0; }
.pillar-t { font-size: clamp(40px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.06em; line-height: .88; }
.pillar-d { font-size: 18px; font-weight: 500; line-height: 1.45; max-width: 380px; }
.pillar-chips { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.pillar-chips span {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
}
.stage {
  flex: 0 0 40%;
  min-height: 280px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stage svg { width: min(170px, 80%); height: auto; }

@media (max-width: 960px) {
  .pillar, .pillar.narrow { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pillar { flex-direction: column; min-height: 0; }
  .stage { order: -1; flex: none; min-height: 0; height: 220px; }
}

/* Icon motion */
.ic * { transform-box: fill-box; transform-origin: center; }
.ic { transition: transform .6s var(--ease); }
.pillar:hover .ic { transform: scale(1.07) rotate(-4deg); }
.b-l { animation: bl 2.6s cubic-bezier(.6, 0, .2, 1) infinite; }
.b-r { animation: br 2.6s cubic-bezier(.6, 0, .2, 1) infinite; }
.b-s { animation: bs 2.6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes bl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.6px); } }
@keyframes br { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.6px); } }
@keyframes bs { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
.led { animation: blink 1.4s steps(1) infinite; }
.led-2 { animation-delay: .7s; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: .12; } }
.flow { stroke-dasharray: 2 2; animation: flow .9s linear infinite; }
.flow-2 { animation-direction: reverse; }
@keyframes flow { to { stroke-dashoffset: -4; } }
.bolt { stroke-dasharray: 100 100; animation: draw 2.8s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes draw { 0% { stroke-dashoffset: 100; } 45%, 62% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.bolt-fill { animation: flash 2.8s ease-out infinite; }
@keyframes flash { 0%, 42% { opacity: 0; } 50% { opacity: 1; } 68%, 100% { opacity: 0; } }
.trend { stroke-dasharray: 100 100; animation: trend 3.2s ease-in-out infinite; }
@keyframes trend { 0% { stroke-dashoffset: 100; opacity: 1; } 55%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.arrow { animation: arrow 3.2s ease-in-out infinite; }
@keyframes arrow { 0%, 45% { opacity: 0; transform: translate(-1.5px, 1.5px); } 58%, 85% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ic, .ic * { animation: none !important; transition: none !important; }
  .trend, .bolt { stroke-dasharray: none; }
  .bolt-fill { opacity: 0; }
  .arrow { opacity: 1; }
}

/* Work */
.work-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  flex-wrap: wrap;
}
.underline-link { font-size: 16px; font-weight: 600; border-bottom: 2px solid var(--ink); }
.work-card { display: flex; flex-direction: column; gap: 14px; }
.work-img {
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background: repeating-linear-gradient(135deg, #f2f2f2 0 10px, #eaeaea 10px 20px);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #888;
}
.work-img.has-img { padding: 0; overflow: hidden; background: var(--muted-bg); }
.work-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform .5s var(--ease);
}
.work-card:hover { opacity: 1; }
.work-card:hover .work-img img { transform: scale(1.03); }
.work-img.work-cta {
  background: var(--ink);
  color: var(--gold);
  align-items: center;
  justify-content: center;
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 800;
  letter-spacing: 0;
}
.work-arrow { font-weight: 500; }
.work-desc { font-size: 16px; font-weight: 500; line-height: 1.45; color: #555; margin-top: -6px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.work-name { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }

/* Models */
.model {
  border-radius: 28px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
}
.model-tag { font-size: 14px; font-weight: 700; opacity: .7; }
.model-t { font-size: clamp(34px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.model p { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 500; opacity: .8; }
.model .btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
}

/* Quote */
.quote {
  margin: clamp(24px, 4vw, 56px) 0;
  border-radius: 36px;
  padding: clamp(40px, 6vw, 88px);
  background: var(--gold);
}
.quote p {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 700;
  max-width: 1000px;
  text-wrap: pretty;
}
.quote-by { margin-top: 32px; font-size: 16px; font-weight: 600; }

/* CTA */
.cta {
  border-radius: 36px;
  padding: clamp(40px, 7vw, 104px) clamp(24px, 5vw, 72px);
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cta h2 {
  margin: 0;
  font-size: clamp(56px, 8.4vw, 140px);
  line-height: .86;
  letter-spacing: -.06em;
  font-weight: 800;
  max-width: 1100px;
}
.whatsapp {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  margin-left: 8px;
  border-bottom: 2px solid #fff;
}

/* Footer */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 40px 0 48px;
  font-size: 15px;
  font-weight: 500;
  color: #666;
}
.site-footer b { color: var(--ink); font-weight: 800; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: #666; }