:root { --ink: #1d1920; --paper: #f4ede2; --surface: #fffaf2; --muted: #625d67; --line: #d9ccbd; --orange: #e96d3c; --violet: #725de8; --mint: #299e81; --blue: #358fd6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 0; margin: 0; color: var(--ink); background: radial-gradient(circle at 8% 0, rgba(255,255,255,.78), transparent 26rem), radial-gradient(circle at 92% 16%, rgba(232,203,173,.38), transparent 31rem), linear-gradient(145deg, #f6f0e6 0%, var(--paper) 48%, #efe4d4 100%); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
a { color: inherit; }
.hub-shell { --studio-header-height: 72px; --studio-nav-accent: #ff9a71; --studio-nav-background: #191820; --studio-nav-ink: #fffaf5; --studio-nav-line: rgba(255,255,255,.14); --studio-nav-muted: rgba(255,250,245,.66); --studio-nav-cta-ink: #201a1c; overflow: clip; }
.hub-nav { display: flex; width: min(1240px, calc(100% - 48px)); min-height: 84px; margin: 0 auto; align-items: center; justify-content: space-between; gap: 24px; }
.hub-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.05rem; font-weight: 850; letter-spacing: -.06em; text-decoration: none; }
.hub-brand-mark { display: grid; width: 32px; height: 32px; place-items: center; overflow: hidden; border-radius: 10px 10px 3px 10px; color: #fff; background: var(--ink); font-size: .72rem; letter-spacing: -.08em; }
.hub-brand-mark img { padding: 4px; }
.hub-nav-links { display: flex; align-items: center; gap: 1.4rem; color: #494a56; font-size: .9rem; font-weight: 700; }
.hub-nav-links a { text-decoration: none; }
.hub-nav-links a:hover { color: var(--violet); }
.hub-actions { display: flex; align-items: center; gap: .8rem; }
.hub-contact { padding: .72rem .9rem; border: 1px solid rgba(112,89,68,.22); border-radius: 99px; background: rgba(255,250,242,.8); color: var(--ink); font-size: .82rem; font-weight: 800; text-decoration: none; box-shadow: 0 8px 20px rgba(82,58,36,.06); }
.hub-apps { --launcher-accent: #ff9a71; --launcher-accent-rgb: 255, 154, 113; }
.hub-hero { position: relative; width: min(1240px, calc(100% - 48px)); min-height: min(780px, calc(100vh - 84px)); margin: 0 auto; padding: clamp(72px, 11vw, 158px) 0 100px; }
.hub-hero::before { position: absolute; z-index: -1; top: 9%; right: -9%; width: min(46vw, 580px); height: min(46vw, 580px); border-radius: 46% 54% 45% 55% / 53% 45% 55% 47%; background: linear-gradient(135deg, rgba(124,104,255,.18), rgba(65,164,255,.05) 55%, rgba(57,201,158,.12)); content: ''; filter: blur(1px); transform: rotate(-13deg); }
.hub-eyebrow { display: inline-flex; gap: .55rem; align-items: center; color: var(--violet); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.hub-eyebrow::before { width: .65rem; height: .65rem; border-radius: 99px; background: var(--orange); content: ''; }
.hub-hero h1 { max-width: 11.5ch; margin: 1.2rem 0 1.3rem; font-size: clamp(3.5rem, 8vw, 7.8rem); font-weight: 850; line-height: .88; letter-spacing: -.09em; }
.hub-hero h1 em { color: var(--violet); font-style: normal; }
.hub-intro { max-width: 39rem; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.65; }
.hub-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hub-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.15rem; padding: .75rem 1.15rem; border: 1px solid var(--ink); border-radius: .9rem; color: var(--ink); background: transparent; font: inherit; font-size: .9rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.hub-button--primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.hub-button--primary:hover { background: var(--violet); border-color: var(--violet); }
.hub-proof { display: flex; flex-wrap: wrap; gap: 1.1rem 2.3rem; margin-top: clamp(4rem, 11vw, 9rem); color: #555762; font-size: .78rem; font-weight: 750; }
.hub-proof span { display: inline-flex; gap: .52rem; align-items: center; }
.hub-proof i { width: .48rem; height: .48rem; border-radius: 99px; background: var(--mint); }
.hub-studios { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 120px; border-top: 1px solid var(--line); }
.section-kicker { margin: 0 0 .7rem; color: var(--violet); font-size: .7rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.section-title { max-width: 19ch; margin: 0; font-size: clamp(2.2rem, 4.5vw, 4.4rem); font-weight: 850; line-height: .96; letter-spacing: -.07em; }
.studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 3rem; padding: 1px; background: #d7c6b4; box-shadow: 0 18px 42px rgba(83,58,35,.06); }
.studio-card { position: relative; display: flex; min-height: 345px; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; background: linear-gradient(135deg, rgba(255,253,248,.98), rgba(255,247,236,.94)); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.studio-card::after { position: absolute; right: -3rem; bottom: -4rem; width: 15rem; height: 15rem; border-radius: 42% 58% 60% 40%; background: var(--card-tint); content: ''; opacity: .7; transform: rotate(-15deg); }
.studio-card:hover { z-index: 1; box-shadow: 0 20px 40px rgba(22, 24, 40, .11); transform: translateY(-7px); }
.studio-card--design { --card-accent: var(--orange); --card-tint: rgba(255,123,56,.24); }
.studio-card--web { --card-accent: var(--blue); --card-tint: rgba(65,164,255,.22); }
.studio-card--help { --card-accent: #e66739; --card-tint: rgba(57,201,158,.21); }
.studio-card--bedrijf { --card-accent: #167d84; --card-tint: rgba(124,104,255,.2); }
.studio-card-label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: var(--card-accent); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.studio-card h3 { position: relative; z-index: 1; max-width: 12ch; margin: auto 0 1rem; font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 850; line-height: .9; letter-spacing: -.075em; }
.studio-card p { position: relative; z-index: 1; max-width: 27rem; margin: 0; color: #5a5d68; font-size: .95rem; line-height: 1.6; }
.studio-card-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 1.7rem; color: var(--ink); font-size: .82rem; font-weight: 800; }
.studio-card-footer b { color: var(--card-accent); font-size: 1.25rem; }
.hub-intake { width: min(1240px, calc(100% - 48px)); margin: 0 auto 110px; padding: clamp(1.6rem, 4vw, 4rem); border-radius: 1.5rem; color: #f7f7fa; background: #151521; }
.hub-intake-grid { display: grid; grid-template-columns: minmax(14rem, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.hub-intake .section-kicker { color: #a99dff; }
.hub-intake .section-title { color: #fff; }
.hub-intake-copy > p:last-child { max-width: 31rem; color: #b7b7c5; line-height: 1.6; }
.hub-lead-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.hub-lead-form label { display: grid; gap: .35rem; color: #c9c9d5; font-size: .72rem; font-weight: 750; }
.hub-lead-form .wide, .hub-lead-form button, .hub-lead-form [data-lead-status], .hub-lead-form .fineprint { grid-column: 1 / -1; }
.hub-lead-form input, .hub-lead-form select, .hub-lead-form textarea { width: 100%; border: 1px solid #373846; border-radius: .65rem; outline: none; background: #222330; color: #fff; font: inherit; font-size: .9rem; }
.hub-lead-form input, .hub-lead-form select { min-height: 2.75rem; padding: .6rem .7rem; }
.hub-lead-form textarea { min-height: 6.5rem; padding: .7rem; resize: vertical; }
.hub-lead-form input:focus, .hub-lead-form select:focus, .hub-lead-form textarea:focus { border-color: #a99dff; box-shadow: 0 0 0 3px rgba(169,157,255,.16); }
.hub-lead-form [data-lead-status] { min-height: 1.2em; margin: 0; color: #9defd7; font-size: .82rem; }
.hub-lead-form .fineprint { margin: 0; color: #9192a2; font-size: .76rem; line-height: 1.45; }
.hub-lead-form .bot { position: absolute; left: -9999px; }
.hub-footer { display: flex; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 40px; align-items: center; justify-content: space-between; gap: 16px; color: #686a75; font-size: .78rem; }
.hub-footer a { color: inherit; }
@media (max-width: 720px) { .hub-nav, .hub-hero, .hub-studios, .hub-intake, .hub-footer { width: min(100% - 32px, 1240px); } .hub-nav { min-height: 70px; } .hub-nav-links, .hub-contact { display: none; } .hub-hero { min-height: auto; padding: 80px 0 80px; } .hub-hero h1 { max-width: 9.8ch; } .hub-proof { margin-top: 4rem; } .studio-grid { grid-template-columns: 1fr; margin-top: 2rem; } .studio-card { min-height: 290px; } .hub-intake { margin-bottom: 72px; border-radius: 1.1rem; } .hub-intake-grid, .hub-lead-form { grid-template-columns: 1fr; } .hub-footer { display: grid; gap: 8px; } }

/* The root hub is intentionally lighter than the studios, while its launcher
   stays a high-contrast control that is unmistakable on the warm canvas. */
.hub-apps .site-apps-toggle { border-color: #171720; color: #fff; background: linear-gradient(145deg, #29283b, #121219); box-shadow: 0 12px 26px rgba(27,24,31,.24), inset 0 1px rgba(255,255,255,.14); }
.hub-apps .site-apps-toggle span { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.hub-apps .site-apps-toggle:hover, .hub-apps .site-apps-toggle[aria-expanded="true"] { border-color: #ff9a71; background: linear-gradient(145deg, #403344, #17151d); box-shadow: 0 15px 32px rgba(87,48,31,.28), inset 0 1px rgba(255,255,255,.16); }
.hub-apps .site-apps-menu { border-color: rgba(255,255,255,.17); background: radial-gradient(circle at 100% 0, rgba(255,154,113,.22), transparent 40%), linear-gradient(145deg, rgba(35,34,49,.99), rgba(12,12,19,.99)); box-shadow: 0 28px 74px rgba(29,24,33,.38), inset 0 1px rgba(255,255,255,.1); }
.studio-local-nav-toggle { display: none; }

@media (max-width: 900px) {
  body { padding-top: 72px; }
  .hub-nav { position: fixed; z-index: 3100; inset: 0 0 auto; width: 100%; height: 72px; min-height: 72px; padding: 0 16px; border-bottom: 1px solid rgba(91,68,48,.15); background: rgba(248,241,230,.9); box-shadow: 0 8px 24px rgba(66,45,29,.08); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
  .hub-nav-links, .hub-contact { display: none; }
  .hub-actions { margin-left: auto; gap: 8px; }
  .studio-local-nav-toggle, .hub-apps .site-apps-toggle { flex: 0 0 44px; width: 44px; height: 44px; }
  .studio-local-nav-toggle { display: grid; gap: 5px; place-content: center; padding: 0; border: 1px solid rgba(29,25,32,.18); border-radius: 14px; color: var(--ink); background: rgba(255,250,242,.84); box-shadow: 0 8px 20px rgba(82,58,36,.08); cursor: pointer; }
  .studio-local-nav-toggle span { display: block; width: 18px; height: 1.5px; border-radius: 4px; background: currentColor; }
  .studio-local-nav-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
  .hub-apps .site-apps-menu--root { top: calc(72px + .75rem); right: .75rem; }
  .hub-hero { padding-top: 64px; }
}

/* Keep the actual mark and both navigation controls inside even a very narrow
   CSS viewport (or high browser zoom). The wordmark can yield; the logo cannot. */
@media (max-width: 300px) {
  .hub-nav { padding-inline: 12px; gap: 8px; }
  .hub-brand { gap: 0; }
  .hub-brand-label { display: none; }
  .hub-actions { gap: 6px; }
}