@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@400;600&display=swap');

:root{
  --rw-bg-grad: radial-gradient(1200px 800px at 20% 20%, #2b1b2e 0%, #0b0b12 55%, #000 100%);
  --rw-accent: #ffb3d1;
  --rw-accent-soft: rgba(255,179,209,0.10);
  --rw-accent-border: rgba(255,179,209,0.30);
  --rw-accent-hover: rgba(255,179,209,0.22);
  --rw-accent-focus: rgba(255,179,209,0.40);
  --rw-card-bg: rgba(255,255,255,0.05);
  --rw-border: rgba(255,255,255,0.10);
  --rw-text: #fff;
  --rw-text-muted: rgba(255,255,255,0.45);
  --rw-text-faint: rgba(255,255,255,0.25);
  --rw-error: #f87171;
  --rw-success: #68d391;
  --rw-font-heading: 'Cinzel Decorative', serif;
  --rw-font-accent: 'Cinzel', serif;
  --rw-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
html::-webkit-scrollbar{display:none}
body{
  margin:0;
  background:var(--rw-bg-grad);
  background-attachment:fixed;
  font-family:var(--rw-font-system);
  color:var(--rw-text);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.rw-heading{font-family:var(--rw-font-heading);color:var(--rw-text)}
section{padding:90px 0}
section h2{font-family:var(--rw-font-heading);font-size:2rem;text-align:center;margin:0 0 12px}
section .section-sub{text-align:center;color:var(--rw-text-muted);max-width:560px;margin:0 auto 50px;font-size:.95rem}

.rw-card{
  background:var(--rw-card-bg);
  border:1px solid var(--rw-border);
  border-radius:20px;
  backdrop-filter:blur(14px);
}
.rw-btn{
  display:inline-block;
  background:var(--rw-accent-soft);
  border:1px solid var(--rw-accent-border);
  color:var(--rw-accent);
  padding:14px 32px;
  border-radius:12px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  transition:background .2s, border-color .2s;
  cursor:pointer;
}
.rw-btn:hover{background:var(--rw-accent-hover);border-color:var(--rw-accent-focus)}
.rw-btn-ghost{background:transparent;border:1px solid var(--rw-border);color:var(--rw-text)}
.rw-btn-ghost:hover{border-color:var(--rw-accent-border);color:var(--rw-accent)}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;
  background:rgba(11,11,18,0.7);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rw-border);
}
.nav-logo{font-family:var(--rw-font-heading);font-size:1.3rem;text-decoration:none;color:var(--rw-text)}
.nav-logo span{color:var(--rw-accent)}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;color:var(--rw-text-muted);font-size:.9rem;transition:color .15s}
.nav-links a:hover{color:var(--rw-accent)}
.nav-cta{display:flex;gap:10px}
.nav-toggle{display:none;background:none;border:none;color:var(--rw-text);font-size:1.6rem;cursor:pointer}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{padding:120px 0 100px;text-align:center}
.hero h1{font-family:var(--rw-font-heading);font-size:clamp(2.2rem,5vw,3.4rem);margin:0 0 18px;line-height:1.25}
.hero h1 span{color:var(--rw-accent)}
.hero p{color:var(--rw-text-muted);max-width:600px;margin:0 auto 36px;font-size:1.05rem}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── Features ────────────────────────────────────────────────────────── */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{padding:30px 26px}
.feature-icon{font-size:1.8rem;margin-bottom:14px}
.feature-card h3{font-family:var(--rw-font-accent);font-size:1.1rem;margin:0 0 8px}
.feature-card p{color:var(--rw-text-muted);font-size:.9rem;margin:0}

/* ── Screenshots ─────────────────────────────────────────────────────── */
.screens{display:flex;flex-direction:column;gap:60px}
.screen-row{display:flex;align-items:center;gap:48px}
.screen-row.reverse{flex-direction:row-reverse}
.screen-img{flex:1.3;border-radius:16px;overflow:hidden;border:1px solid var(--rw-border)}
.screen-text{flex:1}
.screen-text h3{font-family:var(--rw-font-accent);font-size:1.3rem;margin:0 0 12px}
.screen-text p{color:var(--rw-text-muted);font-size:.95rem}

/* ── Setup-Guide ─────────────────────────────────────────────────────── */
.steps{counter-reset:step;display:grid;gap:18px;max-width:720px;margin:0 auto}
.step{display:flex;gap:18px;padding:22px;align-items:flex-start}
.step-num{
  counter-increment:step;
  font-family:var(--rw-font-heading);
  color:var(--rw-accent);
  font-size:1.3rem;
  min-width:38px;
}
.step-num::before{content:counter(step)}
.step h4{margin:0 0 6px;font-size:1rem}
.step p{margin:0;color:var(--rw-text-muted);font-size:.9rem}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:740px;margin:0 auto;display:grid;gap:12px}
.faq-item{padding:0 22px;overflow:hidden}
.faq-item summary{
  padding:18px 0;cursor:pointer;font-weight:600;font-size:.97rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--rw-accent);font-size:1.3rem}
.faq-item[open] summary::after{content:'–'}
.faq-item p{margin:0 0 18px;color:var(--rw-text-muted);font-size:.9rem}

/* ── Kontakt / Footer ────────────────────────────────────────────────── */
.contact-box{max-width:520px;margin:0 auto;padding:40px;text-align:center}
footer{border-top:1px solid var(--rw-border);padding:34px 0;text-align:center}
footer .footer-links{display:flex;gap:20px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
footer a{color:var(--rw-text-muted);text-decoration:none;font-size:.85rem}
footer a:hover{color:var(--rw-accent)}
footer .footer-copy{color:var(--rw-text-faint);font-size:.8rem}

/* ── Legal pages ─────────────────────────────────────────────────────── */
.legal{padding:140px 0 100px;max-width:760px;margin:0 auto}
.legal h1{font-family:var(--rw-font-heading);margin-bottom:30px}
.legal h2{font-family:var(--rw-font-accent);font-size:1.2rem;margin-top:34px}
.legal p, .legal li{color:var(--rw-text-muted);font-size:.92rem}

@media (max-width: 860px){
  .nav-links, .nav-cta .rw-btn-ghost{display:none}
  .nav-toggle{display:block}
  .feature-grid{grid-template-columns:1fr 1fr}
  .screen-row, .screen-row.reverse{flex-direction:column}
}
@media (max-width: 560px){
  .feature-grid{grid-template-columns:1fr}
  section{padding:60px 0}
}