/* ================================================================
   KARO PERFORMANCE — Stunning Design System v2
   ================================================================ */

/* 1. Tokens */
:root {
  --bg:           #030303;
  --bg-2:         #0a0a0a;
  --bg-card:      rgba(255,255,255,0.03);
  --bg-card-h:    rgba(255,255,255,0.055);
  --border:       rgba(255,255,255,0.07);
  --border-s:     rgba(255,255,255,0.13);

  --text:         #f5f5f5;
  --text-2:       #c8c8c8;
  --text-m:       #888;
  --text-d:       #555;

  --a:            #ff5500;
  --a2:           #ff8800;
  --a-dim:        rgba(255,85,0,.09);
  --a-dim2:       rgba(255,85,0,.16);
  --a-border:     rgba(255,85,0,.32);
  --a-glow:       0 0 40px rgba(255,85,0,.35), 0 0 80px rgba(255,85,0,.15);

  --r:            10px;
  --r-lg:         18px;
  --r-xl:         28px;
  --r-full:       9999px;

  --t:            .2s ease;
  --t-slow:       .35s ease;

  --max-w:        1200px;
  --nav-h:        72px;
}

/* 2. Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* 3. Film grain overlay */
body::before{
  content:'';
  position:fixed;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.032;
  pointer-events:none;
  z-index:9000;
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-5%,-5%)}
  30%{transform:translate(5%,-10%)}
  50%{transform:translate(-10%,5%)}
  70%{transform:translate(15%,0)}
  90%{transform:translate(10%,5%)}
}

/* 4. Scroll progress bar */
.scroll-bar{
  position:fixed;top:0;left:0;
  height:2px;
  background:linear-gradient(90deg,var(--a),var(--a2));
  transform-origin:left;
  transform:scaleX(0);
  z-index:1000;
  transition:transform .08s linear;
}

/* 5. Cursor glow */
.cursor-glow{
  position:fixed;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,85,0,.06) 0%,transparent 70%);
  pointer-events:none;
  z-index:8999;
  transform:translate(-50%,-50%);
  transition:transform .12s ease;
}

/* 6. Typography */
h1,h2,h3,h4,h5{
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--text);
}
h1{font-size:clamp(3rem,7.5vw,5.5rem);letter-spacing:-.04em;line-height:1.04}
h2{font-size:clamp(2.2rem,4.5vw,3.5rem);letter-spacing:-.035em}
h3{font-size:clamp(1.4rem,2.5vw,1.9rem);letter-spacing:-.025em}
h4{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{color:var(--text-m);line-height:1.75}

.text-accent{color:var(--a)}
.text-white{color:var(--text)}

.gradient-text{
  background:linear-gradient(100deg,#ff5500 0%,#ff9000 50%,#ffb800 100%);
  background-size:200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s ease infinite;
}
@keyframes shimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* 7. Layout */
.container{max-width:var(--max-w);margin:0 auto;padding:0 28px}
.section{padding:112px 0}
.section-alt{background:var(--bg-2)}
@media(max-width:768px){
  .section{padding:72px 0}
  .container{padding:0 18px}
}

/* Section labels */
.label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--a);
  margin-bottom:20px;
}
.label::before{
  content:'';
  display:block;
  width:20px;
  height:2px;
  background:var(--a);
}

/* Badge pill */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:var(--r-full);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid var(--border);
  color:var(--text-m);
  background:rgba(255,255,255,.03);
}
.badge-accent{
  color:var(--a);
  border-color:var(--a-border);
  background:var(--a-dim);
}
.badge .dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--a);
  box-shadow:0 0 6px var(--a);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.8)}
}

/* Section header */
.section-header{
  text-align:center;
  max-width:640px;
  margin:0 auto 72px;
}
.section-header h2{margin-bottom:16px}
.section-header p{font-size:1.05rem;max-width:520px;margin:0 auto}

/* 8. Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 32px;
  font-size:.9rem;
  font-weight:700;
  font-family:inherit;
  border-radius:var(--r);
  cursor:pointer;
  transition:all var(--t);
  letter-spacing:.01em;
  white-space:nowrap;
  border:1.5px solid transparent;
  text-decoration:none;
}
.btn-primary{
  background:var(--a);
  color:#fff;
  border-color:var(--a);
  position:relative;
  overflow:hidden;
}
.btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0;
  transition:opacity var(--t);
}
.btn-primary:hover{
  background:var(--a2);
  border-color:var(--a2);
  box-shadow:var(--a-glow);
  transform:translateY(-2px);
}
.btn-primary:hover::before{opacity:1}

.btn-outline{
  background:transparent;
  color:var(--text);
  border-color:var(--border-s);
  backdrop-filter:blur(8px);
}
.btn-outline:hover{
  border-color:var(--a);
  color:var(--a);
  transform:translateY(-2px);
}
.btn-ghost{
  background:transparent;
  color:var(--text-m);
  border-color:transparent;
  padding:15px 20px;
}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}

.btn-lg{padding:18px 40px;font-size:1rem}
.btn-sm{padding:10px 22px;font-size:.8rem}

.btn .arrow{transition:transform var(--t)}
.btn:hover .arrow{transform:translateX(4px)}

/* 9. Navigation */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  border-bottom:1px solid transparent;
  transition:all var(--t);
}
.nav.scrolled{
  background:rgba(3,3,3,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}
.nav-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 28px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav-logo{
  font-size:1.15rem;
  font-weight:900;
  letter-spacing:-.05em;
  color:var(--text);
  flex-shrink:0;
}
.nav-logo span{color:var(--a)}
.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-links a{
  display:block;
  padding:8px 14px;
  font-size:.85rem;
  font-weight:500;
  color:var(--text-m);
  border-radius:8px;
  transition:all var(--t);
}
.nav-links a:hover,.nav-links a.active{
  color:var(--text);
  background:rgba(255,255,255,.06);
}
.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.nav-phone{
  font-size:.8rem;
  color:var(--text-d);
  font-weight:500;
  transition:color var(--t);
}
.nav-phone:hover{color:var(--text-m)}

/* Mobile toggle */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:26px;cursor:pointer;padding:4px;
}
.nav-toggle span{
  display:block;height:2px;
  background:var(--text);border-radius:2px;
  transition:all var(--t);
}
.mobile-menu{
  display:none;
  position:fixed;
  top:var(--nav-h);left:0;right:0;
  background:rgba(3,3,3,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:20px 18px;
  z-index:99;
  flex-direction:column;
  gap:4px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  display:block;
  padding:13px 16px;
  font-size:1rem;
  font-weight:500;
  color:var(--text-2);
  border-radius:8px;
  transition:all var(--t);
}
.mobile-menu a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.mobile-menu .btn{margin-top:12px;width:100%;justify-content:center}
@media(max-width:960px){
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:flex}
  .nav-right .btn{padding:10px 18px;font-size:.78rem}
}

/* 10. Hero */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:calc(var(--nav-h) + 80px) 28px 80px;
  position:relative;
  overflow:hidden;
  background:var(--bg);
}

/* Grid pattern */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,black 0%,transparent 80%);
  pointer-events:none;
}

/* Animated orbs */
.orbs{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
}
.orb-1{
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(255,85,0,.22) 0%,transparent 70%);
  top:-200px;left:50%;
  transform:translateX(-50%);
  animation:orb1 12s ease-in-out infinite;
}
.orb-2{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(255,140,0,.15) 0%,transparent 70%);
  bottom:0;right:-100px;
  animation:orb2 16s ease-in-out infinite;
}
.orb-3{
  width:350px;height:350px;
  background:radial-gradient(circle,rgba(255,50,0,.12) 0%,transparent 70%);
  bottom:100px;left:-80px;
  animation:orb3 10s ease-in-out infinite;
}
@keyframes orb1{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-52%) translateY(-40px) scale(1.05)}
}
@keyframes orb2{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-30px) scale(1.08)}
}
@keyframes orb3{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-20px) rotate(8deg)}
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:860px;
  margin:0 auto;
}
.hero-badge{margin-bottom:28px}
.hero h1{margin-bottom:28px}
.hero-lead{
  font-size:clamp(1rem,2vw,1.2rem);
  color:var(--text-m);
  max-width:580px;
  margin:0 auto 40px;
  line-height:1.78;
}
.hero-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:80px;
}
.hero-clients{position:relative;z-index:2}
.hero-clients-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-d);
  margin-bottom:16px;
  font-weight:500;
}
.client-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.client-chip{
  font-size:.72rem;
  font-weight:600;
  color:var(--text-d);
  padding:7px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-full);
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:all var(--t);
  background:rgba(255,255,255,.02);
}
.client-chip:hover{
  color:var(--text-m);
  border-color:var(--border-s);
  background:rgba(255,255,255,.05);
}
@media(max-width:640px){
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .btn{width:100%;max-width:320px;justify-content:center}
}

/* 11. Marquee strip */
.marquee-strip{
  padding:20px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
  overflow:hidden;
  position:relative;
}
.marquee-strip::before,.marquee-strip::after{
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:100px;
  z-index:2;
  pointer-events:none;
}
.marquee-strip::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee-strip::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.marquee-track{
  display:flex;
  gap:0;
  animation:marquee 28s linear infinite;
  width:max-content;
}
.marquee-track.reverse{animation:marqueeR 24s linear infinite}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes marqueeR{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}
.marquee-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 40px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-d);
  white-space:nowrap;
}
.marquee-item .sep{
  width:4px;height:4px;
  border-radius:50%;
  background:var(--a);
  flex-shrink:0;
}

/* 12. Stats row */
.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stat-item{
  padding:48px 36px;
  background:var(--bg-2);
  text-align:center;
  transition:background var(--t);
}
.stat-item:hover{background:rgba(255,85,0,.04)}
.stat-num{
  font-size:clamp(2.4rem,5vw,3.8rem);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:1;
  background:linear-gradient(135deg,#fff 0%,var(--a2) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:8px;
  display:block;
}
.stat-label{
  font-size:.8rem;
  color:var(--text-d);
  font-weight:500;
  letter-spacing:.04em;
}
@media(max-width:768px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
}

/* 13. Glass cards */
.glass-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:relative;
  overflow:hidden;
  transition:all var(--t-slow);
}
.glass-card:hover{
  background:var(--bg-card-h);
  border-color:var(--border-s);
  transform:translateY(-4px);
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
}

/* Gradient border top line on hover */
.glass-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--a),var(--a2),transparent);
  opacity:0;
  transition:opacity var(--t);
}
.glass-card:hover::before{opacity:1}

/* 14. Service cards */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.service-card{
  padding:36px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.service-num{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--a);
  margin-bottom:24px;
  opacity:.7;
}
.service-icon-wrap{
  width:52px;height:52px;
  border-radius:14px;
  background:var(--a-dim);
  border:1px solid var(--a-border);
  color:var(--a);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  transition:all var(--t);
}
.glass-card:hover .service-icon-wrap{
  background:var(--a-dim2);
  box-shadow:0 0 20px rgba(255,85,0,.2);
}
.service-card h3{font-size:1.35rem;margin-bottom:12px}
.service-card>p{font-size:.9rem;line-height:1.72;margin-bottom:24px;flex:1}
.service-list{margin-bottom:28px;display:flex;flex-direction:column;gap:2px}
.service-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.85rem;
  color:var(--text-2);
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
.service-list li:last-child{border-bottom:none}
.service-list li::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--a);
  flex-shrink:0;
}
.service-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  font-weight:700;
  color:var(--a);
  transition:gap var(--t);
  letter-spacing:.01em;
}
.service-cta:hover{gap:14px}
@media(max-width:1024px){
  .services-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .services-grid{grid-template-columns:1fr}
}

/* 15. Why grid */
.why-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.why-card{
  padding:36px;
}
.why-card-num{
  font-size:3.5rem;
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
  background:linear-gradient(135deg,rgba(255,85,0,.25) 0%,rgba(255,85,0,.05) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:16px;
  display:block;
  user-select:none;
}
.why-card h4{font-size:1.15rem;margin-bottom:10px}
.why-card p{font-size:.9rem}
@media(max-width:640px){.why-grid{grid-template-columns:1fr}}

/* 16. Process timeline */
.process-wrap{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.process-wrap::before{
  content:'';
  position:absolute;
  top:27px;
  left:calc(12.5% + 28px);
  right:calc(12.5% + 28px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--a-border) 20%,var(--a-border) 80%,transparent);
  z-index:0;
}
.process-step{
  text-align:center;
  padding:0 12px 32px;
  position:relative;
  z-index:1;
}
.process-circle{
  width:54px;height:54px;
  border-radius:50%;
  background:var(--bg-2);
  border:1px solid var(--border-s);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 24px;
  font-size:.8rem;
  font-weight:900;
  color:var(--a);
  letter-spacing:-.01em;
  transition:all var(--t);
  position:relative;
  z-index:1;
}
.process-step:hover .process-circle{
  background:var(--a);
  border-color:var(--a);
  color:#fff;
  box-shadow:var(--a-glow);
}
.process-step h4{margin-bottom:8px;font-size:1rem}
.process-step p{font-size:.85rem}
@media(max-width:768px){
  .process-wrap{grid-template-columns:1fr 1fr}
  .process-wrap::before{display:none}
}
@media(max-width:480px){.process-wrap{grid-template-columns:1fr}}

/* 17. Reference cards */
.refs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.ref-card{
  overflow:hidden;
  border-radius:var(--r-lg);
}
.ref-img{
  height:210px;
  position:relative;
  overflow:hidden;
}
.ref-img-inner{
  width:100%;height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.15);
  transition:transform var(--t-slow);
}
.ref-card:hover .ref-img-inner{transform:scale(1.04)}
.ref-img-inner.memorize{
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(3,3,3,.72) 100%),
    url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;
}
.ref-img-inner.vitalwerk{
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(3,3,3,.72) 100%),
    url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;
}
.ref-img-inner.inmotion{
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(3,3,3,.72) 100%),
    url('https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;
}
.ref-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(3,3,3,.9) 0%,transparent 60%);
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:0;
  transition:opacity var(--t);
}
.ref-card:hover .ref-overlay{opacity:1}
.ref-overlay span{
  font-size:.75rem;
  font-weight:700;
  color:var(--a);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ref-body{padding:24px}
.ref-type{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--a);
  font-weight:700;
  margin-bottom:6px;
}
.ref-card h4{font-size:1.05rem;margin-bottom:8px}
.ref-card p{font-size:.85rem;line-height:1.65}
.ref-tags{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.tag{
  font-size:.68rem;
  color:var(--text-d);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  padding:3px 10px;
}
@media(max-width:768px){
  .refs-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
}
@media(min-width:600px) and (max-width:768px){
  .refs-grid{grid-template-columns:1fr 1fr;max-width:none}
}

/* 18. CTA section */
.cta-section{
  padding:128px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:var(--bg);
}
.cta-section::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:600px;
  background:radial-gradient(ellipse,rgba(255,85,0,.12) 0%,transparent 70%);
  pointer-events:none;
}
.cta-section::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 0%,transparent 80%);
  pointer-events:none;
}
.cta-inner{position:relative;z-index:1}
.cta-section h2{margin-bottom:20px}
.cta-section>.container>p{
  font-size:1.1rem;
  color:var(--text-m);
  max-width:500px;
  margin:0 auto 40px;
}
.cta-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.cta-note{
  margin-top:18px;
  font-size:.78rem;
  color:var(--text-d);
}
@media(max-width:480px){
  .cta-actions{flex-direction:column;align-items:center}
  .cta-actions .btn{width:100%;max-width:300px;justify-content:center}
}

/* 19. Footer */
.footer{
  border-top:1px solid var(--border);
  padding:72px 0 28px;
  background:var(--bg-2);
}
.footer-grid{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1.2fr;
  gap:52px;
  margin-bottom:52px;
}
.footer-logo{
  display:inline-block;
  font-size:1.1rem;
  font-weight:900;
  letter-spacing:-.05em;
  color:var(--text);
  margin-bottom:16px;
}
.footer-logo span{color:var(--a)}
.footer-brand p{
  font-size:.85rem;
  max-width:220px;
  line-height:1.72;
  margin-bottom:22px;
}
.footer-contacts{display:flex;flex-direction:column;gap:8px}
.footer-contacts a{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  color:var(--text-m);
  transition:color var(--t);
}
.footer-contacts a:hover{color:var(--text)}
.footer-col h5{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-d);
  font-weight:700;
  margin-bottom:18px;
}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{
  font-size:.875rem;
  color:var(--text-m);
  transition:color var(--t);
}
.footer-links a:hover{color:var(--a)}
.footer-bottom{
  padding-top:28px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.footer-bottom p{font-size:.75rem;color:var(--text-d)}
.footer-legal{display:flex;gap:24px}
.footer-legal a{
  font-size:.75rem;
  color:var(--text-d);
  transition:color var(--t);
}
.footer-legal a:hover{color:var(--text-m)}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ================================================================
   SUB-PAGE STYLES
   ================================================================ */

/* Page hero (sub-pages) */
.page-hero{
  padding:calc(var(--nav-h) + 96px) 28px 96px;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:var(--bg);
}
.page-hero::before{
  content:'';
  position:absolute;
  top:-100px;left:50%;
  transform:translateX(-50%);
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(255,85,0,.14) 0%,transparent 70%);
  filter:blur(60px);
  pointer-events:none;
}
.page-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 0%,transparent 80%);
  pointer-events:none;
}
.page-hero-content{
  position:relative;
  z-index:2;
  max-width:780px;
  margin:0 auto;
}
.page-hero .badge{margin-bottom:24px}
.page-hero h1{margin-bottom:22px}
.page-hero p{
  font-size:clamp(1rem,2vw,1.15rem);
  color:var(--text-m);
  margin:0 auto 40px;
  max-width:580px;
}
.page-hero-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
@media(max-width:480px){
  .page-hero-actions{flex-direction:column;align-items:center}
  .page-hero-actions .btn{width:100%;max-width:300px;justify-content:center}
}

/* Problem grid */
.problem-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.problem-card{
  padding:28px;
  border-left:2px solid rgba(255,80,80,.3);
}
.problem-card h4{font-size:1rem;margin-bottom:8px}
.problem-card p{font-size:.875rem}
@media(max-width:768px){.problem-grid{grid-template-columns:1fr}}

/* Features grid */
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.feature-card{padding:28px}
.feature-icon{
  width:44px;height:44px;
  border-radius:10px;
  background:var(--a-dim);
  border:1px solid var(--a-border);
  color:var(--a);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  transition:all var(--t);
}
.glass-card:hover .feature-icon{background:var(--a-dim2);box-shadow:0 0 16px rgba(255,85,0,.2)}
.feature-card h4{margin-bottom:8px}
.feature-card p{font-size:.875rem}
@media(max-width:768px){.features-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.features-grid{grid-template-columns:1fr}}

/* Comparison */
.comparison-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  max-width:820px;
  margin:0 auto;
}
.comparison-col{padding:32px;border-radius:var(--r-lg)}
.comparison-col.before{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
}
.comparison-col.after{
  background:rgba(255,85,0,.05);
  border:1px solid var(--a-border);
}
.comparison-label{
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:22px;
}
.comparison-col.before .comparison-label{color:var(--text-d)}
.comparison-col.after .comparison-label{color:var(--a)}
.comparison-list{display:flex;flex-direction:column;gap:12px}
.comparison-list li{
  display:flex;
  gap:10px;
  font-size:.875rem;
  color:var(--text-2);
  line-height:1.5;
}
.comparison-col.before .comparison-list li::before{
  content:'✗';
  color:rgba(255,80,80,.6);
  flex-shrink:0;
  font-weight:700;
}
.comparison-col.after .comparison-list li::before{
  content:'✓';
  color:var(--a);
  flex-shrink:0;
  font-weight:700;
}
@media(max-width:600px){.comparison-wrap{grid-template-columns:1fr}}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  align-items:start;
}
.pricing-card{
  padding:36px;
  border-radius:var(--r-lg);
  position:relative;
}
.pricing-card.featured{
  border:1px solid var(--a) !important;
  background:rgba(255,85,0,.05) !important;
}
.pricing-card.featured::after{
  content:'Beliebt';
  position:absolute;
  top:-12px;left:50%;
  transform:translateX(-50%);
  background:var(--a);
  color:#fff;
  font-size:.65rem;
  font-weight:800;
  padding:4px 16px;
  border-radius:var(--r-full);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pricing-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-d);
  font-weight:700;
  margin-bottom:18px;
}
.pricing-price{margin-bottom:28px}
.pricing-from{font-size:.72rem;color:var(--text-d);display:block;margin-bottom:4px}
.pricing-amount{
  font-size:2.6rem;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.05em;
  line-height:1;
}
.pricing-cur{font-size:1.5rem;font-weight:700;vertical-align:super;margin-right:2px}
.pricing-period{font-size:.85rem;color:var(--text-d);margin-left:4px}
.pricing-features{margin-bottom:28px;display:flex;flex-direction:column;gap:2px}
.pricing-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:7px 0;
  font-size:.875rem;
  color:var(--text-2);
  border-bottom:1px solid var(--border);
}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li::before{
  content:'✓';
  color:var(--a);
  font-weight:800;
  flex-shrink:0;
  margin-top:1px;
}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}}

/* Use cases */
.usecase-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.usecase-card{
  padding:32px 24px;
  text-align:center;
}
.usecase-emoji{
  font-size:2rem;
  margin-bottom:14px;
  display:block;
  filter:none;
}
.usecase-card h4{font-size:1rem;margin-bottom:8px}
.usecase-card p{font-size:.8rem}
@media(max-width:768px){.usecase-grid{grid-template-columns:repeat(2,1fr)}}

/* sqm pricing */
.sqm-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.sqm-card{
  padding:36px;
  border-radius:var(--r-lg);
}
.sqm-card.highlight{
  border:1px solid var(--a) !important;
  background:rgba(255,85,0,.04) !important;
}
.sqm-range{
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--a);
  margin-bottom:14px;
}
.sqm-card h3{font-size:1.4rem;margin-bottom:8px}
.sqm-card>p{font-size:.875rem;margin-bottom:20px}
.sqm-price{
  font-size:2rem;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.04em;
  margin-bottom:4px;
}
.sqm-note{font-size:.72rem;color:var(--text-d);margin-bottom:22px}
.sqm-list{display:flex;flex-direction:column;gap:8px}
.sqm-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.875rem;
  color:var(--text-2);
}
.sqm-list li::before{
  content:'✓';
  color:var(--a);
  font-weight:800;
  flex-shrink:0;
}
@media(max-width:768px){.sqm-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}}

/* Content types */
.content-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.content-card{
  display:flex;
  gap:20px;
  padding:28px;
}
.content-icon{
  width:46px;height:46px;
  border-radius:10px;
  background:var(--a-dim);
  border:1px solid var(--a-border);
  color:var(--a);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all var(--t);
}
.glass-card:hover .content-icon{background:var(--a-dim2)}
.content-card h4{margin-bottom:6px;font-size:1rem}
.content-card p{font-size:.875rem}
@media(max-width:600px){.content-grid{grid-template-columns:1fr}}

/* Retainer */
.retainer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.retainer-card{
  padding:36px;
  border-radius:var(--r-lg);
  position:relative;
}
.retainer-card.featured{
  border:1px solid var(--a) !important;
  background:rgba(255,85,0,.04) !important;
}
.retainer-card.featured::after{
  content:'Empfohlen';
  position:absolute;
  top:-12px;left:50%;
  transform:translateX(-50%);
  background:var(--a);
  color:#fff;
  font-size:.65rem;
  font-weight:800;
  padding:4px 16px;
  border-radius:var(--r-full);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.retainer-name{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text-d);
  font-weight:700;
  margin-bottom:18px;
}
.retainer-price{
  font-size:2.4rem;
  font-weight:900;
  color:var(--text);
  letter-spacing:-.05em;
  line-height:1;
  margin-bottom:4px;
}
.retainer-period{font-size:.85rem;color:var(--text-d);margin-bottom:28px}
.retainer-list{display:flex;flex-direction:column;gap:2px;margin-bottom:28px}
.retainer-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 0;
  font-size:.875rem;
  color:var(--text-2);
  border-bottom:1px solid var(--border);
}
.retainer-list li:last-child{border-bottom:none}
.retainer-list li::before{content:'✓';color:var(--a);font-weight:800;flex-shrink:0}
@media(max-width:768px){.retainer-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}}

/* Video placeholders */
.video-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.video-box{
  aspect-ratio:9/16;
  max-height:420px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  overflow:hidden;
  position:relative;
  transition:all var(--t);
}
.video-box:hover{border-color:var(--border-s)}
.play-btn{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--a);
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;
  transition:all var(--t);
  box-shadow:var(--a-glow);
}
.play-btn:hover{background:var(--a2);transform:scale(1.08)}
.video-label{font-size:.78rem;color:var(--text-d)}

/* Wide intro layout */
.wide-intro{max-width:720px;margin:0 auto 64px}
.wide-intro h2{margin-bottom:16px}
.wide-intro p{font-size:1.05rem}

/* Two-col intro */
.two-col-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
@media(max-width:768px){.two-col-intro{grid-template-columns:1fr;gap:40px}}

/* Scroll fade-up */
.fade-up{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up.d1{transition-delay:.08s}
.fade-up.d2{transition-delay:.16s}
.fade-up.d3{transition-delay:.24s}
.fade-up.d4{transition-delay:.32s}

/* Tilt card (JS enabled) */
.tilt{transform-style:preserve-3d;will-change:transform}

/* FAQ */
.faq-item{
  padding:24px 28px;
  border-bottom:1px solid var(--border);
}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-item h4{font-size:.95rem;margin-bottom:8px;font-weight:700}
.faq-item p{font-size:.875rem}

/* Util */
.text-center{text-align:center}
.full-btn{width:100%;justify-content:center}
.small-note{font-size:.78rem;color:var(--text-d);text-align:center;margin-top:20px}

/* ================================================================
   PHOTO BACKGROUNDS
   ================================================================ */

/* Main Hero – subtle dark texture behind orbs */
.hero{
  background-image:
    linear-gradient(rgba(3,3,3,.65), rgba(3,3,3,.92)),
    url('https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=1600&q=75');
  background-size:cover;
  background-position:center;
}

/* Sub-page heroes */
.page-hero-webseiten{
  background-image:
    linear-gradient(rgba(3,3,3,.80), rgba(3,3,3,.95)),
    url('https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop&w=1600&q=75');
  background-size:cover;
  background-position:center;
}
.page-hero-3d{
  background-image:
    linear-gradient(rgba(3,3,3,.75), rgba(3,3,3,.93)),
    url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=1600&q=75');
  background-size:cover;
  background-position:center;
}
.page-hero-social{
  background-image:
    linear-gradient(rgba(3,3,3,.78), rgba(3,3,3,.94)),
    url('https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&w=1600&q=75');
  background-size:cover;
  background-position:center top;
}
.page-hero-anfrage{
  background-image:
    linear-gradient(rgba(3,3,3,.82), rgba(3,3,3,.96)),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1600&q=75');
  background-size:cover;
  background-position:center;
}

/* Ghost number in why-cards */
.ghost-num{
  position:absolute;
  top:-10px;right:16px;
  font-size:5rem;
  font-weight:900;
  letter-spacing:-.05em;
  color:rgba(255,85,0,.06);
  pointer-events:none;
  user-select:none;
  line-height:1;
}

/* ================================================================
   REFERENZ-BILDER — neue Projekte
   ================================================================ */

/* Immobilien-Referenz (ersetzt Inmotion auf Startseite) */
.ref-img-inner.immobilien{
  background:
    linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(3,3,3,.75) 100%),
    url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;
}

/* Restaurant Calabria (Webseiten-Seite) */
.ref-img-inner.calabria{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(3,3,3,.72) 100%),
    url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;
}

/* Monteurzimmer Amecke (Webseiten-Seite) */
.ref-img-inner.amecke{
  background:
    linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(3,3,3,.75) 100%),
    url('https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;
}

/* ================================================================
   MOBILE OPTIMIERUNGEN — Global
   ================================================================ */

/* ── 768 px: Tablet / kleines Tablet ── */
@media(max-width:768px){
  /* Refs-Grid: 2 Spalten, kein künstliches max-width */
  .refs-grid{
    grid-template-columns:repeat(2,1fr) !important;
    max-width:none !important;
    margin:0 !important;
  }

  /* Page-Hero Padding reduzieren */
  .page-hero{padding:calc(var(--nav-h) + 64px) 20px 64px}

  /* Section-Header etwas kompakter */
  .section-header{margin-bottom:52px}

  /* Comparison: volle Breite */
  .comparison-wrap{max-width:none}

  /* Cards: Innenabstand reduzieren */
  .why-card{padding:28px 24px}
  .service-card{padding:28px 24px}
  .feature-card{padding:24px 20px}
  .pricing-card{padding:28px 24px}
  .retainer-card{padding:28px 24px}
  .sqm-card{padding:28px 24px}
  .stat-item{padding:36px 20px}
  .wide-intro{margin-bottom:44px}
}

/* ── 600 px: 1 Spalte für Ref-Cards ── */
@media(max-width:600px){
  .refs-grid{grid-template-columns:1fr !important}
}

/* ── 480 px: Smartphone ── */
@media(max-width:480px){
  /* Typographie */
  h1{font-size:2.8rem !important}
  h2{font-size:1.95rem !important}

  /* Layout */
  .container{padding:0 16px}
  .section{padding:60px 0}
  .page-hero{padding:calc(var(--nav-h) + 52px) 16px 56px}

  /* Stats kompakt */
  .stat-item{padding:28px 14px}
  .stat-num{font-size:2.2rem}
  .stat-label{font-size:.72rem}

  /* Cards kompakter */
  .why-card{padding:24px 18px}
  .service-card{padding:24px 18px}
  .feature-card{padding:20px 18px}
  .problem-card{padding:20px 18px}
  .pricing-card{padding:24px 18px}
  .retainer-card{padding:24px 18px}

  /* Grids: keine künstliche max-width */
  .pricing-grid{max-width:none !important}
  .retainer-grid{max-width:none !important}
  .sqm-grid{max-width:none !important}

  /* Prozess: 1 Spalte */
  .process-wrap{grid-template-columns:1fr}

  /* CTA-Section kompakter */
  .cta-section{padding:80px 0}

  /* Footer */
  .footer{padding:52px 0 24px}
  .footer-grid{grid-template-columns:1fr;gap:28px}

  /* Nav: CTA-Button ausblenden – Hamburger enthält den Link */
  .nav-right .btn{display:none}

  /* Buttons: volle Breite in Hero + CTA */
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .btn{width:100%;max-width:none;justify-content:center}
  .cta-actions{flex-direction:column;align-items:center}
  .cta-actions .btn{width:100%;max-width:300px;justify-content:center}

  /* Referenz-Cards: volle Breite */
  .ref-img{height:180px}
}

/* ── 380 px: Sehr kleine Screens ── */
@media(max-width:380px){
  h1{font-size:2.3rem !important}
  h2{font-size:1.7rem !important}
  .btn-lg{padding:16px 22px;font-size:.9rem}
  .container{padding:0 14px}
}

/* Horizontales Scroll-Overflow global verhindern */
html,body{max-width:100%;overflow-x:hidden}