/* Inter, self-hosted (SIL Open Font License 1.1), no external font requests */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter/inter-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/inter/inter-latin-900-normal.woff2') format('woff2')}

/* ScanQM — Design tokens (matched to scanqm.com live palette) */
:root{
  --bg:#1E293B;          /* real scanqm.com body background (slate-800) */
  --bg-raise:#26334A;    /* card surface, one step lighter */
  --bg-raise-2:#2E3D57;  /* hover / secondary surface */
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --white:#FFFFFF;
  --text:#FFFFFF;
  --text-muted:#94A3B8;  /* real scanqm.com muted text */
  --accent:#0EA5E9;      /* real scanqm.com brand accent (sky-500) */
  --accent-hover:#0284C7;
  --cta:#0EA5E9;
  --cta-hover:#0284C7;
  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;
  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 8px 24px rgba(0,0,0,.28);
  --shadow-lg:0 16px 48px rgba(0,0,0,.36);
  --maxw:1180px;
  color-scheme: dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .5em; font-weight:800; letter-spacing:-0.02em; color:var(--white)}
p{margin:0 0 1em; color:var(--text-muted)}
ul{margin:0; padding:0}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
section{padding:88px 0; position:relative}
@media (max-width:768px){ section{padding:56px 0} }

/* Decorative dot grid + glow, matching scanqm.com background treatment */
body::before{
  content:''; position:fixed; inset:0;
  background-image:radial-gradient(circle, rgba(14,165,233,.15) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none; z-index:0;
}
.glow{position:fixed; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(14,165,233,.30) 0%, transparent 70%); top:-200px; right:-200px; pointer-events:none; z-index:0}
.glow2{position:fixed; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(14,165,233,.15) 0%, transparent 70%); bottom:-100px; left:-100px; pointer-events:none; z-index:0}

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius-sm); font-weight:600; font-size:16px;
  cursor:pointer; border:1px solid transparent; transition:background-color .2s, color .2s, border-color .2s, transform .15s;
  min-height:48px;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#08202E}
.btn-primary:hover{background:var(--accent-hover); color:var(--white)}
.btn-secondary{background:transparent; color:var(--white); border-color:rgba(255,255,255,.25)}
.btn-secondary:hover{background:rgba(255,255,255,.08)}
.btn-ghost-inverse{background:rgba(255,255,255,.06); color:var(--white); border-color:rgba(255,255,255,.25)}
.btn-ghost-inverse:hover{background:rgba(255,255,255,.14)}
.btn-lg{padding:16px 32px; font-size:17px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(30,41,59,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:88px; gap:24px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--white)}
.logo img{height:68px; width:auto}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a{font-weight:600; font-size:15px; color:var(--text-muted); transition:color .2s}
.nav-links a:hover{color:var(--white)}
.header-actions{display:flex; align-items:center; gap:14px}
.lang-switch{display:flex; gap:6px; font-size:13px; font-weight:700}
.lang-switch a{padding:4px 9px; border-radius:6px; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.2)}
.lang-switch a[aria-current="true"]{background:rgba(255,255,255,.08); color:var(--white)}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--white)}
@media (max-width:900px){
  .header-inner{height:72px}
  .logo img{height:52px}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-links.nav-open{
    display:flex; position:absolute; top:72px; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--border);
    flex-direction:column; padding:16px 24px; gap:16px; box-shadow:var(--shadow-md);
  }
}

/* Hero */
.hero{padding:96px 0 100px}
.hero-grid{display:grid; grid-template-columns:1fr; gap:48px}
.hero-grid .lead{max-width:680px}
.eyebrow{
  display:block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#7DD3FC; margin-bottom:14px;
}
.hero h1{font-size:clamp(32px,4.5vw,52px)}
.hero .lead{font-size:19px; color:var(--text-muted); max-width:680px}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.hero-trust{display:flex; gap:24px; margin-top:40px; flex-wrap:wrap}
.hero-trust-item{font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:8px}
.hero-trust-item svg{flex-shrink:0; color:var(--accent)}
.hero-anim-band{
  width:100vw; position:relative; left:50%; right:50%; margin:72px -50vw 0;
  background:var(--bg-raise); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.hero-anim-inner{max-width:1560px; margin:0 auto; padding:56px 40px}
.hero-anim-head{max-width:980px; margin:0 auto 40px; text-align:center}
.hero-anim-head .eyebrow{color:#7DD3FC}
.hero-anim-head h2{font-size:clamp(22px,2.9vw,34px); color:var(--white)}
@media (min-width:701px){ .hero-anim-head h2{white-space:nowrap} }
.hero-anim-wrap .sq{--page:var(--bg-raise); --ink:#E9EEF3; --muted:#A9BAC4; max-width:1480px}
@media (max-width:900px){ .hero-anim-inner{padding:40px 20px} }

.hero-visual{
  background:var(--bg-raise); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-lg);
  margin-top:64px;
}
.hero-visual img{border-radius:var(--radius-sm); width:100%}
.hero-visual figcaption{font-size:13px; color:var(--text-muted); margin-top:12px; text-align:center}
@media (max-width:700px){
  .hero-visual{margin-left:-24px; margin-right:-24px; padding:0; border:none; border-radius:0; box-shadow:none; background:none}
  .hero-visual img{border-radius:0}
  .hero-visual figcaption{padding:0 24px}
}

/* Category bar */
.category-bar{
  background:var(--bg-raise); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:22px 0;
}
.category-bar p{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); text-align:center; margin-bottom:14px; font-weight:700}
.category-bar-list{display:flex; justify-content:center; gap:28px; flex-wrap:wrap; font-weight:600; color:#CBD5E1; font-size:14px}

/* Section headers */
.section-head{max-width:680px; margin:0 auto 48px; text-align:center}
.section-head h2{font-size:clamp(26px,3.4vw,38px)}
.section-head p{font-size:17px}

/* Practical example (Sanitärraumzettel) */
.example{
  background:var(--bg-raise); border:1px solid var(--border); border-radius:24px; padding:56px; overflow:hidden;
}
@media (max-width:900px){ .example{padding:32px 24px} }
.example-vs{display:flex; align-items:center; justify-content:center; gap:10px; margin:20px 0; color:var(--text-muted); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.example-vs::before, .example-vs::after{content:""; flex:1; height:1px; background:var(--border)}
.example-list{list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:8px}
.example-list li{display:flex; gap:12px; font-size:15px; color:#E2E8F0}
.example-list svg{flex-shrink:0; color:var(--accent); margin-top:2px}

/* Problem/Solution */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){ .problem-grid{grid-template-columns:1fr} }
.problem-card{background:var(--bg-raise); border:1px solid var(--border); border-radius:var(--radius); padding:28px}
.problem-card .icon-badge{background:rgba(239,68,68,.12); color:var(--danger)}
.problem-card h3{font-size:18px}

.icon-badge{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}

/* Feedback spotlight (USP) */
.spotlight{
  background:linear-gradient(135deg, rgba(14,165,233,.14), rgba(14,165,233,.02)), var(--bg-raise);
  border:1px solid rgba(14,165,233,.25);
  border-radius:24px; padding:64px; position:relative; overflow:hidden;
}
.spotlight-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; position:relative; z-index:1}
@media (max-width:900px){ .spotlight-grid{grid-template-columns:1fr} .spotlight{padding:40px 28px} }
.spotlight h2{font-size:clamp(24px,3vw,34px)}
.spotlight p{font-size:17px}
.spotlight-list{list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:14px}
.spotlight-list li{display:flex; gap:12px; font-size:15px; color:#E2E8F0}
.spotlight-list svg{flex-shrink:0; color:var(--accent); margin-top:2px}
.spotlight-visual img{width:100%; max-width:380px}
.spotlight-visual{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:16px; padding:20px}

/* Feature grid */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){ .features-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .features-grid{grid-template-columns:1fr} }
.feature-card{
  background:var(--bg-raise); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; transition:box-shadow .2s, transform .2s, border-color .2s;
}
.feature-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--border-strong)}
.feature-card .icon-badge{background:rgba(14,165,233,.14); color:var(--accent)}
.feature-card h3{font-size:17px}
.feature-card p{font-size:14.5px; margin-bottom:0}

/* Comparison table */
.compare-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-raise)}
table.compare{width:100%; border-collapse:collapse; min-width:640px}
table.compare th, table.compare td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--border); font-size:14.5px}
table.compare thead th{background:rgba(255,255,255,.03); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted)}
table.compare th:first-child, table.compare td:first-child{position:sticky; left:0; background:var(--bg-raise); font-weight:600; min-width:220px; color:var(--white)}
table.compare thead th:first-child{background:rgba(255,255,255,.03)}
table.compare .col-scanqm{background:rgba(14,165,233,.08)}
table.compare thead .col-scanqm{background:rgba(14,165,233,.16); color:var(--white); font-weight:800}
table.compare td.yes{color:var(--success); font-weight:700}
table.compare td.partial{color:var(--warning); font-weight:600}
table.compare td.no{color:var(--text-muted)}
table.compare tbody tr:last-child td{border-bottom:none}

@media (max-width:700px){
  .compare-wrap{overflow-x:visible; border:none; background:none}
  table.compare{min-width:0}
  table.compare thead{display:none}
  table.compare tbody tr{display:block; margin-bottom:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-raise); overflow:hidden}
  table.compare td{display:block; border-bottom:1px solid var(--border); padding:12px 16px}
  table.compare tbody tr:last-child td{border-bottom:1px solid var(--border)}
  table.compare tr td:last-child{border-bottom:none}
  table.compare td:first-child{position:static; min-width:0; background:none; font-size:15px; padding-bottom:8px}
  table.compare td:not(:first-child)::before{content:attr(data-label); display:block; color:var(--text-muted); font-weight:600; font-size:12.5px; margin-bottom:4px}
}

/* How it works */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding-top:8px}
.step-num{
  width:40px; height:40px; border-radius:50%; background:rgba(14,165,233,.15); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:16px;
}
.step h3{font-size:17px}
.step p{font-size:14.5px}

/* Pricing */
.pricing-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:700px){ .pricing-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .pricing-grid{grid-template-columns:repeat(3,1fr)} }
.price-tagline{font-size:13px; color:#7DD3FC; margin:2px 0 0; font-weight:600}
.price-card{background:var(--bg-raise); border:1px solid var(--border); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column}
.price-card.featured{border:2px solid var(--accent); box-shadow:var(--shadow-md); position:relative}
.price-badge{position:absolute; top:-13px; left:24px; background:var(--accent); color:#08202E; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px}
.price-card h3{font-size:18px}
.price-amount{font-size:32px; font-weight:800; margin:8px 0 4px; color:var(--white)}
.price-amount span{font-size:14px; font-weight:600; color:var(--text-muted)}
.price-card ul{list-style:none; margin:20px 0 24px; display:flex; flex-direction:column; gap:10px; flex-grow:1}
.price-card li{display:flex; gap:10px; font-size:14px; color:#CBD5E1}
.price-card li svg{flex-shrink:0; color:var(--success); margin-top:2px}

.price-note{font-size:13px; color:var(--text-muted); margin:0 0 4px}
.enterprise-note{max-width:780px; margin:32px auto 0; padding:24px 28px; border:1px solid var(--border-strong); border-radius:var(--radius); text-align:center; background:var(--bg-raise)}
.enterprise-note h3{font-size:18px}
.enterprise-note p{font-size:15px}
.enterprise-features{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px 28px; margin:22px auto 26px; max-width:660px; text-align:left}
.enterprise-features li{display:flex; gap:10px; font-size:14.5px; color:#E2E8F0}
.enterprise-features svg{flex-shrink:0; color:var(--success); margin-top:3px}

/* FAQ */
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--bg-raise); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden}
.faq-item summary{
  padding:18px 22px; font-weight:600; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:15.5px; color:var(--white);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .chevron{transition:transform .2s; flex-shrink:0; color:var(--text-muted)}
.faq-item[open] summary .chevron{transform:rotate(180deg)}
.faq-item .faq-body{padding:0 22px 20px; font-size:14.5px; color:var(--text-muted)}

/* Final CTA */
.final-cta{
  background:linear-gradient(135deg, rgba(14,165,233,.16), rgba(14,165,233,.02)), var(--bg-raise);
  border:1px solid rgba(14,165,233,.25);
  border-radius:24px; padding:64px; text-align:center;
}
.final-cta h2{font-size:clamp(26px,3.5vw,38px)}
.final-cta p{font-size:17px; max-width:560px; margin:0 auto 28px}
.final-cta .hero-ctas{justify-content:center}

/* Footer */
.site-footer{background:#161F2E; color:var(--text-muted); padding:56px 0 28px; font-size:14px; border-top:1px solid var(--border)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px}
@media (max-width:768px){ .footer-grid{grid-template-columns:1fr 1fr} }
.footer-grid h4{color:var(--white); font-size:14px; margin-bottom:16px}
.footer-grid ul{display:flex; flex-direction:column; gap:10px; list-style:none}
.footer-grid a:hover{color:var(--white)}
.footer-logo{display:flex; align-items:center; gap:10px; color:var(--white); font-weight:800; font-size:18px; margin-bottom:12px}
.footer-bottom{border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px}

/* Fixed login corner for existing customers */
.login-corner{
  position:fixed; right:0; bottom:0; z-index:45; width:132px; height:132px;
  background:var(--accent); clip-path:polygon(100% 0,100% 100%,0 100%);
  transition:background-color .2s, width .2s, height .2s;
}
.login-corner span{
  position:absolute; left:90px; top:90px; transform:translate(-50%,-50%) rotate(-45deg);
  font-weight:800; font-size:15px; letter-spacing:.02em; color:#08202E; white-space:nowrap; pointer-events:none;
}
.login-corner:hover{background:var(--accent-hover); width:144px; height:144px}
.login-corner:hover span{color:var(--white); left:98px; top:98px}
.login-corner:focus-visible{outline:none; background:var(--accent-hover)}
.login-corner:focus-visible span{color:var(--white); text-decoration:underline}
@media (max-width:600px){ .login-corner{width:104px; height:104px} .login-corner span{left:72px; top:72px; font-size:14px} .login-corner:hover{width:104px; height:104px} .login-corner:hover span{left:72px; top:72px} }
@media (prefers-reduced-motion: reduce){ .login-corner{transition:none} }
.footer-bottom{padding-right:120px}

/* Use-case chips */
.usecases{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.usecases li{
  padding:4px 10px; font-size:16px; font-weight:600; color:#E2E8F0;
}

/* Legal pages (Impressum, Datenschutz) */
.legal{padding:48px 0 72px}
.legal .lang-content{display:none; max-width:820px}
.legal .lang-content.active{display:block}
.legal .header{margin-bottom:28px}
.legal .header-label{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.legal h1{font-size:clamp(28px,4vw,40px)}
.legal .card{background:var(--bg-raise); border:1px solid var(--border); border-radius:var(--radius); padding:24px 28px; margin-bottom:16px}
.legal .card h2{font-size:19px; margin:20px 0 10px}
.legal .card h2:first-child{margin-top:0}
.legal .card h3{font-size:16px; margin:18px 0 8px}
.legal .card p, .legal .card li{font-size:15px; color:#CBD5E1; line-height:1.65}
.legal .card ul{padding-left:20px; margin:0 0 1em}
.legal .card a, .legal .intro-note a, .legal .stand + div a{color:#7DD3FC; text-decoration:underline}
.legal .intro-note{background:rgba(14,165,233,.08); border:1px solid rgba(14,165,233,.25); border-radius:var(--radius); padding:16px 20px; margin-bottom:16px; font-size:14.5px; color:#CBD5E1}
.legal .stand{font-size:13px; color:var(--text-muted); margin:8px 0 0}
.legal-noscript{max-width:820px}
.lang-toggle button{font:inherit; font-size:13px; font-weight:700; padding:4px 9px; border-radius:6px; background:transparent; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.2); cursor:pointer}
.lang-toggle button.active{background:rgba(255,255,255,.08); color:var(--white)}
.site-footer a:hover{color:var(--white)}

/* Request dialog (plan enquiry) */
.request-dialog{border:none; padding:0; background:transparent; color:var(--white); width:min(520px,94vw); max-height:94vh; overflow:visible}
.request-dialog::backdrop{background:rgba(8,15,28,.86); backdrop-filter:blur(4px)}
.request-box{position:relative; background:var(--bg-raise); border:1px solid var(--border-strong); border-radius:18px; padding:32px 28px 28px; max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg)}
.request-box h2{font-size:24px; margin-right:36px}
.request-lead{font-size:15px; margin-bottom:20px}
.dialog-close{position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong); background:transparent; color:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center}
.dialog-close:hover{background:var(--bg-raise-2)}
.request-box .field{margin-bottom:14px}
.request-box .field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:#E2E8F0}
.request-box .optional{font-weight:400; color:var(--text-muted)}
.request-box input[type=text], .request-box input[type=email], .request-box input[type=tel], .request-box select{
  width:100%; min-height:46px; padding:0 14px; border-radius:var(--radius-sm); font:inherit; font-size:16px;
  color:var(--white); background:rgba(255,255,255,.06); border:1px solid var(--border-strong);
}
.request-box select option{color:#0F172A; background:#fff}
.request-box input:focus, .request-box select:focus{border-color:var(--accent)}
.request-box .check{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:#CBD5E1; margin:6px 0 4px; cursor:pointer}
.request-box .check input{margin-top:3px; width:18px; height:18px; flex-shrink:0; accent-color:var(--accent)}
.request-box .check a{color:#7DD3FC; text-decoration:underline}
.request-box .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.request-box .form-msg{min-height:22px; margin:8px 0 10px; font-size:14px; color:var(--text-muted)}
.request-box .form-msg.ok{color:var(--success)}
.request-box .form-msg.err{color:var(--danger)}
.request-submit{width:100%}

/* Marketing pages */
.page-hero{padding:72px 0 48px}
.page-hero h1{font-size:clamp(30px,4.2vw,46px); max-width:880px}
.page-hero .lead{font-size:19px; max-width:760px; color:var(--text-muted)}
.breadcrumb{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--text-muted); margin-bottom:22px}
.breadcrumb a{color:#7DD3FC}
.breadcrumb a:hover{text-decoration:underline}
.page-section{padding:48px 0}
.page-body{max-width:820px; margin:0 auto}
.page-body h2{font-size:clamp(22px,2.6vw,28px); margin:44px 0 14px}
.page-body h2:first-child{margin-top:0}
.page-body p{font-size:16.5px; line-height:1.7; color:#CBD5E1}
.check-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin:0 0 8px}
.check-list li{display:flex; gap:12px; font-size:16px; color:#E2E8F0}
.check-list svg{flex-shrink:0; color:var(--success); margin-top:3px}
.num-list{margin:0 0 8px; padding:0; list-style:none; counter-reset:n; display:flex; flex-direction:column; gap:14px}
.num-list li{counter-increment:n; display:flex; gap:14px; font-size:16px; color:#E2E8F0}
.num-list li::before{content:counter(n); flex-shrink:0; width:30px; height:30px; border-radius:50%; background:rgba(14,165,233,.15); color:var(--accent); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px}
.store-links{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.more-link{margin-top:22px; font-size:15.5px; text-align:center; color:var(--text-muted)}
.more-link a{color:#7DD3FC; text-decoration:underline}
.more-link-left{text-align:left}
.related-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.related-card{display:block; background:var(--bg-raise); border:1px solid var(--border); border-radius:var(--radius); padding:22px; transition:border-color .2s, transform .2s}
.related-card:hover{border-color:var(--border-strong); transform:translateY(-2px)}
.related-card h3{font-size:17px}
.related-card p{font-size:14.5px; margin:0}
@media (prefers-reduced-motion: reduce){ .related-card:hover{transform:none} }

/* Realistic cleaning sheet example (neutralized, invented data) */
.csheet-figure{margin:0 0 8px}
.csheet-figure figcaption{margin-top:12px; font-size:13px; color:var(--text-muted); text-align:center}
.csheet-img{display:block; width:100%; max-width:680px; height:auto; margin:0 auto; border-radius:12px; box-shadow:var(--shadow-lg)}
.example-list-cols{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 32px}
@media (max-width:760px){ .example-list-cols{grid-template-columns:1fr} }

.signature{margin:18px 0 6px; font-size:18px; font-style:italic; font-weight:600; color:var(--white)}

/* About teaser on the home page */
.about-teaser{
  display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:center;
  background:var(--bg-raise); border:1px solid var(--border); border-radius:24px; padding:48px;
}
.about-text h2{font-size:clamp(24px,3vw,34px)}
.about-text p{font-size:16.5px; line-height:1.7; color:#CBD5E1}
.about-sign{font-style:italic; font-weight:600; color:var(--white) !important; margin:18px 0 6px}
.about-facts{list-style:none; display:flex; flex-direction:column; gap:16px; margin:0; padding:24px 26px; background:rgba(14,165,233,.07); border:1px solid rgba(14,165,233,.22); border-radius:var(--radius)}
.about-facts li{display:flex; gap:12px; font-size:15px; line-height:1.5; color:#E2E8F0}
.about-facts svg{flex-shrink:0; color:var(--success); margin-top:3px}
@media (max-width:900px){ .about-teaser{grid-template-columns:1fr; padding:32px 24px; gap:28px} }

/* Screenshot lightbox */
img.zoomable{cursor:zoom-in; transition:transform .2s, box-shadow .2s}
img.zoomable:hover{transform:scale(1.02); box-shadow:0 0 0 2px var(--accent)}
.lightbox{
  border:none; padding:0; background:transparent; max-width:96vw; max-height:96vh;
  overflow:visible; color:var(--white);
}
.lightbox::backdrop{background:rgba(8,15,28,.88); backdrop-filter:blur(4px)}
.lightbox img{max-width:96vw; max-height:92vh; width:auto; height:auto; border-radius:10px; box-shadow:var(--shadow-lg); background:#fff}
.lightbox-close{
  position:absolute; top:-14px; right:-14px; z-index:2; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border-strong); background:var(--bg-raise); color:var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{background:var(--bg-raise-2)}
@media (prefers-reduced-motion: reduce){ img.zoomable:hover{transform:none} }

/* Utility badges */
.badge-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-muted)}