/* lemmid.nl: the platform's own site. Lemmid blue #0054a5 (the iconic light-scheme
   blue; #0b1522 = the deep night-blue companion) with THE orange login button.
   Signature: Duplo studs, straight from the builder's own platform metaphor:
   pillar cards wear studs on top, section dividers are stud strips.
   Typography: the SYSTEM font stack, deliberately: simple, timeless software that
   moves with every platform. Zero webfonts, the fastest site in the fleet. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
	--blue: #0054a5;
	--blue-deep: #003d78;
	--night: #0b1522;
	--orange: #f7941d;
	--orange-deep: #d97b0a;
	--paper: #f4f7fa;
	--card: #ffffff;
	--ink: #17222e;
	--ink-soft: #46566a;
	--line: #d3dde8;
	--body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
	font-family: var(--body);
	background: var(--paper);
	color: var(--ink);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
strong { font-weight: 650; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 22px; }

/* ─── Blue top: nav + hero share one field ────────────── */
.top { background: linear-gradient(178deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff; }

nav {
	position: relative;
	display: flex; align-items: center; justify-content: flex-start;
	gap: 10px 18px;
	max-width: 980px; margin: 0 auto; padding: 20px 22px;
}
nav .logo { display: flex; align-items: center; text-decoration: none; }
nav .logo img { width: 120px; height: auto; display: block; }
nav .links { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; margin-left: auto; }
nav .links a {
	font-size: 15px; font-weight: 500; letter-spacing: 0.2px;
	color: rgba(255,255,255,.85); text-decoration: none; padding: 6px 2px;
}
nav .links a:hover { color: #fff; }
nav .links a.lang { font-weight: 400; opacity: .75; font-size: 14px; }
nav .nav-actions { display: flex; align-items: center; gap: 12px; }
nav .cta {
	color: var(--night); font-weight: 700; background: var(--orange);
	font-size: 15px; text-decoration: none; white-space: nowrap;
	padding: 11px 24px; border-radius: 999px;
	box-shadow: 0 4px 0 var(--orange-deep), 0 8px 18px rgba(0,0,0,.25);
	transition: transform .08s, box-shadow .08s;
}
nav .cta:hover { transform: translateY(-1px); }
nav .cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--orange-deep); }
.menu-btn {
	display: none; background: none; border: 0; cursor: pointer; padding: 10px 6px;
}
.menu-btn span {
	display: block; width: 22px; height: 2px; margin: 5px 0; border-radius: 2px;
	background: #fff; transition: transform .18s ease, opacity .18s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
	.menu-btn { display: block; }
	nav .links { display: none; }
	nav .links.open {
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
		position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
		background: var(--blue-deep); border-top: 1px solid rgba(255,255,255,.15);
		padding: 8px 22px 16px; box-shadow: 0 14px 24px rgba(0,0,0,.28);
	}
	nav .links.open a { font-size: 16.5px; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.09); }
	nav .links.open a:last-child { border-bottom: 0; }
	nav .nav-actions { margin-left: auto; }
}

/* ─── Hero ────────────────────────────────────────────── */
.hero { padding: 56px 0 0; }
.hero .wrap { max-width: 800px; text-align: center; }
.hero h1 {
	font-size: clamp(34px, 5.4vw, 56px); font-weight: 750;
	line-height: 1.12; letter-spacing: -0.5px; color: #fff;
}
.hero .lede {
	margin: 22px auto 0; max-width: 58ch;
	font-size: clamp(17px, 2.2vw, 19.5px); color: rgba(255,255,255,.82);
}
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.btn {
	font-size: 17px; font-weight: 700; text-decoration: none;
	padding: 15px 34px; border-radius: 999px; display: inline-block;
	transition: transform .08s, box-shadow .12s;
}
.btn.login {
	background: var(--orange); color: var(--night);
	box-shadow: 0 5px 0 var(--orange-deep), 0 10px 24px rgba(0,0,0,.28);
}
.btn.login:hover { transform: translateY(-2px); }
.btn.login:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--orange-deep); }
.btn.ghost {
	color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.btn.ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); }
.hero .fine { margin-top: 20px; font-size: 13.5px; color: rgba(255,255,255,.8); letter-spacing: 1.5px; text-transform: uppercase; }

/* the stud strip: the hero stands on Duplo studs */
.studs {
	margin-top: 56px; height: 34px;
	background:
		radial-gradient(circle at 50% 0, rgba(255,255,255,.28) 0 11px, transparent 12px);
	background-size: 56px 34px;
	background-position: center top;
}

/* ─── Proof strip (values, not numbers: evergreen) ────── */
.proof { border-bottom: 2px solid var(--line); background: var(--card); }
.proof .wrap {
	display: flex; flex-wrap: wrap; gap: 8px 34px; justify-content: center;
	padding: 16px 22px; font-size: 13.5px; letter-spacing: 1.6px;
	text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}
.proof b { color: var(--blue); font-weight: 750; }

/* ─── Sections ────────────────────────────────────────── */
section { padding: 68px 0 10px; }
.eyebrow {
	font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
	color: #9c5a05; font-weight: 700;
}
h2, .showcase-hub h1 {
	font-size: clamp(26px, 3.8vw, 38px); font-weight: 750; letter-spacing: -0.4px;
	line-height: 1.18; margin: 10px 0 16px;
}
.section-intro { color: var(--ink-soft); max-width: 62ch; }
.section-intro + .section-intro { margin-top: 12px; }

/* stud divider between sections */
.stud-lane { max-width: 980px; margin: 56px auto 0; padding: 0 22px; }
.stud-lane div {
	height: 16px;
	background: radial-gradient(circle at 50% 50%, var(--line) 0 6px, transparent 7px);
	background-size: 40px 16px; background-position: center;
}

/* ─── Pillars: brick cards with studs on top ──────────── */
.pillars { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px 18px; margin-top: 40px; }
.pillar {
	position: relative; background: var(--card);
	border: 1px solid var(--line); border-radius: 12px;
	padding: 24px 22px 20px;
}
.pillar::before, .pillar::after {
	content: ''; position: absolute; top: -11px; width: 34px; height: 12px;
	background: var(--card); border: 1px solid var(--line); border-bottom: none;
	border-radius: 6px 6px 0 0;
}
.pillar::before { left: 24px; }
.pillar::after { left: 74px; }
.pillar .icon { display: block; margin-bottom: 12px; width: 44px; height: 40px; object-fit: contain; object-position: left; }
.pillar h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 7px; color: var(--blue); }
.pillar p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; }

/* ─── Services: the toolbox (official switcher tiles) ─── */
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 16px; margin-top: 30px; }
.service {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--card); border: 1px solid var(--line); border-radius: 12px;
	padding: 18px; text-decoration: none; color: inherit;
}
a.service { transition: transform .1s, box-shadow .15s; }
a.service:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(23,34,46,.1); }
.service img { width: 88px; height: 88px; flex: 0 0 88px; border-radius: 14px; box-shadow: 0 3px 10px rgba(23,34,46,.18); }
.service b { font-size: 17px; font-weight: 700; display: block; margin-bottom: 4px; }
.service span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }

/* ─── For you: the punch, on blue ─────────────────────── */
.foryou {
	background: linear-gradient(178deg, var(--blue) 0%, var(--blue-deep) 100%);
	color: #fff; margin-top: 68px; padding: 64px 0 60px;
}
.foryou .eyebrow { color: #ffbe73; }
.foryou h2 { color: #fff; }
.foryou p { color: rgba(255,255,255,.85); max-width: 62ch; margin: 14px 0; }
.foryou strong { color: #fff; }
.foryou .cta-row { justify-content: flex-start; }

/* ─── Guides ──────────────────────────────────────────── */
.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 30px; }
.gcard {
	background: var(--card); border: 1px solid var(--line); border-radius: 12px;
	padding: 22px; text-decoration: none; color: inherit;
	transition: transform .1s, box-shadow .15s;
}
.gcard:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(23,34,46,.1); }
.gcard b { font-size: 17px; font-weight: 700; color: var(--blue); display: block; margin-bottom: 6px; }
.gcard span { font-size: 14.5px; color: var(--ink-soft); }

/* ─── FAQ ─────────────────────────────────────────────── */
.faq { max-width: 780px; }
.faq details { border-bottom: 2px solid var(--line); padding: 4px 0; }
.faq summary {
	font-size: 17px; font-weight: 650; line-height: 1.5;
	padding: 15px 4px; cursor: pointer; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: #9c5a05; font-size: 22px; font-weight: 700; flex-shrink: 0; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 4px 18px; color: var(--ink-soft); font-size: 16px; max-width: 66ch; }

/* ─── Finale ──────────────────────────────────────────── */
.finale { text-align: center; padding-bottom: 40px; }
.finale .section-intro { margin: 0 auto; }
.finale .cta-row { justify-content: center; }
.finale .btn.login { font-size: 19px; padding: 18px 44px; }

/* ─── Footer: the night blue ──────────────────────────── */
footer { background: var(--night); color: #b9c5d2; margin-top: 70px; }
footer .studs-top {
	height: 30px;
	background: radial-gradient(circle at 50% 100%, var(--night) 0 10px, transparent 11px);
	background-size: 52px 30px; background-position: center bottom;
}
footer .wrap { padding: 42px 22px 44px; }
footer .cols { display: flex; flex-wrap: wrap; gap: 28px 64px; align-items: flex-start; }
footer img.mark { width: 130px; height: auto; opacity: .95; }
footer .fh { font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: #7f8ea0; margin-bottom: 10px; font-weight: 600; }
footer ul { list-style: none; }
footer li { margin: 6px 0; font-size: 15px; }
footer address { font-style: normal; font-size: 14.5px; line-height: 1.8; }
footer a { color: #e8eef4; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .legal {
	margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(185,197,210,.2);
	font-size: 13px; color: #7f8ea0;
}
footer .legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Guide article pages ─────────────────────────────── */
.article { max-width: 760px; margin: 0 auto; padding: 40px 22px 10px; }
.article .crumbs { font-size: 13.5px; letter-spacing: 0.5px; color: var(--ink-soft); }
.article .crumbs a { color: var(--ink-soft); text-decoration: none; }
.article .crumbs a:hover { color: var(--blue); }
.article h1 {
	font-size: clamp(28px, 4.6vw, 42px); font-weight: 750; letter-spacing: -0.5px;
	line-height: 1.15; margin: 18px 0 12px;
}
.article h2 { font-size: 22px; font-weight: 700; margin: 34px 0 10px; }
.article p, .article li { color: var(--ink-soft); }
.article p { margin: 13px 0; }
.article ul, .article ol { margin: 13px 0 13px 26px; }
.article li { margin: 6px 0; }
.article strong { color: var(--ink); }
.article .cta-line {
	background: var(--card); border: 1px solid var(--line); border-radius: 12px;
	padding: 17px 21px; margin: 28px 0; color: var(--ink-soft);
}
.article .next {
	font-size: 14.5px; margin-top: 36px; padding-top: 18px;
	border-top: 2px solid var(--line); color: var(--ink-soft);
}

/* ─── Showcase: real sites built on Lemmid ────────────── */
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; margin-top: 30px; }
.scard {
	display: block; background: var(--card); border: 1px solid var(--line);
	border-radius: 14px; overflow: hidden; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.scard:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(23,34,46,.1); }
.scard img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.scard b { font-size: 17px; font-weight: 700; color: var(--blue); display: block; margin: 14px 18px 4px; }
.scard span { font-size: 14.5px; color: var(--ink-soft); display: block; margin: 0 18px 16px; line-height: 1.5; }
.showcase-more { text-align: center; margin-top: 30px; }
#showcase .btn.ghost { color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
#showcase .btn.ghost:hover { background: rgba(0,84,165,.06); }
.showcase-hub .wrap { max-width: 980px; margin: 0 auto; padding-bottom: 10px; }
.showcase-hub .crumbs { font-size: 13.5px; letter-spacing: 0.5px; color: var(--ink-soft); margin-bottom: 26px; }
.showcase-hub .crumbs a { color: var(--ink-soft); text-decoration: none; }
.showcase-hub .crumbs a:hover { color: var(--blue); }

/* ─── Showcase detail: the device duo ─────────────────── */
.scase .lede { font-size: 18.5px; color: var(--ink-soft); margin-top: -4px; }
.scase .devices { position: relative; margin: 30px 0 34px; }
.frame-desktop {
	background: var(--card); border: 1px solid var(--line); border-radius: 12px;
	overflow: hidden; box-shadow: 0 14px 30px rgba(23,34,46,.14); margin: 0;
}
.frame-desktop .bar { display: flex; gap: 6px; padding: 10px 12px; background: #e8eef4; border-bottom: 1px solid var(--line); }
.frame-desktop .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.frame-desktop img { display: block; width: 100%; height: auto; }
.frame-phone {
	position: absolute; right: 18px; bottom: -22px; width: 21%; min-width: 96px;
	margin: 0; border: 3px solid var(--night); border-radius: 18px; overflow: hidden;
	box-shadow: 0 14px 30px rgba(23,34,46,.28); background: var(--card);
}
.frame-phone img { display: block; width: 100%; height: auto; }
.highlights { list-style: none; margin: 18px 0 !important; }
.highlights li {
	margin: 9px 0; padding-left: 26px; position: relative;
}
.highlights li::before {
	content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px;
	border-radius: 50%; background: var(--blue);
	box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.scase .visit { margin: 26px 0; }
.scase .visit .btn.login { font-size: 17px; }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
	section { padding-top: 50px; }
	.hero { padding-top: 40px; }
	.studs { background-size: 44px 28px; height: 28px; }
	nav .logo img { width: 104px; }
	.frame-phone { position: static; width: 40%; min-width: 120px; margin: 14px auto 0; }
	.scase .devices { margin-bottom: 24px; }
}