/**
 * RechnungsPilot – home/landing page sections.
 * Shared design system (reset, fonts, nav, footer, buttons) lives in base.css,
 * which is enqueued before this file. This file only styles the home sections.
 */

/* HERO */
.hero{min-height:100vh;background:var(--navy);display:flex;align-items:center;padding:120px 2rem 80px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:0;right:0;width:55%;height:100%;background:var(--navy-mid);clip-path:polygon(8% 0,100% 0,100% 100%,0% 100%);}
.hero-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1;width:100%;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(232,160,32,.15);border:1px solid rgba(232,160,32,.4);color:var(--accent-light);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .9rem;border-radius:3px;margin-bottom:1.5rem;}
.hero-eyebrow::before{content:'';display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3rem);font-weight:700;color:var(--white);line-height:1.15;letter-spacing:-.03em;margin-bottom:1rem;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-tagline{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:1rem;}
.hero-sub{color:var(--text-muted);font-size:.95rem;line-height:1.75;margin-bottom:2rem;max-width:480px;}
.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-card{background:var(--navy-card);border:1px solid var(--border-mid);border-radius:8px;padding:2rem;}
.hero-card-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1.25rem;}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem;}
.stat-box{background:var(--navy-light);border-radius:6px;padding:1rem;}
.stat-box.accent{background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.25);}
.stat-num{font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--white);line-height:1;margin-bottom:.25rem;}
.stat-box.accent .stat-num{color:var(--accent);}
.stat-label{font-size:.78rem;color:var(--text-muted);font-weight:500;}
.process-steps{display:flex;flex-direction:column;gap:.6rem;}
.process-step{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:var(--text-muted);}
.step-dot{width:28px;height:28px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--navy);flex-shrink:0;}

/* LOGOS BAND */
.logos-band{background:var(--navy-mid);padding:1.25rem 2rem;border-top:1px solid var(--border-mid);}
.logos-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;}
.logos-label{font-size:.75rem;color:var(--text-faint);font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.logos-list{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;}
.logo-pill{background:var(--border);border:1px solid var(--border-mid);border-radius:4px;padding:.35rem .9rem;font-size:.8rem;font-weight:600;color:var(--text-muted);}

/* SECTION SCAFFOLD */
section{padding:80px 2rem;}
.section-inner{max-width:1100px;margin:0 auto;}
.section-label{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem;}
.section-title{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;color:var(--white);line-height:1.2;letter-spacing:-.02em;margin-bottom:1rem;}
.section-sub{font-size:1rem;color:var(--text-muted);max-width:560px;line-height:1.75;margin-bottom:3rem;}

/* PROBLEM */
.problem{background:var(--navy-mid);}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.pain-list{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-top:2rem;}
.pain-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.25rem;background:rgba(217,48,37,.08);border-left:3px solid rgba(217,48,37,.6);border-radius:0 6px 6px 0;}
.pain-num{width:28px;height:28px;background:rgba(217,48,37,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#F28B82;flex-shrink:0;margin-top:2px;}
.pain-text{font-size:.9rem;color:var(--text-muted);line-height:1.55;}
.pain-text strong{color:var(--white);display:block;font-weight:600;margin-bottom:.15rem;}
.cost-card{background:var(--navy-card);border:1px solid var(--border-mid);border-radius:8px;padding:2rem;}
.cost-card h3{font-family:var(--serif);font-size:1.3rem;font-weight:700;margin-bottom:1.5rem;color:var(--white);}
.cost-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border);}
.cost-label{font-size:.85rem;color:var(--text-muted);}
.cost-val{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--accent);}
.cost-total{margin-top:1.25rem;padding-top:1.25rem;border-top:2px solid var(--accent);display:flex;justify-content:space-between;align-items:center;}
.cost-total .cost-label{color:var(--white);font-weight:600;font-size:.9rem;}
.cost-total .cost-val{font-size:1.5rem;}

/* BELEGE */
.belege{background:var(--navy);}
.beleg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.beleg-card{background:var(--navy-mid);border:1px solid var(--border-mid);border-radius:8px;padding:1.75rem;}
.beleg-num{width:36px;height:36px;background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.25);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--accent);margin-bottom:1rem;}
.beleg-card h4{font-weight:600;font-size:.95rem;color:var(--white);margin-bottom:.6rem;}
.beleg-card p{font-size:.83rem;color:var(--text-muted);line-height:1.65;}
.beleg-tag{display:inline-block;margin-top:.75rem;background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.3);color:var(--accent-light);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .6rem;border-radius:3px;}

/* HOW */
.how{background:var(--navy-mid);}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative;}
.steps-grid::before{content:'';position:absolute;top:28px;left:calc(12.5% + 28px);right:calc(12.5% + 28px);height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 8px,transparent 8px,transparent 16px);}
.step-card{background:var(--navy-card);border:1px solid var(--border-mid);border-radius:8px;padding:1.5rem;}
.step-num{width:56px;height:56px;background:var(--navy-light);border:1px solid var(--border-mid);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--accent);margin-bottom:1.25rem;position:relative;z-index:1;}
.step-card h4{font-weight:600;font-size:.95rem;color:var(--white);margin-bottom:.6rem;}
.step-card p{font-size:.83rem;color:var(--text-muted);line-height:1.6;}

/* MOTTO */
.motto-banner{background:var(--navy-card);border-top:3px solid var(--accent);border-bottom:3px solid var(--accent);padding:3rem 2rem;text-align:center;}
.motto-banner h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--white);letter-spacing:-.02em;}
.motto-banner h2 span{color:var(--accent);}

/* ONBOARDING */
.onboarding{background:var(--navy);}
.onboarding-intro{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.pilot-badge{display:flex;align-items:flex-start;gap:1rem;background:rgba(26,115,64,.12);border:1px solid rgba(168,213,181,.2);border-radius:8px;padding:1.25rem;margin-top:2rem;}
.pilot-badge-bar{width:4px;background:#6FCF97;border-radius:2px;flex-shrink:0;align-self:stretch;}
.pilot-badge-text h4{font-weight:600;font-size:.95rem;color:#6FCF97;margin-bottom:.3rem;}
.pilot-badge-text p{font-size:.85rem;color:rgba(111,207,151,.7);line-height:1.6;}
.process-flow{display:flex;flex-direction:column;}
.flow-step{display:flex;align-items:flex-start;gap:1rem;position:relative;}
.flow-step:not(:last-child)::after{content:'';position:absolute;left:18px;top:40px;width:2px;height:calc(100% - 8px);background:var(--border-mid);}
.flow-num{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;position:relative;z-index:1;background:var(--navy-light);border:1px solid var(--border-mid);color:var(--accent);}
.flow-body{padding-bottom:1.5rem;flex:1;}
.flow-title{font-weight:600;font-size:.92rem;color:var(--white);margin-bottom:.2rem;}
.flow-desc{font-size:.82rem;color:var(--text-muted);line-height:1.55;}
.flow-decision-wrap{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.5rem;}
.flow-tag-yes{background:rgba(26,115,64,.2);color:#6FCF97;font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:3px;border:1px solid rgba(111,207,151,.25);}
.flow-tag-no{background:rgba(217,48,37,.15);color:#F28B82;font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:3px;border:1px solid rgba(242,139,130,.25);}
.flow-no-risk{font-size:.8rem;color:var(--text-faint);font-style:italic;}

/* BENEFITS */
.benefits{background:var(--navy-mid);}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.benefit-card{background:var(--navy-card);border:1px solid var(--border-mid);border-radius:8px;padding:1.75rem;}
.benefit-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;}
.benefit-card h4{font-weight:600;font-size:.95rem;color:var(--white);margin-bottom:.6rem;}
.benefit-card p{font-size:.83rem;color:var(--text-muted);line-height:1.65;}

/* COMPARE */
.compare{background:var(--navy);}
.compare-table{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.compare-col{background:var(--navy-mid);border:1px solid var(--border-mid);border-radius:8px;padding:1.5rem;}
.compare-col h3{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1rem;border-radius:4px;margin-bottom:1rem;}
.compare-col.before h3{background:rgba(217,48,37,.12);color:#F28B82;border:1px solid rgba(217,48,37,.2);}
.compare-col.after h3{background:rgba(26,115,64,.12);color:#6FCF97;border:1px solid rgba(111,207,151,.2);}
.compare-item{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.88rem;color:var(--text-muted);}
.compare-item:last-child{border-bottom:none;}
.ci-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;margin-top:2px;}
.before .ci-dot{background:rgba(217,48,37,.2);color:#F28B82;}
.after .ci-dot{background:rgba(26,115,64,.2);color:#6FCF97;}

/* MICROSOFT */
.microsoft{background:var(--navy-mid);}
.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.ms-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.ms-logo-box{background:var(--navy-card);border:1px solid var(--border-mid);border-radius:8px;padding:1.25rem;text-align:center;font-size:.82rem;font-weight:600;color:var(--text-muted);}
.ms-badge{display:inline-flex;align-items:center;gap:.6rem;background:var(--accent);color:var(--navy);padding:.6rem 1.2rem;border-radius:4px;font-size:.82rem;font-weight:700;margin-top:1.5rem;}

/* HOME CTA */
.cta-section{background:var(--accent);padding:80px 2rem;}
.cta-inner{max-width:700px;margin:0 auto;text-align:center;}
.cta-section h2{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;color:var(--navy);margin-bottom:1rem;}
.cta-section p{color:var(--navy);opacity:.75;font-size:1rem;margin-bottom:2rem;line-height:1.7;}

@media(max-width:768px){
  .hero-grid,.problem-grid,.steps-grid,.benefits-grid,.compare-table,.ms-grid,.onboarding-intro,.beleg-grid{grid-template-columns:1fr;}
  .steps-grid::before{display:none;}
  .hero{padding:90px 1.25rem 80px;}
  .hero::before{display:none;}
  section{padding:56px 1.25rem;}
  .motto-banner{padding:2rem 1.25rem;}
  .logos-band{padding:1rem 1.25rem;}
  .logos-inner{gap:1rem;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .ms-logos{grid-template-columns:repeat(2,1fr);}
  .hero-buttons{flex-direction:column;}
  .hero-buttons a{text-align:center;}
  .section-sub{max-width:100%;}
  .flow-decision-wrap{flex-direction:column;align-items:flex-start;}
}