/* =========================================================
   DemandReach AI — Stylesheet
   Design tokens defined as CSS custom properties in :root.
   ========================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,500,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Color */
  --bg:            #0A0D13;
  --bg-raised:     #10141D;
  --bg-card:       #131826;
  --hairline:      #212838;
  --teal:          #2DE0C2;
  --teal-soft:     rgba(45,224,194,0.12);
  --violet:        #6E7BFF;
  --violet-soft:   rgba(110,123,255,0.14);
  --heading:       #F5F7FA;
  --body:          #A6AFC0;
  --body-dim:      #767F92;
  --danger:        #FF6E6E;
  --gradient-signature: linear-gradient(135deg, var(--teal) 0%, var(--violet) 100%);

  /* Type */
  --font-display: 'Clash Display', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  --step-3:  clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2.1rem + 3vw, 4.6rem);

  /* Layout */
  --maxw: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --shadow-glow: 0 0 0 1px rgba(45,224,194,0.15), 0 20px 60px -20px rgba(45,224,194,0.25);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px -24px rgba(0,0,0,0.6);
}

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

body{
  margin:0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--heading);
  line-height: 1.08;
  margin: 0 0 var(--space-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--step-4); }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
p{ margin: 0 0 var(--space-2); }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

section{ padding: var(--space-6) 0; }
@media (max-width: 720px){ section{ padding: var(--space-5) 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-2);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--gradient-signature);
  box-shadow: 0 0 12px var(--teal);
}

.section-head{ max-width: 640px; margin: 0 auto var(--space-4); text-align:center; }
.section-head.left{ margin-left:0; text-align:left; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.6em;
  font-family: var(--font-body); font-weight:600; font-size: var(--step-0);
  padding: 0.95em 1.6em; border-radius: 999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }
.btn-primary{
  background: var(--gradient-signature); color:#06110E;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover{ transform: translateY(-2px); }
.btn-secondary{
  background: transparent; color: var(--heading); border-color: var(--hairline);
}
.btn-secondary:hover{ border-color: var(--teal); color: var(--teal); }
.btn-block{ width:100%; }
.btn-lg{ padding: 1.1em 2em; font-size: var(--step-1); }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(10,13,19,0.75);
  border-bottom: 1px solid var(--hairline);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.brand{
  font-family: var(--font-display); font-size:1.15rem; color: var(--heading);
  text-decoration:none; display:flex; align-items:center; gap:0.5em;
}
.brand-mark{
  width:26px; height:26px; border-radius:8px;
  background: var(--gradient-signature);
  display:inline-block;
}
.nav-links{ display:flex; gap: var(--space-4); list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color: var(--body); font-size: var(--step--1); font-weight:500; }
.nav-links a:hover{ color: var(--heading); }
.nav-cta{ display:flex; align-items:center; gap: var(--space-2); }
.nav-toggle{ display:none; }
.nav-schedule-mobile{ display:none; }

@media (max-width: 860px){
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding: var(--space-2) var(--space-3);
    background: var(--bg-raised); border-bottom:1px solid var(--hairline);
  }
  .nav-links.nav-open{ display:flex; }
  .nav-links li{ padding: 0.75em 0; border-bottom: 1px solid var(--hairline); }
  .nav-links li:last-child{ border-bottom:none; }
  .site-header{ position: sticky; }
  .nav-schedule{ display:none; }
  .nav-cta{ gap: 0.5rem; }
  .btn.btn-primary{ padding: 0.75em 1.1em; font-size: var(--step--1); white-space: nowrap; }
}
@media (max-width: 400px){
  .btn.btn-primary{ padding: 0.7em 0.85em; font-size: 0.78rem; }
}
.nav-toggle{
  display:none;
}
@media (max-width: 860px){
  .nav-toggle{
    display:inline-flex; background:none; border:1px solid var(--hairline); color:var(--heading);
    border-radius: 8px; padding: 0.5em 0.7em; cursor:pointer;
  }
}

/* Hero */
.hero{
  padding-top: var(--space-6);
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset: -20% -10% auto -10%; height: 600px;
  background: radial-gradient(closest-side, var(--violet-soft), transparent 70%),
              radial-gradient(closest-side at 70% 30%, var(--teal-soft), transparent 60%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5);
  align-items:center; position:relative;
}
@media (max-width: 960px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero h1{ margin-bottom: var(--space-3); }
.hero .subhead{ font-size: var(--step-1); max-width: 46ch; color: var(--body); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.hero-micro{ font-family: var(--font-mono); font-size: var(--step--1); color: var(--body-dim); }
.hero-badge{
  display:inline-flex; align-items:center; gap:0.6em;
  margin-top: var(--space-3); padding: 0.6em 1em;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--bg-raised); font-size: var(--step--1); color: var(--teal);
  font-family: var(--font-mono);
}

/* Phone mockup */
.phone-mock{
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
  max-width: 380px; margin: 0 auto;
}
.phone-mock header{
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--body-dim);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}
.sample-tag{
  background: var(--teal-soft); color: var(--teal);
  padding: 0.25em 0.7em; border-radius: 999px; font-size: 0.72rem; letter-spacing:0.04em;
}
.thread{ display:flex; flex-direction:column; gap: 0.65rem; min-height: 220px; }
.bubble{
  max-width: 82%; padding: 0.7em 1em; border-radius: 16px; font-size: 0.92rem;
  opacity:0; transform: translateY(8px);
  animation: bubble-in 0.5s ease forwards;
}
.bubble.biz{ align-self:flex-start; background: var(--bg-raised); border:1px solid var(--hairline); color: var(--body); border-bottom-left-radius:4px; }
.bubble.prospect{ align-self:flex-end; background: var(--violet-soft); color: var(--heading); border-bottom-right-radius:4px; }
.bubble.ai{ align-self:flex-start; background: var(--teal-soft); color: var(--heading); border-bottom-left-radius:4px; }
.bubble .who{ display:block; font-family: var(--font-mono); font-size:0.68rem; color: var(--body-dim); margin-bottom:0.3em; text-transform:uppercase; letter-spacing:0.06em; }
.bubble:nth-child(1){ animation-delay: .2s; }
.bubble:nth-child(2){ animation-delay: 1.1s; }
.bubble:nth-child(3){ animation-delay: 2s; }
.bubble:nth-child(4){ animation-delay: 2.9s; }
@keyframes bubble-in{ to{ opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){ .bubble{ opacity:1; transform:none; animation:none; } }

/* Offer stack / capability cards */
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 960px){ .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.card h3{ font-size: var(--step-1); margin-bottom: 0.4em; }
.card p{ color: var(--body); margin-bottom:0; }
.card .num{
  font-family: var(--font-mono); color: var(--teal); font-size: var(--step--1);
  display:block; margin-bottom: 0.6em;
}

/* Compare table */
.compare{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 720px){ .compare{ grid-template-columns: 1fr; } }
.compare .card ul{ margin:0; padding-left: 1.1em; color: var(--body); }
.compare .card.old{ opacity:0.75; }
.compare .card.new{ border-color: var(--teal); box-shadow: var(--shadow-glow); }
.compare li{ margin-bottom: 0.5em; }

/* Steps */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); counter-reset: step; }
@media (max-width: 820px){ .steps{ grid-template-columns: 1fr; } }
.step{ position:relative; padding-left: var(--space-4); }
.step .step-index{
  font-family: var(--font-display); font-size: 2rem; color: transparent;
  -webkit-text-stroke: 1px var(--teal); position:absolute; left:0; top:-0.3rem;
}

/* Offer stack list */
.offer-stack{
  background: var(--bg-card); border:1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-card);
}
.offer-stack ul{ list-style:none; margin:0; padding:0; display:grid; gap: 0.85rem; }
.offer-stack li{ display:flex; gap:0.7em; align-items:flex-start; color: var(--heading); font-weight:500; }
.offer-stack li::before{
  content:"✓"; color: var(--teal); font-weight:700; flex:0 0 auto;
  width:1.4em; height:1.4em; border-radius:50%; background: var(--teal-soft);
  display:inline-flex; align-items:center; justify-content:center; font-size:0.8em;
}

/* Pricing */
.pricing-card{
  background: linear-gradient(180deg, var(--bg-card), var(--bg-raised));
  border: 1px solid var(--teal);
  box-shadow: var(--shadow-glow);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 620px; margin: 0 auto;
  text-align:center;
}
.price-tag{ font-family: var(--font-display); font-size: var(--step-4); color: var(--heading); margin: 0.2em 0; }
.price-tag span{ font-size: var(--step-1); color: var(--body-dim); font-family: var(--font-body); }
.price-note{
  font-size: var(--step--1); color: var(--body-dim); background: var(--bg-raised);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: var(--space-2);
  margin: var(--space-3) 0; text-align:left;
}
.ongoing-list{ text-align:left; margin: var(--space-3) 0; padding-left: 1.2em; color: var(--body); }
.ongoing-list li{ margin-bottom:0.4em; }

/* Guarantee */
.guarantee{
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: radial-gradient(circle at 20% 20%, var(--teal-soft), transparent 60%), var(--bg-card);
  padding: var(--space-4);
  text-align:center;
}
.guarantee h2{ background: var(--gradient-signature); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* FAQ */
.faq-item{ border-bottom: 1px solid var(--hairline); padding: var(--space-2) 0; }
.faq-item summary{
  cursor:pointer; font-weight:600; color: var(--heading); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color: var(--teal); transition: transform .2s ease; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top: 0.7em; color: var(--body); }

/* Final CTA */
.final-cta{
  text-align:center; background: var(--bg-raised); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}

/* Footer */
footer{ padding: var(--space-5) 0 var(--space-4); font-size: var(--step--1); color: var(--body-dim); }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:0.5em; }
.footer-links a{ text-decoration:none; color: var(--body); }
.footer-links a:hover{ color: var(--teal); }
.disclaimer{ border-top: 1px solid var(--hairline); padding-top: var(--space-3); line-height:1.7; }

/* Sticky mobile CTA */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 60;
  background: rgba(10,13,19,0.92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline);
  padding: 0.7rem var(--space-3);
  display:none;
}
@media (max-width: 720px){ .sticky-cta{ display:block; } body{ padding-bottom: 4.2rem; } }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(6,8,12,0.7); display:none;
  align-items:center; justify-content:center; z-index:100; padding: var(--space-3);
}
.modal-backdrop.open{ display:flex; }
.modal{
  background: var(--bg-card); border:1px solid var(--hairline); border-radius: var(--radius-lg);
  max-width: 420px; width:100%; padding: var(--space-4); position:relative;
}
.modal-close{
  position:absolute; top:1rem; right:1rem; background:none; border:none; color: var(--body);
  font-size:1.4rem; cursor:pointer; line-height:1;
}
.modal-close:focus-visible{ outline: 2px solid var(--teal); }
.zelle-qr{ width:180px; height:180px; margin: var(--space-2) auto; background: var(--bg-raised); border:1px solid var(--hairline); border-radius: var(--radius-sm); }

/* Forms */
.form-field{ margin-bottom: var(--space-2); text-align:left; }
.form-field label{ display:block; font-size: var(--step--1); color: var(--body); margin-bottom:0.4em; }
.form-field input, .form-field textarea{
  width:100%; padding: 0.8em 1em; background: var(--bg-raised); border:1px solid var(--hairline);
  border-radius: var(--radius-sm); color: var(--heading); font-family: var(--font-body); font-size: var(--step-0);
}
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--teal); outline-offset:1px; }
.form-error{ color: var(--danger); font-size: 0.8rem; margin-top: 0.3em; display:none; }
.form-field.invalid input{ border-color: var(--danger); }
.form-field.invalid .form-error{ display:block; }
.consent-row{ display:flex; gap:0.7em; align-items:flex-start; font-size: var(--step--1); color: var(--body-dim); }
.consent-row input{ margin-top:0.3em; }
.form-status{ font-size: var(--step--1); margin-top: var(--space-2); }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.badge-row{ display:flex; flex-wrap:wrap; gap:0.6em; justify-content:center; margin-top: var(--space-2); }
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

.legal-page main{ max-width: 760px; margin:0 auto; padding: var(--space-5) var(--space-3); }
.legal-page h2{ margin-top: var(--space-4); }
.legal-page .updated{ font-family: var(--font-mono); color: var(--body-dim); font-size: var(--step--1); }