:root{
  --cream:#f7f1e7;
  --paper:#fffaf2;
  --ink:#161412;
  --muted:#6e655c;
  --line:#dfd1bd;
  --orange:#ff6b35;
  --teal:#1f7a8c;
  --green:#1f9d61;
  --dark:#151515;
  --shadow:0 18px 60px rgba(41,25,12,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
a{text-decoration:none;color:inherit}
p{color:var(--muted);line-height:1.75}
.header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,6vw,90px);border-bottom:1px solid var(--line);background:rgba(247,241,231,.88);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:12px;font-weight:950;letter-spacing:-.04em;font-size:22px}
.logo{width:42px;height:42px;border-radius:14px;background:var(--dark);color:var(--orange);display:grid;place-items:center;font-weight:950}
.nav{display:flex;gap:24px;color:var(--muted);font-weight:800}.nav a:hover{color:var(--ink)}
.hero{padding:78px clamp(20px,7vw,110px);display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.kicker{font-size:13px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
h1{font-size:clamp(46px,7vw,88px);line-height:.92;letter-spacing:-.075em;margin:16px 0}
h2{font-size:clamp(32px,4.6vw,58px);line-height:1;letter-spacing:-.06em;margin:0 0 18px}
h3{font-size:22px;margin:0 0 10px}.lead{font-size:21px;max-width:740px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:16px;padding:14px 20px;font-weight:950}
.btn.primary{background:var(--ink);color:#fff}.btn.soft{border-color:var(--line);background:var(--paper)}
.hero-card{background:var(--dark);color:#fff;border-radius:36px;padding:34px;box-shadow:14px 14px 0 var(--orange);transform:rotate(1deg)}
.hero-card p{color:#d8d8d8}.hero-card ul{color:#d8d8d8;line-height:2;padding-left:20px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
.stats div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:18px}
.stats strong{display:block;font-size:30px;color:#fff}
.section{padding:68px clamp(20px,7vw,110px)}
.section-head{max-width:850px;margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow)}
.card .num{font-size:40px;font-weight:950;color:var(--orange)}
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reference{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:start}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.badges span{padding:10px 13px;border-radius:999px;background:#eef7f8;border:1px solid #cfe4e8;color:#175d68;font-weight:850}
.browser{background:#111827;color:#fff;border-radius:30px;padding:28px;box-shadow:var(--shadow)}
.dots{display:flex;gap:8px;margin-bottom:24px}.dots span{width:12px;height:12px;border-radius:50%;background:#5d6b82}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}.tiles span{background:#1f2937;border:1px solid #334155;border-radius:16px;padding:18px;font-weight:900}
.dark{background:var(--dark);color:#fff}.dark p{color:#cfcfcf}.dark .card{background:#242424;border-color:#3d3d3d;color:#fff}.dark .card p{color:#cfcfcf}
.price{font-size:34px;font-weight:950;color:var(--ink);margin:12px 0}.dark .price{color:#fff}
.featured{border:2px solid var(--orange);box-shadow:10px 10px 0 rgba(255,107,53,.35)}
.support{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.checks{display:grid;gap:12px}.checks div{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;font-weight:850}
.cta{margin:68px clamp(20px,7vw,110px);border-radius:34px;background:linear-gradient(135deg,var(--ink),#2a2521);color:#fff;padding:46px;text-align:center;box-shadow:var(--shadow)}
.cta p{color:#e4ded7}.cta .btn{border-color:#fff;color:#fff}.cta .btn.primary{background:#fff;color:var(--ink)}
.contact-note{margin-top:18px;color:#d9d3ca}
footer{padding:28px clamp(20px,7vw,110px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted)}
.demo-hero{padding:70px clamp(20px,7vw,110px);display:grid;grid-template-columns:1fr .9fr;gap:36px;align-items:center}
.demo-box{background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:30px;box-shadow:var(--shadow)}
@media(max-width:900px){.hero,.reference,.support,.demo-hero,.grid{grid-template-columns:1fr}.nav{display:none}.hero-card{transform:none}.stats{grid-template-columns:1fr}h1{font-size:46px}}

/* V4.1 Final */
footer a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.note{font-size:14px;color:var(--muted)}
.card a,.section a{font-weight:850}

/* V4.2 Contact + unique demo landingpages */
.contact-form{
  display:grid;
  gap:14px;
  margin-top:22px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:14px 15px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:#fff;
  font:inherit;
}
.contact-form option{color:#111;background:#fff}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.form-hint{font-size:14px;color:#d9d3ca}

/* Handwerker demo */
.hw-body{background:#eef5fb;color:#102033;font-family:Inter,system-ui,sans-serif}
.hw-header{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,7vw,100px);background:#fff;border-bottom:1px solid #d8e6f3}
.hw-logo{font-weight:950;color:#0b5fa5}
.hw-phone{background:#ffb703;color:#111;padding:12px 16px;border-radius:999px;font-weight:950}
.hw-hero{display:grid;grid-template-columns:1fr .85fr;gap:40px;padding:82px clamp(20px,7vw,100px);align-items:center}
.hw-hero h1{font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-.06em;margin:12px 0;color:#102033}
.hw-card{background:#fff;border-radius:24px;padding:26px;box-shadow:0 20px 60px rgba(20,70,110,.13)}
.hw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:50px clamp(20px,7vw,100px)}
.hw-service{background:#fff;border-radius:22px;padding:24px;border:1px solid #d8e6f3}
.hw-review{background:#0b5fa5;color:#fff;padding:56px clamp(20px,7vw,100px)}
.hw-review p{color:#e5f2ff}

/* Coach demo */
.coach-body{background:#fbf7f1;color:#2b2118;font-family:Georgia,"Times New Roman",serif}
.coach-nav{display:flex;justify-content:space-between;padding:26px clamp(20px,8vw,120px);align-items:center}
.coach-brand{font-size:24px;font-weight:bold}
.coach-hero{text-align:center;padding:88px clamp(20px,12vw,170px)}
.coach-hero h1{font-size:clamp(44px,7vw,84px);font-weight:500;line-height:1;letter-spacing:-.05em;margin:16px 0;color:#2b2118}
.coach-lead{font-size:22px;color:#766756}
.coach-btn{display:inline-block;background:#2b2118;color:#fff;border-radius:999px;padding:15px 22px;margin-top:24px}
.coach-section{padding:60px clamp(20px,8vw,120px)}
.coach-split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.coach-panel{background:#fff;border-radius:36px;padding:36px;box-shadow:0 24px 70px rgba(70,40,20,.08)}
.coach-quote{font-size:28px;line-height:1.35;color:#2b2118}

/* SaaS demo */
.saas-body{background:#070b16;color:#eef6ff;font-family:Inter,system-ui,sans-serif}
.saas-nav{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,7vw,100px);border-bottom:1px solid rgba(255,255,255,.1)}
.saas-logo{font-weight:950;color:#7dd3fc}
.saas-hero{padding:88px clamp(20px,7vw,100px);text-align:center;background:radial-gradient(circle at 50% 0%,rgba(59,130,246,.35),transparent 36%)}
.saas-hero h1{font-size:clamp(48px,8vw,92px);line-height:.9;letter-spacing:-.08em;margin:16px auto;color:#fff;max-width:900px}
.saas-lead{font-size:21px;color:#b8c7dc;max-width:720px;margin:auto}
.saas-btn{display:inline-block;background:#3b82f6;color:#fff;border-radius:14px;padding:15px 22px;margin-top:28px;font-weight:950}
.saas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:60px clamp(20px,7vw,100px)}
.saas-card{background:#111827;border:1px solid #263247;border-radius:24px;padding:26px}
.saas-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 clamp(20px,7vw,100px) 80px}
.saas-price{background:#0f172a;border:1px solid #334155;border-radius:28px;padding:28px}
@media(max-width:900px){
  .hw-hero,.hw-grid,.coach-split,.saas-grid,.saas-pricing{grid-template-columns:1fr}
  .hw-header,.coach-nav,.saas-nav{gap:12px;flex-wrap:wrap}
}

/* V4.3 Reference + SEO Ready */
.reference-showcase{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:center;
}
.reference-shot{
  border-radius:28px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 24px 80px rgba(30,20,10,.16);
  background:#0b1220;
}
.reference-shot img{
  display:block;
  width:100%;
  height:auto;
}
.reference-meta{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:22px 0;
}
.reference-meta div{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.reference-meta strong{
  display:block;
  font-size:24px;
  color:var(--ink);
}
.analytics-note{
  margin-top:18px;
  padding:16px;
  border-radius:18px;
  border:1px dashed var(--line);
  background:rgba(255,255,255,.45);
}
@media(max-width:900px){
  .reference-showcase{grid-template-columns:1fr}
  .reference-meta{grid-template-columns:1fr}
}