:root{
  --bg:#060a09;
  --text:#e9f1ee;
  --muted:#0e1613;
  --accent:#9fe870;
  --accent2:#73c255;
  --glass:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden}
.bg-gradient{position:fixed;inset:-10%;z-index:-3;background:
  radial-gradient(60% 60% at 20% 20%, rgba(159,232,112,.25) 0%, transparent 55%),
  radial-gradient(40% 40% at 85% 15%, rgba(115,194,85,.18) 0%, transparent 60%),
  radial-gradient(50% 50% at 80% 80%, rgba(159,232,112,.15) 0%, transparent 60%);
  filter: blur(60px);
}
.bg-grid{position:fixed;inset:0;z-index:-2;background:
  linear-gradient(transparent, transparent 31px, var(--line) 32px),
  linear-gradient(90deg, transparent, transparent 31px, var(--line) 32px);
  background-size:32px 32px;
  mask: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.7));
  pointer-events:none;
}
.bg-noise{position:fixed;inset:0;z-index:-1;mix-blend-mode:overlay;opacity:.08;pointer-events:none}
.nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:rgba(0,0,0,.35);backdrop-filter: blur(8px);border-bottom:1px solid var(--line);z-index:40}
.brand{font-weight:900;font-size:18px;text-decoration:none;color:var(--text);letter-spacing:.4px}
.brand span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0}
.nav-links{display:flex;gap:14px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text);text-decoration:none;opacity:.9;padding:8px 10px;border-radius:999px}
.nav-links a:hover{opacity:1;background:var(--glass)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;right:16px;top:64px;background:rgba(0,0,0,.85);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:8px;padding:10px 12px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.2s}
  .nav-links.show{opacity:1;pointer-events:auto;transform:none}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;border:1px solid var(--line)}
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#09110e;border:0;box-shadow:0 10px 30px rgba(115,194,85,.25)}
.btn--ghost{background:transparent;color:var(--text)}
.btn--ghost:hover{background:var(--glass)}
.section{padding:88px 0}
.section__title{font-size:36px;line-height:1.1;margin:0 0 22px}
.gradient{background:linear-gradient(135deg,var(--accent),#d6ffd1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{position:relative;display:grid;place-items:center;min-height:88svh}
.hero__inner{width:min(1100px,92%);margin-inline:auto;text-align:center}
.hero__title{font-size: clamp(42px, 6vw, 84px);line-height:1.02;margin:0}
.hero__title .line{display:block}
.hero__lead{opacity:.9;max-width:780px;margin:14px auto 22px}
.cta{display:flex;gap:12px;justify-content:center}
.scroll-cue{margin-top:24px;width:26px;height:26px;border:0;border-radius:6px;background:conic-gradient(from 45deg at 50% 50%,transparent 0 25%,#fff 0 50%,transparent 0 100%);transform:rotate(45deg);opacity:.9}
.stack{position:relative;height:320px;margin-top:18px;perspective:1000px}
.stack .card{position:absolute;inset:0;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.3)), url('image/projekt.png') center/cover no-repeat;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.stack .c1{transform:translateZ(-80px) rotateY(-6deg) translateY(-16px);filter:blur(2px);opacity:.7}
.stack .c2{transform:translateZ(-40px) rotateY(6deg) translateY(0);opacity:.85}
.stack .c3{transform:translateZ(0) rotateY(0) translateY(16px)}
.marquee{padding:18px 0;border-block:1px solid var(--line);background:rgba(0,0,0,.35);backdrop-filter: blur(6px)}
.marquee__track{display:flex;gap:40px;white-space:nowrap;animation:mar 18s linear infinite;font-weight:800;opacity:.8}
.marquee__track span{padding-inline:6px;font-size:18px;letter-spacing:.5px}
@keyframes mar{to{transform:translateX(-50%)}}
.container{width:min(1100px,92%);margin-inline:auto}
.features__grid{display:grid;gap:16px;margin-top:12px}
@media (min-width:900px){.features__grid{grid-template-columns:repeat(4,1fr)}}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--line);backdrop-filter: blur(8px);border-radius:16px}
.feat{padding:18px;transition:.25s;position:relative;overflow:hidden}
.feat:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 30%, transparent 60%);transform:translateX(-120%);transition:.6s}
.feat:hover{transform:translateY(-4px)}
.feat:hover:after{transform:translateX(120%)}
.work__grid{display:grid;gap:16px}
@media (min-width:900px){.work__grid{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);display:block}
.tile img{width:100%;height:280px;object-fit:cover;transition:transform .6s ease}
.tile .shine{position:absolute;inset:-50% -20%;background:radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.25), transparent 60%);transform:translateX(-60%) rotate(-12deg);transition:transform .6s}
.tile:hover img{transform:scale(1.07)}
.tile:hover .shine{transform:translateX(60%) rotate(-12deg)}
.tile .tag{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);padding:6px 10px;border-radius:999px;font-weight:700}
.services .cards{display:grid;gap:16px;margin-top:16px}
@media (min-width:900px){.services .cards{grid-template-columns:repeat(3,1fr)}}
.services .card{padding:18px}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none;opacity:.9}
.stats li{background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:8px 12px}
.stats li span{font-weight:900;margin-right:6px}
.contact .grid{display:grid;gap:22px;align-items:start}
@media (min-width:900px){.contact .grid{grid-template-columns:1fr 1fr}}
.form{padding:18px;display:grid;gap:12px}
.form label{display:grid;gap:6px;font-size:14px}
.form input,.form textarea{background:#0f1714;border:1px solid rgba(255,255,255,.25);border-radius:12px;color:#fff;padding:12px 14px;font:inherit;outline:none}
.form input::placeholder,.form textarea::placeholder{color:#cfd7d3}
.form input:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(159,232,112,.25)}
.form .recaptcha{display:flex;justify-content:center}
.form .btn{justify-self:start}
.footer{padding:28px 16px;border-top:1px solid var(--line);text-align:center;opacity:.8}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(200px 200px at var(--mx, 50%) var(--my, 20%), rgba(255,255,255,.06), transparent 60%);pointer-events:none;transition:.08s linear}
.reduce-motion *{animation:none !important;transition:none !important}
.form .hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.tile .tag {
  background: #8aff00;
  color: #000;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 0 12px #8aff00, 0 0 24px rgba(138,255,0,0.6);
}

/* ===== Pure-CSS scrolling & in-view reveals (no JS) ===== */

/* Smooth anchor scrolling */
html{ scroll-behavior: smooth; }

/* Ensure anchors don't hide under sticky nav */
:target{ scroll-margin-top: var(--nav-h, 72px); }
/* Also apply for common sections if :target isn't used */
header#hero, section{ scroll-margin-top: var(--nav-h, 72px); }

/* In-view reveal animations where supported (progressive enhancement) */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes fadeUp { 
      from { opacity: 0; transform: translateY(16px); } 
      to   { opacity: 1; transform: none; } 
    }
    @keyframes fadeIn { 
      from { opacity: 0; } 
      to   { opacity: 1; } 
    }

    .features .feat,
    .work .tile,
    .services .card{
      animation: fadeUp 0.8s ease-out both;
      animation-timeline: view();
      animation-range: entry 20% cover 30%;
    }
    .stats span[data-count]{
      animation: fadeIn 0.6s ease-out both;
      animation-timeline: view();
      animation-range: entry 20% cover 20%;
    }
  }
}
/* --- mobile menu helpers (a11y + layering) --- */
@media (max-width:900px){
  .nav-links{ z-index: 1000; }
  body.menu-open{ overflow: hidden; }
  .nav-toggle span{ transition: transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}