/* FinnPrints3D site. Colours are sampled from the FinnPrints3D logo. */

@font-face { font-family: Outfit; src: url(../fonts/Outfit-Light.ttf) format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: Outfit; src: url(../fonts/Outfit-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Outfit; src: url(../fonts/Outfit-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Outfit; src: url(../fonts/Outfit-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --phi: 1.618;
  /* Spacing steps, each φ times the last. */
  --s1: 0.382rem;
  --s2: 0.618rem;
  --s3: 1rem;
  --s4: 1.618rem;
  --s5: 2.618rem;
  --s6: 4.236rem;
  --s7: 6.854rem;

  /* Logo colours: the P (steel blue), the bar and "3D" (mint), the wordmark (grey). */
  --brand: #6d9eaf;
  --mint: #77c4a4;
  --grey: #58595b;
  /* Deeper shades of the same hues, for buttons and small text that need contrast. */
  --brand-deep: #355f6e;
  --mint-deep: #2f7a5c;
  --star: #f1a81c;

  --paper: #f7f9f9;
  --paper-2: #ebf2f1;
  --mint-wash: #e3f3ec;
  --ink: #2f3133;
  --ink-soft: var(--grey);
  --line: #d8e3e3;

  --radius: 1rem;
  --measure: 34rem;
  --shadow: 0 0.618rem 1.618rem rgb(53 95 110 / 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.gsap { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.618 Outfit, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--brand-deep); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-weight: 500; line-height: 1.1; margin: 0 0 var(--s3); color: var(--grey); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.618rem); }
p { margin: 0 0 var(--s3); }

section { padding: var(--s7) max(1rem, 6vw); position: relative; }

.eyebrow { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-deep); font-size: 0.875rem; }
.stars { color: var(--star); letter-spacing: 0.1em; font-size: 1.236rem; }

/* Buttons */
.btn {
  display: inline-block;
  padding: var(--s2) var(--s4);
  border-radius: 999px;
  background: var(--brand-deep);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 0.382rem 1rem rgb(53 95 110 / 0.28);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s, background 0.3s, color 0.3s;
}
.btn:hover { transform: translateY(-2px); background: var(--mint-deep); box-shadow: 0 0.618rem 1.618rem rgb(47 122 92 / 0.32); }
.btn-ghost { background: transparent; color: var(--brand-deep); box-shadow: inset 0 0 0 2px var(--brand); }
.btn-ghost:hover { background: var(--brand-deep); color: #fff; box-shadow: inset 0 0 0 2px var(--brand-deep); }
.btn-small { padding: var(--s1) var(--s3); font-size: 0.9375rem; }

/* Header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) max(1rem, 6vw);
  background: rgb(247 249 249 / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.top.scrolled { border-color: var(--line); box-shadow: 0 2px 1rem rgb(53 95 110 / 0.06); }
.brand-logo { height: 2.618rem; width: auto; }
.nav { display: flex; align-items: center; gap: var(--s4); }
.nav a:not(.btn) { color: var(--grey); text-decoration: none; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--brand-deep); }
@media (max-width: 760px) {
  .nav a:not(.btn) { display: none; }
  .brand-logo { height: 1.618rem; }
}

/* Hero */
.hero {
  min-height: 100svh;
  display: grid; grid-template-columns: 1.618fr 1fr; align-items: center; gap: var(--s5);
  padding-top: var(--s7);
  background:
    radial-gradient(60rem 30rem at 85% 30%, rgb(109 158 175 / 0.16), transparent 70%),
    radial-gradient(40rem 24rem at 10% 90%, rgb(119 196 164 / 0.16), transparent 70%);
}
.hero h1 { font-size: clamp(3rem, 9vw, 6.854rem); }
.three-d { color: var(--mint); }
.lede { font-size: 1.236rem; max-width: var(--measure); color: var(--ink-soft); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0; }
.rating { display: flex; align-items: center; gap: var(--s2); color: var(--ink-soft); }
.rating b { color: var(--ink); font-weight: 600; }

/* The printer: 18 layers, a bed, and a nozzle on a gantry. */
.printer { position: relative; width: min(100%, 22rem); aspect-ratio: 1 / 1.236; justify-self: center; }
.bed { position: absolute; left: 0; right: 0; bottom: 0; height: 0.618rem; border-radius: 0.382rem; background: var(--grey); }
.layers { position: absolute; left: 0; right: 0; bottom: 0.618rem; display: flex; flex-direction: column-reverse; align-items: center; }
.layer { height: 0.85rem; border-radius: 0.5rem; margin-top: 1px; background: var(--brand); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.1); transform-origin: center; }
.layer:nth-child(3n) { background: color-mix(in srgb, var(--brand) 84%, white); }
.layer.top-band { background: var(--mint); }
.gantry { position: absolute; left: -6%; right: -6%; top: 0; height: 0.618rem; border-radius: 0.382rem; background: var(--grey); }
.nozzle {
  position: absolute; top: 0.382rem; left: 50%; width: 1.618rem; height: 1.618rem; margin-left: -0.809rem;
  background: var(--grey); clip-path: polygon(0 0, 100% 0, 100% 55%, 62% 100%, 38% 100%, 0 55%);
}

/* Product */
.product {
  display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s6); align-items: center;
  background: var(--paper-2);
}
/* On wide screens the photos stay in view while the longer text scrolls past. */
@media (min-width: 861px) {
  .product { align-items: start; }
  .gallery { position: sticky; top: var(--s7); }
}
.photo { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 1588 / 1058; background: #eceeed; }
.photo-main { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.thumbs { display: flex; gap: var(--s3); margin-top: var(--s3); }
.thumb {
  flex: 1; padding: 0; border: 0; cursor: pointer; background: none;
  border-radius: calc(var(--radius) * 0.618); overflow: hidden;
  outline: 2px solid transparent; outline-offset: 3px; opacity: 0.618;
  transition: opacity 0.4s, outline-color 0.4s;
}
.thumb:hover, .thumb.is-on { opacity: 1; }
.thumb.is-on { outline-color: var(--mint); }
.thumb:focus-visible { outline-color: var(--brand-deep); }
.product-text { max-width: var(--measure); }
.product h2 { margin-bottom: var(--s1); }
.fits { color: var(--ink-soft); font-size: 1.1rem; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); color: var(--ink-soft); font-size: 0.9375rem; }
.price { font-size: 1.618rem; font-weight: 600; color: var(--brand-deep); }
.maker { margin: 0 0 var(--s4); padding: var(--s2) 0 var(--s2) var(--s4); border-left: 3px solid var(--mint); font-style: italic; color: var(--ink); }
.maker p { margin-bottom: var(--s1); }
.maker footer { font-style: normal; font-size: 0.875rem; color: var(--ink-soft); font-weight: 500; }
.points { padding: 0; margin: 0 0 var(--s4); list-style: none; }
.points li { position: relative; padding-left: var(--s4); margin-bottom: var(--s2); color: var(--ink-soft); }
/* Each bullet is the logo's slanted mint bar. */
.points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 1rem; height: 0.382rem;
  background: var(--mint); transform: skewX(-28deg);
}

/* Reviews: speech bubbles that slide in from alternating sides. */
.reviews { overflow: hidden; text-align: center; }
.sub { color: var(--ink-soft); display: flex; align-items: center; justify-content: center; gap: var(--s2); flex-wrap: wrap; }
.bubbles { display: flex; flex-direction: column; gap: var(--s5); margin: var(--s6) auto var(--s6); max-width: 64rem; }
.bubble {
  --bg: #fff;
  position: relative; text-align: left; margin: 0;
  width: min(100%, 30rem);
  padding: var(--s4) var(--s4) var(--s3);
  border-radius: 1.618rem;
  background: var(--bg);
  box-shadow: var(--shadow);
  will-change: transform;
}
.bubble.from-left { align-self: flex-start; border-bottom-left-radius: 0.382rem; }
.bubble.from-right { align-self: flex-end; border-bottom-right-radius: 0.382rem; }
.bubble::after { content: ""; position: absolute; bottom: -0.85rem; width: 1.618rem; height: 1rem; background: var(--bg); }
.bubble.from-left::after { left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble.from-right::after { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bubble:nth-child(3n+2) { --bg: var(--brand-deep); color: #fff; }
.bubble:nth-child(3n+2) .who { color: rgb(255 255 255 / 0.8); }
.bubble:nth-child(3n) { --bg: var(--mint-wash); }
.bubble .stars { display: block; margin-bottom: var(--s1); }
.bubble blockquote { margin: 0 0 var(--s2); font-size: 1.15rem; }
.bubble .who { font-weight: 600; color: var(--ink-soft); font-size: 0.9375rem; }
.bubble .sample {
  position: absolute; top: var(--s2); right: var(--s3);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 var(--s2); border-radius: 999px; background: var(--brand-deep); color: #fff;
}

/* About + QR */
.about {
  display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s6); align-items: center;
  background: var(--brand-deep); color: #eef4f4;
}
.about h2 { color: #fff; }
/* The mark on a white circle, as in the logo sheet's round icon. */
.about-mark {
  width: 4.236rem; height: 4.236rem; padding: 0.95rem 0.85rem 0.85rem 0.95rem; margin-bottom: var(--s4);
  object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 0.618rem 1.618rem rgb(0 0 0 / 0.25);
}
.about-text { max-width: var(--measure); font-size: 1.15rem; font-weight: 300; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s5); margin: var(--s5) 0 0; }
.facts dt { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); font-weight: 500; }
.facts dd { margin: 0; font-size: 2.618rem; font-weight: 500; color: #fff; line-height: 1.2; }
.facts .stars { font-size: 1.618rem; vertical-align: 0.15em; }
.qr-card {
  justify-self: center; text-align: center;
  padding: var(--s4); border-radius: var(--radius); background: #fff; color: var(--ink);
  box-shadow: 0 1.618rem 4.236rem rgb(0 0 0 / 0.3);
}
.qr-card img { width: 12.36rem; height: 12.36rem; margin: 0 auto var(--s3); }
.qr-card p { font-weight: 600; color: var(--grey); margin-bottom: var(--s3); }
.qr-card .btn { font-size: 0.875rem; }

.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  padding: var(--s4) max(1rem, 6vw) calc(var(--s4) + env(safe-area-inset-bottom));
  background: var(--ink); color: #d6dcdc; font-size: 0.9375rem;
}
.foot a { color: #fff; }

@media (max-width: 860px) {
  .hero, .product, .about { grid-template-columns: 1fr; }
  .printer { width: min(70%, 16rem); }
  .bubble { width: 92%; }
}