/* ==========================================================================
   MC Projectmanagement / M&C Holding — 3D & Hochglanz Website
   ========================================================================== */

:root{
  --bg-0:#06070d;
  --bg-1:#0b0e1a;
  --bg-2:#10142400;
  --panel:#12162750;
  --panel-solid:#131728;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --text-0:#f3f5ff;
  --text-1:#c7cbe0;
  --text-2:#8b90ab;

  --cyan:#7ce6ff;
  --blue:#5b8cff;
  --purple:#c96bff;
  --gold:#e7bf6b;
  --gold-2:#b98a2e;
  --silver:#c8ccd8;
  --silver-2:#7d8296;
  --red:#ff5b6b;
  --red-2:#b3182b;

  --ok:#5be8a5;
  --warn:#ffcf6b;

  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:12px;

  --shadow-lift: 0 30px 60px -20px rgba(0,0,0,.6), 0 10px 20px -10px rgba(0,0,0,.5);
  --ease: cubic-bezier(.22,1,.36,1);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-1);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Sora', 'Inter', sans-serif;
  color:var(--text-0);
  margin:0 0 .6em;
  letter-spacing:-.01em;
  line-height:1.15;
}

p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.container{
  width:min(1180px, 92%);
  margin-inline:auto;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--panel-solid); color:var(--text-0);
  padding:.8em 1.2em; border-radius:0 0 10px 0; z-index:999;
}
.skip-link:focus{ left:0; }

/* ---------------------------------------------------------------------- */
/* Background scene (orbs / grid floor)                                    */
/* ---------------------------------------------------------------------- */
.bg-scene{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 15% -10%, #17204a55, transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, #3a144f4a, transparent 55%),
    var(--bg-0);
}
.orb{
  position:absolute; border-radius:50%;
  filter:blur(70px);
  opacity:.45;
  animation: drift 22s ease-in-out infinite;
}
.orb-a{ width:520px; height:520px; left:-140px; top:-120px; background:radial-gradient(circle at 30% 30%, var(--blue), transparent 70%); }
.orb-b{ width:460px; height:460px; right:-160px; top:220px; background:radial-gradient(circle at 30% 30%, var(--purple), transparent 70%); animation-delay:-6s; }
.orb-c{ width:420px; height:420px; left:35%; bottom:-220px; background:radial-gradient(circle at 30% 30%, var(--cyan), transparent 70%); animation-delay:-12s; }

@keyframes drift{
  0%,100%{ transform:translate3d(0, var(--parallax-y, 0px), 0) scale(1); }
  50%{ transform:translate3d(30px, calc(var(--parallax-y, 0px) - 30px), 0) scale(1.08); }
}

.grid-floor{
  position:absolute; left:0; right:0; bottom:-10%; height:60%;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(to top, black, transparent);
          mask-image:linear-gradient(to top, black, transparent);
  transform:perspective(500px) rotateX(60deg);
  opacity:.35;
}

.grain{
  position:absolute; inset:-10%;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events:none;
}

/* Cursor-Spotlight: folgt der Maus für zusätzliche Tiefe/Haptik */
.cursor-spot{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(420px 420px at var(--cx,50%) var(--cy,50%), rgba(124,230,255,.06), transparent 65%);
  opacity:0; transition:opacity .4s;
}
.cursor-spot.active{ opacity:1; }
@media (hover:none){ .cursor-spot{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .orb{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------------------------------------------------------------------- */
/* Chrome / glossy text                                                    */
/* ---------------------------------------------------------------------- */
.chrome-text{
  font-size:clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight:800;
  background:linear-gradient(100deg,#fff 0%, #dfe6ff 18%, var(--cyan) 40%, var(--blue) 58%, var(--purple) 78%, #fff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:chromeShift 9s ease-in-out infinite;
  filter:drop-shadow(0 6px 24px rgba(91,140,255,.25));
}
@keyframes chromeShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font:600 .8rem/1 'Inter', sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:1em;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(124,230,255,.15), 0 0 14px 2px var(--cyan);
}

/* ---------------------------------------------------------------------- */
/* Logo strip — 4 Logos ohne Text, animiert, 3D & Hochglanz                */
/* ---------------------------------------------------------------------- */
.logo-strip{
  position:relative;
  padding:2.6rem 0 2.2rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #0a0c16, #090b13);
  overflow:hidden;
  perspective:1400px;
}
.logo-strip::before{
  content:"";
  position:absolute; inset:-40% -10% auto -10%; height:220px;
  background:radial-gradient(60% 100% at 50% 0%, rgba(124,230,255,.14), transparent 70%);
  pointer-events:none;
}
.logo-strip-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 2.2rem;
}
.logo-strip-eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font:600 .78rem/1 'Inter', sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.85em;
}
.logo-strip-head h1{
  font-family:'Sora', sans-serif;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight:800;
  background:linear-gradient(100deg,#fff 0%, var(--gold) 30%, #fff 55%, var(--silver) 75%, #fff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:chromeShift 10s ease-in-out infinite;
  margin-bottom:.5em;
}
.logo-strip-head p{
  color:var(--text-2);
  font-size:.98rem;
  margin:0;
}

.logo-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(.9rem, 2.4vw, 1.8rem);
  max-width:1080px;
  margin:0 auto;
}

.logo-mark{
  position:relative;
  height:clamp(84px, 9vw, 112px);
  border-radius:999px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 55%);
  border:1px solid var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -14px 24px -18px rgba(0,0,0,.6),
    0 18px 34px -16px rgba(0,0,0,.65);
  transform-style:preserve-3d;
  animation:logoFloat 6s ease-in-out infinite;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  cursor:default;
}
.logo-mark:nth-child(1){ animation-delay:0s; }
.logo-mark:nth-child(2){ animation-delay:.35s; }
.logo-mark:nth-child(3){ animation-delay:.7s; }
.logo-mark:nth-child(4){ animation-delay:1.05s; }

.logo-mark:hover{
  transform:translateY(-8px) rotateX(8deg) rotateY(-6deg) scale(1.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -14px 24px -18px rgba(0,0,0,.6),
    0 30px 50px -18px rgba(0,0,0,.75);
}

@keyframes logoFloat{
  0%,100%{ transform:translateY(0) rotateZ(0deg); }
  50%{ transform:translateY(-7px) rotateZ(-.6deg); }
}
.logo-mark:hover{ animation-play-state:paused; }

.logo-mark .mark-bg{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.9;
}

.logo-mark .mark-sheen{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%);
  mix-blend-mode:overlay;
  opacity:.7;
  pointer-events:none;
}
.logo-mark .mark-glow{
  position:absolute; inset:-6px; border-radius:inherit;
  opacity:.5; filter:blur(20px); z-index:-1;
}

.logo-mark-holding .mark-glow{ background:radial-gradient(circle, var(--gold), transparent 70%); }
.logo-mark-pm .mark-glow{ background:radial-gradient(circle, var(--blue), transparent 70%); }
.logo-mark-bau .mark-glow{ background:radial-gradient(circle, var(--silver), transparent 70%); }
.logo-mark-akademie .mark-glow{ background:radial-gradient(circle, var(--red), transparent 70%); }

.logo-mark .mark-text{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.15;
  padding:0 .9rem;
  pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.logo-mark .mark-text strong{
  font:800 clamp(.82rem, 1.6vw, 1.05rem) 'Sora', sans-serif;
  color:#fff;
  letter-spacing:-.01em;
}
.logo-mark .mark-text small{
  font:600 clamp(.56rem, 1vw, .68rem) 'Inter', sans-serif;
  letter-spacing:.05em;
  color:rgba(255,255,255,.82);
  margin-top:.15em;
}
.logo-mark-holding .mark-text strong{ color:#fff2d4; }
.logo-mark-akademie .mark-text strong{ color:#ffe1e4; }

/* ---------------------------------------------------------------------- */
/* Header                                                                   */
/* ---------------------------------------------------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  box-shadow:0 0 10px rgba(124,230,255,.5);
  z-index:200;
  transition:width .12s linear;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ transition:none; }
}

.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(16px) saturate(140%);
  background:rgba(6,7,13,.55);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{
  background:rgba(6,7,13,.85);
  border-bottom-color:var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{ display:flex; align-items:center; gap:.6em; }
.brand-mark{ display:inline-flex; filter:drop-shadow(0 4px 10px rgba(91,140,255,.35)); }
.brand-text{
  font-family:'Sora', sans-serif; font-weight:600; font-size:1.05rem;
  color:var(--text-0); letter-spacing:-.01em;
}
.brand-text strong{ font-weight:800; }

.main-nav{ display:flex; align-items:center; gap:2rem; }
.main-nav a{
  font-size:.92rem; font-weight:500; color:var(--text-1);
  position:relative; padding:.3em 0;
  transition:color .25s;
}
.main-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--purple));
  transition:right .3s var(--ease);
}
.main-nav a:not(.nav-cta):hover{ color:var(--text-0); }
.main-nav a:not(.nav-cta):hover::after{ right:0; }

.nav-cta{
  padding:.6em 1.3em;
  border-radius:999px;
  background:linear-gradient(155deg, #eaf2ff, #b9c9ff 45%, #7c93ff);
  color:#0a0e22 !important;
  font-weight:700 !important;
  box-shadow:0 10px 22px -10px rgba(91,140,255,.65), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(91,140,255,.8), inset 0 1px 0 rgba(255,255,255,.6); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:1px solid var(--line-strong);
  border-radius:10px; cursor:pointer;
}
.nav-toggle span{ height:2px; background:var(--text-0); border-radius:2px; transition:.3s; }

/* ---------------------------------------------------------------------- */
/* Buttons — glossy 3D                                                     */
/* ---------------------------------------------------------------------- */
.btn{
  --btn-fg:#0a0e22;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95em 1.8em;
  border-radius:999px;
  font-weight:700; font-size:.96rem;
  border:1px solid rgba(255,255,255,.16);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn:active{ transform:translateY(1px) scale(.97) !important; transition-duration:.1s; }

/* Klick-Ripple: haptisches Feedback beim Antippen/Klicken */
.btn .ripple{
  position:absolute; z-index:1; border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:rippleOut .6s var(--ease) forwards;
  pointer-events:none;
}
@keyframes rippleOut{
  to{ transform:scale(1); opacity:0; }
}
.btn-glossy::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%);
  z-index:1;
}
.btn-glossy::after{
  content:"";
  position:absolute; top:-60%; left:-30%; width:40%; height:220%;
  background:linear-gradient(75deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(20deg) translateX(-260%);
  transition:transform .8s var(--ease);
  z-index:2;
}
.btn-glossy:hover::after{ transform:rotate(20deg) translateX(420%); }

.btn-primary{
  color:var(--btn-fg);
  background:linear-gradient(155deg,#eaf2ff, #9fb6ff 50%, #6f86ff);
  box-shadow:0 16px 30px -14px rgba(91,140,255,.7), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 38px -14px rgba(91,140,255,.85), inset 0 1px 0 rgba(255,255,255,.7); }

.btn-ghost{
  color:var(--text-0);
  background:linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px -14px rgba(0,0,0,.6);
}
.btn-ghost:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.3); }

.btn-lg{ padding:1.1em 2.4em; font-size:1.02rem; }

/* ---------------------------------------------------------------------- */
/* Glass panels / tilt cards                                               */
/* ---------------------------------------------------------------------- */
.tilt-card{
  position:relative;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid var(--line);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.08);
  transform-style:preserve-3d;
  will-change:transform;
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tilt-card:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 40px 70px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
}
.tilt-card .sheen{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none;
}
.tilt-card .sheen::after{
  content:"";
  position:absolute; width:140%; height:140%; left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.16), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.tilt-card:hover .sheen::after{ opacity:1; }

/* ---------------------------------------------------------------------- */
/* Hero                                                                     */
/* ---------------------------------------------------------------------- */
.hero{ position:relative; padding:5.5rem 0 4rem; }
.hero-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center;
}
.hero-lead{ font-size:1.08rem; color:var(--text-1); max-width:46ch; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin:1.8rem 0 2.4rem; }
.hero-trust{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.trust-item{ display:flex; flex-direction:column; }
.trust-item strong{ font:800 1.6rem/1 'Sora', sans-serif; color:var(--text-0); }
.trust-item span{ font-size:.8rem; color:var(--text-2); margin-top:.25em; }

.hero-stage{ position:relative; perspective:1400px; }
.hero-stage .tilt-card{ padding:1.4rem; max-width:420px; margin-inline:auto; }

.panel-header{
  display:flex; align-items:center; gap:.4em;
  padding-bottom:.9rem; margin-bottom:1rem;
  border-bottom:1px solid var(--line);
}
.panel-dot{ width:9px; height:9px; border-radius:50%; }
.panel-dot.red{ background:#ff6b6b; }
.panel-dot.amber{ background:#ffcf6b; }
.panel-dot.green{ background:#5be8a5; }
.panel-title{ margin-left:.6em; font-size:.78rem; color:var(--text-2); letter-spacing:.03em; }

.kpi-row{ display:flex; align-items:center; gap:1.4rem; margin-bottom:1.3rem; }
.kpi{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.kpi-label{ font-size:.72rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.08em; }

.progress-ring{ position:relative; width:80px; height:80px; }
.progress-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:8; }
.ring-fg{
  fill:none; stroke:url(#none); stroke:var(--cyan); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:213.6; stroke-dashoffset:213.6;
  transition:stroke-dashoffset 1.4s var(--ease);
  filter:drop-shadow(0 0 6px rgba(124,230,255,.6));
}
.ring-value{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:700 1rem 'Sora', sans-serif; color:var(--text-0);
}

.kpi-mini{ display:flex; flex-direction:column; gap:.55rem; flex:1; }
.kpi-mini div{ display:flex; justify-content:space-between; font-size:.82rem; }
.kpi-mini span{ color:var(--text-2); }
.kpi-mini strong.ok{ color:var(--ok); }
.kpi-mini strong.warn{ color:var(--warn); }

.milestone-list li{
  display:flex; align-items:center; gap:.7em;
  padding:.5em 0; font-size:.88rem; color:var(--text-1);
  border-top:1px solid var(--line);
}
.milestone-list li:first-child{ border-top:none; }
.ms-check{
  width:20px; height:20px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; background:rgba(91,232,165,.15); color:var(--ok);
}
.ms-check.active{ background:rgba(124,230,255,.15); color:var(--cyan); animation:pulseDot 1.6s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(124,230,255,.35);} 50%{ box-shadow:0 0 0 6px rgba(124,230,255,0);} }

.floater{
  position:absolute; border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
}
.floater-1{ width:110px; height:110px; top:-30px; right:-20px; animation:floatY 7s ease-in-out infinite; }
.floater-2{ width:70px; height:70px; bottom:-20px; left:-24px; animation:floatY 8s ease-in-out infinite reverse; }
@keyframes floatY{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-16px) rotate(8deg);} }

.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:120px;
  background:linear-gradient(180deg, transparent, var(--bg-0));
  pointer-events:none;
}

/* ---------------------------------------------------------------------- */
/* Branchen strip                                                          */
/* ---------------------------------------------------------------------- */
.branchen{ padding:2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.branchen-label{ text-align:center; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); margin-bottom:1.1rem; }
.branchen-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.4rem; }
.branchen-row span{ font:600 .88rem 'Sora', sans-serif; color:var(--text-2); opacity:.8; }

/* ---------------------------------------------------------------------- */
/* Sections                                                                 */
/* ---------------------------------------------------------------------- */
.section{ padding:6rem 0; }
.section-alt{ background:linear-gradient(180deg, rgba(255,255,255,.015), transparent); }
.section-head{ max-width:640px; margin:0 auto 3rem; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); }
.section-head .eyebrow{ justify-content:center; }
.section-lead{ color:var(--text-2); font-size:1.02rem; }

/* Services */
.card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
.service-card{ padding:2rem 1.8rem; }
.card-icon{
  width:56px; height:56px; border-radius:16px; margin-bottom:1.2rem;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  background:linear-gradient(160deg, rgba(124,230,255,.18), rgba(201,107,255,.1));
  border:1px solid var(--line-strong);
}
.service-card h3{ font-size:1.12rem; margin-bottom:.5rem; }
.service-card p{ color:var(--text-2); font-size:.92rem; margin:0; }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; position:relative; }
.step{ text-align:center; padding:0 .5rem; }
.glossy-num{
  width:64px; height:64px; margin:0 auto 1.1rem; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font:800 1.2rem 'Sora', sans-serif; color:#0a0e22;
  background:linear-gradient(155deg,#eaf2ff,#9fb6ff 50%, #6f86ff);
  box-shadow:0 14px 26px -12px rgba(91,140,255,.7), inset 0 1px 0 rgba(255,255,255,.7);
}
.step h3{ font-size:1.05rem; }
.step p{ color:var(--text-2); font-size:.9rem; }

/* About */
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.check-list li{
  display:flex; gap:.7em; align-items:flex-start; padding:.5em 0; font-size:.95rem; color:var(--text-1);
}
.check-list li::before{ content:"✓"; color:var(--ok); font-weight:800; flex:none; }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.stat-card{ padding:1.8rem 1.4rem; text-align:center; }
.stat-card strong{ display:block; font:800 2.2rem 'Sora', sans-serif; color:var(--text-0); }
.stat-card span{ font-size:.82rem; color:var(--text-2); }

/* Business units (M&C Gruppe) */
.units-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.unit-card{ padding:2.1rem 1.9rem; text-align:left; }
.unit-icon{
  width:58px; height:58px; border-radius:16px; margin-bottom:1.2rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
}
.unit-icon svg{ width:60%; height:60%; }
.unit-pm .unit-icon{ background:linear-gradient(160deg, rgba(91,140,255,.25), rgba(91,140,255,.05)); }
.unit-bau .unit-icon{ background:linear-gradient(160deg, rgba(200,204,216,.25), rgba(200,204,216,.05)); }
.unit-ak .unit-icon{ background:linear-gradient(160deg, rgba(255,91,107,.25), rgba(255,91,107,.05)); }
.unit-card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.unit-card p{ color:var(--text-2); font-size:.9rem; margin:0; }

/* Video Vorstellung */
.video-card{ padding:1.2rem; max-width:900px; margin:0 auto; }
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#0a0d1a;
  border:1px solid var(--line-strong);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.intro-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#0a0d1a;
  display:block;
}

.video-glow{
  position:absolute; inset:-30%; z-index:1;
  background:conic-gradient(from 0deg, transparent, rgba(124,230,255,.14), transparent 30%);
  animation:videoSweep 7s linear infinite;
  pointer-events:none;
}
@keyframes videoSweep{ to{ transform:rotate(360deg); } }

.play-btn{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#0a0e22;
  background:linear-gradient(155deg,#eaf2ff,#9fb6ff 50%, #6f86ff);
  box-shadow:0 20px 40px -14px rgba(91,140,255,.7), inset 0 1px 0 rgba(255,255,255,.7);
  border:none; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .25s;
}
.play-btn::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(124,230,255,.4);
  animation:playPulse 2.4s ease-out infinite;
}
@keyframes playPulse{
  0%{ transform:scale(.8); opacity:.9; }
  100%{ transform:scale(1.5); opacity:0; }
}
.play-btn:hover{ transform:translate(-50%,-50%) scale(1.08); }
.play-btn svg{ margin-left:3px; }
.play-btn.is-hidden{ opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.8); }

.video-caption{
  margin:1rem 0 0;
  text-align:center;
  font-size:.82rem; color:var(--text-2); letter-spacing:.02em;
}

/* Unser Team */
.team-roster{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1.4rem;
  margin-bottom:1.4rem;
}
.team-member-card{
  padding:2rem 1.6rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
}
.team-member-card strong{ font:700 .96rem 'Sora', sans-serif; color:var(--text-0); margin-top:.4rem; }
.team-member-card small{ font-size:.78rem; color:var(--text-2); }
.member-avatar{
  width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:800 1.2rem 'Sora', sans-serif; color:#fff;
  border:3px solid var(--bg-1);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .3s var(--ease);
}
.member-avatar:hover{ transform:translateY(-6px) scale(1.06); }
.member-photo{
  width:84px; height:84px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:3px solid var(--bg-1);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .3s var(--ease);
}
.member-photo:hover{ transform:translateY(-6px) scale(1.06); }
.member-1{ background:linear-gradient(155deg, var(--gold), var(--gold-2)); }
.member-2{ background:linear-gradient(155deg, var(--cyan), var(--blue)); }
.member-3{ background:linear-gradient(155deg, var(--silver), var(--silver-2)); }
.member-4{ background:linear-gradient(155deg, var(--blue), #2e57c9); }
.member-5{ background:linear-gradient(155deg, var(--purple), #7a2fc9); }
.member-6{ background:linear-gradient(155deg, var(--gold), var(--blue)); }
.member-7{ background:linear-gradient(155deg, var(--cyan), var(--purple)); }
.member-8{ background:linear-gradient(155deg, var(--silver), var(--blue)); }
.member-9{ background:linear-gradient(155deg, var(--gold), var(--purple)); }
.member-10{ background:linear-gradient(155deg, var(--blue), var(--gold)); }
.member-11{ background:linear-gradient(155deg, var(--purple), var(--silver)); }
.member-12{ background:linear-gradient(155deg, var(--red), var(--gold)); }
.member-13{ background:linear-gradient(155deg, var(--gold), var(--red)); }
.member-avatar--sm{ font-size:.82rem; letter-spacing:-.02em; }
.team-photo-caption{ font-size:.8rem; color:var(--text-2); margin:0 0 2rem; max-width:40ch; text-align:center; }

/* "Mehr erfahren" Vita-Ausklappelement */
.vita-toggle{ width:100%; margin-top:.8rem; }
.vita-toggle summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:.4em;
  font:600 .8rem 'Inter', sans-serif; color:var(--cyan);
  padding:.5em 1.1em; border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  transition:background .25s, transform .25s var(--ease);
}
.vita-toggle summary::-webkit-details-marker{ display:none; }
.vita-toggle summary::after{ content:"▾"; font-size:.7em; transition:transform .25s; }
.vita-toggle[open] summary::after{ transform:rotate(180deg); }
.vita-toggle summary:hover{ background:rgba(255,255,255,.09); transform:translateY(-1px); }
.vita-content{
  margin-top:1.1rem; padding-top:1rem;
  border-top:1px solid var(--line);
  text-align:left; font-size:.86rem; color:var(--text-2);
  animation:vitaFade .35s var(--ease);
}
@keyframes vitaFade{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.vita-content .vita-since{ color:var(--text-1); font-weight:600; margin:0 0 .9rem; }
.vita-content h4{
  font:700 .72rem 'Sora', sans-serif; color:var(--text-0);
  text-transform:uppercase; letter-spacing:.05em;
  margin:1rem 0 .5rem;
}
.vita-content h4:first-of-type{ margin-top:0; }
.vita-content ul{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.32rem; }
.vita-content .vita-email{
  display:inline-block; margin-top:1.1rem;
  color:var(--cyan); font-weight:600; word-break:break-all;
}
@media (prefers-reduced-motion: reduce){
  .vita-content{ animation:none; }
}

/* Globus mit Loop-Pfeilen zu weltweiten Baustellen */
.globe-card{ padding:2rem; display:flex; flex-direction:column; gap:1rem; }
.globe-title{ font-size:.85rem; color:var(--text-2); margin:0; text-align:center; }
.globe-stage{
  position:relative; flex:1; min-height:300px;
  display:flex; align-items:center; justify-content:center;
  perspective:1000px;
}
.globe{
  position:relative; width:200px; height:200px; border-radius:50%;
  /* Ozean-Grundfarbe in realistischem Erd-Blau/-Türkis */
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), transparent 26%),
    radial-gradient(circle at 36% 30%, #bfe6ff 0%, #4f9fd6 30%, #1f5f9e 55%, #123a68 78%, #081a34 100%);
  box-shadow:
    inset -24px -24px 58px rgba(0,0,0,.65),
    inset 12px 12px 32px rgba(255,255,255,.22),
    0 0 0 7px rgba(120,200,255,.07),
    0 30px 70px -18px rgba(59,140,255,.6);
  animation:globeFloat 6s ease-in-out infinite;
}
/* Kontinente + Wolken in echten Farben, rotierend */
.globe::before{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  background-image:
    radial-gradient(ellipse 15% 9% at 10% 24%, rgba(255,255,255,.55), transparent 72%),
    radial-gradient(ellipse 18% 11% at 52% 12%, rgba(255,255,255,.4), transparent 72%),
    radial-gradient(ellipse 13% 8% at 78% 58%, rgba(255,255,255,.4), transparent 72%),
    radial-gradient(ellipse 12% 8% at 95% 20%, rgba(255,255,255,.35), transparent 72%),
    radial-gradient(ellipse 22% 15% at 17% 30%, #4c8c46 0%, #3c6f38 55%, transparent 75%),
    radial-gradient(ellipse 15% 20% at 28% 58%, #3e7a3a 0%, transparent 72%),
    radial-gradient(ellipse 18% 12% at 54% 20%, #6ea24f 0%, transparent 72%),
    radial-gradient(ellipse 20% 15% at 68% 42%, #4a8440 0%, transparent 74%),
    radial-gradient(ellipse 13% 9% at 86% 28%, #8a6d3f 0%, transparent 72%),
    radial-gradient(ellipse 16% 11% at 40% 72%, #7a9c4a 0%, transparent 72%),
    radial-gradient(ellipse 12% 10% at 5% 66%, #8a7040 0%, transparent 72%);
  background-repeat:repeat-x;
  background-size:230% 100%;
  opacity:.94;
  animation:globeSpin 17s linear infinite;
}
/* Hochglanz-Lichtreflex, der über die Kugel wandert */
.globe::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 210deg at 30% 28%, transparent 0deg, rgba(255,255,255,.4) 10deg, transparent 26deg 360deg);
  mix-blend-mode:screen;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  animation:globeShine 5s ease-in-out infinite;
}
@keyframes globeSpin{ from{ background-position:0 0; } to{ background-position:-460px 0; } }
@keyframes globeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes globeShine{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(55deg); } }

.globe-arrows{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.flow-path{
  fill:none;
  stroke:var(--cyan);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:6 8;
  opacity:.75;
  filter:drop-shadow(0 0 4px rgba(124,230,255,.5));
  animation:flowLoop 2.6s linear infinite;
}
@keyframes flowLoop{ to{ stroke-dashoffset:-140; } }

.site-pin{
  position:absolute;
  transform:translate(-50%,-50%);
  font:700 .72rem/1 'Inter', sans-serif;
  color:var(--text-0);
  background:rgba(10,12,24,.75);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:.4em .7em;
  white-space:nowrap;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6);
  animation:pinPulse 3s ease-in-out infinite;
}
.site-pin:nth-of-type(2){ animation-delay:.4s; }
.site-pin:nth-of-type(3){ animation-delay:.8s; }
.site-pin:nth-of-type(4){ animation-delay:1.2s; }
.site-pin:nth-of-type(5){ animation-delay:1.6s; }
.site-pin-hq{ border-color:var(--gold); color:var(--gold); }
@keyframes pinPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.07); } }

.globe-note{
  font-size:.74rem; color:var(--text-2); text-align:center;
  margin:.6rem 0 0; opacity:.85;
}

/* Referenzen */
.references-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
.reference-card{ padding:2.2rem; }
.reference-card h3{ font-size:1.15rem; margin-bottom:1rem; }
.reference-card p{ color:var(--text-2); font-size:.94rem; }
.reference-card p strong{ color:var(--text-0); }
.reference-card .btn{ margin-top:.6rem; padding:.75em 1.5em; font-size:.88rem; }

.location-chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.location-chip{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.5em 1em; border-radius:999px;
  font:600 .82rem 'Inter', sans-serif;
  color:var(--text-0);
  background:linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .25s var(--ease), border-color .25s;
}
.location-chip:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.3); }

/* CTA band */
.cta-band{ padding:5rem 0; }
.cta-band-inner{
  text-align:center; padding:3.4rem 2rem; border-radius:32px;
  background:linear-gradient(150deg, rgba(91,140,255,.16), rgba(201,107,255,.12));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.14);
}
.cta-band-inner h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
.cta-band-inner p{ color:var(--text-1); margin-bottom:1.6rem; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:1.8rem; align-items:start; }
.contact-form{ padding:2.2rem; display:grid; gap:1.1rem; }
.form-row-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-row{ display:flex; flex-direction:column; gap:.5rem; }
.form-row label{ font-size:.82rem; color:var(--text-2); }
.form-row input, .form-row textarea{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:.85em 1em;
  color:var(--text-0);
  font:inherit; font-size:.94rem;
  resize:vertical;
  transition:border-color .25s, background .25s;
}
.form-row input:focus, .form-row textarea:focus{
  outline:none; border-color:var(--cyan); background:rgba(124,230,255,.05);
}
.contact-form .btn{ justify-self:start; margin-top:.4rem; }

.form-consent{
  display:flex; align-items:flex-start; gap:.7em;
  font-size:.8rem; line-height:1.5; color:var(--text-2);
  cursor:pointer;
}
.form-consent input{
  margin-top:.2em; width:16px; height:16px; flex:none;
  accent-color:var(--cyan); cursor:pointer;
}
.form-consent a{ color:var(--cyan); text-decoration:underline; }

.contact-side{ display:flex; flex-direction:column; gap:1.2rem; }
.side-card{ padding:2rem; }
.side-card h3{ font-size:1.1rem; }
.side-card p{ color:var(--text-2); font-size:.9rem; }

.contact-line{
  display:flex; align-items:center; gap:.9em;
  padding:.9em 0; border-top:1px solid var(--line);
  transition:transform .25s var(--ease);
}
.contact-line:first-of-type{ margin-top:.6rem; }
.contact-line:hover{ transform:translateX(4px); color:var(--cyan); }
.contact-ico{
  width:42px; height:42px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:linear-gradient(160deg, rgba(124,230,255,.18), rgba(91,140,255,.1));
  border:1px solid var(--line-strong);
}
.contact-line small{ display:block; font-size:.72rem; color:var(--text-2); }
.contact-line strong{ font-size:.95rem; color:var(--text-0); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); padding-top:3rem; position:relative; }

/* Animated e-mail ticker */
.ticker-wrap{
  overflow:hidden;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  background:linear-gradient(90deg, #0d1020, #161a33, #0d1020);
  padding:.9rem 0;
  margin-bottom:3rem;
}
.ticker-track{
  display:flex; width:max-content;
  animation:tickerScroll 20s linear infinite;
}
.ticker-item{
  display:inline-flex; align-items:center; gap:1.4rem;
  padding:0 1.6rem;
  font:700 1.15rem 'Sora', sans-serif;
  white-space:nowrap;
  background:linear-gradient(100deg,#fff 0%, var(--cyan) 35%, var(--blue) 60%, var(--purple) 90%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:chromeShift 6s ease-in-out infinite;
}
.ticker-sep{ color:var(--text-2); opacity:.5; -webkit-text-fill-color:var(--text-2); }
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker-wrap:hover .ticker-track{ animation-play-state:paused; }

.footer-main{
  display:grid; grid-template-columns:1fr auto; gap:2.4rem 3rem; align-items:start;
  padding-bottom:2.4rem;
}
.footer-brand p{ color:var(--text-2); font-size:.88rem; margin-top:.5rem; max-width:34ch; }

/* Social-Media-Buttons mit durchlaufendem Hochglanz-Reel-Effekt */
.social-icons{ display:flex; gap:.8rem; margin-top:1.4rem; }
.social-icon{
  position:relative;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px -12px rgba(0,0,0,.7);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:socialFloat 5s ease-in-out infinite;
}
.social-icon:nth-child(1){ animation-delay:0s; }
.social-icon:nth-child(2){ animation-delay:.25s; }
.social-icon:nth-child(3){ animation-delay:.5s; }
.social-icon:nth-child(4){ animation-delay:.75s; }
.social-icon:nth-child(5){ animation-delay:1s; }
.social-icon:hover{ transform:translateY(-5px) scale(1.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 16px 28px -12px rgba(0,0,0,.8); }

.social-youtube{ background:linear-gradient(155deg, #ff5b5b, #cc1f1f); }
.social-linkedin{ background:linear-gradient(155deg, #4da6ff, #0a66c2); }
.social-xing{ background:linear-gradient(155deg, #2fcfa0, #026b5a); }
.social-instagram{ background:linear-gradient(155deg, #f6a54a, #d62d7a 48%, #7a3fd6); }
.social-tiktok{ background:linear-gradient(155deg, #25f4ee, #0a0e22 55%, #fe2c55); }

.social-icon .icon-shine{
  position:absolute; top:-70%; left:-40%; width:45%; height:250%;
  background:linear-gradient(75deg, transparent, rgba(255,255,255,.75), transparent);
  transform:rotate(20deg) translateX(-320%);
  animation:socialShine 3.4s ease-in-out infinite;
  pointer-events:none;
}
.social-icon:nth-child(1) .icon-shine{ animation-delay:.1s; }
.social-icon:nth-child(2) .icon-shine{ animation-delay:.6s; }
.social-icon:nth-child(3) .icon-shine{ animation-delay:1.1s; }
.social-icon:nth-child(4) .icon-shine{ animation-delay:1.6s; }
.social-icon:nth-child(5) .icon-shine{ animation-delay:2.1s; }

@keyframes socialShine{
  0%{ transform:rotate(20deg) translateX(-320%); }
  35%, 100%{ transform:rotate(20deg) translateX(420%); }
}
@keyframes socialFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
@media (prefers-reduced-motion: reduce){
  .social-icon, .social-icon .icon-shine{ animation:none; }
}

.footer-contact-cards{ display:flex; flex-direction:column; gap:.8rem; }
.footer-contact-btn{
  display:flex; align-items:center; gap:.9em;
  padding:.85em 1.3em;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 24px -16px rgba(0,0,0,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.footer-contact-btn:hover{ transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 32px -16px rgba(0,0,0,.7); }
.footer-contact-btn small{ display:block; font-size:.72rem; color:var(--text-2); }
.footer-contact-btn strong{ font-size:.95rem; color:var(--text-0); }

.footer-links{ grid-column:1 / -1; display:flex; gap:1.6rem; flex-wrap:wrap; font-size:.85rem; color:var(--text-2); border-top:1px solid var(--line); padding-top:1.6rem; }
.footer-links a:hover{ color:var(--cyan); }

.footer-bottom{
  text-align:center; padding:1.6rem 0 2.2rem;
  font-size:.8rem; color:var(--text-2);
  border-top:1px solid var(--line);
}

/* ---------------------------------------------------------------------- */
/* Reveal on scroll                                                        */
/* ---------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--delay, 0s);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
@media (max-width: 980px){
  .hero-inner, .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .card-grid, .units-grid, .references-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem; }
  .footer-main{ grid-template-columns:1fr; }
  .logo-row{ grid-template-columns:repeat(4,1fr); max-width:520px; }
}

@media (max-width: 760px){
  .main-nav{
    position:fixed; inset:78px 0 0 0; height:calc(100vh - 78px);
    background:rgba(6,7,13,.97); backdrop-filter:blur(20px);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    padding:2rem 1.5rem; gap:1.4rem;
    transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ font-size:1.1rem; padding:.6em 0; border-bottom:1px solid var(--line); }
  .nav-cta{ text-align:center; margin-top:.6rem; }
  .nav-toggle{ display:flex; }

  .card-grid, .units-grid, .stat-grid, .references-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .form-row-pair{ grid-template-columns:1fr; }
  .hero-trust{ gap:1.6rem; }
  .logo-row{ grid-template-columns:repeat(2,1fr); max-width:320px; row-gap:1.6rem; }
}