/* ===== MeinHaus · Direction C — Atelier ===== */
:root{
  --bg:#F4EFE7; --surface:#FBF7EF; --surface-2:#EBE2D3;
  --ink:#2B2722; --body:#5C5547; --body-2:#6E665B; --muted:#7A7163; --muted-2:#8A8170;
  --accent:#C0512F; --accent-hover:#A8431F; --accent-warm:#E8A06A; --accent-warm-hover:#E0915A;
  --forest:#2F4A3A; --forest-hover:#27402F; --forest-text:#C9D4CB; --forest-text-2:#EBE2D3;
  --border:#E2D9CA; --border-2:#DDD2C0; --border-3:#D2C7B5;
  --max:1280px; --pad:56px;
  --serif:'Newsreader',serif; --sans:'Hanken Grotesk',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.media-video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}

.eyebrow{font:500 13px/1 var(--sans);letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin-bottom:20px}
.section-h2{font:500 42px/1.06 var(--serif);letter-spacing:-.01em}
.amber{color:var(--accent-warm)}

.btn{display:inline-flex;align-items:center;justify-content:center;font:600 14px/1 var(--sans);border-radius:9px;padding:11px 18px;transition:background .16s ease,box-shadow .16s ease,transform .16s ease,border-color .16s ease;cursor:pointer;border:1px solid transparent}
.btn-lg{font-size:15px;padding:14px 24px;border-radius:10px}
.btn-primary{background:var(--forest);color:var(--bg)}
.btn-primary:hover{background:var(--forest-hover)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border-3)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-amber{background:var(--accent-warm);color:var(--forest)}
.btn-amber:hover{background:var(--accent-warm-hover)}
.btn-ghost{background:transparent;color:var(--bg);border-color:rgba(244,239,231,.3)}
.btn-ghost:hover{border-color:rgba(244,239,231,.7)}
.link-plain{font:600 14.5px/1 var(--sans);color:var(--ink)}
.link-plain:hover{color:var(--accent)}
.link-accent{font:600 14px/1 var(--sans);color:var(--accent)}
.link-accent:hover{text-decoration:underline}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px var(--pad);border-bottom:1px solid var(--border);max-width:var(--max);margin:0 auto;position:sticky;top:0;background:rgba(244,239,231,.86);backdrop-filter:saturate(180%) blur(10px);z-index:50}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{width:30px;height:30px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.brand-word{font:600 22px/1 var(--serif);letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:30px;font:500 14.5px/1 var(--sans);color:var(--body-2)}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px}
.mobile-menu{display:flex;flex-direction:column;gap:6px;padding:14px var(--pad) 22px;border-bottom:1px solid var(--border);background:var(--bg)}
.mobile-menu a{padding:11px 4px;font:500 17px/1 var(--serif)}
.mobile-menu .btn{margin-top:6px;align-self:flex-start;font-family:var(--sans)}

/* hero */
.hero{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.hero-copy{padding:74px var(--pad)}
.toggle{position:relative;display:inline-flex;background:var(--surface-2);border:1px solid var(--border-2);border-radius:999px;padding:4px;margin-bottom:30px}
.toggle-pill{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:999px;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.10);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.toggle-opt{position:relative;z-index:1;border:none;background:transparent;cursor:pointer;font:600 14px/1 var(--sans);color:var(--ink);padding:9px 20px;border-radius:999px}
.hero-h1{font:500 60px/1.02 var(--serif);letter-spacing:-.01em;margin-bottom:22px}
.hero-sub{font:400 18px/1.6 var(--sans);color:var(--body);margin-bottom:32px;max-width:440px}
.hero-ctas{display:flex;gap:13px;align-items:center;margin-bottom:40px;flex-wrap:wrap}
.hero-stats{display:flex;gap:30px}
.stat-num{font:500 30px/1 var(--serif);color:var(--accent)}
.stat-label{font:500 13.5px/1.3 var(--sans);color:var(--muted);margin-top:7px;max-width:150px}
.stat-div{width:1px;background:#DDD3C2}
.hero-photo{position:relative;background:var(--forest);overflow:hidden}
.hero-photo > img,.hero-photo > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(22,32,25,.58),rgba(22,32,25,.14) 38%,transparent 64%)}
.hero-ticket{position:absolute;left:36px;bottom:36px;right:36px;z-index:2;background:rgba(244,239,231,.96);backdrop-filter:blur(4px);border-radius:14px;padding:20px 22px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.ticket-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ticket-head span:first-child{font:600 14px/1 var(--sans);color:var(--body-2)}
.ticket-badge{font:500 11.5px/1 var(--mono);color:var(--accent);background:#F3E2DA;padding:5px 8px;border-radius:6px}
.ticket-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ticket-name{font:500 16px/1.2 var(--serif)}
.ticket-price{font:500 30px/1 var(--serif);color:var(--forest)}

/* tagline band */
.tagline{background:var(--forest);color:var(--forest-text-2);padding:26px var(--pad);text-align:center;font:500 24px/1.2 var(--serif);letter-spacing:.01em}

/* trust */
.trust{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);padding:60px var(--pad) 30px;gap:30px}
.trust-col{border-top:2px solid var(--accent);padding-top:18px}
.trust-col h3{font:500 19px/1.15 var(--serif);margin-bottom:9px}
.trust-col p{font:400 14.5px/1.55 var(--sans);color:var(--body-2)}

/* how */
.how{max-width:var(--max);margin:0 auto;padding:54px var(--pad) 70px}
.how .section-h2{margin-bottom:44px;max-width:560px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.step-n{font:500 15px/1 var(--mono);color:var(--accent);margin-bottom:16px}
.step h3{font:500 19px/1.15 var(--serif);margin-bottom:9px}
.step p{font:400 14px/1.5 var(--sans);color:var(--body-2)}

/* ai feature */
.ai{display:grid;grid-template-columns:1fr 1fr;border-radius:22px;overflow:hidden;border:1px solid var(--border);margin:0 auto 80px;max-width:calc(var(--max) - 2*var(--pad))}
.ai-media{position:relative;min-height:380px;overflow:hidden}
.ai-media img{width:100%;height:100%;object-fit:cover}
.ai-copy{background:var(--surface);padding:52px 46px;display:flex;flex-direction:column;justify-content:center}
.ai-h2{font-size:34px;line-height:1.1;margin-bottom:18px}
.ai .eyebrow{margin-bottom:16px}
.ai-body{font:400 16px/1.6 var(--sans);color:var(--body);margin-bottom:24px}
.ai-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ai-bullets li{display:flex;align-items:center;gap:11px;font:500 15px/1.3 var(--sans);color:#3D372E}
.dash{color:var(--accent)}

/* results */
.results{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 80px}
.results-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:16px}
.results-head .section-h2{font-size:38px}
.results-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
.results-grid figure{margin:0;height:280px;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.results-grid img,.results-grid video{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.results-grid figure:hover img,.results-grid figure:hover video{transform:scale(1.05)}

/* cta */
.cta{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 80px}
.cta-panel{background:var(--forest);color:var(--bg);border-radius:24px;padding:64px 56px;text-align:center}
.cta-h2{font:500 46px/1.04 var(--serif);letter-spacing:-.01em;margin-bottom:16px}
.cta-sub{font:400 17px/1.55 var(--sans);color:var(--forest-text);margin:0 auto 30px;max-width:440px}
.cta-btns{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* footer */
.footer{max-width:var(--max);margin:0 auto;border-top:1px solid var(--border);padding:34px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer .brand-word{font-size:18px}
.footer-tag{font:500 13.5px/1 var(--sans);color:var(--muted-2)}

/* responsive */
@media (max-width:1024px){
  :root{--pad:40px}
  .hero{grid-template-columns:1fr}
  .hero-photo{min-height:420px;order:2}
  .ai{grid-template-columns:1fr}
  .ai-media{min-height:300px}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust-col:nth-child(3){grid-column:1/-1}
  .results-grid{grid-template-columns:repeat(2,1fr)}
  .results-grid figure:first-child{grid-column:1/-1}
  .hero-h1{font-size:50px}
}
@media (max-width:640px){
  :root{--pad:22px}
  .nav-links,.nav-actions{display:none}
  .nav-toggle{display:flex}
  .hero-copy{padding:44px var(--pad)}
  .hero-h1{font-size:40px}
  .section-h2{font-size:32px}
  .cta-h2{font-size:34px}
  .results-head .section-h2{font-size:30px}
  .steps,.trust,.results-grid{grid-template-columns:1fr}
  .results-grid figure:first-child{grid-column:auto}
  .cta-panel{padding:44px 24px}
  .hero-ctas .btn{flex:1 1 auto}
  .cta-btns{display:flex;width:100%}
  .cta-btns .btn{flex:1 1 auto}
  .footer{flex-direction:column;text-align:center;gap:12px}
  .tagline{font-size:20px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}