:root {
 --bg: #ece9e2;
 --bg-soft: #f8f4ed;
 --surface: rgba(255, 255, 255, 0.72);
 --surface-strong: #fffdf8;
 --text: #202020;
 --muted: #63615c;
 --line: rgba(32, 32, 32, 0.12);
 --teal: #2f8d84;
 --teal-dark: #246d66;
 --teal-soft: #dff2ef;
 --gold: #ffb20f;
 --gold-dark: #ea9b00;
 --shadow: 0 24px 60px rgba(40, 54, 52, 0.08);
 --groen:#317B74;
}

* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 overflow-y: scroll;
 scrollbar-gutter: stable;
}

body {
 margin: 0;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 font-family: "DM Sans", sans-serif;
 line-height: 1.6;
 color: var(--text);
 background:
  radial-gradient(circle at top left, rgba(255, 178, 15, 0.18), transparent 28%),
  radial-gradient(circle at top right, rgba(47, 141, 132, 0.14), transparent 30%),
  var(--bg);
}


a {
 color: inherit;
 text-decoration: none;
}

img {
 max-width: 100%;
 display: block;
}

button,
input,
textarea {
 font: inherit;
}

.page-shell {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

.container {
 width: min(100% - 2rem, 1180px);
 margin: 0 auto;
}

.site-header {
 position: sticky;
 top: 0;
 z-index: 20;
 padding: 1.5rem 0 0;
 background: transparent;
 backdrop-filter: blur(10px);
}

.site-header .container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.5rem;
 padding: 1.1rem 1.5rem;
 border: 1px solid rgba(255, 255, 255, 0.65);
 border-radius: 5px 5px 0 0;
 background: rgba(255, 253, 248, 0.78);
 box-shadow: var(--shadow);
}

.brand {
 display: inline-flex;
 align-items: center;
 gap: 0.8rem;
 font-family: "Space Grotesk", sans-serif;
 font-size: 1.35rem;
 font-weight: 700;
}

.brand__mark {
 width: 1.4rem;
 height: 1.4rem;
 border-radius: 500px 500px 0 500px;
 border: 4px solid var(--gold);
 border-right: 0;
 transform: rotate(-28deg);
}

.site-nav {
 display: flex;
 align-items: center;
 gap: 1.8rem;
 color: var(--muted);
}

.site-nav a {
 position: relative;
 transition: color 180ms ease;
}

.site-nav a::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -0.25rem;
 width: 100%;
 height: 2px;
 transform: scaleX(0);
 transform-origin: left;
 background: var(--gold);
 transition: transform 180ms ease;
}

.site-nav a:hover {
 color: var(--text);
}

.site-nav a:hover::after {
 transform: scaleX(1);
}

.header-cta,
.button,
button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 3.25rem;
 padding: 0.9rem 1.5rem;
 border: 1px solid rgba(32, 32, 32, 0.82);
 border-radius: 4px;
 background: var(--surface-strong);
 color: var(--text);
 cursor: pointer;
 transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button--primary,
button,
.hero__actions .button:first-child {
 border-color: transparent;
 background: linear-gradient(180deg, #ffbf35, var(--gold-dark));
 color: #fff;
 box-shadow: 0 14px 30px rgba(255, 178, 15, 0.28);
}

.header-cta:hover,
.button:hover,
button:hover {
 transform: translateY(-1px);
 box-shadow: 0 14px 30px rgba(32, 32, 32, 0.12);
}

main {
 flex: 1;
 padding: 2rem 0 5rem;
}

main.container {
 padding: 3rem;
 border: 1px solid rgba(255, 255, 255, 0.65);
 border-radius: 0;
 background: linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(255, 251, 244, 0.72));
 box-shadow: var(--shadow);
}

h1 {font-size:1.2em;}

main.container h1 {
 margin-bottom: 1.25rem;
}

.home-intro {
 display: grid;
 grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
 gap: 2rem;
 align-items: center;
 padding-bottom: 2rem;
 border-bottom: 1px solid rgba(32, 32, 32, 0.08);
}

.home-intro__content .lead {
 margin-top: 1rem;
}

.home-intro__photo {
 min-height: 320px;
  display: grid;
 place-items: center;
 padding: 0;
 line-height: 0;
 DElborder: solid 4px var(--groen);
 border-radius: 4px;
 background:
  linear-gradient(180deg, rgba(47, 141, 132, 0.08), rgba(255, 255, 255, 0.42)),
  rgba(255, 253, 248, 0.9);
 color: var(--teal-dark);
 font-weight: 700;
 overflow: hidden;
}

.home-intro__photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.tool-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1.5rem;
 padding-top: 2rem;
}

.tool-card {
 display: flex;
 flex-direction: column;
 padding: 1.75rem;
 border: 1px solid rgba(32, 32, 32, 0.08);
 border-radius: 4px;
 background: rgba(255, 255, 255, 0.72);
}

.tool-card__label {
 margin-bottom: 0.75rem;
 color: var(--teal-dark);
 font-size: 0.88rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}

.tool-card h2 {
 margin-bottom: 1rem;
 max-width: none;
}

.tool-card p + p {
 margin-top: 0.85rem;
}

.tool-card__screenshot {
 margin-top: auto;
 padding: 0;
 min-height: 220px;
 display: grid;
 place-items: center; 
 border-radius: 4px;
 background:
  linear-gradient(180deg, rgba(47, 141, 132, 0.08), rgba(255, 255, 255, 0.42)),
  rgba(255, 253, 248, 0.9);
 color: var(--teal-dark); 
 text-align: center;
 line-height: 0;
 overflow: hidden;
 }

.tool-card__screenshot img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.addon-illustration {
 align-self: start;
 margin-top: 0;
 place-items: start;
 line-height: 1.4;
 overflow: visible;
 gap: 0.75rem;
 background: transparent;
}

.addon-illustration img {
 height: auto;
}

.addon-illustration a {
 margin-top:8px; 
 color: var(--teal-dark);
 display: inline-block;
 padding: 0;  
 text-decoration: underline;
}
a.link {
 text-decoration:underline;color: var(--teal-dark);
}
.page {
 display: grid;
 gap: 2rem;
}

.hero,
.section-card,
.contact-layout,
.testimonial-strip,
.stats-band,
.cta-panel {
 position: relative;
 border: 1px solid rgba(255, 255, 255, 0.65);
 border-radius: 5px;
 background: linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(255, 251, 244, 0.72));
 box-shadow: var(--shadow);
 overflow: hidden;
}

.hero {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
 gap: 2rem;
 align-items: center;
 padding: 3.75rem;
}

.hero::before,
.section-card::before,
.contact-layout::before,
.cta-panel::before {
 content: "";
 position: absolute;
 inset: auto auto 8% 6%;
 width: 9rem;
 height: 9rem;
 border: 2px solid rgba(47, 141, 132, 0.2);
 border-radius: 50%;
 filter: blur(0.5px);
}

.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 0.55rem;
 margin-bottom: 1rem;
 color: var(--teal-dark);
 font-weight: 700;
 letter-spacing: 0.03em;
 text-transform: uppercase;
}

.eyebrow::before {
 content: "";
 width: 0.9rem;
 height: 0.9rem;
 border-radius: 500px 500px 0 500px;
 background: var(--gold);
 transform: rotate(-30deg);
}

h1,
h2,
h3,
.display {
 margin: 0;
 font-family: "Space Grotesk", sans-serif;
 line-height: 0.98;
 letter-spacing: -0.04em;
}

h1,
.display {
 font-size: clamp(1.15rem, 3vw, 2.2rem);
 max-width: 19ch;
}

h2 {
 font-size: clamp(0.9rem, 2vw, 1.4rem);
 max-width: 12ch;
}

h3 {
 font-size: 0.6rem;
}

.accent-underline {
 position: relative;
 display: inline-block;
}

.accent-underline::after {
 content: "";
 position: absolute;
 left: 4%;
 right: 4%;
 bottom: -0.15em;
 height: 0.22em;
 border-radius: 500px;
 background: var(--gold);
 transform: rotate(-2.4deg);
}

p {
 margin: 0;
 color: var(--muted);
 font-size: 1.05rem;
 margin-top:16px;
}

ol,ul,li {color: var(--muted);}

.lead {
 max-width: 34rem;
 margin-top: 1.5rem;
 font-size: 1.15rem;
}

.hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 margin-top: 2rem;
}

.hero__meta {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1rem;
 margin-top: 2.5rem;
}

.mini-card,
.stat-card,
.feature-card,
.quote-card,
.contact-card {
 padding: 1.15rem;
 border: 1px solid rgba(32, 32, 32, 0.08);
 border-radius: 4px;
 background: rgba(255, 255, 255, 0.8);
}

.mini-card strong,
.stat-card strong,
.contact-card strong {
 display: block;
 color: var(--text);
 font-family: "Space Grotesk", sans-serif;
 font-size: 1.9rem;
 line-height: 1;
}

.hero-art {
 position: relative;
 min-height: 560px;
}

.hero-art__panel {
 position: absolute;
 background: linear-gradient(160deg, #3b9a90, #2a7f76);
 border-radius: 5px;
 box-shadow: 0 20px 50px rgba(47, 141, 132, 0.28);
}

.hero-art__panel--large {
 right: 3%;
 top: 10%;
 width: 48%;
 height: 58%;
}

.hero-art__panel--wide {
 left: 10%;
 bottom: 6%;
 width: 58%;
 height: 36%;
}

.hero-art__panel--small {
 left: 2%;
 top: 32%;
 width: 34%;
 height: 24%;
 border-radius: 4px;
}

.hero-art__person {
 position: absolute;
 right: 8%;
 bottom: 0;
 width: min(100%, 430px);
 aspect-ratio: 0.82;
 border-radius: 110px 110px 15px 15px;
 background:
  radial-gradient(circle at 52% 18%, #6b4a32 0 13%, transparent 13.5%),
  radial-gradient(circle at 50% 22%, #f4c9a9 0 18%, transparent 18.5%),
  radial-gradient(circle at 42% 22%, #2c211d 0 4%, transparent 4.5%),
  radial-gradient(circle at 58% 22%, #2c211d 0 4%, transparent 4.5%),
  radial-gradient(circle at 50% 28%, #d99684 0 3.5%, transparent 4%),
  radial-gradient(circle at 50% 31%, #c27b67 0 6%, transparent 6.5%),
  linear-gradient(180deg, transparent 0 34%, #f1d4bc 34% 48%, transparent 48%),
  linear-gradient(180deg, transparent 0 43%, #74b4b1 43% 62%, #e8d9d3 62% 100%);
 box-shadow: 0 28px 70px rgba(32, 32, 32, 0.16);
}

.hero-art__stack,
.hero-art__spark,
.hero-art__note {
 position: absolute;
}

.hero-art__stack {
 left: 18%;
 bottom: 20%;
 width: 36%;
 height: 20%;
 border-radius: 4px;
 background:
  linear-gradient(180deg, #f5e7d7 0 18%, #d4baa1 18% 24%, #f8efe4 24% 42%, #d0b29b 42% 48%, #f7ead8 48% 66%, #d5b79c 66% 72%, #f4eadf 72% 90%, #cfb39a 90%);
 transform: rotate(4deg);
 box-shadow: 0 16px 30px rgba(85, 65, 52, 0.18);
}

.hero-art__spark {
 top: 20%;
 left: 14%;
 width: 90px;
 height: 90px;
 border-radius: 50%;
}

.hero-art__spark::before,
.hero-art__spark::after,
.hero-art__note::before,
.hero-art__note::after {
 content: "";
 position: absolute;
 background: var(--gold);
 border-radius: 500px;
}

.hero-art__spark::before {
 inset: 0 41px;
}

.hero-art__spark::after {
 inset: 41px 0;
}

.hero-art__note {
 right: 2%;
 top: 18%;
 width: 96px;
 height: 96px;
}

.hero-art__note::before {
 left: 26px;
 top: 0;
 width: 10px;
 height: 44px;
 transform: rotate(-22deg);
}

.hero-art__note::after {
 left: 0;
 top: 20px;
 width: 44px;
 height: 10px;
 transform: rotate(24deg);
}

.doodle {
 position: absolute;
 width: 110px;
 height: 56px;
 border: 3px solid transparent;
 border-bottom-color: var(--teal);
 border-left-color: var(--teal);
 border-radius: 0 0 35px 35px;
 opacity: 0.82;
}

.doodle--one {
 left: 40%;
 bottom: 20%;
 transform: rotate(30deg);
}

.doodle--two {
 left: 3%;
 top: 56%;
 transform: rotate(-70deg);
}

.section-card {
 padding: 3rem;
}

.section-card__header {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: 2rem;
 margin-bottom: 2rem;
}

.split-grid,
.feature-grid,
.quote-grid,
.contact-layout,
.stats-band {
 display: grid;
 gap: 1.25rem;
}

.split-grid {
 grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
 align-items: start;
}

.feature-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
 min-height: 240px;
 display: grid;
 align-content: space-between;
 gap: 1rem;
}

.feature-card__icon,
.contact-card__icon {
 width: 3.4rem;
 height: 3.4rem;
 display: grid;
 place-items: center;
 border-radius: 4px;
 background: var(--teal-soft);
 color: var(--teal-dark);
 font-size: 1.5rem;
}

.stats-band {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 padding: 1.25rem;
}

.stat-card {
 text-align: center;
 background: linear-gradient(180deg, rgba(47, 141, 132, 0.12), rgba(255, 255, 255, 0.85));
}

.testimonial-strip {
 padding: 1.25rem;
}

.quote-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-card {
 min-height: 220px;
 display: grid;
 gap: 1rem;
 background: rgba(255, 255, 255, 0.74);
}

.quote-card__person {
 display: flex;
 align-items: center;
 gap: 0.85rem;
 color: var(--text);
 font-weight: 700;
}

.quote-card__avatar {
 width: 3rem;
 height: 3rem;
 border-radius: 50%;
 background: linear-gradient(180deg, var(--gold), #ffd46f);
}

.cta-panel {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 2rem;
 align-items: center;
 padding: 2.25rem 2.5rem;
 background: linear-gradient(145deg, var(--teal), #24746c);
}

.cta-panel h2,
.cta-panel p {
 color: #fff;
}

.cta-panel .button {
 background: #fff5da;
 color: var(--text);
 border-color: transparent;
}

.page-hero {
 padding: 3rem;
}

.contact-layout {
 grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
 padding: 2rem;
 align-items: start;
}

.contact-sidebar,
.contact-form-panel {
 display: grid;
 gap: 1.25rem;
}

.contact-form-panel {
 padding: 1.5rem;
 border-radius: 4px;
 background: rgba(255, 255, 255, 0.76);
 border: 1px solid rgba(32, 32, 32, 0.08);
}

form {
 display: grid;
 gap: 0.9rem;
}

label {
 color: var(--text);
 font-weight: 700;
}

input,
textarea {
 width: 100%;
 padding: 0.95rem 1rem;
 border: 1px solid rgba(32, 32, 32, 0.12);
 border-radius: 3px;
 background: rgba(255, 253, 248, 0.9);
 color: var(--text);
}

input:focus,
textarea:focus {
 outline: 2px solid rgba(47, 141, 132, 0.24);
 border-color: var(--teal);
}

.error-message,
.success-message {
 padding: 0.95rem 1rem;
 border-radius: 3px;
}

.error-message {
 background: rgba(176, 0, 32, 0.08);
 color: #9d1d35;
}

.success-message {
 background: rgba(10, 106, 43, 0.09);
 color: #0a6a2b;
}

.honeypot {
 position: absolute;
 left: -9999px;
}

.site-footer {
 padding: 0 0 2rem;
}

.site-footer .container {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 padding: 1.5rem 1.75rem;
 border: 1px solid rgba(255, 255, 255, 0.65);
 border-radius: 0 0 5px 5px;
 background: rgba(255, 253, 248, 0.74);
 box-shadow: var(--shadow);
}

@media (max-width: 1080px) {
 .home-intro {
  grid-template-columns: 1fr;
 }

 .hero,
 .split-grid,
 .contact-layout,
 .cta-panel {
  grid-template-columns: 1fr;
 }

 .feature-grid,
 .quote-grid,
 .stats-band {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .hero-art {
  min-height: 500px;
 }
}

@media (max-width: 820px) {
 .site-header {
  position: static;
 }

 .site-header .container,
 .section-card__header,
 .site-footer .container {
  grid-template-columns: 1fr;
  display: grid;
 }

 .site-header .container {
  justify-items: start;
 }

 .site-nav,
 .hero__actions {
  flex-wrap: wrap;
 }

 .hero,
 .section-card,
 .page-hero,
 .contact-layout,
 .cta-panel {
  padding: 2rem;
 }

 .hero-art {
  min-height: 420px;
 }
}

@media (max-width: 640px) {
 body {
  background: linear-gradient(180deg, #f0ede7, #e9e5dd);
 }

 .container {
  width: min(100% - 1rem, 1180px);
 }

 .tool-grid {
  grid-template-columns: 1fr;
 }

 .home-intro__photo {
  min-height: 220px;
 }

 h1,
 .display {
  font-size: clamp(1.05rem, 6vw, 1.6rem);
  }

 .hero__meta,
 .feature-grid,
 .quote-grid,
 .stats-band {
  grid-template-columns: 1fr;
 }

 .hero-art {
  min-height: 360px;
 }

 .hero-art__person {
  width: 290px;
 }

 .hero-art__stack {
  left: 8%;
  width: 48%;
 }
}





.about-layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
 gap: 2rem;
 align-items: start;
}

.about-content {
 max-width: 72ch;
}

.about-photo {
 width: 100%;
 margin-top: 0.2rem;
 opacity: 0.92;
}

.about-photo img {
 width: 100%;
 border-radius: 50%;
 box-shadow: 0 10px 26px rgba(32, 32, 32, 0.14);
}