@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;700;800;900&display=swap');

:root{
  --pink:#ff006e;
  --pink2:#e60063;
  --blue:#0057ff;
  --purple:#6322e8;
  --black:#000;
  --panel:#080808;
  --line:rgba(255,255,255,.12);
  --muted:rgba(255,255,255,.72);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:Inter, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.container{width:min(1500px, calc(100% - 48px));margin:0 auto}

.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand{
  display:flex;
  align-items:center;
  gap:22px;
  text-decoration:none;
}
.brand img{width:190px;display:block}
.brand-line{height:48px;width:1px;background:rgba(255,255,255,.22)}
.powered{
  font-family:Rajdhani,Inter,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  color:rgba(255,255,255,.58);
  line-height:1.2;
}
.powered strong{color:#fff}

.menu{display:flex;gap:31px}
.menu a{
  text-decoration:none;
  color:#fff;
  font-family:Rajdhani,Inter,sans-serif;
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.menu a.active,.menu a:hover{color:var(--pink)}

.btn{
  background:var(--pink);
  color:#fff;
  text-decoration:none;
  border:none;
  padding:18px 29px;
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-family:Rajdhani,Inter,sans-serif;
  font-weight:700;
  font-size:15px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.2s;
  box-shadow:0 14px 38px rgba(255,0,110,.24);
}
.btn:hover{background:var(--pink2);transform:translateY(-2px)}

.hero{
  position:relative;
  min-height:900px;
  padding-top:94px;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 80% 35%, rgba(255,0,110,.43), transparent 27%),
    radial-gradient(circle at 86% 68%, rgba(0,212,255,.24), transparent 30%),
    linear-gradient(90deg,#000 0%,#030303 34%,rgba(0,0,0,.52) 58%,#000 100%);
}
.hero-image{
  position:absolute;
  right:0;top:0;bottom:0;
  width:64%;
  background:url("images/hero.jpg") center/cover no-repeat;
  filter:saturate(1.25) contrast(1.08);
}
.hero-image:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.54) 36%,rgba(0,0,0,.08) 100%);
}
.hero-content{
  position:relative;
  z-index:5;
  padding-top:152px;
  max-width:660px;
}
.eyebrow{
  margin:0 0 16px;
  color:var(--pink);
  font-family:Rajdhani,Inter,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:20px;
}
h1,h2,h3{
  font-family:Rajdhani,Inter,sans-serif;
  text-transform:uppercase;
}
.hero h1{
  margin:0;
  font-size:clamp(72px,8.8vw,132px);
  line-height:.84;
  letter-spacing:-.045em;
  font-weight:700;
}
.hero h1 span,.accent{color:var(--pink)}
.lead{
  margin:30px 0 0;
  color:rgba(255,255,255,.84);
  max-width:560px;
  font-size:18px;
  line-height:1.62;
}
.hero .btn{margin-top:42px}

.benefits{
  position:relative;
  z-index:8;
  margin-top:80px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(10,10,10,.97);
  border:1px solid var(--line);
  box-shadow:0 25px 80px rgba(0,0,0,.72);
}
.benefits article{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:17px;
  padding:30px 34px;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.08);
}
.benefits article:last-child{border-right:none}
.ico{
  grid-row:span 2;
  color:var(--pink);
  font-size:44px;
  line-height:1;
}
.benefits h3{
  margin:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:.02em;
}
.benefits p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
}

.section{padding:24px 0}
.panel{
  background:#050505;
  border:1px solid var(--line);
}
.tech{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
}
.copy{
  padding:63px 56px;
  display:flex;
  justify-content:center;
  flex-direction:column;
}
.copy h2,.app-title h2,.contact h2{
  margin:0 0 25px;
  font-size:clamp(45px,4.6vw,68px);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.025em;
}
.copy p:not(.eyebrow),.contact p{
  color:var(--muted);
  line-height:1.72;
  font-size:16px;
}
.copy .btn{margin-top:23px;width:max-content}
.visual{
  min-height:440px;
  background:url("images/technology.jpg") center/cover no-repeat;
}

.applications{
  display:grid;
  grid-template-columns:.33fr .67fr;
}
.app-title{padding:57px 38px}
.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,.1);
}
.tile{
  min-height:235px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:23px;
  text-decoration:none;
  color:#fff;
  overflow:hidden;
  background-position:center;
  background-size:cover;
  isolation:isolate;
}
.tile:before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.1));
  z-index:-1;
}
.tile:after{
  content:"";
  position:absolute;inset:0;
  background:var(--pink);
  mix-blend-mode:screen;
  opacity:0;
  z-index:-1;
  transition:.3s;
}
.tile:hover:after{opacity:.18}
.tile span{
  font-family:Rajdhani,Inter,sans-serif;
  font-size:20px;
  text-transform:uppercase;
  font-weight:700;
}
.tile b{
  color:var(--pink);
  font-size:32px;
}
.t1{background-image:url("images/luxuswohnungen.jpg")}
.t2{background-image:url("images/restaurants-bars.jpg")}
.t3{background-image:url("images/hotels.jpg")}
.t4{background-image:url("images/showrooms-stores.jpg")}
.t5{background-image:url("images/bueros-praxen.jpg")}
.t6{background-image:url("images/kinderzimmer.jpg")}

.stats{
  margin-top:20px;
  background:linear-gradient(90deg,var(--pink) 0%,var(--purple) 55%,var(--blue) 100%);
  padding:47px 0;
}
.stats-inner{
  display:grid;
  grid-template-columns:1.35fr repeat(4,1fr);
  gap:32px;
  align-items:center;
}
.stats p,.stats span{
  font-family:Rajdhani,Inter,sans-serif;
  text-transform:uppercase;
}
.stats p{margin:0;font-size:19px}
.stats h2{margin:6px 0;font-size:42px;line-height:1;font-weight:700}
.stats span{font-size:16px;line-height:1.35}
.stat{
  border-left:1px solid rgba(255,255,255,.24);
  padding-left:38px;
}
.stat strong{
  display:block;
  font-family:Rajdhani,Inter,sans-serif;
  font-weight:700;
  font-size:50px;
  line-height:1;
}
.stat .yellow{color:#ffd60a;font-size:43px;text-transform:uppercase}

.contact{padding:84px 0}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}
.contact h2{font-size:clamp(52px,6vw,84px)}
.contact-lines{
  display:grid;
  gap:12px;
  margin-top:30px;
  color:rgba(255,255,255,.82);
}
.contact-lines a{text-decoration:none}
.form{
  background:#0b0b0b;
  border:1px solid var(--line);
  padding:42px;
  display:grid;
  gap:16px;
}
.form input,.form textarea{
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,.13);
  padding:18px 20px;
  font-size:16px;
  outline:none;
  font-family:Inter,sans-serif;
}
.form textarea{min-height:145px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--pink)}
.form small{color:rgba(255,255,255,.45);line-height:1.5}

.footer{
  border-top:1px solid var(--line);
  background:#020202;
  padding:42px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr .9fr;
  gap:42px;
  color:rgba(255,255,255,.72);
}
.footer img{width:190px}
.footer h4{
  margin:0 0 13px;
  color:#fff;
  font-family:Rajdhani,Inter,sans-serif;
  font-size:20px;
  text-transform:uppercase;
}
.footer a{
  display:block;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  margin:7px 0;
}
.footer a:hover{color:var(--pink)}
.copyright{
  grid-column:1/-1;
  margin-top:25px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.5);
  font-size:13px;
}

.legal{
  padding:150px 0 80px;
}
.legal-box{
  background:#080808;
  border:1px solid var(--line);
  padding:44px;
  max-width:980px;
}
.legal h1{
  font-size:64px;
  margin:0 0 26px;
}
.legal p,.legal li{
  color:var(--muted);
  line-height:1.7;
}

.detail{
  padding:160px 0 80px;
  min-height:100vh;
  background:radial-gradient(circle at 80% 20%,rgba(255,0,110,.25),transparent 28%),#000;
}
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.detail h1{
  font-size:clamp(58px,7vw,100px);
  line-height:.9;
  margin:0 0 25px;
}
.detail p{
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}
.detail-img{
  min-height:460px;
  background:center/cover no-repeat;
  border:1px solid var(--line);
}
.back{
  color:var(--pink);
  text-decoration:none;
  font-weight:800;
  text-transform:uppercase;
}

@media(max-width:1100px){
  .menu{display:none}
  .hero-image{width:100%;opacity:.48}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .tech,.applications,.contact-grid,.detail-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .stats-inner,.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .container{width:min(100% - 28px,1500px)}
  .nav{height:82px}
  .brand img{width:150px}
  .brand-line,.powered,.nav-btn{display:none}
  .hero{min-height:auto;padding-bottom:35px}
  .hero-content{padding-top:112px}
  .hero h1{font-size:62px}
  .lead{font-size:16px}
  .benefits{grid-template-columns:1fr;margin-top:55px}
  .benefits article{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .copy,.app-title,.form,.legal-box{padding:30px 24px}
  .tiles,.stats-inner,.footer-grid{grid-template-columns:1fr}
  .tile{min-height:220px}
  .stat{border-left:0;padding-left:0}
}